Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/gaoxinqu_tangjia

build/webpack.base.conf.js

@@ -11,14 +11,14 @@ function resolve (dir) {
 }
 
 const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
+  // test: /\.(js|vue)$/,
+  // loader: 'eslint-loader',
+  // enforce: 'pre',
+  // include: [resolve('src'), resolve('test')],
+  // options: {
+  //   formatter: require('eslint-friendly-formatter'),
+  //   emitWarning: !config.dev.showEslintErrorsInOverlay
+  // }
 })
 
 module.exports = {

package.json

@@ -18,7 +18,7 @@
     "jquery": "^2.1.1",
     "jsonp": "^0.2.1",
     "less": "^4.1.1",
-    "less-loader": "^6.0.0",
+    "less-loader": "^5.0.0",
     "vue": "^2.5.2",
     "vue-concise-slider": "^3.3.8",
     "vue-luck-draw": "^3.4.6",

src/components/question/datiing.vue

@@ -1,216 +1,299 @@
 <template>
-  <div class="datiing">
-    <div class="jishi">
-      <div class="bar">
-        <div
-          :style="{ width: (1 - current / daojishi) * 100 + '%' }"
-          class="activeLine"
-        ></div>
-        <div
-          :style="{ left: (1 - current / daojishi) * 100 + '%' }"
-          class="dot"
-        ></div>
+  <div>
+    <div class="datiing" v-if="!isMobile">
+      <div class="jishi">
+        <div class="bar">
+          <div
+            :style="{ width: (1 - current / daojishi) * 100 + '%' }"
+            class="activeLine"
+          ></div>
+          <div
+            :style="{ left: (1 - current / daojishi) * 100 + '%' }"
+            class="dot"
+          ></div>
+        </div>
+        <span class="time">00:{{ fixNum }}</span>
       </div>
-      <span class="time">00:{{ fixNum }}</span>
-    </div>
-    <div class="dcon" v-if="tiku.length > 0 && status == '答题中'">
-      <p>{{ currentIdx + 1 + "、" + currentTimu.title }}</p>
-      <div class="qlist">
-        <div class="qline"></div>
-        <ul>
-          <li
-            :class="{ active: active == item.id }"
-            @click="active = item.id"
-            v-for="(item, i) in currentTimu.answer"
-            :key="i"
-          >
-            <span>{{ item.id }}、{{ item.txt }}</span>
-          </li>
-        </ul>
-        <span>第 {{ currentIdx + 1 }} 题 / 共 {{ tiku.length }} 题</span>
+      <div class="dcon" v-if="tiku.length > 0 && status == '答题中'">
+        <p>{{ currentIdx + 1 + "、" + currentTimu.title }}</p>
+        <div class="qlist">
+          <div class="qline"></div>
+          <ul>
+            <li
+              :class="{ active: active == item.id }"
+              @click="active = item.id"
+              v-for="(item, i) in currentTimu.answer"
+              :key="i"
+            >
+              <span>{{ item.id }}、{{ item.txt }}</span>
+            </li>
+          </ul>
+          <span>第 {{ currentIdx + 1 }} 题 / 共 {{ tiku.length }} 题</span>
+        </div>
       </div>
-    </div>
 
-    <div class="tipscon" v-else>
-      <img
-        :src="
-          require(`@/assets/images/question/${
-            status == '答题完成' ? 'success' : 'error'
-          }.png`)
-        "
-        alt=""
-      />
-      <div v-if="tips[status]">
-        <p>{{ tips[status].title }}</p>
-        <span>{{ tips[status].desc }}</span>
+      <div class="tipscon" v-else>
+        <img
+          :src="
+            require(`@/assets/images/question/${
+              status == '答题完成' ? 'success' : 'error'
+            }.png`)
+          "
+          alt=""
+        />
+        <div v-if="tips[status]">
+          <p>{{ tips[status].title }}</p>
+          <span>{{ tips[status].desc }}</span>
+        </div>
       </div>
-    </div>
 
-    <template v-if="status == '答题中'">
-      <div class="qbtn" v-if="currentIdx < 9" @click="next">
-        <span>下一题</span>
+      <template v-if="status == '答题中'">
+        <div class="qbtn" v-if="currentIdx < 9" @click="next">
+          <span>下一题</span>
+        </div>
+        <div class="qbtn primary" @click="next" v-else>
+          <span>提交</span>
+        </div>
+      </template>
+      <div
+        class="qbtn"
+        @click="requestion"
+        v-else-if="status == '答题错误' || status == '答题超时'"
+      >
+        <span>重新答题</span>
       </div>
-      <div class="qbtn primary" @click="next" v-else>
-        <span>提交</span>
+
+      <div class="datifinish" v-else>
+        <div class="qbtn" @click="requestion">
+          <span>分享好友</span>
+        </div>
+        <div class="qbtn primary" @click="lingjiang">
+          <span>领取奖励</span>
+        </div>
+        <div class="qbtn" @click="requestion">
+          <span>继续答题</span>
+        </div>
       </div>
-    </template>
-    <div
-      class="qbtn"
-      @click="requestion"
-      v-else-if="status == '答题错误' || status == '答题超时'"
-    >
-      <span>重新答题</span>
     </div>
+    <!-- 移动端 -->
+    <div class="datiing" v-if="isMobile" :class="{'scroll':status == '答题完成'}">
+      <div class="jishi">
+        <div class="bar">
+          <div
+            :style="{ width: (1 - current / daojishi) * 100 + '%' }"
+            class="activeLine"
+          ></div>
+          <div
+            :style="{ left: (1 - current / daojishi) * 100 + '%' }"
+            class="dot"
+          ></div>
+        </div>
+        <div class="time">00:{{ fixNum }}</div>
+      </div>
+      <div class="dcon" v-if="tiku.length > 0 && status == '答题中'">
+        <p>{{ currentIdx + 1 + "、" + currentTimu.title }}</p>
+        <div class="qlist">
+          <div class="qline"></div>
+          <ul>
+            <li
+              :class="{ active: active == item.id }"
+              @click="active = item.id"
+              v-for="(item, i) in currentTimu.answer"
+              :key="i"
+            >
+              <span>{{ item.id }}、{{ item.txt }}</span>
+            </li>
+          </ul>
+          <span
+            >第 {{ currentIdx + 1 }} 题 / 共 {{ tiku.length }} 题</span
+          >
+        </div>
+        <template v-if="status == '答题中'">
+          <div class="qbtn" v-if="currentIdx < 9" @click="next">
+            <span>下一题</span>
+          </div>
+          <div class="qbtn primary" @click="next" v-else>
+            <span>提交</span>
+          </div>
+        </template>
+      </div>
 
-    <div class="datifinish" v-else>
-      <div class="qbtn" @click="requestion">
-        <span>分享好友</span>
+      <div class="tipscon" v-else>
+        <img
+          :src="
+            require(`@/assets/images/question/${
+              status == '答题完成' ? 'success' : 'error'
+            }.png`)
+          "
+          alt=""
+        />
+        <div v-if="tips[status]">
+          <p>{{ tips[status].title }}</p>
+          <span>{{ tips[status].desc }}</span>
+        </div>
       </div>
-      <div class="qbtn primary" @click="lingjiang">
-        <span>领取奖励</span>
+
+      <div
+        class="qbtn"
+        @click="requestion"
+        v-if="status == '答题错误' || status == '答题超时'"
+      >
+        <span>重新答题</span>
       </div>
-      <div class="qbtn" @click="requestion">
-        <span>继续答题</span>
+
+      <div class="datifinish" v-if="status == '答题完成'">
+        <div class="qbtn" @click="requestion">
+          <span>分享好友</span>
+        </div>
+        <div class="qbtn" @click="requestion">
+          <span>继续答题</span>
+        </div>
+        <div class="qbtn primary" @click="lingjiang">
+          <span>领取奖励</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { questions } from './data'
-
+import { questions } from "./data";
+import browser from "@/util/browser";
 let random = function (min, max) {
-  var range = max - min
-  var rand = Math.random()
-  var num = min + Math.round(rand * range)
+  var range = max - min;
+  var rand = Math.random();
+  var num = min + Math.round(rand * range);
 
-  return num
-}
+  return num;
+};
 
 let getNorepeatNum = function (min, max, num) {
-  let arr = []
+  let arr = [];
 
   while (arr.length < num) {
-    let ran = random(min, max)
+    let ran = random(min, max);
     if (!arr.includes(ran)) {
-      arr.push(ran)
+      arr.push(ran);
     }
   }
 
-  return arr
-}
+  return arr;
+};
 
 let tips = {
   答题超时: {
-    title: '答题超时',
-    desc: '不要气馁，再接再厉~'
+    title: "答题超时",
+    desc: "不要气馁，再接再厉~",
   },
   答题错误: {
-    title: '答题错误',
-    desc: '不要气馁，再接再厉~'
+    title: "答题错误",
+    desc: "不要气馁，再接再厉~",
   },
   答题完成: {
-    title: '完成挑战',
-    desc: '本次答对10道题'
-  }
-}
+    title: "完成挑战",
+    desc: "本次答对10道题",
+  },
+};
 
 export default {
-  data () {
+  data() {
     return {
       daojishi: 20,
       current: 20,
       inter: null,
       currentIdx: 0,
-      active: '',
+      active: "",
       questions,
       tiku: [],
       reloadTimu: false,
-      status: '答题中',
-      tips
-    }
+      status: "答题中",
+      tips,
+      isMobile: browser.mobile,
+    };
   },
 
   methods: {
-    clearInter () {
-      this.active = ''
-      clearInterval(this.inter)
-      this.inter = null
+    clearInter() {
+      this.active = "";
+      clearInterval(this.inter);
+      this.inter = null;
     },
-    requestion () {
-      this.reloadTimu = true
-      this.currentIdx = 0
+    requestion() {
+      this.reloadTimu = true;
+      this.currentIdx = 0;
     },
-    next () {
+    next() {
       if (this.currentTimu.correct === this.active) {
-        this.currentIdx++
+        this.currentIdx++;
         if (this.currentIdx > 9) {
-          this.status = '答题完成'
-          return
+          this.status = "答题完成";
+          return;
         }
-        this.startInter()
+        this.startInter();
       } else {
-        this.status = '答题错误'
+        this.status = "答题错误";
       }
     },
-    lingjiang () {
-      this.$emit('lingjiang', true)
+    lingjiang() {
+      this.$emit("lingjiang", true);
     },
-    startInter () {
-      this.clearInter()
-      this.current = this.daojishi
+    startInter() {
+      this.clearInter();
+      this.current = this.daojishi;
       this.inter = setInterval(() => {
         if (this.current === 0) {
-          this.status = '答题超时'
-          return
+          this.status = "答题超时";
+          return;
         }
         this.current--
-      }, 1000)
+      }, 1000);
+    },
+    getTimu() {
+      let idxarr = getNorepeatNum(0, 40, 10);
+      this.tiku = idxarr.map((item) => {
+        return questions[item];
+      });
+      this.reloadTimu = false;
+      this.status = "答题中";
+      this.startInter();
     },
-    getTimu () {
-      let idxarr = getNorepeatNum(0, 40, 10)
-      this.tiku = idxarr.map(item => {
-        return questions[item]
-      })
-      this.reloadTimu = false
-      this.status = '答题中'
-      this.startInter()
-    }
   },
   computed: {
-    fixNum () {
-      return String(this.current).padStart(2, '0')
+    fixNum() {
+      return String(this.current).padStart(2, "0");
+    },
+    currentTimu() {
+      return this.tiku[this.currentIdx];
     },
-    currentTimu () {
-      return this.tiku[this.currentIdx]
-    }
   },
   watch: {
-    status (newVal) {
-      if (newVal !== '答题中') {
-        this.clearInter()
+    status(newVal) {
+      if (newVal !== "答题中") {
+        this.clearInter();
       }
     },
-    reloadTimu (newVal) {
+    reloadTimu(newVal) {
       if (newVal) {
-        this.getTimu()
+        this.getTimu();
       }
-    }
+    },
   },
-  beforeDestroy () {
-    this.clearInter()
+  beforeDestroy() {
+    this.clearInter();
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.getTimu()
-    })
-  }
-}
+      this.getTimu();
+      // this.$emit("lingjiang", true);
+
+    });
+  },
+};
 </script>
 <style lang="less" scoped>
 @color: #fa3800;
 .datiing {
   width: 80%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -391,4 +474,106 @@ export default {
     justify-items: center;
   }
 }
+
+// 答题完成时 添加类scroll 整体可以滑动
+.scroll {
+  overflow-y: auto!important;
+  overflow-x: hidden;
+}
+// 移动端
+.qmobile .datiing {
+  width: 95%;
+  top: 40px;
+  transform: translateX(-50%);
+  height:calc(100% - 50px);
+  overflow-y: hidden;
+  .jishi {
+    display: block;
+    width: 80%;
+    margin: 5px auto;
+    .bar {
+      display: block;
+    }
+    .time {
+      display: block;
+      text-align: center;
+      width: 100%;
+      margin: 16px 0;
+    }
+  }
+  .dcon {
+    overflow-y: auto;
+    margin-top: 0;
+    max-height:90%;
+    padding: 18px;
+    >p {
+      max-height: 124px;
+      overflow-y:auto;
+    }
+    >.qbtn {
+      background: rgba(250, 56, 0, 1);
+      margin:21px auto 3px;
+      color: #fff;
+    }
+    >.qlist {
+      
+      >ul {
+        height: auto;
+        max-height:247px;
+        overflow-y:auto;
+        >li {
+          margin:27px 0;
+        }
+      }
+    }
+  }
+  .tipscon {
+    >img {
+      width: 80%;
+    }
+    >div {
+      position: absolute;
+      top:60%;
+      left: 47%;
+      transform: translate(-50%,-50%);
+    }
+    
+  }
+  >.qbtn {
+    width: 280px;
+    height: 60px;
+    line-height: 60px;
+    font-size: 24px;
+    font-family: Microsoft YaHei;
+    color: #FFFFFF;
+    font-weight: 400;
+    margin-top:80px;
+  }
+  .datifinish {
+    display: block;
+    width: 100%;
+    margin-top:10px;
+    padding: 10px 0;
+    >.qbtn {
+      width: 286px;
+      height: 55px;
+      margin:0 auto;
+    }
+    >.qbtn:nth-of-type(2) {
+      margin:16px auto;
+    }
+  }
+}
+
+@media screen and (max-width: 320px){
+				.qmobile {
+          .datifinish {
+            .qbtn {
+              width:270px!important;
+            }
+          }
+        }
+}
+
+
 </style>

src/components/question/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="question">
+  <div class="question" :class="{qmobile:isMobile}">
     <div
       class="qcon"
       :style="{
-        backgroundImage: `url(${require('@/assets/images/question/bg.jpg')})`
+        backgroundImage: `url(${require('@/assets/images/question/bg.jpg')})`,
       }"
     >
       <div v-if="!dati" class="qbody">
