bugfix：修复已知bug

assets/style/main.scss

@@ -16,9 +16,8 @@ body {
 	src: url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Bold.otf') format('opentype'),
 		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Heavy.otf') format('opentype'),
 		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Light.otf') format('opentype'),
-		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Medium.otf') format('opentype'), 
-		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Regular.otf') format('opentype')
-		url('../fontFace/AlibabaPuHuiTi/阿里巴巴普惠体H.ttf') format('truetype');
+		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Medium.otf') format('opentype'),
+		url('../fontFace/AlibabaPuHuiTi/Alibaba-PuHuiTi-Regular.otf') format('opentype') url('../fontFace/AlibabaPuHuiTi/阿里巴巴普惠体H.ttf') format('truetype');
 }
 
 ::-webkit-scrollbar {
@@ -54,4 +53,12 @@ body {
 	width: 5px !important;
 	background-color: rgba(125, 125, 125, 0.7) !important;
 	-webkit-border-radius: 6px !important;
+}
+
+.van-overlay {
+	background-color: rgba(0, 0, 0, .95) !important;
+}
+
+[v-cloak] {
+	display: none;
 }

pages/claimCloudPhone/_type.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout @goBack="goBack" :isNavBar="isNavBar">
+  <layout @goBack="goBack" :isNavBar="isNavBar" bgColor="#F1D6D9">
     <!-- type 1（砍一刀） 2（邀请好友） 3 （失败） 4 （成功）都是邀请人  0 是被邀请人 -->
     <bargainingAssistance
       ref="bargainingAssistance"

pages/claimCloudPhone/chooseCloudPhone.vue

@@ -2,11 +2,14 @@
   <layout @goBack="leaveFun" :isNavBar="isNavBar" :bgHeight="350">
     <div class="choose-cloud-phone">
       <div class="choose-cloud-phone_info">
-        <div class="choose-cloud-phone_info-name">亲爱的{{ info.phoneNumber || '用户' }}</div>
-        <div class="choose-cloud-phone_info-tips">
-          <div>恭喜您获得“0元领云机”大奖</div>
-          <div>感谢您的陪伴与支持</div>
+        <div class="choose-cloud-phone_info-name">
+          亲爱的{{ info.phoneNumber || '用户' }}
         </div>
+        <img
+          class="choose-cloud-phone_tips"
+          src="@/assets/image/claimCloudPhone/chooseCloudPhoneTitle.png"
+          alt=""
+        />
       </div>
       <div class="choose-cloud-phone_select">
         <div>请选择</div>
@@ -31,6 +34,21 @@
         />
       </cloudMobilePhonePopup>
     </div>
+    <van-dialog
+      v-model="dialogVisible"
+      :showConfirmButton="false"
+      close-on-click-overlay
+      :before-close="beforeClose"
+    >
+      <img
+        v-cloak
+        src="@/assets/image/claimCloudPhone/firstScreenPopUp.png"
+        alt=""
+        ref="dialogImg"
+        class="dialog-img"
+        @click="beforeClose"
+      />
+    </van-dialog>
   </layout>
 </template>
 
@@ -65,16 +83,21 @@ export default {
       listLoading: false,
       isNavBar: true,
       info: {},
+      dialogVisible: false,
     };
   },
   mounted() {
+    if (localStorage.getItem('bargainingStatusInfo')) {
+      this.info = JSON.parse(localStorage.getItem('bargainingStatusInfo'));
+    }
     if (+sessionStorage.getItem('activityEmd')) {
+      this.dialogVisible = false;
       this.$toast('活动已到期');
       return;
     }
-    if (localStorage.getItem('bargainingStatusInfo')) {
-      this.info = JSON.parse(localStorage.getItem('bargainingStatusInfo'));
-    }
+    setTimeout(() => {
+      this.dialogVisible = true;
+    })
     this.isNavBar = !+localStorage.getItem('auth.inviteeNum');
     _self = this;
     // 用来监听微信返回上一页的
@@ -136,6 +159,14 @@ export default {
       this.pageNum++;
       this.getRenewalPackage(false);
     },
+
+    // 动画
+    beforeClose(action, done) {
+      this.$refs.dialogImg.className += ' dialog-img-animation';
+      this.$refs.dialogImg.addEventListener('animationend', () => {
+        done ? done() : (this.dialogVisible = false);
+      });
+    },
   },
 };
 </script>
@@ -159,39 +190,18 @@ export default {
       font-style: normal;
       margin-bottom: 4px;
     }
-    .choose-cloud-phone_info-tips {
-      & > div:first-child {
-        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-        font-weight: bold;
-        font-size: 20px;
-        line-height: 27px;
-        font-style: normal;
-        background: linear-gradient(90deg, #fffbfb 0%, #fbce95 100%);
-        /* 将文字颜色设置为透明，以便背景渐变可见 */
-        color: transparent;
-        /* 使用 blend-mode 来控制渐变背景与文字颜色的混合效果 */
-        -webkit-background-clip: text;
-        background-clip: text;
-      }
-
-      & > div:last-child {
-        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-        font-weight: 400;
-        font-size: 12px;
-        color: #ffffff;
-        line-height: 17px;
-        margin-bottom: 20px;
-      }
-    }
   }
