heyang 3 years ago
parent
commit
4fa5f475ea

+ 404 - 0
microserviceUserH5/static/css/doubleElevenActivity.css

@@ -0,0 +1,404 @@
+@media screen and (max-width: 750px) {
+  html {
+    font-size: calc(100vw / 7.5);
+  }
+}
+
+@media screen and (min-width: 750px) {
+  html {
+    font-size: calc(450px / 7.5);
+  }
+}
+
+html, body, div, ul, li, p {
+  padding: 0;
+  margin: 0;
+}
+
+ul, li {
+  list-style: none;
+}
+
+.header-container{
+  width: 7.5rem;
+  height: 6.64rem;
+  margin: 0 auto;
+  position: relative; 
+  overflow: hidden;
+}
+.top-banner{
+  width: 101%;
+  height: 6.64rem;
+}
+.middle-container{
+  width: 7.5rem;
+  margin: 0 auto;
+  position: relative;
+  background: url(../../static/img/doubleElevenActivity/bg.png) no-repeat;
+        background-size: 100% 100%;
+  margin-top: -2.06rem;
+  padding-bottom: 0.5rem;
+}
+.tips{
+  width: 6.9rem;
+  height: 1.76rem;
+  position: absolute;
+  top: 1.82rem;
+  left: 0;
+  z-index: 9;
+}
+.step-container{
+  width: 6.9rem;
+  position: relative;
+  padding-top: 2.82rem;
+  margin-left: 0.3rem;
+}
+.main-step-content{
+  width: 6.9rem;
+  position: relative;
+  z-index: 9;
+  border-radius: 0.1rem;
+  background-color: #ffffff;
+  padding-bottom: 1.18rem;
+}
+.top-step{
+  display: flex;
+  justify-content: space-between;
+}
+.hongbao{
+  width: 1.44rem;
+  height: 1.5rem;
+  margin-top: 0.4rem;
+}
+.step{
+  width: 0.52rem;
+  height: 0.24rem;
+  margin-top: 0.76rem;
+}
+.buyphone{
+  width: 1.44rem;
+  height: 1.5rem;
+  margin-top: 0.4rem;
+}
+.red-packet{
+  margin: 0.3rem 0.3rem 0 0.3rem;
+}
+.red-packet-next{
+  margin: 0.3rem;
+}
+.packet{
+  position: relative;
+  width: 6.32rem;
+  height: 1.56rem;
+  margin-bottom: 0.3rem;
+}
+.fxhb{
+  width: 100%;
+  height: 100%;
+}
+.money{
+  position: absolute;
+  top: 0.34rem;
+  left: 0.3rem;
+  font-size: 0.14rem;
+  color: #AC6C23;
+}
+.money-mark{
+  font-size: 0.36rem;
+}
+.money-val{
+  font-size: 0.64rem;
+}
+.packet-title{
+  position: absolute;
+  top: 0.36rem;
+  right: 0.82rem;
+  font-size: 0.36rem;
+  color: #FEF1C4;
+}
+.packet-time{
+  position: absolute;
+  bottom: 0.1rem;
+  right: 1.58rem;
+  font-size: 0.24rem;
+  color: #FEF1C4;
+}
+.account{
+  font-size: 0.28rem;
+  text-align: center;
+  padding-bottom: 0.2rem;
+}
+.step-item{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.step-text{
+  font-size: 0.24rem;
+}
+.join-activity-btn{
+  width: 6.6rem;
+  height: 1.8rem;
+  line-height: 1.4rem;
+  position: absolute;
+  bottom: -0.74rem;
+  left: 0.15rem;
+  z-index: 99;
+}
+.join-activity{
+  width: 100%;
+  height: 100%;
+}
+.activity-btn-content{
+  width: 5.2rem;
+  font-size: 0.44rem;
+  position: absolute;
+  left: 1.06rem;
+  top: 0;
+}
+.activity-btn-text{
+  font-size: 0.44rem;
+  color: #BB3804;
+}
+.icon-left{
+  width: 0.2rem;
+  height: 0.32rem;
+}
+.invite-text{
+  margin-top: 0.6rem;
+  font-size: 0.28rem;
+  text-align: center;
+  color: #ffffff;
+}
+.rule-container{
+  width: 6.9rem;
+  position: relative;
+  margin-top: 1.6rem;
+  margin-left: 0.3rem;
+}
+.rule-tips{
+  width: 6.9rem;
+  height: 1.76rem;
+  position: absolute;
+  top: -1rem;
+  left: 0;
+}
+.rule-content{
+  width: 6.9rem;
+  height: 6.2rem;
+  border-radius: 0.1rem;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  position: relative;
+  z-index: 99;
+}
+.rule-point{
+  margin: 0.2rem;
+  font-size: 0.24rem;
+  line-height: 0.4rem;
+}
+.packet-block{
+  width: 6.9rem;
+  min-height: 2.16rem;
+  max-height: 9.16rem;
+  border-radius: 0.1rem;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  position: relative;
+  z-index: 99;
+    }
+.packet-titles{
+  position: absolute;
+  top: 0.14rem;
+  left: 2.32rem;
+  font-size: 0.36rem;
+  color: #FEF1C4;
+}
+.packet-times{
+  position: absolute;
+  top: 0.64rem;
+  right: 1.58rem;
+  font-size: 0.24rem;
+  color: #FEF1C4;
+}
+.packet-info{
+  position: absolute;
+  bottom: 0.1rem;
+  right: 0.88rem;
+  font-size: 0.24rem;
+  color: #FEF1C4;
+}
+.share-btn{
+  width: 1.04rem;
+  height: 0.48rem;
+  position: absolute;
+  top: 0.24rem;
+  right: 0.34rem;
+}
+.share-num{
+  position: absolute;
+  top: 0.08rem;
+  left: 0.12rem;
+  font-size: 0.24rem;
+  color: #FD1C15;
+}
+.share{
+  width: 100%;
+  height: 100%;
+}
+.icon{
+  width: 0.2rem;
+  height: 0.16rem;
+  position: absolute;
+  bottom: 0.2rem;
+  right: 0.34rem;
+}
+.user-list{
+  width: 5.72rem;
+  max-height: 5.68rem;
+  margin: 0 auto;
+  /* background: #FFFFFF; */
+  border-radius: 0.2rem;
+  border: 0.02rem solid #FFE4E3;
+  background-color: #FEF1C4;
+  padding: 0.3rem 0.3rem 0 0.3rem;
+  overflow-y: scroll;
+  display: block;
+}
+.user-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.28rem;
+}
+.user-left{
+  display: flex;
+}
+.head-img{
+  width: 0.52rem;
+  height: 0.52rem;
+  padding-top: 0.06rem;
+  border-radius: 50%;
+}
+.user-info{
+  margin-left: 0.14rem;
+  font-size: 0.24rem;
+}
+.user-name{
+  color: #272624;
+}
+.user-time{
+  color: #999999;
+}
+.meal{
+  font-size: 0.24rem;
+  color: #FD2B1B;
+  max-width: 1.72rem;
+}
+.receive{
+  width: 1.14rem;
+  height: 0.52rem;
+  line-height: 0.52rem;
+  font-size: 0.24rem;
+    color: #ffffff;
+  background-color: #3B7FFF;
+  border-radius: 0.08rem;
+  text-align: center;
+}
+.pop {
+  width: 6.22rem;
+  height: 8.5rem;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: -6.96rem;
+  z-index: 999;
+}
+.pop-bg{
+  width: 100%;
+  height: 100%;
+}
+.mask {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: none;
+}
+.top-title{
+  position: absolute;
+  top: 3.14rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.32rem;
+  color: #ffffff;
+}
+.share-num-text{
+  position: absolute;
+  top: 4.94rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.4rem;
+  color: #F23200;
+  letter-spacing: 0.06rem;
+  font-weight: 600;
+  line-height: 0.56rem;
+  text-align: center;
+}
+.bottom{
+  position: absolute;
+  bottom: 0.46rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bottom-title-row{
+  width: 5.16rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.line{
+  width: 1.5rem;
+  height: 0.02rem;
+  background-color: #ffffff;
+}
+.bottom-title{
+  font-size: 0.24rem;
+  color: #ffffff;
+}
+.bottom-share-row{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.18rem;
+  margin: 0 0.2rem;
+}
+.left-friend_share,.right-wechat{
+  display: flex;
+  align-items: center;
+  font-size: 0.28rem;
+  color: #ffffff;
+}
+.friend_share,.wechat{
+  width: 0.68rem;
+  height: 0.68rem;
+  margin-right: 0.2rem;
+}
+.share-text{
+  opacity: 0.8;
+}
+.del{
+  width: 0.56rem;
+  height: 0.56rem;
+  position: absolute;
+  bottom: -0.3rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.del-img{
+  width: 100%;
+  height: 100%;
+}

+ 23 - 404
microserviceUserH5/vcloud/doubleElevenActivity.html

@@ -7,396 +7,10 @@
 	<title>星动双十一</title>
 	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
 	<link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
-	<link rel="stylesheet" href="../static/css/changePhoneActivity.css">
+	<link rel="stylesheet" href="../static/css/doubleElevenActivity.css">
 	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
 	<script src="../static/js/vender/toastr/toastr.min.js"></script>
 	<script src="../static/js/vender/config.js"></script>
-	<style>
-		.header-container{
-			width: 7.5rem;
-			height: 6.64rem;
-			margin: 0 auto;
-			position: relative; 
-			overflow: hidden;
-		}
-		.top-banner{
-			width: 101%;
-			height: 6.64rem;
-		}
-		.middle-container{
-			width: 7.5rem;
-			/* height: 28.9rem; */
-			margin: 0 auto;
-			position: relative;
-			background: url(../static/img/doubleElevenActivity/bg.png) no-repeat;
-            background-size: 100% 100%;
-			margin-top: -2.06rem;
-			padding-bottom: 0.5rem;
-		}
-		.tips{
-			width: 6.9rem;
-			height: 1.76rem;
-			position: absolute;
-			top: 1.82rem;
-			left: 0;
-			z-index: 9;
-		}
-		.step-container{
-			width: 6.9rem;
-			position: relative;
-			padding-top: 2.82rem;
-			margin-left: 0.3rem;
-		}
-		.main-step-content{
-			width: 6.9rem;
-			position: relative;
-			z-index: 9;
-			border-radius: 0.1rem;
-			background-color: #ffffff;
-			padding-bottom: 1.18rem;
-		}
-		.top-step{
-			display: flex;
-			justify-content: space-between;
-		}
-		.hongbao{
-			width: 1.44rem;
-			height: 1.5rem;
-			margin-top: 0.4rem;
-		}
-		.step{
-			width: 0.52rem;
-			height: 0.24rem;
-			margin-top: 0.76rem;
-		}
-		.buyphone{
-			width: 1.44rem;
-			height: 1.5rem;
-			margin-top: 0.4rem;
-		}
-		.red-packet{
-			margin: 0.3rem 0.3rem 0 0.3rem;
-		}
-		.red-packet-next{
-			margin: 0.3rem;
-		}
-		.packet{
-			position: relative;
-			width: 6.32rem;
-			height: 1.56rem;
-			margin-bottom: 0.3rem;
-		}
-		.fxhb{
-			width: 100%;
-			height: 100%;
-		}
-		.money{
-			position: absolute;
-			top: 0.34rem;
-			left: 0.3rem;
-			font-size: 0.14rem;
-			color: #AC6C23;
-		}
-		.money-mark{
-			font-size: 0.36rem;
-		}
-		.money-val{
-			font-size: 0.64rem;
-		}
-		.packet-title{
-			position: absolute;
-			top: 0.36rem;
-			right: 0.82rem;
-			font-size: 0.36rem;
-			color: #FEF1C4;
-		}
-		.packet-time{
-			position: absolute;
-			bottom: 0.1rem;
-			right: 1.58rem;
-			font-size: 0.24rem;
-			color: #FEF1C4;
-		}
-		.account{
-			font-size: 0.28rem;
-			text-align: center;
-			padding-bottom: 0.2rem;
-		}
-		.step-item{
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-		}
-		.step-text{
-			font-size: 0.24rem;
-		}
-		.join-activity-btn{
-			width: 6.6rem;
-			height: 1.8rem;
-			line-height: 1.4rem;
-			position: absolute;
-			bottom: -0.74rem;
-			left: 0.15rem;
-			z-index: 99;
-		}
-		.join-activity{
-			width: 100%;
-			height: 100%;
-		}
-		.activity-btn-content{
-			width: 5.2rem;
-			font-size: 0.44rem;
-			position: absolute;
-			left: 1.06rem;
-			top: 0;
-		}
-		.activity-btn-text{
-			font-size: 0.44rem;
-			color: #BB3804;
-		}
-		.icon-left{
-			width: 0.2rem;
-			height: 0.32rem;
-		}
-		.invite-text{
-			margin-top: 0.6rem;
-			font-size: 0.28rem;
-			text-align: center;
-			color: #ffffff;
-		}
-		.rule-container{
-			width: 6.9rem;
-			position: relative;
-			margin-top: 1.6rem;
-			margin-left: 0.3rem;
-		}
-		.rule-tips{
-			width: 6.9rem;
-			height: 1.76rem;
-			position: absolute;
-			top: -1rem;
-			left: 0;
-		}
-		.rule-content{
-			width: 6.9rem;
-			height: 6.2rem;
-			border-radius: 0.1rem;
-			background-color: #ffffff;
-			overflow-y: scroll;
-			position: relative;
-			z-index: 99;
-		}
-		.rule-point{
-			margin: 0.2rem;
-			font-size: 0.24rem;
-			line-height: 0.4rem;
-		}
-		.packet-block{
-			width: 6.9rem;
-			min-height: 2.16rem;
-			max-height: 9.16rem;
-			border-radius: 0.1rem;
-			background-color: #ffffff;
-			overflow-y: scroll;
-			position: relative;
-			z-index: 99;
-        }
-		.packet-titles{
-			position: absolute;
-			top: 0.14rem;
-			left: 2.32rem;
-			font-size: 0.36rem;
-			color: #FEF1C4;
-		}
-		.packet-times{
-			position: absolute;
-			top: 0.64rem;
-			right: 1.58rem;
-			font-size: 0.24rem;
-			color: #FEF1C4;
-		}
-		.packet-info{
-			position: absolute;
-			bottom: 0.1rem;
-			right: 0.88rem;
-			font-size: 0.24rem;
-			color: #FEF1C4;
-		}
-		.share-btn{
-			width: 1.04rem;
-			height: 0.48rem;
-			position: absolute;
-			top: 0.24rem;
-			right: 0.34rem;
-		}
-		.share-num{
-			position: absolute;
-			top: 0.08rem;
-			left: 0.12rem;
-			font-size: 0.24rem;
-			color: #FD1C15;
-		}
-		.share{
-			width: 100%;
-			height: 100%;
-		}
-		.icon{
-			width: 0.2rem;
-			height: 0.16rem;
-			position: absolute;
-			bottom: 0.2rem;
-			right: 0.34rem;
-		}
-		.user-list{
-			width: 5.72rem;
-			max-height: 5.68rem;
-			margin: 0 auto;
-			/* background: #FFFFFF; */
-			border-radius: 0.2rem;
-			border: 0.02rem solid #FFE4E3;
-			background-color: #FEF1C4;
-			padding: 0.3rem 0.3rem 0 0.3rem;
-			overflow-y: scroll;
-			display: block;
-		}
-		.user-item{
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-bottom: 0.28rem;
-		}
-		.user-left{
-			display: flex;
-		}
-		.head-img{
-			width: 0.52rem;
-			height: 0.52rem;
-			padding-top: 0.06rem;
-			border-radius: 50%;
-		}
-		.user-info{
-			margin-left: 0.14rem;
-			font-size: 0.24rem;
-		}
-		.user-name{
-			color: #272624;
-		}
-		.user-time{
-			color: #999999;
-		}
-		.meal{
-			font-size: 0.24rem;
-			color: #FD2B1B;
-			max-width: 1.72rem;
-		}
-		.receive{
-			width: 1.14rem;
-			height: 0.52rem;
-			line-height: 0.52rem;
-			font-size: 0.24rem;
-		    color: #ffffff;
-			background-color: #3B7FFF;
-			border-radius: 0.08rem;
-			text-align: center;
-		}
-		.pop {
-			width: 6.22rem;
-			height: 8.5rem;
-			position: absolute;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			top: -6.96rem;
-			z-index: 999;
-		}
-		.pop-bg{
-			width: 100%;
-			height: 100%;
-		}
-		.mask {
-			width: 100%;
-			height: 100vh;
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 9999;
-			background: rgba(0, 0, 0, 0.8);
-			display: none;
-		}
-		.top-title{
-			position: absolute;
-			top: 3.14rem;
-			left: 50%;
-			transform: translateX(-50%);
-			font-size: 0.32rem;
-			color: #ffffff;
-		}
-		.share-num-text{
-			position: absolute;
-			top: 4.94rem;
-			left: 50%;
-			transform: translateX(-50%);
-			font-size: 0.4rem;
-			color: #F23200;
-			letter-spacing: 0.06rem;
-			font-weight: 600;
-			line-height: 0.56rem;
-			text-align: center;
-		}
-		.bottom{
-			position: absolute;
-			bottom: 0.46rem;
-			left: 50%;
-			transform: translateX(-50%);
-		}
-		.bottom-title-row{
-			width: 5.16rem;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-		.line{
-			width: 1.5rem;
-			height: 0.02rem;
-			background-color: #ffffff;
-		}
-		.bottom-title{
-			font-size: 0.24rem;
-			color: #ffffff;
-		}
-		.bottom-share-row{
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding-top: 0.18rem;
-			margin: 0 0.2rem;
-		}
-		.left-friend_share,.right-wechat{
-			display: flex;
-			align-items: center;
-			font-size: 0.28rem;
-			color: #ffffff;
-		}
-		.friend_share,.wechat{
-			width: 0.68rem;
-			height: 0.68rem;
-			margin-right: 0.2rem;
-		}
-		.share-text{
-			opacity: 0.8;
-		}
-		.del{
-			width: 0.56rem;
-			height: 0.56rem;
-			position: absolute;
-			bottom: -0.3rem;
-			left: 50%;
-			transform: translateX(-50%);
-		}
-		.del-img{
-			width: 100%;
-			height: 100%;
-		}
-	</style>
 </head>
 
 <body>
@@ -765,29 +379,34 @@
 			$('.mask').show();
 			document.documentElement.style.overflow='auto';
 		});
-		//点击朋友圈
-		$('.left-friend_share')[0].addEventListener('click',(e) => {
-			if (isAndroid) {
-					if(window.native){
-						window.native.shareToWechatCircle();
-					}else{
-				        toastr.error('不支持当前环境!');
-					}
-				}else{
-					toastr.error('不支持当前环境!');
-				}
+		//点击分享朋友圈
+		$('.left-friend_share')[0].addEventListener('click',()=>{
+			shareHandle('shareToWechatCircle');
 		});
-		//点击微信
-		$('.right-wechat')[0].addEventListener('click',(e) => {
+		//点击分享微信
+		$('.right-wechat')[0].addEventListener('click',()=>{
+			shareHandle('shareToWechat');
+		});
+		function shareHandle(type) {
 			if (isAndroid) {
 					if(window.native){
-						window.native.shareToWechat();
+						window.native[type]();
 					}else{
-				        toastr.error('不支持当前环境!');
+			            stopManyClick(() => {
+				            toastr.error('不支持当前环境!');
+						})
 					}
-				}else{
+			}else{
+				stopManyClick(() => {
 					toastr.error('不支持当前环境!');
-				}
+				})
+			}
+		}
+		//点击关闭弹窗
+		$('.del')[0].addEventListener('click',()=>{
+			$('.pop').animate({top: '-6.96rem'},"fast");
+			$('.mask').hide();
+			document.documentElement.style.overflow='auto';
 		});
 		// //点击分享
 		// $('.share-node')[0].addEventListener('click',()=>{