@@ -13,16 +13,19 @@
             :src="require('@/assets/images/question/icon.png')"
             alt=""
           />
-          <div class="qbtn" @click="dati=true">
+          <div class="qbtn" @click="dati = true">
             <span>开始答题</span>
-            <img :src="require('@/assets/images/question/jiantou.png')" alt="">
+            <img
+              :src="require('@/assets/images/question/jiantou.png')"
+              alt=""
+            />
           </div>
         </div>
       </div>
 
       <div v-else class="qbody">
-        <datiing @lingjiang='datiing=false' v-if="datiing"/>
-        <prize v-else/>
+        <datiing @lingjiang="datiing = false" v-if="datiing" />
+        <prize v-else />
       </div>
       <img
         class="qclose"
@@ -35,21 +38,24 @@
 </template>
 
 <script>
-import datiing from './datiing'
-import prize from './prize'
+import datiing from "./datiing";
+import prize from "./prize";
+import browser from '@/util/browser'
 export default {
   components: {
     datiing,
-    prize
+    prize,
   },
 
-  data () {
+  data() {
     return {
       dati: false,
-      datiing: true
-    }
-  }
-}
+      datiing: true,
+      isMobile: browser.mobile,
+    };
+  },
+  created(){}
+};
 </script>
 
 <style lang="less" scoped>
