123

src/components/question/datiing.vue

@@ -1,216 +1,297 @@
 <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">
+      <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();
+    });
+  },
+};
 </script>
 <style lang="less" scoped>
 @color: #fa3800;
 .datiing {
   width: 80%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -362,14 +443,14 @@ export default {
     min-height: 200px;
     position: relative;
     > img {
-      width: 40%;
+      width: 70%;
       margin-top: 10px;
     }
     > div {
       color: #54320b;
       position: absolute;
-      top: 140px;
-      left: 41%;
+      top: 112px;
+      left: 30%;
       > p {
         font-size: 18px;
         margin-bottom: 6px;
@@ -391,4 +472,88 @@ export default {
     justify-items: center;
   }
 }
+.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%;
+      margin-left: 8%;
+    }
+    >div {
+      top:50%;
+      left: 30%;
+    }
+    
+  }
+  >.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:34px;
+    max-height: 30%;
+    overflow-y: auto;
+    overflow-x:hidden;
+    >.qbtn {
+      width: 286px;
+      height: 55px;
+      margin:0 auto;
+    }
+    >.qbtn:nth-of-type(2) {
+      margin:16px auto;
+    }
+  }
+}
 </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: 96%;
+    position: absolute;
+  }
+}
 </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>
@@ -326,6 +327,15 @@ export default {
 </style>
 
 <style scoped>
+  @media screen and (max-width: 1024px) {
+    .dati{
+      left:180px;
+      top:0px;
+    }
+   }
+</style>
+
+<style scoped>
 
 .image-dialog {
   position: fixed;