判断题页面外观

.eslintrc.js

@@ -46,11 +46,12 @@ module.exports = {
     'no-prototype-builtins': "off",
   },
   globals: {
-    api: true,
-    config: true,
-    mapState: true,
-    mapGetters: true,
-    mapMutations: true,
+    globalConfig: true,
+    globalApi: true,
+    globalUtils: true,
+    globalMapState: true,
+    globalMapGetters: true,
+    globalMapMutations: true,
     store: true,
     utils: true,
   }

src/App.vue

@@ -29,11 +29,11 @@ body {
   height: 100%;
 }
 @font-face {
-  font-family: 'DFLiShuW7';
-  src: url('@/assets/style/DFLiShuW7.ttf');
-}
-@font-face {
-  font-family: 'Adobe Heiti Std';
-  src: url('@/assets/style/Adobe Heiti Std.otf');
+  font-family: 'LiSu-Regular';
+  src: url('@/assets/style/Lishu-regular.ttf');
 }
+// @font-face {
+//   font-family: 'Adobe Heiti Std';
+//   src: url('@/assets/style/Adobe Heiti Std.otf');
+// }
 </style>

src/main.js

@@ -3,6 +3,7 @@ import "@/assets/style/my-reset.css"
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 import axios from 'axios'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
@@ -27,5 +28,6 @@ Vue.prototype.$http = axios
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-// import Home from '../views/Home.vue'
 import HomeWeb from '../views/HomeWeb.vue'
 import HomeMobile from '../views/HomeMobile.vue'
+import QuestionJudge from '../views/QuestionJudge.vue'
 
 Vue.use(VueRouter)
 