@@ -75,7 +81,7 @@ export default {
       width: 100%;
       height: 100%;
       text-align: center;
-      .start_page{
+      .start_page {
         width: 100%;
         top: 48%;
         position: absolute;
@@ -94,4 +100,14 @@ export default {
     }
   }
 }
+
+.qmobile {
+  position: relative;
+  height:calc(100% - 35px);
+  .qcon {
+    width: 96%;
+    height: 98%;
+    position: absolute;
+  }
+}
 </style>

src/components/question/prize.vue

@@ -1,107 +1,180 @@
 <template>
-  <div class="prize">
-    <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 :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>
-    </div>
 
-    <div class="lingjiang" v-show="lingjiang">
-      <div class="ljcon">
-         <img
-          @click="lingjiang=false"
+      <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 class="prize mobilePrize" v-if="isMobile">
+      <h1 v-if="isMobile">幸运大转盘</h1>
+      <LuckyWheel
+        class="lw"
+        ref="LuckyWheel"
+        :width="`${turntableWidth}px`"
+        :height="`${turntableHeight}px`"
+        :blocks="blocks"
+        :prizes="prizes"
+        :buttons="buttons"
+        @start="startCallBack"
+        @end="endCallBack"
+      />
+      <div class="bubble">
+        <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
+            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>
+        <img
+          @click="lingjiang = false"
+          class="qclose"
+          :src="require('@/assets/images/question/close.png')"
+          alt=""
+        />
+      </div>
+    </div>
   </div>
 </template>
 <script>
+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,
@@ -111,42 +184,53 @@ 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,
+      turntableWidth:"340",
+      turntableHeight:"340"
+    };
   },
   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
