feat: 首页调整;

pages/index/index.vue

@@ -1,14 +1,22 @@
 <template>
 	<div class="diangou">
     <video
+        class="video"
         style="width: 100%;"
         :style="{ height: videoHeight + 'px' }"
-        :autoplay="true"
-        :loop="true"
-        :muted="true"
+        loop="true"
+        playsinline="true"
         preload="auto"
-        crossorigin="anonymous"
-        src="@/static/video.mp4">
+        ref="videoRef"
+        autoplay="true"
+        x-webkit-airplay="true"
+        webkit-playsinline="true"
+        x5-video-player-type='h5'
+        x5-video-orientation='portraint'
+        x5-video-player-fullscreen=''
+        src="@/static/video.mp4"
+        poster="@/static/video.png">
+      <source id="source" src="@/static/video.mp4" type="video/mp4">
     </video>
 		<div v-if="Login">
 			<div class="login-box">
@@ -27,6 +35,11 @@
           <div>登录即代表同意<span @click="userAgree()">《用户协议》</span><span @click="userPrivacy()">《隐私政策》</span></div>
         </div>
 			</div>
+	  <div class="tips">
+		  <div class="tips-title">邀请有礼</div>
+		  <div class="tips-text" style="margin-bottom: 20rpx;">人人都是推广员，凡是通过<span style="color: rgba(235, 92, 88, 1);">早晚安、摩天轮、邀请有礼</span>专属二维码，成功邀请商家及用户下载，即可获以下豪礼！</div>
+		  <div class="tips-text">邀商家入驻可获得9.9元/39元/129元消费券奖励每邀请10人下载即可获得一个神秘礼物满足条件后，客服会根据您的收货地址发放礼物。</div>
+	  </div>
       <div style="width: 100%; text-align: center">
         <image src="@/static/slogan.png" mode="widthFix"></image>
       </div>
@@ -99,6 +112,20 @@
 			  // 普通浏览器中的代码
 			}
 		},
+    mounted() {
+      if (window.WeixinJSBridge) {
+        WeixinJSBridge.invoke('getNetworkType', {}, () => {
+          this.$refs.videoRef.play();
+        }, false);
+      } else {
+        document.addEventListener('WeixinJSBridgeReady', () => {
+          WeixinJSBridge.invoke('getNetworkType', {}, () => {
+            this.$refs.videoRef.play();
+          });
+        }, false);
+      }
+      this.$refs.videoRef.play();
+    },
 		methods: {
 			// 是否勾选协议
 			changeType(){
@@ -253,6 +280,10 @@
 </script>
 
 <style lang="scss">
+  .video {
+    position: relative;
+    z-index: 1;
+  }
 	.diangou{
 		width: 100%;
 		height: 100vh;
@@ -279,7 +310,7 @@
 	}
 	.login-box{
     position: relative;
-    z-index: 10;
+    z-index: 1000;
 		width: 323px;
 		padding: 20px 0 30px;
 		box-shadow: 0 0 10px rgba(0,0,0,0.05);
@@ -426,4 +457,17 @@
 			margin: 20px 0;
 		}
 	}
+	.tips {
+		padding: 20rpx 92rpx 0;
+		&-title {
+			line-height: 54rpx;
+			font-size: 36rpx;
+			color: rgba(56, 56, 56, 1);
+		}
+		&-text {
+			font-size: 26rpx;
+			line-height: 1.5;
+			color: rgba(153, 153, 153, 100);
+		}
+	}
 </style>