123

src/components/question/prize.vue

@@ -1,109 +1,185 @@
 <template>
-  <div class="prize" :class="{mobilePrize:isMobile}">
-    <h1 v-if="isMobile">幸运大转盘</h1>
-    <LuckyWheel
-      class="lw"
-      ref="LuckyWheel"
-      width="340px"
-      height="340px"
-      :blocks="blocks"
-      :prizes="prizes"
-      :buttons="buttons"
-      @start="startCallBack"
-       @end="endCallBack"
-    />
-    <div class="bubble">
-      <img class="btip" :src="require('@/assets/images/question/tipdialog.png')" alt="">
-      <div class="b-title">
-        本轮奖品详情
+  <div :class="{wrapper:isMobile}">
+    <div class="prize" v-if="!isMobile">
+      <LuckyWheel
+        class="lw"
+        ref="LuckyWheel"
+        width="340px"
+        height="340px"
+        :blocks="blocks"
+        :prizes="prizes"
+        :buttons="buttons"
+        @start="startCallBack"
+        @end="endCallBack"
+      />
+      <div class="bubble">
+        <img
+          class="btip"
+          :src="require('@/assets/images/question/tipdialog.png')"
+          alt=""
+        />
+        <div class="b-title">本轮奖品详情</div>
+        <ul>
+          <li v-for="(item, i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
+        </ul>
+        <div class="desc">
+          <p>
+            请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
+          </p>
+        </div>
       </div>
-      <ul>
-        <li v-for="(item,i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
-      </ul>
-      <div class="desc">
-        <p>请保存当前二维码，可到现场领取精美礼品一份<br/>活动截止时间：2021年12月31日</p>
+
+      <div class="lingjiang" v-show="lingjiang">
+        <div class="ljcon">
+          <img
+            @click="lingjiang = false"
+            class="qclose"
+            :src="require('@/assets/images/question/close.png')"
+            alt=""
+          />
+          <img
+            class="lbg"
+            :src="require('@/assets/images/question/lingjiang_bg.png')"
+            alt=""
+          />
+          <div class="lbody">
+            <div class="ltitle">领取奖励</div>
+            <img
+              class="qrcode"
+              :src="require('@/assets/images/question/qrcode.png')"
+              alt=""
+            />
+            <p>{{ currentPrize.title }}</p>
+            <div class="ldesc">
+              请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div class="lingjiang" v-show="lingjiang">
-      <div class="ljcon">
-         <img
-          @click="lingjiang=false"
+    <div class="prize mobilePrize" v-if="isMobile">
+      <h1 v-if="isMobile">幸运大转盘</h1>
+      <LuckyWheel
+        class="lw"
+        ref="LuckyWheel"
+        width="340px"
+        height="340px"
+        :blocks="blocks"
+        :prizes="prizes"
+        :buttons="buttons"
+        @start="startCallBack"
+        @end="endCallBack"
+      />
+      <div class="bubble">
+        <!-- <img
+        class="btip"
+        :src="require('@/assets/images/question/tipdialog.png')"
+        alt=""
+      /> -->
+        <div class="b-title">
+          <div class="txt">本轮奖品详情</div>
+        </div>
+        <ul>
+          <li v-for="(item, i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
+        </ul>
+        <div class="desc">
+          <p>
+            请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
+          </p>
+        </div>
+      </div>
+
+      <div class="lingjiang" v-show="lingjiang">
+        <div class="ljcon">
+          <img
+            @click="lingjiang = false"
             class="qclose"
             :src="require('@/assets/images/question/close.png')"
             alt=""
           />
-        <img class="lbg" :src="require('@/assets/images/question/lingjiang_bg.png')" alt="">
-        <div class="lbody">
-          <div class="ltitle">领取奖励</div>
-          <img class="qrcode" :src="require('@/assets/images/question/qrcode.png')" alt="">
-          <p>{{currentPrize.title}}</p>
-          <div class="ldesc">请保存当前二维码，可到现场领取精美礼品一份<br/>活动截止时间：2021年12月31日</div>
+          <img
+            class="lbg"
+            :src="require('@/assets/images/question/lingjiang_bg.png')"
+            alt=""
+          />
+          <div class="lbody">
+            <div class="ltitle">领取奖励</div>
+            <img
+              class="qrcode"
+              :src="require('@/assets/images/question/qrcode.png')"
+              alt=""
+            />
+            <p>{{ currentPrize.title }}</p>
+            <div class="ldesc">
+              请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-import browser from '@/util/browser'
+import browser from "@/util/browser";
 // 设置奖品