+  },
+  created(){
+    var windowWidth = document.documentElement.clientWidth;
+    if(windowWidth <= 320){
+        this.turntableWidth = 280;
+        this.turntableHeight = 280;
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
+
 .prize {
   margin: 0 auto;
   position: relative;
@@ -167,8 +251,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;
@@ -180,84 +264,199 @@ 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;
         }
       }
     }
   }
 }
+// 移动端
+
+
+.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 {
+    height: auto;
+  }
+  .bubble {
+    width: 90%;
+    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;
+      > p {
+        padding:0 10px 10px;
+      }
+    }
+  }
+  .lingjiang {
+    .qclose {
+      position: absolute;
+      bottom: 15%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 44px;
+      height: 44px;
+      display: block;
+    }
+  }
+}
+
+
+@media screen and (max-width: 320px){
+				.ljcon {
+          width: 90%;
+          >img {
+            width: 100%;
+          }
+          .lbody {
+            top:44%!important;
+            .ltitle {
+              font-size: 18px!important;
+            }
+            .qrcode {
+              width: 50%!important;
+            }
+            >p {
+              font-size: 16px!important;
+              margin:8px 0 16px!important;
+            }
+          }
+        }
+}
+
 </style>

src/pages/external/index.vue

@@ -5,7 +5,8 @@
           <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
           <template  v-if="$route.params.id">
             <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">{{isHangpai?'航拍':'大场景'}}</a>