@@ -15,7 +15,14 @@ const routes = [
   {
     path: '/web',
     name: 'HomeWeb',
-    component: HomeWeb
+    component: HomeWeb,
+    children: [
+      {
+        path: '/question-judge',
+        name: 'QuestionJudge',
+        component: QuestionJudge,
+      }
+    ]
   },
   {
     path: '/mobile',

src/store/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    questionInfo: {}
+  },
+  getters: {
+  },
+  mutations: {
+    setQuestionInfo(state, value) {
+      state.questionInfo = value
+    }
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/HomeMobile.vue

@@ -243,7 +243,6 @@
 <script>
 import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
-import bgImg from "@/assets/images/bg.png"
 // import browser from "@/utils/browser";
 
 export default {
@@ -260,7 +259,6 @@ export default {
       isShowAudios: false,
 
       currentSlideIdx: 0,
-      bgImg,
       isShowPlusOne: false,
       isShowShare: false,
     }

src/views/HomeWeb.vue

@@ -10,245 +10,13 @@
       loop
       autoplay
     />
-
-    <button
-      class="close"
-      @click="onClickClose"
-    >
-      <img
-        src="@/assets/images/close.png"
-        alt="关闭"
-        draggable="false"
-      >
-    </button>
-    <div
-      class="bg-wrapper"
-      :style="{
-        backgroundImage: `url(${bgImg})`,
-      }"
-    >
-      <h1
-        :title="hotspotData.title"
-        :style="{
-          backgroundImage: `url(${titleBottomLine})`,
-        }"
-        v-html="hotspotData.title"
-      />
-      <div
-        class="desc"
-        v-html="descForShow"
-      />
-      <menu>
-        <button
-          v-if="bgAudioUrl"
-          @click="isBgAudioMuted = !isBgAudioMuted"
-        >
-          <img
-            v-show="isBgAudioMuted"
-            class="bg-audio-control"
-            src="@/assets/images/bg-audio.png"
-            alt=""
-            draggable="false"
-          >
-          <img
-            v-show="!isBgAudioMuted"
-            class="bg-audio-control"
-            src="@/assets/images/bg-audio-muted.png"
-            alt=""
-            draggable="false"
-          >
-        </button>
-        <!-- <button @click="onClickLike">
-          <img
-            class="like"
-            src="@/assets/images/like.png"
-            alt=""
-            draggable="false"
-          >
-          <transition name="bubble">
-            <div
-              v-if="isShowPlusOne"
-              class="plus-one"
-            >
-              +1
-            </div>
-          </transition>
-        </button> -->
-        <!-- <button @click="onClickShare">
-          <img
-            class="share"
-            src="@/assets/images/share.png"
-            alt=""
-            draggable="false"
-          >
-        </button> -->
-      </menu>
-
-      <div
-        v-if="isShowVideos"
-        v-show="!isShowShare"
-        class="swiper-wrapper-mine video-wrap"
-      >
-        <div
-          class="swiper-root"
-        >
-          <div
-            class="swiper-wrapper"
-          >
-            <div
-              v-for="(item, index) in hotspotData.video"
-              :key="index"
-              class="swiper-slide"
-            >
-              <video
-                ref="video"
-                :src="item.url"
-                controls
-                controlslist="nodownload"
-                disablePictureInPicture
-              />
-            </div>
-          </div>
-          <div class="swiper-pagination" />
-          <div class="swiper-button-prev" />
-          <div class="swiper-button-next" />
-        </div>
-      </div>
-
-      <div
-        v-if="isShowModels"
-        class="swiper-wrapper-mine model-wrap"
-      >
-        <div
-          class="swiper-root"
-        >
-          <div
-            class="swiper-wrapper"
-          >
-            <iframe
-              v-for="(item, index) in hotspotData.model"
-              :key="index"
-              :src="item"
-              frameborder="0"
-              class="swiper-slide"
-            />
-          </div>
-          <div class="swiper-pagination" />
-          <div class="swiper-button-prev" />
-          <div class="swiper-button-next" />
-        </div>
-      </div>
-
-      <div
-        v-if="isShowAudios"
-        v-show="!isShowShare"
-        class="swiper-wrapper-mine audio-wrap"
-      >
-        <div
-          class="swiper-root"
-        >
-          <div
-            class="swiper-wrapper"
-          >
-            <div
-              v-for="(item, index) in hotspotData.audio"
-              :key="index"
-              class="swiper-slide"
-            >
-              <audio
-                ref="audio"
-                :src="item.url"
-                controls
-                controlslist="nodownload"
-                disablePictureInPicture
-              />
-            </div>
-          </div>
-          <div class="swiper-pagination" />
-          <div class="swiper-button-prev" />
-          <div class="swiper-button-next" />
-        </div>
-      </div>
-
-      <div
-        v-if="isShowImages"
-        v-show="!isShowShare"
-        class="swiper-wrapper-mine image-wrap"
-      >
-        <div
-          class="swiper-root"
-        >
-          <div
-            v-viewer="{
-              button: true,
-              navbar: false,
-              title: false,
-              toolbar: false,
-              tooltip: false,
-              movable: true,
-              zoomable: true,
-              rotatable: true,
-              scalable: true,
-              transition: false,
-              fullscreen: false,
-              keyboard: true,
-              loop: false,
-            }"
-            class="swiper-wrapper"
-          >
-            <img
-              v-for="(item, index) in hotspotData.images"
-              :key="index"
-              v-lazy="item"
-              class="swiper-slide"
-              alt=""
-              draggable="false"
-            >
-          </div>
-          <div class="swiper-pagination">
-          <!-- <span
-            class="cur"
-          >
-            {{ currentSlideIdx + 1 }}
-          </span>
-          /
-          <span>
-            {{ hotspotData.Images ? hotspotData.images.length : '' }}
-          </span> -->
-          </div>
-          <div class="swiper-button-prev" />
-          <div class="swiper-button-next" />
-        </div>
-      </div>
-
-      <div
-        v-if="isShowShare"
-        v-click-outside.click="closeCode2d"
-        class="share-wrap"
-      >
-        <img
-          src="@/assets/images/code2d.png"
-          alt=""
-          class="code"
-          draggable="false"
-        >
-        <img
-          src="@/assets/images/share-tip.png"
-          alt=""
-          class="tip"
-          draggable="false"
-        >
-      </div>
-    </div>
+    <router-view />
   </div>
 </template>
 
 <script>