-const prizes = []
+const prizes = [];
 let data = [
-  '感谢参与',
-  '一等奖',
-  '二等奖',
-  '三等奖',
-  '一等奖',
-  '二等奖',
-  '三等奖',
-  '一等奖',
-  '二等奖',
-  '三等奖',
-  '二等奖',
-  '三等奖'
-]
+  "感谢参与",
+  "一等奖",
+  "二等奖",
+  "三等奖",
+  "一等奖",
+  "二等奖",
+  "三等奖",
+  "一等奖",
+  "二等奖",
+  "三等奖",
+  "二等奖",
+  "三等奖",
+];
 data.forEach((item, index) => {
   prizes.push({
     title: item,
     fonts: [
       {
-        fontColor: index % 2 ? '#ffffff' : '#311B04',
+        fontColor: index % 2 ? "#ffffff" : "#311B04",
         text: item,
-        lengthLimit: '20',
-        fontSize: 12
-      }
-    ]
-  })
-})
+        lengthLimit: "20",
+        fontSize: 12,
+      },
+    ],
+  });
+});
 export default {
-  data () {
+  data() {
     return {
       blocks: [
         {
-          padding: '40px',
+          padding: "40px",
           imgs: [
             {
-              src: require('@/assets/images/question/prize_bigbg.png'),
-              width: '100%',
-              rotate: false
-            }
-          ]
+              src: require("@/assets/images/question/prize_bigbg.png"),
+              width: "100%",
+              rotate: false,
+            },
+          ],
         },
         {
-          padding: '20px',
+          padding: "20px",
           imgs: [
             {
-              src: require('@/assets/images/question/prize_bg.png'),
-              width: '100%',
-              rotate: true
-            }
-          ]
-        }
+              src: require("@/assets/images/question/prize_bg.png"),
+              width: "100%",
+              rotate: true,
+            },
+          ],
+        },
       ],
       defaultStyle: {},
       prizes,
       defaultConfig: {
-        stopRange: 0
+        stopRange: 0,
       },
       currentPrize: {},
       lingjiang: false,
@@ -113,43 +189,44 @@ export default {
             {
               fontSize: 18,
               fontWeight: 800,
-              text: '开始',
+              text: "开始",
               top: -12,
-              fontColor: '#54320B'
-            }
+              fontColor: "#54320B",
+            },
           ],
-          radius: '50%',
+          radius: "50%",
           pointer: false,
           imgs: [
             {
-              src: require('@/assets/images/question/pointer.png'),
+              src: require("@/assets/images/question/pointer.png"),
               top: -48,
-              width: 64
-            }
-          ]
-        }
+              width: 64,
+            },
+          ],
+        },
       ],
       isMobile: browser.mobile,
-    }
+    };
   },
   methods: {
-    startCallBack () {
-      this.$refs.LuckyWheel.play()
+    startCallBack() {
+      this.$refs.LuckyWheel.play();
       setTimeout(() => {
-        let stop = (Math.random() * 12) >> 0
-        console.log(data[stop])
-        this.$refs.LuckyWheel.stop(stop)
-      }, 1000)
+        let stop = (Math.random() * 12) >> 0;
+        console.log(data[stop]);
+        this.$refs.LuckyWheel.stop(stop);
+      }, 1000);
     },