-            <a @click="xiangceHandle" class="xiangce" v-if="key&&imgs" :class="{active: !big}">相册</a>
+            <!-- <a @click="xiangceHandle" class="xiangce" v-if="key&&imgs" :class="{active: !big}">相册</a> -->
+            <div @click="showQuestion = true" class="dati">开始答题</div>
           </template>
       </div>
     </template>
@@ -76,7 +77,7 @@ export default {
       key = null
     }
     return {
-      showQuestion: true,
+      showQuestion: false,
       asdasd: 'big',
       urls: [],
       key,
@@ -247,6 +248,16 @@ export default {
   height: 15px;
   padding: 10px;
   background-color: #f1f2f3;
+  position: relative;
+}
+
+.mobile .dati {
+  height: 29px;
+  padding: 0 10px;
+  line-height: 29px;
+  position: absolute;
+  top:50%;
+  transform: translateY(-50%);
 }
 
 .asjdfioasfhuioasfh {
@@ -326,6 +337,15 @@ export default {
 </style>
 
 <style scoped>
+  @media screen and (max-width: 1024px) {
+    .dati{
+      left:180px;
+      top:0px;
+    }
+   }
+</style>
+
+<style scoped>
 
 .image-dialog {
   position: fixed;

src/pages/imageQuery/index.vue

@@ -5,7 +5,7 @@
       <Slide :screens="screensa" :current="0">
         <i class="iconfont icon-left" slot="up"></i>
         <div v-if="ismobile" slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data.img}) no-repeat center center`,backgroundSize:`${data.size}`}"  @click.stop></div>
-        <img v-else slot="item" slot-scope="{data}" :src="data.img" class="image-item"  @click.stop>
+        <img v-if="!ismobile" slot="item" slot-scope="{data}" :src="data.img" class="image-item"  @click.stop>
         <i class="iconfont icon-right" slot="next"></i>
       </Slide>
       <div class="image-introduce" v-if="ismobile">