5.24

src/components/activity/liuyi.vue

 <template>
-  <div class="ly-activity-page" :style="{backgroundImage: `url(${Bgimg})`}">
+  <div class="ly-activity-page" >
+    <img class="bg" :src="Bgimg" alt="">
     <div class="luckBox">
       <img :class="{swin:playFlag,swinThirty:playFlag3}" :src="radius" alt>
       <img class="point" :src="point" alt>
@@ -20,6 +21,27 @@
         <p>一次</p>
       </div>
     </div>
+    <div class="textBox1">
+      <p>你有2次抽奖机会，100%中奖哦！</p>
+      <p>已有234578人领取了礼物</p>
+    </div>
+    <div class="textBox2">
+      <p>1. 活动截止时间：6月3日23:59:59；</p>
+      <p>2. 活动期间有2次抽奖机会，每次都是100%中奖率；</p>
+      <p>3. 抽中实体礼品的用户，请至【我的订单】点击所获礼品，填写收货地址领取礼品，领取有效期为30天，过期则视为自动放弃礼品；</p>
+      <p>4. 100首精选童谣、迪士尼英文动漫为电子资源，请抽中电子资源的用户按照抽中后指引去领取下载；</p>
+      <p>5. 奖学金优惠券有效期为3天，请抽中优惠券的用户尽量在3天内使用，过期作废，优惠券适用于报名21天训练营；</p>
+      <p>6. 活动最终解释权归唱唱启蒙英语所有。</p>
+    </div>
+    <van-popup v-model="show" position="top" :overlayStyle='overlay' :overlay="true">
+      <img class="close" @click="closeFn" :src="close" alt="">
+      <div class="content">
+        <img class="main" :src="lydialog" alt="">
+        <div v-if="pointStatus==4" class="price"><span>10</span>元</div>
+        <div v-if="pointStatus==3" class="price"><span>30</span>元</div>
+        <div class="btn">立即使用</div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -27,8 +49,11 @@
 import Bgimg from "../../assets/activity/img_bgLY.png";
 import radius from "../../assets/activity/radius.png";
 import point from "../../assets/activity/point.png";
+import close from "../../assets/activity/close.png";
+import lydialog from "../../assets/activity/lydialog.png";
+
 import { getUserIntegralApi, getUserIntegralListApi } from "../../service/api";
-import { List } from "vant";
+import { Notify,Popup} from "vant";
 export default {
   name: "index",
   data() {
@@ -36,13 +61,24 @@ export default {
       Bgimg: Bgimg,
       radius: radius,
       point: point,
+      close:close,
+      lydialog:lydialog,
+      overlay:{
+       opacity: 0.97
+      },
+      show:true,
       playFlag:false,
       playFlag3:false,
       pointStatus:'1',
     };
   },
-  components: {},
+  components: {
+    [Popup.name]:Popup
+  },
   methods: {
+    closeFn(){
+      this.show=false;
+    },
     showDialog(){},
     initPage(){},
     begin(){
@@ -79,14 +115,6 @@ export default {
     -webkit-transform: rotate(3780deg);
   }
 }
-@keyframes ten {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(3780deg);
-  }
-}
 @-webkit-keyframes thirty {
   from {
     -webkit-transform: rotate(0deg);
@@ -95,14 +123,6 @@ export default {
     -webkit-transform: rotate(3780deg);
   }
 }
-@keyframes thirty {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(3600deg);
-  }
-}
 .swin {
   -webkit-animation: ten 4s ease ;
   animation: ten 4s ease ;
@@ -116,29 +136,70 @@ export default {
   -webkit-animation-fill-mode:forwards;
 }
 .ly-activity-page {
-  background-size: 100%;
-  padding-top: 203 * @toVw;
+  background: #FFF5E5;
+  // padding-top: 203 * @toVw;
+  .bg{width: 100%;}
   .luckBox {
+    width: 100%;
+    position: absolute;
+    top: 203 * @toVw;
     text-align: center;
     img {
       width: 320 * @toVw;
     }
     .point {
       position: absolute;
-      top: 303 * @toVw;
+      top: 103 * @toVw;
       width: 98 * @toVw;
       // height: 102 * @toVw;
       left: 139 * @toVw;
     }
     .text {
       position: absolute;
-      top: 333 * @toVw;
+      top: 133 * @toVw;
       width: 98 * @toVw;
       left: 139 * @toVw;
       font-size: 20 * @toVw;
       color: white;
     }
   }
+  .textBox1{
+    color: #B4513E;
+    font-size: 14 * @toVw;
+    position: absolute;
+    top: 533 * @toVw;
+    width: 100%;
+    text-align: center;
+  }
+  .textBox2{
+    position: absolute;
+    top:669 * @toVw ;
+    text-align: left;
+    width: 100%;
+    font-size: 12* @toVw;
+    color: #424242;
+    p{width: 277* @toVw;
+    margin-bottom: 16* @toVw;
+    line-height: 18* @toVw;
+    }
+  }
+  .van-popup{
+    background: transparent;
+    .close{position: absolute;right:40* @toVw;width: 25* @toVw;top: 70* @toVw;}
+    .main{width: 100%;}
+    .price{position: absolute;
+    left: 150* @toVw;top: 270* @toVw;
+    color: #EB4E2C;
+    font-weight: bold;
+    span{font-size: 50* @toVw;}
+    .btn{display: inline-block;
+      width: 205* @toVw;
+      height: 95* @toVw;
+      background: #F9EA7E;
+      color: #EB4E2C;
+      }
+    }
+  }
 }
 </style>
 

src/components/star/starRank.vue

@@ -205,7 +205,7 @@ export default {
     }
   }
   .item {
-    display: flex;
+    display: -webkit-flex;
     justify-content: space-between;
     border-bottom: 1px solid #e2e2e2;
     padding: 9 * @toVw 2 * @toVw;