Merge branch 'develop' of http://192.168.32.253:3000/Software/android-cloud-H5 into develop

pages/activity/lottery/index.vue

@@ -23,8 +23,8 @@
         <div :class="selMealId===mealId ? 'coupon-1 active' : 'coupon-1'" @click="selMealId=mealId">
           <img v-if="selMealId===mealId" class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
           <img v-else class="coupon-select-icon" src="~/assets/image/activity/lottery/unselect-icon.png" alt="">
-          <div class="coupon-title"><span class="txt2">{{actualPrice}}</span><span>会员</span><span class="txt3">（{{title}}）</span></div>
-          <div class="txt4">年卡（已获得）</div>
+          <div class="coupon-title"><span class="txt2">{{actualPrice}}</span><span>年卡会员</span></div>
+          <div class="txt4">12个月 30H/月 不使用不计时</div>
           <img class="w253h73" src="~/assets/image/activity/lottery/coupon-1.png" alt="">
         </div>
         <div v-for="item in mealList" :key="item.id" :class="selMealId===item.id ? 'coupon-2 active' : 'coupon-2'" @click="selMealId=item.id;makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡')">
@@ -65,22 +65,45 @@
         </div>
       </div>
     </van-popup>
-    <van-popup v-model="showRule" closeable close-icon-position="top-right" round>
-      <div class="popup-view popup-view-leave" style="text-align: left;">
-        <div class="txt1">购买协议</div>
-        <div class="txt7">时长包使用规则</div>
-        <div class="txt6"> 年卡特惠云手机，按需补充时长包</div>
-        <div class="txt6">有效时间：时长用完前一直有效，支持跨月。</div>
-        <div class="txt6">可用范围：可续时长的机型</div>
-        <div class="txt6">生效方式：立即生效</div>
-        <div class="txt6">退订说明：立即生效产品，不支持退订</div>
-        <div class="txt7">产品说明</div>
-        <div class="txt6">1、生效方式：时长补充包订购后立即生效，直至时长用完则失效，用户可重复订购。</div>
-        <div class="txt6">2、时长使用顺序：优先使用年卡特惠包时长，年卡特惠包时长耗尽，自动使用时长包时长。</div>
-        <div class="txt6">3、年卡特惠包合约到期后，如时长补充包仍有时长，年卡特惠包所属云手机可继续使用至时长用尽。</div>
-        <div class="txt7">温馨提示：</div>
-        <div class="txt6">1、请您理解：通过任何不正当手段参与活动，如借助非自然流量/外挂工具；利用技术漏洞，恶意退款，批量注册账号、买号等搅乱平台管理秩序的行为，臂云科技有权限制/取消用户的活动资格，不予发放/撤销相关交易及福利内容。</div>
-        <div class="txt6">2、如有疑问请联系双子星APP客服咨询。</div>
+    <van-popup v-model="showRule" style="background: transparent;padding-top: 14px;">
+      <div class="popup-view-rule">
+        <div class="popup-view-rule-box">
+          <div class="popup-view-rule-title">购买协议</div>
+          <div class="h330">
+            <div class="txt7"> 参与活动前，请仔细阅读购买协议，特别是产品说明和注意事项。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则约束。</div>
+            <div class="txt8 mt14 fw500">年卡特惠包 </div>
+            <div class="txt9 mt5">每月自动续，时长不用愁</div>
+            <div class="txt8 mt5 fw500">360H 每月30H</div>
+            <div class="txt9 mt5">按实际使用计时，VIP机型可用，立即生效</div>
+            <div class="txt9 mt14"><span class="txt7">有效时间：</span>按实际使用云手机的时间计时，不使用不计时；每月30H，当月时长不跨月；12个月，每月自动续</div>
+            <div class="txt9"><span class="txt7">可用范围：</span>VIP机型</div>
+            <div class="txt9"><span class="txt7">生效方式：</span>立即生效</div>
+            <div class="txt9"><span class="txt7">订购次数：</span>不可重复订购</div>
+            <div class="txt9"><span class="txt7">退订说明：</span>特惠产品，不支持退订</div>
+            <div class="txt9 mt14">产品说明：</div>
+            <div class="txt7">1、产品内容：本产品为臂云科技旗下双子星VIP机型新人特惠年包，包含每月360H的VIP机型云手机使用时长，连续12个月每月自动续30H时长；按实际使用云手机的时间计时，不使用不计时。2、生效时间：订购扣费后立即生效；</div>
+            <div class="txt7">2、生效时间：订购扣费后立即生效；</div>
+            <div class="txt7">3、注意事项：</div>
+            <div class="txt7">（1）本产品合约期12个月，自生效当月起每月自动续30H时长；</div>
+            <div class="txt7">（2）合约到期后需用户另外购买时长；</div>
+            <div class="txt7">（3）合约到期后，年卡特惠包剩余时长自动失效；</div>
+            <div class="txt7">（4）合约到期后，另外续费时长包所得的时长仍有效，云机可继续使用；</div>
+            <div class="txt7">（5）年卡特惠包云手机与普通包月云手机计时逻辑不同，两种云手机时长不可叠加，若另外订购普通包月云手机将获得一台新云手机。</div>
+            <div class="txt8 mt14">温馨提示：</div>
+            <div class="txt7">1、请您理解：通过任何不正当手段参与活动，如借助非自然流量/外挂工具；利用技术漏洞，恶意退款，批量注册账号、买号等搅乱平台管理秩序的行为，臂云科技有权限制/取消用户的活动资格，不予发放/</div>
+            <div class="txt8 mt5 fw500" style="color: #EC6250;">时长包使用规则</div>
+            <div class="txt7 mt5">年卡特惠云手机，按需补充时长包</div>
+            <div class="txt7">有效时间：<span class="txt10">时长用完前一直有效，支持跨月。</span></div>
+            <div class="txt7">可用范围：<span class="txt10">可续时长的机型</span></div>
+            <div class="txt7">生效方式：<span class="txt10">立即生效</span></div>
+            <div class="txt7">退订说明：<span class="txt10">立即生效产品，不支持退订</span></div>
+            <div class="txt7 mt14">
+              产品说明<br />1、生效方式：时长补充包订购后立即生效，直至时长用完则失效，用户可重复订购。
+              2、时长使用顺序：优先使用年卡特惠包时长，年卡特惠包时长耗尽，自动使用时长包时长。<br />3、年卡特惠包合约到期后，如时长补充包仍有时长，年卡特惠包所属云手机可继续使用至时长用尽。
+            </div>
+          </div>
+          <img class="w304h62" src="~/assets/image/activity/lottery/buy-rule-icon.png" alt="" @click="showRule=false">
+        </div>
       </div>
     </van-popup>
   </div>
