heyang 3 years ago
parent
commit
0d1556cc67

BIN
microserviceUserH5/static/img/exchangePhoneActivityNew/rule.png


BIN
microserviceUserH5/static/img/exchangePhoneActivityNew/tips.png


BIN
microserviceUserH5/static/img/exchangePhoneActivityNew/title.png


+ 105 - 34
microserviceUserH5/vcloud/baiduExchangePhoneActivity.html

@@ -19,9 +19,80 @@
 	<style>
 		.banner-wrap{
 			width: 7.5rem;
-			height: 8.62rem;
+			height: 7.22rem;
 			position: relative;
 		}
+		.logo-wrap {
+			position: absolute;
+			top: 0.3rem;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		.title-wrap {
+			position: absolute;
+			top: 1.2rem;
+			left: 0.44rem;
+		}
+		.titles {
+			width: 6.7rem;
+			height: 0.81rem;
+		}
+		.tip-wrap {
+			position: absolute;
+			top: 2.3rem;
+			left: 0.44rem;
+		}
+		.tips{
+			width: 6.65rem;
+			height: 0.56rem;
+		}
+		.main-wrap {
+			width: 7.5rem;
+			margin: 0 auto;
+			position: static;
+			padding-bottom: 0.2rem;
+			background-color: #C84633;
+			margin-top: -0.84rem;
+		}
+		.select-wrap {
+			width: 100%;
+			position: static;
+			display: flex;
+			justify-content: center;
+			margin-top: 0.2rem;
+		}
+		.middle-wrap {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-top: 1.2rem;
+		}
+		.bottom-wrap{
+			padding-top: 0.46rem;
+			background-color: #C84633;
+		}
+		.procedure-wrap {
+			width: 6.8rem;
+			height: 4.04rem;
+			margin: auto;
+		}
+		.rule-wrap {
+			position: relative;
+			width: 6.8rem;
+			height: 3.38rem;
+			margin: auto;
+			margin-top: 0.46rem;
+		}
+		.rule-list {
+			height: 1.58rem;
+			position: absolute;
+			top: 1.38rem;
+			padding: 0 0.33rem;
+			margin-top: 0.2rem;
+			font-size: 0.24rem;
+			color: #4D4D4D;
+			overflow-y: scroll;
+		}
 	</style>
 </head>
 
@@ -30,65 +101,65 @@
     <div id="form-btn"></div>
 	<div class="containers">
 		<div class="banner-wrap">
-			<div class="time_lines">
+			<!-- <div class="time_lines">
 				<img class="time_line" src="../static/img/exchangePhoneActivity/time_line_left.png">
 				<div class="time-text">活动时间:2022年3月1日-3月31日</div>
 				<img class="time_line" src="../static/img/exchangePhoneActivity/time_line_right.png">
-			</div>
+			</div> -->
 			<div class="logo-wrap">
 				<img class="logo" src="../static/img/exchangePhoneActivity/logo.png">
 			</div>
 			<div class="title-wrap">
-				<img class="titles" src="../static/img/exchangePhoneActivity/title.png">
+				<img class="titles" src="../static/img/exchangePhoneActivityNew/title.png">
 			</div>
 			<div class="tip-wrap">
-				<img class="tips" src="../static/img/exchangePhoneActivity/tips.png">
+				<img class="tips" src="../static/img/exchangePhoneActivityNew/tips.png">
 			</div>
 			<div class="logo-wrap">
 				<img class="logo" src="../static/img/exchangePhoneActivity/logo.png">
 			</div>
 			<img class="banner-img" src="../static/img/exchangePhoneActivityNew/banner.png">
-			<div class="main-wrap">
-				<div class="middle-wrap">
-					<div class="select-wrap">
-						<div class="select left-select">
-							<img class="selected" src="../static/img/exchangePhoneActivity/selected.png">
-							<div>某手指用户</div>
-						</div>
-						<div class="select right-select">
-							<img class="selected" src="../static/img/exchangePhoneActivity/no-selected.png">
-							<div>新人福利</div>
-						</div>
-					</div>
-					<div class="ipt-row">
-						<img class="img phone-img" src="../static/img/exchangePhoneActivity/phone.png">
-						<input class="phone-ipt ipt" type="number" placeholder="请输入11位手机号码" placeholder-style="color: #CCCCCC" />
-					</div>
-					<div class="phone-tip">*账号格式不正确,请重新输入!</div>
-					<div class="ipt-row">
-						<img class="img code-img" src="../static/img/exchangePhoneActivity/code.png">
-						<input class="code-ipt ipt" type="number" placeholder="请输入验证码" />
-						<div class="get-code">获取验证码</div>
+			</div>
+		</div>
+		<div class="main-wrap">
+			<div class="middle-wrap">
+				<div class="select-wrap">
+					<div class="select left-select">
+						<img class="selected" src="../static/img/exchangePhoneActivity/selected.png">
+						<div>某手指用户</div>
 					</div>
-					<div class="code-tip">*请输入正确验证码!</div>
-					<div class="btns">
-						<img class="btn-img" src="../static/img/exchangePhoneActivity/btn.png">
+					<div class="select right-select">
+						<img class="selected" src="../static/img/exchangePhoneActivity/no-selected.png">
+						<div>新人福利</div>
 					</div>
 				</div>
+				<div class="ipt-row">
+					<img class="img phone-img" src="../static/img/exchangePhoneActivity/phone.png">
+					<input class="phone-ipt ipt" type="number" placeholder="请输入11位手机号码" placeholder-style="color: #CCCCCC" />
+				</div>
+				<div class="phone-tip">*账号格式不正确,请重新输入!</div>
+				<div class="ipt-row">
+					<img class="img code-img" src="../static/img/exchangePhoneActivity/code.png">
+					<input class="code-ipt ipt" type="number" placeholder="请输入验证码" />
+					<div class="get-code">获取验证码</div>
+				</div>
+				<div class="code-tip">*请输入正确验证码!</div>
+				<div class="btns">
+					<img class="btn-img" src="../static/img/exchangePhoneActivity/btn.png">
+				</div>
 			</div>
-		</div>
 		<div class="bottom-wrap">
 			<div class="procedure-wrap">
 				<img class="procedure-img" src="../static/img/exchangePhoneActivityNew/procedure.png">
 			</div>
 			<div class="rule-wrap">
-				<img class="rule-img" src="../static/img/exchangePhoneActivity/rule.png">
+				<img class="rule-img" src="../static/img/exchangePhoneActivityNew/rule.png">
 				<div class="rule-list">
-					<div class="rule-point">1.新用户可通过手机号注册申请免费获得赠送云机及购机折扣券个人专属礼包</div>
+					<div class="rule-point">1.新用户可通过手机号注册申请免费获得赠送云机及购机折扣券个人专属礼包(新人注册获得三天免费时长+7.5折优惠券,换机活动用户免费获得7天时长+5折优惠券)</div>
 					<div class="rule-point">2.购机折扣券为限时折扣券,请注意使用时间</div>
 					<div class="rule-point">3.购机折扣券适配全部机型,同一账号仅可获得一种类型礼包</div>
 					<div class="rule-point">4.所填写的手机号码,若未注册双子星将默认自动注册双子星账号</div>
-					<div class="rule-point">其它说明:</div>
+					<!-- <div class="rule-point">其它说明:</div>
 					<div class="rule-point">1.优惠券的可使用范围有限制,请以券面提示为准,用户可在下单时选择该订单的可用优惠券的卡券页面中查看已领取的优惠券的详细情况。具体适用范围以商品详情页提示内容为准。无法使用优惠券的商品,在商品详情页将不展示优惠券;同一笔订单中,不同类型的券可以叠加,同一类型的券,仅可选择一张使用。</div>
 					<div class="rule-point">2.活动平台有权对用户申请订单进行审核。如活动平台认定订单存在异常(包括任何形式的用户作弊行为),有权取消订单,订单取消后优惠券自动失效。</div>
 					<div class="rule-point">法律声明:</div>
@@ -108,7 +179,7 @@
 					<div class="rule-point">6. 若由于用户自身原因(包括但不限于参与方式不符合活动规则、未按活动规则要求提供收件地址、操作不当造成产品功能故障等)导致无法实际享有奖励的,视为用户自愿放弃奖励,活动平台将不会也无义务给予任何形式的补偿。</div>
 					<div class="rule-point">7. 任何第三方以活动平台名义从事欺诈行为造成用户损失的,活动平台无需为此承担法律责任。</div>
 					<div class="rule-point">8. 活动平台和电商平台的《用户协议》《隐私政策》(以手机客户端对应名称为准)及其他规范同样适用于本活动,本活动规则与活动平台和电商平台《用户协议》《隐私政策》及其他规范相冲突的,以本活动规则为准。本活动规则未约定的内容,以活动平台和电商平台的《用户协议》《隐私政策》及其他平台规范为准。</div>
-					<div class="rule-point">9. 在法律法规允许的范围内,活动平台有权对本活动规则进行变动或调整,相关变动或调整将公布在活动规则页面上,并于公布时即时生效,用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整,请放弃参与变更后的活动。</div>
+					<div class="rule-point">9. 在法律法规允许的范围内,活动平台有权对本活动规则进行变动或调整,相关变动或调整将公布在活动规则页面上,并于公布时即时生效,用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整,请放弃参与变更后的活动。</div> -->
 				</div>
 			</div>
 		</div>

+ 113 - 35
microserviceUserH5/vcloud/weChatExchangePhoneActivity.html

@@ -16,6 +16,84 @@
 	<script src="../static/js/vender/crypto-js.js"></script>
     <script src="../static/js/vender/uuid.js"></script>
 	<script src="../static/js/vender/ase.js"></script>
+	<style>
+		.banner-wrap{
+			width: 7.5rem;
+			height: 7.22rem;
+			position: relative;
+		}
+		.logo-wrap {
+			position: absolute;
+			top: 0.3rem;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		.title-wrap {
+			position: absolute;
+			top: 1.2rem;
+			left: 0.44rem;
+		}
+		.titles {
+			width: 6.7rem;
+			height: 0.81rem;
+		}
+		.tip-wrap {
+			position: absolute;
+			top: 2.3rem;
+			left: 0.44rem;
+		}
+		.tips{
+			width: 6.65rem;
+			height: 0.56rem;
+		}
+		.main-wrap {
+			width: 7.5rem;
+			margin: 0 auto;
+			position: static;
+			padding-bottom: 0.2rem;
+			background-color: #C84633;
+			margin-top: -0.84rem;
+		}
+		.select-wrap {
+			width: 100%;
+			position: static;
+			display: flex;
+			justify-content: center;
+			margin-top: 0.2rem;
+		}
+		.middle-wrap {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-top: 1.2rem;
+		}
+		.bottom-wrap{
+			padding-top: 0.46rem;
+			background-color: #C84633;
+		}
+		.procedure-wrap {
+			width: 6.8rem;
+			height: 4.04rem;
+			margin: auto;
+		}
+		.rule-wrap {
+			position: relative;
+			width: 6.8rem;
+			height: 3.38rem;
+			margin: auto;
+			margin-top: 0.46rem;
+		}
+		.rule-list {
+			height: 1.58rem;
+			position: absolute;
+			top: 1.38rem;
+			padding: 0 0.33rem;
+			margin-top: 0.2rem;
+			font-size: 0.24rem;
+			color: #4D4D4D;
+			overflow-y: scroll;
+		}
+	</style>
 </head>
 
 <body>
@@ -23,65 +101,65 @@
     <div id="form-btn"></div>
 	<div class="containers">
 		<div class="banner-wrap">
-			<div class="time_lines">
+			<!-- <div class="time_lines">
 				<img class="time_line" src="../static/img/exchangePhoneActivity/time_line_left.png">
 				<div class="time-text">活动时间:2022年3月1日-3月31日</div>
 				<img class="time_line" src="../static/img/exchangePhoneActivity/time_line_right.png">
-			</div>
+			</div> -->
 			<div class="logo-wrap">
 				<img class="logo" src="../static/img/exchangePhoneActivity/logo.png">
 			</div>
 			<div class="title-wrap">
-				<img class="titles" src="../static/img/exchangePhoneActivity/title.png">
+				<img class="titles" src="../static/img/exchangePhoneActivityNew/title.png">
 			</div>
 			<div class="tip-wrap">
-				<img class="tips" src="../static/img/exchangePhoneActivity/tips.png">
+				<img class="tips" src="../static/img/exchangePhoneActivityNew/tips.png">
 			</div>
 			<div class="logo-wrap">
 				<img class="logo" src="../static/img/exchangePhoneActivity/logo.png">
 			</div>
-			<img class="banner-img" src="../static/img/exchangePhoneActivity/banner.png">
-			<div class="main-wrap">
-				<div class="middle-wrap">
-					<div class="select-wrap">
-						<div class="select left-select">
-							<img class="selected" src="../static/img/exchangePhoneActivity/selected.png">
-							<div>某手指用户</div>
-						</div>
-						<div class="select right-select">
-							<img class="selected" src="../static/img/exchangePhoneActivity/no-selected.png">
-							<div>新人福利</div>
-						</div>
-					</div>
-					<div class="ipt-row">
-						<img class="img phone-img" src="../static/img/exchangePhoneActivity/phone.png">
-						<input class="phone-ipt ipt" type="number" placeholder="请输入11位手机号码" placeholder-style="color: #CCCCCC" />
-					</div>
-					<div class="phone-tip">*账号格式不正确,请重新输入!</div>
-					<div class="ipt-row">
-						<img class="img code-img" src="../static/img/exchangePhoneActivity/code.png">
-						<input class="code-ipt ipt" type="number" placeholder="请输入验证码" />
-						<div class="get-code">获取验证码</div>
+			<img class="banner-img" src="../static/img/exchangePhoneActivityNew/banner.png">
+			</div>
+		</div>
+		<div class="main-wrap">
+			<div class="middle-wrap">
+				<div class="select-wrap">
+					<div class="select left-select">
+						<img class="selected" src="../static/img/exchangePhoneActivity/selected.png">
+						<div>某手指用户</div>
 					</div>
-					<div class="code-tip">*请输入正确验证码!</div>
-					<div class="btns">
-						<img class="btn-img" src="../static/img/exchangePhoneActivity/btn.png">
+					<div class="select right-select">
+						<img class="selected" src="../static/img/exchangePhoneActivity/no-selected.png">
+						<div>新人福利</div>
 					</div>
 				</div>
+				<div class="ipt-row">
+					<img class="img phone-img" src="../static/img/exchangePhoneActivity/phone.png">
+					<input class="phone-ipt ipt" type="number" placeholder="请输入11位手机号码" placeholder-style="color: #CCCCCC" />
+				</div>
+				<div class="phone-tip">*账号格式不正确,请重新输入!</div>
+				<div class="ipt-row">
+					<img class="img code-img" src="../static/img/exchangePhoneActivity/code.png">
+					<input class="code-ipt ipt" type="number" placeholder="请输入验证码" />
+					<div class="get-code">获取验证码</div>
+				</div>
+				<div class="code-tip">*请输入正确验证码!</div>
+				<div class="btns">
+					<img class="btn-img" src="../static/img/exchangePhoneActivity/btn.png">
+				</div>
 			</div>
-		</div>
 		<div class="bottom-wrap">
 			<div class="procedure-wrap">
-				<img class="procedure-img" src="../static/img/exchangePhoneActivity/procedure.png">
+				<img class="procedure-img" src="../static/img/exchangePhoneActivityNew/procedure.png">
 			</div>
 			<div class="rule-wrap">
-				<img class="rule-img" src="../static/img/exchangePhoneActivity/rule.png">
+				<img class="rule-img" src="../static/img/exchangePhoneActivityNew/rule.png">
 				<div class="rule-list">
-					<div class="rule-point">1.新用户可通过手机号注册申请免费获得赠送云机及购机折扣券个人专属礼包</div>
+					<div class="rule-point">1.新用户可通过手机号注册申请免费获得赠送云机及购机折扣券个人专属礼包(新人注册获得三天免费时长+7.5折优惠券,换机活动用户免费获得7天时长+5折优惠券)</div>
 					<div class="rule-point">2.购机折扣券为限时折扣券,请注意使用时间</div>
 					<div class="rule-point">3.购机折扣券适配全部机型,同一账号仅可获得一种类型礼包</div>
 					<div class="rule-point">4.所填写的手机号码,若未注册双子星将默认自动注册双子星账号</div>
-					<div class="rule-point">其它说明:</div>
+					<!-- <div class="rule-point">其它说明:</div>
 					<div class="rule-point">1.优惠券的可使用范围有限制,请以券面提示为准,用户可在下单时选择该订单的可用优惠券的卡券页面中查看已领取的优惠券的详细情况。具体适用范围以商品详情页提示内容为准。无法使用优惠券的商品,在商品详情页将不展示优惠券;同一笔订单中,不同类型的券可以叠加,同一类型的券,仅可选择一张使用。</div>
 					<div class="rule-point">2.活动平台有权对用户申请订单进行审核。如活动平台认定订单存在异常(包括任何形式的用户作弊行为),有权取消订单,订单取消后优惠券自动失效。</div>
 					<div class="rule-point">法律声明:</div>
@@ -101,7 +179,7 @@
 					<div class="rule-point">6. 若由于用户自身原因(包括但不限于参与方式不符合活动规则、未按活动规则要求提供收件地址、操作不当造成产品功能故障等)导致无法实际享有奖励的,视为用户自愿放弃奖励,活动平台将不会也无义务给予任何形式的补偿。</div>
 					<div class="rule-point">7. 任何第三方以活动平台名义从事欺诈行为造成用户损失的,活动平台无需为此承担法律责任。</div>
 					<div class="rule-point">8. 活动平台和电商平台的《用户协议》《隐私政策》(以手机客户端对应名称为准)及其他规范同样适用于本活动,本活动规则与活动平台和电商平台《用户协议》《隐私政策》及其他规范相冲突的,以本活动规则为准。本活动规则未约定的内容,以活动平台和电商平台的《用户协议》《隐私政策》及其他平台规范为准。</div>
-					<div class="rule-point">9. 在法律法规允许的范围内,活动平台有权对本活动规则进行变动或调整,相关变动或调整将公布在活动规则页面上,并于公布时即时生效,用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整,请放弃参与变更后的活动。</div>
+					<div class="rule-point">9. 在法律法规允许的范围内,活动平台有权对本活动规则进行变动或调整,相关变动或调整将公布在活动规则页面上,并于公布时即时生效,用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整,请放弃参与变更后的活动。</div> -->
 				</div>
 			</div>
 		</div>