优化

purchase_H5/src/templates/templateColorNew/components/tabModal.vue

@@ -161,11 +161,13 @@ export default {
 
     div {
       text-align: center;
-      font-size: 24px;
-      font-weight: bold;
+      font-size: 28px;
+      font-weight: 400;
+      // font-weight: bold;
       color: #222222;
       margin-top: 21px;
       margin-bottom: 28px;
+      // line-height: 28px;
     }
   }
 }

purchase_H5/src/templates/templateColorNew/index.scss

@@ -36,6 +36,27 @@
     overflow: hidden;
     display: inline-flex;
 
+    .rule {
+      position: absolute;
+      right: 0;
+      top: 140px;
+      width: 48px;
+      height: 124px;
+      background: #FFFFFF;
+      // box-shadow: 0px 0px 12px 0px #ACACAC;
+      opacity: 0.7;
+      border-radius: 12px 0px 0px 12px;
+      font-size: 24px;
+      font-weight: 400;
+      color: #000;
+      z-index: 5;
+      writing-mode: vertical-lr;
+      padding-left: 10px;
+      padding-top: 10px;
+      box-sizing: border-box;
+    }
+
+
     .banner {
       width: 100%;
       height: 100%;
@@ -133,7 +154,7 @@
     position: relative;
     z-index: 1;
     padding: 0 37px;
-    padding-bottom: 20px;
+    padding-bottom: 30px;
     box-sizing: border-box;
 
     .orderTitle {
@@ -152,7 +173,7 @@
     .orderRow {
       width: 621px;
       height: 183px;
-      margin: 32px auto;
+      margin: 36px auto;
 
       img {
         width: 100%;
@@ -161,15 +182,15 @@
     }
 
     .buyBtn {
-      width: 550px;
-      height: 70px;
-      margin: 10px auto;
-      border-radius: 35px;
+      width: 626px;
+      height: 90px;
+      margin: 0 auto;
       font-size: 36px;
       text-align: center;
-      line-height: 70px;
+      line-height: 90px;
       font-weight: 700;
       color: #F3E4C9;
+      border-radius: 45px;
       animation-name: scale;
       animation-duration: 1s;
       animation-timing-function: ease-in-out;
@@ -181,7 +202,7 @@
       display: flex;
       flex-direction: row;
       justify-content: center;
-      margin-top: 27px;
+      margin-top: 21px;
       font-size: 22px;
 
       .van-checkbox {
@@ -229,7 +250,7 @@
 
   .descbox {
     background-color: #ffffff;
-    margin: 40px auto;
+    margin: 30px auto;
     width: 714px;
     min-height: 100px;
     border-radius: 20px;
@@ -264,8 +285,8 @@
       p {
         // color: #707070;
         font-size: 28px;
-        line-height: 40px;
-        margin: 20px 0 0 0;
+        line-height: 34px;
+        margin: 15px 0 0 0;
       }
     }
   }

purchase_H5/src/templates/templateColorNew/index.vue

@@ -20,6 +20,9 @@
       <div class="extend" v-if="pageData.remarks.extendImg" @click="extendClick">
         <img :src="pageData.remarks.extendImg" alt="" />
       </div>
+      <div class="rule" @click="ruleClick">
+        产品说明
+      </div>
     </div>
     <div class="orderBox" :style="{'background':pageData.mainJson.orderBgcol}">
       <div class="orderTitle" v-if="pageData.mainJson.explainTitle!==''">
@@ -34,14 +37,14 @@
       <div class="privacyBox" v-if="pageData.remarks.isBuy === '1'">
         <van-checkbox v-model="checked" checked-color="#6696FF">
           <div>
-            <p style="margin: 0; padding: 0" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}">手机号仅用于开通服务,我已阅读并同意
+            <p style="margin: 0; padding: 0">手机号仅用于开通服务,我已阅读并同意
             </p>
           </div>
         </van-checkbox>
       </div>
       <div class="priacyText" :style="pageData.mainJson.hideCol!==''?{'color':pageData.mainJson.hideCol}:{}">
-        <span class="span" @click="showConceal = true" >《隐私声明》</span>、
-        <span class="span" @click="showRule = true" >《产品说明》</span>
+        <span class="span" @click="showConceal = true">《隐私声明》</span>、
+        <span class="span" @click="showRule = true">《产品说明》</span>
       </div>
       <div class="tips" v-if="pageData.remarks.privacyText!==''" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}">
         {{pageData.remarks.privacyText}}
@@ -157,6 +160,10 @@ export default {
     this.callSvg();
   },
   methods: {
+    ruleClick () {
+      this.showRule = true;
+      localStorage.setItem("startTime", new Date().getTime());
+    },
     buyBtn () {
       if (this.checked == false) {
         this.$toast('请勾选隐私声明')

purchase_H5/src/templates/templateThree/components/tabModal.vue

@@ -65,7 +65,7 @@ export default {
         }
         if (val.tabName == '剩余流量查询' && this.isApplet == false) {
           let obj = {}
-          obj.tabName = val.tabName
+          obj.tabName = "流量查询"
           obj.tabUrlBasics = val.tabUrlBasics
           obj.tabUrlApplet = val.tabUrlApplet
           obj.icon = require("./img/icon_chaxun.png")
@@ -111,7 +111,7 @@ export default {
         obj.tabUrlBasics = ""
         obj.tabUrlApplet = ""
         obj.icon = require("./img/icon_chaxun.png")
-        obj.tabName = '剩余流量查询'
+        obj.tabName = '流量查询'
         this.tabArr.push(obj)
       }
       if (this.pageData.remarks.guanzhuBtn === '1') {
@@ -145,22 +145,22 @@ export default {
   display: -webkit-box;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
-  margin-bottom: 40px;
+  margin-bottom: 56px;
 
   .tab {
     width: 160px;
     margin: 26px 5px;
 
     img {
-      width: 50px;
-      height: 50px;
+      width: 62px;
+      height: 62px;
       margin: 0 55px;
     }
 
     div {
       text-align: center;
-      font-size: 24px;
-      font-weight: bold;
+      font-size: 28px;
+      // font-weight: bold;
       color: #0d0d0d;
       margin-top: 20px;
     }

purchase_H5/src/templates/templateThree/index.scss

@@ -123,7 +123,7 @@
     position: relative;
     z-index: 1;
     padding: 0 37px;
-    padding-bottom: 20px;
+    padding-bottom: 30px;
     box-sizing: border-box;
 
     .orderTitle {
@@ -175,7 +175,7 @@
       display: flex;
       flex-direction: row;
       justify-content: center;
-      margin-top: 27px;
+      margin-top: 20px;
       font-size: 22px;
 
       .van-checkbox {
@@ -222,7 +222,7 @@
 
   .descbox {
     background-color: #ffffff;
-    margin: 40px auto;
+    margin: 30px auto;
     width: 714px;
     min-height: 100px;
     border-radius: 20px;
@@ -257,8 +257,8 @@
       p {
         // color: #707070;
         font-size: 28px;
-        line-height: 40px;
-        margin: 20px 0 0 0;
+        line-height: 34px;
+        margin: 15px 0 0 0;
       }
     }
   }

purchase_H5/src/templates/templateThree/index.vue

@@ -20,6 +20,9 @@
       <div class="extend" v-if="pageData.remarks.extendImg" @click="extendClick">
         <img :src="pageData.remarks.extendImg" alt="" />
       </div>
+      <div class="rule" @click="ruleClick">
+        产品说明
+      </div>
     </div>
     <div class="orderBox" :style="{'background':pageData.mainJson.orderBgcol}">
       <div class="orderTitle" v-if="pageData.mainJson.explainTitle!==''">
@@ -49,9 +52,6 @@
         {{pageData.remarks.privacyText}}
       </div>
     </div>
-    <div class="rule" @click="ruleClick">
-      产品说明
-    </div>
     <!-- 说明 -->
     <div class="descbox" :style="{'background':pageData.mainJson.orderBgcol}">
       <div class="explainTitle">