-
+  .choose-cloud-phone_tips {
+    width: 260px;
+  }
   .choose-cloud-phone_select {
+    margin-top: 10px;
     & > div {
       margin-bottom: 12px;
     }
     & > div:nth-of-type(1) {
       font-family: PingFangSC, PingFang SC;
-      font-weight: bold;
+      font-weight: 500;
       font-size: 16px;
       color: #ffffff;
       line-height: 20px;
@@ -213,4 +223,24 @@ export default {
     }
   }
 }
+.van-dialog {
+  background: transparent;
+  overflow: initial;
+  .dialog-img {
+    width: 100%;
+    height: 100%;
+    &.dialog-img-animation {
+      animation: dialogImg 0.5s forwards linear;
+      @keyframes dialogImg {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          transform: translate(-39%, -73%) scale(0.2);
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
 </style>

pages/claimCloudPhone/components/bargainingAssistance.vue

@@ -2,9 +2,8 @@
   <div class="bargaining-assistance">
     <!-- 邀请人提示 -->
     <div class="inviter-tips" v-if="+type">
-      <div>恭喜您选到喜欢的云手机</div>
-      <div>您一定要免费带走</div>
-      好友注册获得助力 好友下单加速助力
+      <img src="@/assets/image/claimCloudPhone/inviter-tips.png" alt="" />
+      <div>好友注册获得助力 好友下单加速助力</div>
     </div>
     <!-- 被邀请人提示 -->
     <div v-else class="invitee-tips">
@@ -126,7 +125,14 @@
       <div class="barrage"></div>
     </template>
 
-    <div class="rule" @click="ruleVisible = true" v-if="+type">规则</div>
+    <div
+      class="rule"
+      @click="ruleVisible = true"
+      v-if="+type"
+      :style="ruleStyle"
+    >
+      规则
+    </div>
     <!-- 规则弹窗 -->
     <van-dialog v-model="ruleVisible" :showConfirmButton="false">
       <div class="rule-title">活动规则</div>
@@ -378,10 +384,12 @@ export default {
   computed: {
     time() {
       const { validityPeriodTimeStamp = 0 } = this.info;
-      let time= null
-      time = validityPeriodTimeStamp ? validityPeriodTimeStamp - this.systemTime * 1000 : 0
-      time = +this.type === 7 ? 0 : time
-      return time
+      let time = null;
+      time = validityPeriodTimeStamp
+        ? validityPeriodTimeStamp - this.systemTime * 1000
+        : 0;
+      time = +this.type === 7 ? 0 : time;
+      return time;
     },
     btnName() {
       let name = null;
@@ -396,6 +404,19 @@ export default {
       }
       return name;
     },
+    ruleStyle() {
+      let obj = {};
+      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      const isAndroid = this.$userAgent.isAndroid;
+      const isWx = this.$userAgent.isWx;
+
+      if ((isApp && isAndroid) || isWx) {
+        obj.top = '10%';
+      } else {
+        obj.top = '18%';
+      }
+      return obj;
+    },
   },
   methods: {
     // 轮播活动参加的人的信息
@@ -885,16 +906,21 @@ export default {
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
   }
   .inviter-tips {
-    font-weight: 400;
-    font-size: 12px;
-    color: #ffffff;
-    line-height: 17px;
-    text-align: center;
-    font-style: normal;
-    margin-bottom: 14px;
+    & > img {
+      height: 60px;
+      display: block;
+      margin: 0 auto;
+    }
     & > div {
-      font-size: 26px;
-      line-height: 30px;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: 400;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 17px;
+      text-align: center;
+      font-style: normal;
+      margin-top: 6px;
+      margin-bottom: 14px;
     }
   }
   .invitee-tips {
@@ -946,12 +972,13 @@ export default {
     }
     .package-price {
       font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
+      font-weight: bold;
+      color: #c70b0b;
       height: 120px;
       font-weight: normal;
       box-sizing: border-box;
       padding-top: 30px;
-      font-size: 30px;
-      color: #c70b0b;
+      font-size: 60px;
       line-height: 62px;
       text-align: center;
       font-style: normal;
@@ -963,7 +990,7 @@ export default {
       border-radius: 20px;
       margin-top: -20px;
       span {
-        font-size: 20px;
+        font-size: 30px;
       }
     }
     .package-progress {
@@ -973,11 +1000,12 @@ export default {
       font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
       text-align: center;
       font-size: 16px;
-      font-weight: bold;
       color: #000000;
-      line-height: 22px;
       font-style: normal;
       margin-bottom: 24px;
+      font-weight: 500;
+      line-height: 22px;
+      font-style: normal;
       span {
         color: #f04646;
       }
@@ -1238,14 +1266,13 @@ export default {
 
   .rule {
     position: fixed;
-    top: 12.5%;
+    z-index: 0;
     right: 0;
     width: 40px;
     height: 20px;
     line-height: 20px;
     background: #f04646;
     border-radius: 17px 0px 0px 17px;
-    z-index: 2;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 12px;
@@ -1277,7 +1304,6 @@ export default {
     font-size: 14px;
     color: #751d13;
     line-height: 16px;
-    text-align: left;
     font-style: normal;
     overflow-y: auto;
   }
@@ -1309,21 +1335,24 @@ export default {
   }
 
   .bargaining-amount {
-    height: 234px;
+    height: 300px;
     background: url('~/assets/image/claimCloudPhone/bargaining-amount-img.png')
       no-repeat 0 20px;
     padding-top: 30px;
     box-sizing: border-box;
-    background-size: 100% 210px;
+    background-size: 100% auto;
     .bargaining-amount-text {
       font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
       font-weight: bold;
       font-size: 24px;
       color: #ffffff;
+      line-height: 20px;
       text-align: center;
       font-style: normal;
       span {
         color: #ff0000;
+        font-size: 35px;
+        color: #fad539;
       }
     }
   }
@@ -1373,6 +1402,8 @@ export default {
 
   .bargaining-success {
     height: 378px;
+    width: 289px;
+    margin: 0 auto;
     background: url('~/assets/image/claimCloudPhone/successful-bargaining-img.png')
       no-repeat 0 0;
     background-size: 100% 100%;
@@ -1381,21 +1412,22 @@ export default {
     .bargaining-success-title {
       margin-top: 24px;
       font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      text-align: center;
+      font-style: normal;
       font-weight: bold;
       font-size: 28px;
       color: #fdf9c8;
       line-height: 38px;
-      text-align: center;
-      font-style: normal;
     }
     .bargaining-success-tips {
       font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-      width: 165px;
-      font-weight: bold;
+      font-weight: 500;
       font-size: 12px;
       color: #ffffff;
       line-height: 17px;
       text-align: center;
+      font-style: normal;
+      width: 160px;
       margin: 0 auto;
     }
 
@@ -1429,6 +1461,8 @@ export default {
 
   .expire {
     height: 378px;
+    width: 289px;
+    margin: 0 auto;
     background: url('~/assets/image/claimCloudPhone/expire-img.png') no-repeat 0
       0;
     background-size: 100% 100%;

pages/claimCloudPhone/components/layout.vue

@@ -41,6 +41,10 @@ export default {
     forceShowNavBar: {
       type: Boolean,
       default: false
+    },
+    padding: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -55,6 +59,7 @@ export default {
         backgroundSize: this.bgHeight ? `100% ${this.bgHeight}px` : '',
         backgroundColor: this.bgColor,
         backgroundPosition: '0 0',
+        padding: this.padding ? this.padding : '16px'
       };
     },
     isShowNavBar() {
@@ -91,7 +96,6 @@ export default {
   .layout-container {
     flex: 1;
     overflow-y: auto;
-    padding: 16px;
   }
 
   ::v-deep .van-nav-bar__arrow {

pages/claimCloudPhone/components/setMealItem.vue

@@ -34,7 +34,7 @@
             <span>￥</span
             >{{ item.originalPrice ? item.originalPrice : item.actualPrice }}
           </div>
-          <div @click="add(item)">
+          <div @click="add(item)" :class="{ mark: type }">
             {{ type ? '0元领' : '新增云手机' }}
           </div>
         </div>
@@ -139,7 +139,7 @@ export default {
     margin-top: 12px;
   }
   .set-meal-item_content {
-    max-height: 130px;
+    max-height: 142px;
     overflow: hidden;
     &.expand-open {
       max-height: none;
@@ -153,7 +153,8 @@ export default {
       .set-meal-item_content-item_left {
         display: flex;
         align-items: center;
-        font-weight: bold;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
         font-size: 14px;
         color: #6d2b12;
         line-height: 20px;
@@ -204,6 +205,8 @@ export default {
           align-items: center;
           margin-right: 5px;
           text-decoration: line-through;
+          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+          font-weight: bold;
         }
         & > div:last-of-type {
           height: 30px;
@@ -216,13 +219,20 @@ export default {
           line-height: 18px;
           text-align: left;
           font-style: normal;
+          &.mark {
+            height: 42px;
+            line-height: 42px;
+            font-size: 24px;
+            padding: 0 32px;
+          }
         }
       }
     }
   }
 
   .set-meal-item-title {
-    font-weight: bold;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
     font-size: 18px;
     color: #6d2b12;
     line-height: 20px;
@@ -239,7 +249,7 @@ export default {
     line-height: 16px;
     text-align: center;
     font-style: normal;
-    margin-top: 16px;
+    margin-top: 10px;
   }
 }
 </style>

pages/claimCloudPhone/zeroYuanClaim.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout :isNavBar="isNavBar">
+  <layout :isNavBar="isNavBar" padding="24px 16px 16px">
     <div class="zero-yuan-claim">
       <img
         class="zero-yuan-claim-title"
@@ -68,6 +68,7 @@ export default {
     height: 40px;
     margin: 0 auto;
     display: block;
+  
   }
 }
 </style>