-import Swiper from 'swiper/swiper-bundle.esm.js'
-import 'swiper/swiper-bundle.css'
-import bgImg from "@/assets/images/bg.png"
-import titleBottomLine from "@/assets/images/title-bottom-line.png"
 // import browser from "@/utils/browser";
+import quizData from "@/quizData.js"
 
 export default {
   data() {
@@ -257,29 +25,9 @@ export default {
 
       bgAudioUrl: "", //背景音频url
       isBgAudioMuted: false,
-
-      isShowImages: false,
-      isShowVideos: false,
-      isShowModels: false,
-      isShowAudios: false,
-
-      currentSlideIdx: 0,
-      bgImg,
-      titleBottomLine,
-      isShowPlusOne: false,
-      isShowShare: false,
     }
   },
   computed: {
-    descForShow() {
-      if (this.isShowImages) {
-        return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else if (this.isShowVideos) {
-        return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else {
-        return this.hotspotData.content
-      }
-    },
   },
   watch: {
     isBgAudioMuted: {
@@ -294,70 +42,20 @@ export default {
   },
   async mounted() {
     await this.getData()
-    this.$nextTick(() => {
-      const that = this
-      new Swiper('.swiper-root', {
-        pagination: {
-          el: '.swiper-pagination',
-        },
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-
-        on: {
-          // 自动播放
-          afterInit: function (e) {
-            if (that.isShowVideos) {
-              that.$nextTick(() => {
-                that.$refs.video[0].play()
-              })
-            }
-            if (that.isShowAudios) {
-              that.$nextTick(() => {
-                that.$refs.audio[0].play()
-              })
-            }
-          },
-          slideChange: function(e) {
-            that.currentSlideIdx = e.activeIndex
-
-            // 自动播放
-            if (that.isShowVideos) {
-              for (let index = 0; index < that.$refs.video.length; index++) {
-                if (index !== that.currentSlideIdx) {
-                  that.$refs.video[index].pause()
-                } else {
-                  that.$refs.video[index].play()
-                }
-              }
-            }
-            if (that.isShowAudios) {
-              for (let index = 0; index < that.$refs.audio.length; index++) {
-                if (index !== that.currentSlideIdx) {
-                  that.$refs.audio[index].pause()
-                } else {
-                  that.$refs.audio[index].play()
-                }
-              }
-            }
-          }
-        }
+    if (this.hotspotData && this.hotspotData.content) {
+      const quizInfo = quizData.find((item) => {
+        return item.id === this.hotspotData.content
       })
-    })
-
-    if (window.innerWidth < 1350 || window.innerHeight < 810) {
-      const realWHRatio = window.innerWidth / window.innerHeight
-      if (realWHRatio > 1350 / 810) {
-        const scaleRate = window.innerHeight / 810
-        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
-      } else {
-        const scaleRate = window.innerWidth / 1350
-        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
+      this.setQuestionInfo(quizInfo)
+      if (quizInfo.questionType === '判断题') {
+        this.$router.push({ name: 'QuestionJudge' })
       }
     }
   },
   methods: {
+    ...globalMapMutations([
+      'setQuestionInfo'
+    ]),
     async getData() {
       let url = `https://super.4dage.com/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
       let result = (await this.$http.get(url)).data
@@ -368,42 +66,7 @@ export default {
       console.log('热点数据：', this.hotspotData)
 
       // this.bgAudioUrl = this.hotspotData.backgroundMusic
-
-      if (this.hotspotData.images && this.hotspotData.images.length) {
-        this.isShowImages = true
-      } else if (this.hotspotData.video && this.hotspotData.video.length) {
-        this.isShowVideos = true
-      } else if (this.hotspotData.model && this.hotspotData.model.length) {
-        this.isShowModels = true
-      } else if (this.hotspotData.backgroundMusic) {
-        this.isShowAudios = true
-        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
-      }
-    },
-    onClickClose() {
-      window.parent.document.getElementById('closepop').click()
-    },
-    // onClickLike() {
-    //   const res = globalApi.like()
-    //   if (res && res.then) {
-    //   res.then(() => {
-    //   this.isShowPlusOne = true
-    //   setTimeout(() => {
-    //     this.isShowPlusOne = false
-    //   }, 1000)
-    //   })
-    //   }
-    // },
-    onClickShare() {
-      setTimeout(() => {
-        this.isShowShare = true
-      }, 200)
     },
-    closeCode2d() {
-      if (this.isShowShare) {
-        this.isShowShare = false
-      }
-    }
   }
 }
 </script>
@@ -411,221 +74,12 @@ export default {
 <style lang="less" scoped>
 .hotspot-home {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 1350px;
-  height: 810px;
-  padding: 0 70px 0 0;
-  color: #F1F3F4;
-  transform: translate(-50%, -50%);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   > .bg-audio {
     display: none;
   }
-  > button.close {
-    position: absolute;
-    top: 10px;
-    right: 0px;
-    width: 58px;
-    height: 58px;
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  > .bg-wrapper {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-    > h1 {
-      position: absolute;
-      top: 211px;
-      left: 44px;
-      max-width: 418px;
-      font-size: 28px;
-      font-family: DFLiShuW7;
-      overflow: hidden;
-      white-space: pre;
-      text-overflow: ellipsis;
-      letter-spacing: 5px;
-      padding-left: 10px;
-      padding-right: 10px;
-      padding-bottom: 24px;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-    }
-    > .desc {
-      position: absolute;
-      top: 347px;
-      left: 55px;
-      width: 390px;
-      font-size: 16px;
-      line-height: 26px;
-      font-family: Adobe Heiti Std;
-      overflow: auto;
-      height: 300px;
-    }
-    > menu {
-      position: absolute;
-      right: 817px;
-      bottom: 90px;
-      > button {
-        display: inline-block;
-        width: 48px;
-        height: 48px;
-        margin-left: 24px;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        // .plus-one {
-        //   position: absolute;
-        //   top: 0;
-        //   right: 0;
-        //   transform: translate(50%, -50%);
-        // }
-      }
-    }
-    .swiper-wrapper-mine {
-      position: absolute;
-      top: 50%;
-      right: 30px;
-      width: 720px;
-      height: 476px;
-      transform: translateY(-50%);
-      .swiper-root {
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-        .swiper-wrapper {
-        }
-        .swiper-pagination {
-          position: absolute;
-          top: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          font-size: 1.33rem;
-          font-family: Inter-Regular, Inter;
-          .cur {
-          }
-        }
-        .swiper-button-prev {
-          left: -30px;
-          width: 30px;
-          background-image: url(../assets/images/arrow-left.png);
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center;
-          &::after {
-            content: '';
-          }
-        }
-        .swiper-button-next {
-          right: -30px;
-          width: 30px;
-          background-image: url(../assets/images/arrow-right.png);
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center;
-          &::after {
-            content: '';
-          }
-        }
-      }
-    }
-    .swiper-wrapper-mine.video-wrap {
-      .swiper-root {
-        .swiper-wrapper {
-          .swiper-slide {
-            > video {
-              width: 100%;
-              height: 100%;
-              background: #000;
-            }
-          }
-        }
-      }
-    }
-    .swiper-wrapper-mine.model-wrap {
-      .swiper-root {
-        .swiper-wrapper {
-        }
-      }
-    }
-    .swiper-wrapper-mine.audio-wrap {
-      .swiper-root {
-        .swiper-wrapper {
-          .swiper-slide {
-            > audio {
-              position: absolute;
-              top: 50%;
-              width: 100%;
-              transform: translateY(-50%);
-            }
-          }
-        }
-      }
-    }
-    .swiper-wrapper-mine.image-wrap {
-      .swiper-root {
-        .swiper-wrapper {
-          > img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
-        }
-      }
-    }
-
-    .share-wrap {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 244px;
-      > img.code {
-        width: 300px;
-        height: 300px;
-      }
-      > img.tip {
-        position: absolute;
-        left: 50%;
-        top: calc(100% + 10px);
-        transform: translateX(-50%);
-        width: 150px;
-      }
-    }
-  }
 }
-
-/deep/.swiper-pagination-bullet-active {
-  background: #a10e0c;
-}
-
-// .bubble-enter {
-//   opacity: 0;
-//   top: 1rem !important;
-// }
-// .bubble-enter-to {
-//   opacity: 1;
-//   top: 0 !important;
-// }
-// .bubble-enter-active {
-//   transition: all 0.5s;
-// }
-// .bubble-leave {
-//   opacity: 1;
-//   top: 0 !important;
-// }
-// .bubble-leave-to {
-//   opacity: 0;
-//   top: -1rem !important;
-// }
-// .bubble-leave-active {
-//   transition: all 0.5s;
-// }
 </style>

src/views/QuestionJudge.vue

@@ -0,0 +1,164 @@
+<template>
+  <div
+    class="question-judge"
+  >
+    <button
+      class="close"
+      @click="onClickClose"
+    >
+      <img
+        src="@/assets/images/close.png"
+        alt="关闭"
+        draggable="false"
+      >
+    </button>
+    <div class="title-wrapper">
+      <h1>知识问答</h1>
+    </div>
+    <div class="question-wrapper">
+      <div class="type">
+        {{ questionInfo.questionType }}
+      </div>
+      <p class="question">
+        {{ questionInfo.question }}
+      </p>
+      <button
+        v-for="(option, index) in questionInfo.answerOptions"
+        :key="index"
+        class="option"
+      >
+        {{ option }}
+      </button>
+    </div>
+    <button class="submit">
+      提交答案
+    </button>
+  </div>
+</template>
+
+<script>
+// import browser from "@/utils/browser";
+
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...globalMapState([
+      'questionInfo',
+    ])
+  },
+  watch: {
+  },
+  async mounted() {
+  },
+  methods: {
+    onClickClose() {
+      window.parent.document.getElementById('closepop').click()
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.question-judge {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 520px;
+  background-image: url(@/assets/images/bg-short.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  > button.close {
+    position: absolute;
+    top: 40px;
+    right: 45px;
+    width: 32px;
+    height: 34px;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > .title-wrapper {
+    flex: 0 0 auto;
+    text-align: center;
+    margin-top: 45px;
+    width: 250px;
+    height: 55px;
+    background-image: url(@/assets/images/title-bottom-line-thin.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    > h1 {
+      font-size: 36px;
+      font-family: LiSu-Regular, LiSu;
+      font-weight: 400;
+      line-height: 42px;
+      color: #9A2D0A;
+      background: linear-gradient(177deg, #9A2D0A 0%, #D1672B 100%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+  > .question-wrapper {
+    flex: 1 0 1px;
+    width: calc(100% - 160px * 2);
+    margin-top: 10px;
+    counter-reset: count;
+
+    > .type {
+      font-size: 24px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #693D2F;
+    }
+    > p.question {
+      margin-top: 10px;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #693D2F;
+    }
+    > button.option {
+      margin-top: 20px;
+      width: 100%;
+      text-align: left;
+      display: block;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #693D2F;
+      counter-increment: count;
+      &:hover {
+        color: #728f43;
+      }
+      &::before {
+        content: counter(count, upper-alpha);
+        margin-right: 0.5em;
+      }
+    }
+  }
+  > button.submit {
+    margin-top: 10px;
+    margin-bottom: 70px;
+    width: 150px;
+    height: 40px;
+    background-image: url(@/assets/images/btn-main-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: 20px;
+    font-family: LiSu-Regular, LiSu;
+    font-weight: 400;
+    color: #FFFFFF;
+  }
+}
+</style>

vue.config.js

@@ -1,3 +1,17 @@
+const webpack = require('webpack')
+
 module.exports = {
-  publicPath: "./"
-};
+  publicPath: "./",
+  configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({
+        globalMapState: ['vuex', 'mapState'],
+        globalMapMutations: ['vuex', 'mapMutations'],
+        globalMapGetters: ['vuex', 'mapGetters'],
+        globalConfig: ['/src/config.js', 'default'],
+        globalApi: ['/src/api.js', 'default'],
+        globalUtils: ['/src/utils/index.js', 'default'],
+      }),
+    ],
+  },
+}