-    endCallBack (prize) {
-      this.currentPrize = prize
-      this.lingjiang = true
-    }
-  }
-}
+    endCallBack(prize) {
+      this.currentPrize = prize;
+      this.lingjiang = true;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
+
 .prize {
   margin: 0 auto;
   position: relative;
@@ -170,8 +247,8 @@ export default {
     background-color: #fff;
     border-radius: 10px;
     margin-right: 40px;
-    box-shadow: 0 0 15px rgba(0,0,0,0.5);
-    @wh:30px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    @wh: 30px;
     &:after {
       content: "";
       position: absolute;
@@ -183,88 +260,168 @@ export default {
       border-right: @wh solid transparent;
       color: #fff;
     }
-    .btip{
+    .btip {
       position: absolute;
       bottom: -50px;
       right: -30px;
       pointer-events: none;
     }
-    .b-title{
-      background-color: #311B04;
+    .b-title {
+      background-color: #311b04;
       font-size: 18px;
       font-weight: bold;
-      border-radius: 9px 9px 0  0;
-      padding:14px 0;
+      border-radius: 9px 9px 0 0;
+      padding: 14px 0;
       width: 100%;
-      box-shadow: 0 0 15px rgba(0,0,0,0.5);
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
     }
-    >ul{
+    > ul {
       width: 100%;
       height: 240px;
       overflow-y: auto;
-      >li{
-        color: #FA3800;
+      > li {
+        color: #fa3800;
         line-height: 1.5;
         margin: 8px 0;
       }
     }
-    .desc{
+    .desc {
       font-size: 12px;
-      color: #311B04;
+      color: #311b04;
       line-height: 1.5;
       margin-top: 14px;
       width: 100%;
     }
   }
-  .lingjiang{
+  .lingjiang {
     position: absolute;
     left: 0;
     top: 0;
-    background-color: rgba(0,0,0,0.7);
+    background-color: rgba(0, 0, 0, 0.7);
     width: 100%;
     height: 100%;
-    .ljcon{
+    .ljcon {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       .qclose {
-          position: absolute;
-          right: 30px;
-          top: 24px;
-          cursor: pointer;
-          z-index: 999;
-        }
-      .lbody{
+        position: absolute;
+        right: 30px;
+        top: 24px;
+        cursor: pointer;
+        z-index: 999;
+      }
+      .lbody {
         position: absolute;
         top: 42%;
         width: 80%;
         left: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
         text-align: center;
 
-        .ltitle{
+        .ltitle {
           font-size: 24px;
           font-weight: bold;
         }
-        .qrcode{
+        .qrcode {
           margin-top: 10px;
         }
-        >p{
+        > p {
           margin: 10px 0 20px;
           font-weight: bold;
         }
-        .ldesc{
+        .ldesc {
           font-size: 12px;
-          color: #311B04;
+          color: #311b04;
           line-height: 1.5;
         }
       }
     }
   }
 }
+// 移动端
 
-.mobilePrize {
 
+.wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.mobilePrize {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  > h1 {
+    font-size: 24px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    line-height: 31px;
+    margin-top: 18px;
+  }
+  .lw {
+    width: 88% !important;
+    // overflow-x:auto!important;
+    > canvas {
+      width: 200% !important;
+    }
+  }
+  .bubble {
+    width: 80%;
+    margin: 0 auto;
+    margin-top: -180px;
+    z-index: -1;
+    height: auto;
+    margin-bottom: 10px;
+    .b-title {
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0.5),
+        rgba(250, 56, 0, 0.6),
+        rgba(250, 56, 0, 0.8),
+        rgba(250, 56, 0, 0.6),
+        rgba(255, 255, 255, 0.5)
+      );
+      height: 200px;
+      position: relative;
+      padding: 0;
+      box-shadow: none;
+      > .txt {
+        position: absolute;
+        bottom: 14px;
+        text-align: center;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #311b04;
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+      }
+    }
+    &::after {
+      display: none;
+    }
+    > ul {
+      width: 186px;
+      height: 96px;
+      overflow-y: auto;
+      margin: 0 auto;
+      background: rgba(255, 255, 255, 1);
+      > li {
+        font-size: 16px;
+      }
+    }
+    .desc {
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      line-height: 18px;
+      color: #311b04;
+    }
+  }
 }
+@media screen and (max-width: 320px) {
+
+ }
 </style>