@@ -388,6 +411,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.fw500 {
+  font-weight: 500;
+}
+.mt5 {
+  margin-top: 5px;
+}
+.mt14 {
+  margin-top: 14px;
+}
 .lottery-container {
   background-color: #bbe5f2;
   background-image: url('../../../assets/image/activity/lottery/bg.png');
@@ -492,6 +524,48 @@ export default {
   background: #ffffff;
   text-align: center;
 }
+
+.popup-view-rule {
+  width: 324px;
+  height: 452px;
+  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  background: linear-gradient(
+    180deg,
+    rgba(254, 178, 119, 1),
+    rgba(255, 91, 46, 1)
+  );
+  position: relative;
+  border-radius: 18px;
+  padding: 6px;
+}
+.popup-view-rule-box {
+  width: 312px;
+  height: 440px;
+  background: linear-gradient(181deg, #fffffe 0%, #f7f2e5 100%);
+  border-radius: 18px;
+  box-sizing: border-box;
+  padding-top: 38px;
+}
+.popup-view-rule-title {
+  width: 220px;
+  height: 54px;
+  background-image: url('../../../assets/image/activity/lottery/buy-rule-title.png');
+  background-size: 100% 100%;
+  position: absolute;
+  top: -14px;
+  left: 52px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fffefc;
+  line-height: 54px;
+  text-align: center;
+}
+.h330 {
+  height: 335px;
+  overflow-y: auto;
+  padding: 0 16px;
+}
 .txt1 {
   font-size: 18px;
   font-weight: 600;
@@ -700,8 +774,28 @@ export default {
   margin-top: 15px;
 }
 .txt7 {
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 10px;
+  font-size: 13px;
+  line-height: 19px;
+  color: #666666;
+  text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+}
+.txt8 {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 19px;
+  color: #333333;
+  text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+}
+.txt9 {
+  font-size: 13px;
+  color: #333333;
+  line-height: 19px;
+  text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+}
+.txt10 {
+  font-size: 13px;
+  line-height: 19px;
+  color: #333;
+  text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
 }
 </style>