huangxiaojing 3 年之前
父節點
當前提交
ddc535a401

+ 98 - 20
microserviceUserH5/static/css/replacementActivities.css

@@ -20,24 +20,39 @@ ul, li {
 }
 .container {
   width: 100%;
-  min-height: 37.71rem;
+  min-height: 37.69rem;
   background: url(../img/replacementActivities/bj.png) no-repeat;
   background-size: cover;
   overflow: hidden;
 }
 .share-node{
-  width: 2.36rem;
-  height: 1.58rem;
-  position: absolute;
-  top: 0.84rem;
+  width: 0.7rem;
+  height: 1.8rem;
+  position: fixed;
+  background: #084558;
+  border-radius: 0.15rem 0 0 0.15rem;
+  top: 8.17rem;
   right: 0;
+  overflow: hidden;
 }
-.share{ 
-  width: 0.36rem;
-  height: 1.58rem;
-  position: absolute;
-  top: 0;
-  right: 0;
+.qq{ 
+  width: 0.44rem;
+  height: 0.46rem;
+  margin: 0.28rem auto 0;
+  display: block;
+}
+.line {
+  width: 0.4rem;
+  height: 1px;
+  background: #53A3B7;
+  opacity: 0.4;
+  margin: 0.18rem;
+}
+.cs{ 
+  width: 0.44rem;
+  height: 0.45rem;
+  margin: 0.15rem auto 0;
+  display: block;
 }
 .date {
   width: 5.93rem;
@@ -60,6 +75,30 @@ ul, li {
   border-radius: 0.2rem;
   background-color: #04222C;
 }
+.mt55 {
+  margin-top: 0.55rem;
+}
+.mt50 {
+  margin-top: 0.5rem;
+}
+.w666h874 {
+  width: 6.66rem;
+  height: 8.74rem;
+  display: block;
+  margin: 0 auto;
+}
+.w666h864 {
+  width: 6.66rem;
+  height: 8.64rem;
+  display: block;
+  margin: 0 auto;
+}
+.w670h476 {
+  width: 6.7rem;
+  height: 4.76rem;
+  display: block;
+  margin: 0 auto;
+}
 .input-container {
   margin: 0.3rem 0.2rem;
   border-radius: 0.2rem;
@@ -69,9 +108,8 @@ ul, li {
   position: relative;
 }
 .login-container{
-  margin: 0.05rem;
-  width: 6.54rem;
-  height: 5.6rem;
+  margin: 0.02rem;
+  height: calc(100% - 0.04rem);
   border: 1px solid #B58E6D;
   border-radius: 0.2rem;
   box-sizing: border-box;
@@ -105,9 +143,9 @@ ul, li {
   background-color: #1F3F47;
   display: none;
   border-radius: 0.1rem;
-  -webkit-box-shadow:0 0 0.05rem #FFFFFF inset;
-  -moz-box-shadow:0 0 0.05rem #FFFFFF inset;
-  box-shadow:0 0 0.05rem #FFFFFF inset;
+  -webkit-box-shadow:0 0 0.2rem #4A636A inset;
+  -moz-box-shadow:0 0 0.2rem #4A636A inset;
+  box-shadow:0 0 0.2rem #4A636A inset;
 }
 .show{
   display: block;
@@ -133,7 +171,6 @@ ul, li {
   overflow: hidden;
   display: flex;
   align-items: center;
-  margin-top: 0.3rem;
 }
 .login-row-title{
   margin: 0 0.45rem 0 0.3rem;
@@ -149,19 +186,60 @@ ul, li {
   left: 1.14rem;
   font-size: 0.28rem;
 }
+.br {
+  border: 1px solid #e72f2f !important;
+}
 .login-row-ipt{
   width: 4.4rem;
   height: 0.5rem;
-  border-radius: 0.04rem;
+  border-radius: 0.08rem;
   outline: none;
   background: #1A3A43;
-  border: 2px solid #325C75;
+  border: 1px solid #325C75;
   padding-left: 0.24rem;
   box-sizing: border-box;
   font-size: 0.24rem;
   color: #63A1B0;
   line-height: 0.05rem;
 }
+.tip-text1 {
+  font-size: 0.24rem;
+  color: #e72f2f;
+  height: 0.3rem;
+  line-height: 0.3rem;
+  padding-left: 1.35rem;
+}
+.tip-text2 {
+  font-size: 0.24rem;
+  color: #e72f2f;
+  height: 0.3rem;
+  line-height: 0.3rem;
+  padding-left: 1.35rem;
+}
+input:-ms-input-placeholder {
+  color: #63A1B0;
+  opacity: 0.2;
+}
+input::-webkit-input-placeholder {
+  color: #63A1B0;
+  opacity: 0.2;
+}
+input::-moz-placeholder {
+  color: #63A1B0;
+  opacity: 0.2;
+}
+input:-moz-placeholder {
+  color: #63A1B0;
+  opacity: 0.2;
+}
+.form-btn {
+  width: 5.6rem;
+  height: 0.82rem;
+  margin: 0 auto;
+  background-image: url('../img/replacementActivities/btn.png');
+  background-size: 100% 100%;
+}
+
 .icon-down-img{
   width: 0.18rem;
   height: 0.1rem;

二進制
microserviceUserH5/static/img/replacementActivities/activityReward.png


二進制
microserviceUserH5/static/img/replacementActivities/bj.png


二進制
microserviceUserH5/static/img/replacementActivities/cs.png


二進制
microserviceUserH5/static/img/replacementActivities/inviteeReward.png


二進制
microserviceUserH5/static/img/replacementActivities/mattersNeedAttention.png


二進制
microserviceUserH5/static/img/replacementActivities/qq.png


+ 2 - 9
microserviceUserH5/vcloud/invite.html

@@ -287,21 +287,14 @@
 				account = account.replace(/\s+/g,"");
 				password = $('#password').val();
 				password = password.replace(/\s+/g,"");
-				if(fromType === 0){
-					$('#tip-text').text('请选择平台');
-					$('.tip').animate({top: '48vh'},"fast");
-					$('.mask').show();
-					$('.dialog').animate({top: '-6.96rem'},"fast");
-					document.documentElement.style.overflow='hidden';
-					return
-				}
-				if(account === ''){
+				if(!account){
 					$('#tip-text').text('请输入账号');
 			        $('#account').val('');
 					$('.tip').animate({top: '48vh'},"fast");
 					$('.mask').show();
 					$('.dialog').animate({top: '-6.96rem'},"fast");
 					document.documentElement.style.overflow='hidden';
+					toastr.error('请输入账号');
 					return
 				}
 				if(/[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g.test(account)){

+ 54 - 80
microserviceUserH5/vcloud/replacementActivities.html

@@ -13,10 +13,14 @@
 	<script src="../static/js/vender/config.js"></script>
 </head>
 
-<body>
+<body> 
 	<div class="container">
-		<div class="share-node"><img class="share" src="../static/img/changePhoneActivity/share.png" /></div>
-		<div class="date">2021.12.15-2022.1.18</div>
+		<div class="share-node">
+			<img class="qq" src="../static/img/replacementActivities/qq.png" alt="">
+			<div class="line"></div>
+			<img class="cs" src="../static/img/replacementActivities/cs.png" alt="">
+		</div>
+		<div class="date">2022.1.4-2022.2.8</div>
 		<div class="header">
 			<div class="login-container">
 				<div class="login-bar">仅限2000份</div>
@@ -28,47 +32,32 @@
 						<img class="icon-down-img" src="../static/img/replacementActivities/arrow.png" />
 					</div> 
 					<div class="options">
-						<div class="icon-down-first">多多云</div>
 						<div class="icon-down-second">红手指</div>
+						<div class="icon-down-first">多多云</div>
 						<div class="icon-down-third">爱云兔</div>
 					</div>
 					<div class="login-row-account">
 						<div class="login-row-title">账户</div>
-						<input class="login-row-ipt" id="account" placeholder="请输入账号" />
+						<input class="login-row-ipt" id="account" placeholder="请输入11位手机号码" />
 					</div>
+					<div class="tip-text1"></div>
 					<div class="login-row-password">
 						<div class="login-row-title">密码</div>
 						<input class="login-row-ipt" type="password" id="password" placeholder="请输入密码" />
 					</div>
+					<div class="tip-text2"></div>
 					<div class="form-btn"></div>
 				</div>
 			</div>
 		</div>
-		<div class="middle">
-			<div class="activity-rule">
-				<img class="activity-rule-btn" src="../static/img/changePhoneActivity/activity-rule-btn.png" />
-				<img class="activity-rule-text" src="../static/img/changePhoneActivity/activity-rule-text.png" />
-			</div>
+		<div class="mt55">
+			<img class="w666h874" src="../static/img/replacementActivities/activityReward.png" alt="">
 		</div>
-		<div class="footer">
-			<img class="footer_bg_img" src="../static/img/changePhoneActivity/footer_bg_img.png" />
-			<img class="rule4" src="../static/img/changePhoneActivity/rule4.png" />
-			<img class="rule5" src="../static/img/changePhoneActivity/rule5.png" />
+		<div class="mt50">
+			<img class="w670h476" src="../static/img/replacementActivities/inviteeReward.png" alt="">
 		</div>
-		<div class="mask">
-			<div class="dialog">
-				<img class="dialog-bg" src="../static/img/changePhoneActivity/dialog.png" />
-				<img class="title" src="../static/img/changePhoneActivity/title.png" />
-				<img class="content" src="../static/img/changePhoneActivity/content.png" />
-				<img class="register-btn" src="../static/img/changePhoneActivity/register-btn.png" />
-				<img class="register-text" src="../static/img/changePhoneActivity/register-text.png" />
-			</div>
-			<div class="tip">
-				<img class="tip-bg" src="../static/img/changePhoneActivity/tip-bg.png" />
-				<div class="tip-title" id="tip-text"></div>
-				<img class="sure-btn" src="../static/img/changePhoneActivity/sure-btn.png" />
-				<img class="sure-text" src="../static/img/changePhoneActivity/sure-text.png" />
-			</div>
+		<div class="mt50">
+			<img class="w666h864" src="../static/img/replacementActivities/mattersNeedAttention.png" alt="">
 		</div>
 	</div>
 	<script>
@@ -100,7 +89,7 @@
 			password = '';
 		var url = window.location.href;
 		url = url.split('/')
-		// var baseUrl = 'http://192.168.31.198'
+
 		var loc = window.location.search,
 			n1 = loc.length,//地址的总长度
 			n2 = loc.indexOf("="),//取得=号的位置
@@ -111,7 +100,7 @@
 			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
 			imgs = [[1, '../static/img/changePhoneActivity/rule1.png'], [6, '../static/img/changePhoneActivity/rule6.png'], [2, '../static/img/changePhoneActivity/rule2.png'], [3, '../static/img/changePhoneActivity/rule3.png']];
 		//埋点
-		operate('dt_yhs_活动页面浏览');
+		// operate('dt_yhs_活动页面浏览');
 		function operate(pointName, type) {
 			$.ajax({
 				url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
@@ -146,7 +135,7 @@
 				await promise(index, url);
 			}
 		}
-		loadAsync();
+		// loadAsync();
 		//点击分享
 		$('.share-node')[0].addEventListener('click', () => {
 			if (!id) {
@@ -218,6 +207,13 @@
 				textbox.focus();
 			}
 		}
+		// 默认选中红手指
+		function handleClick() {
+			$('.options')[0].className = 'options';
+			$('#select').val('红手指');
+			fromType = 2;
+		};
+		handleClick();
 		//点击选择框
 		$('.login-row-select')[0].addEventListener('click', () => {
 			$('.options')[0].className = 'options show';
@@ -234,26 +230,22 @@
 			$('#select').val('红手指');
 			fromType = 2;
 		}, false);
-		//点击协议
-		$('.read-rule')[0].addEventListener('click', () => {
-			if (isShow) {
-				$('.selected')[0].className = 'selected hidden';
-			} else {
-				$('.selected')[0].className = 'selected show';
-			}
-			isShow = !isShow;
+		//点击爱云兔
+		$('.icon-down-third')[0].addEventListener('click', () => {
+			$('.options')[0].className = 'options';
+			$('#select').val('爱云兔');
+			fromType = 3;
 		}, false);
 		//点击提示弹窗确定
-		$('.sure-btn')[0].addEventListener('click', handleClose, false);
-		$('.sure-text')[0].addEventListener('click', handleClose, false);
+		// $('.sure-btn')[0].addEventListener('click', handleClose, false);
 		function handleClose() {
 			$('.tip').animate({ top: '-6.96rem' }, "fast");
 			$('.mask').hide();
 			document.documentElement.style.overflow = 'auto';
 		}
 		//点击立即注册
-		$('.register-text')[0].addEventListener('click', registerHandle, false);
-		$('.register-btn')[0].addEventListener('click', registerHandle, false);
+		// $('.register-text')[0].addEventListener('click', registerHandle, false);
+		// $('.register-btn')[0].addEventListener('click', registerHandle, false);
 		function registerHandle() {
 			$('.dialog').animate({ top: '-6.96rem' }, "fast");
 			$('.mask').hide();
@@ -264,54 +256,36 @@
 			window.location.href = 'https://www.androidscloud.com';
 		}
 		//点击免费换机按钮
-		$('.login-btn-text')[0].addEventListener('click', changePhoneHandle, false);
-		$('.login-btn')[0].addEventListener('click', changePhoneHandle, false);
+		$('.form-btn')[0].addEventListener('click', changePhoneHandle, false);
 		function changePhoneHandle() {
 			stopManyClick(() => {
 				account = $('#account').val();
 				account = account.replace(/\s+/g, "");
 				password = $('#password').val();
 				password = password.replace(/\s+/g, "");
-				if (fromType === 0) {
-					$('#tip-text').text('请选择平台');
-					$('.tip').animate({ top: '48vh' }, "fast");
-					$('.mask').show();
-					$('.dialog').animate({ top: '-6.96rem' }, "fast");
-					document.documentElement.style.overflow = 'hidden';
-					return
-				}
-				if (account === '') {
-					$('#tip-text').text('请输入账号');
-					$('#account').val('');
-					$('.tip').animate({ top: '48vh' }, "fast");
-					$('.mask').show();
-					$('.dialog').animate({ top: '-6.96rem' }, "fast");
-					document.documentElement.style.overflow = 'hidden';
-					return
-				}
-				if (/[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g.test(account)) {
-					$('#tip-text').text('账号不支持表情,请重新输入');
-					$('.tip').animate({ top: '48vh' }, "fast");
-					$('.mask').show();
-					$('.dialog').animate({ top: '-6.96rem' }, "fast");
-					document.documentElement.style.overflow = 'hidden';
+				if (!account) {
+					$('.tip-text1').text('账号格式不正确,请重新输入!');
+					$('#account').addClass('br');
 					return
+				} else {
+					$('.tip-text1').text('');
+					$('#account').removeClass('br')
 				}
-				if (password === '') {
-					$('#tip-text').text('请输入密码');
-					$('#password').val('');
-					$('.tip').animate({ top: '48vh' }, "fast");
-					$('.mask').show();
-					$('.dialog').animate({ top: '-6.96rem' }, "fast");
-					document.documentElement.style.overflow = 'hidden';
+				if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(account)) {
+					$('.tip-text1').text('账号格式不正确,请重新输入!');
+					$('#account').addClass('br');
 					return
+				} else {
+					$('.tip-text1').text('');
+					$('#account').removeClass('br')
 				}
-				if (!isShow) {
-					$('#tip-text').text('请勾选阅读规则按钮');
-					$('.tip').animate({ top: '48vh' }, "fast");
-					$('.mask').show();
-					document.documentElement.style.overflow = 'hidden';
+				if (!password) {
+					$('.tip-text2').text('密码为空,请重新输入!');
+					$('#password').addClass('br');
 					return
+				} else {
+					$('.tip-text2').text('');
+					$('#password').removeClass('br')
 				}
 				operate('dt_yhs_点击免费换机按钮', 'click');
 			})