feat: answer page

.eslintignore

@@ -1,3 +1,4 @@
 */libs
 /node_modules
-/.vscode
+/.vscode
+/public

public/answer/asset-manifest.json

@@ -0,0 +1,26 @@
+{
+  "files": {
+    "main.css": "./static/css/main.05ce7dd1.css",
+    "main.js": "./static/js/main.0ce06caf.js",
+    "static/css/546.ef85020b.chunk.css": "./static/css/546.ef85020b.chunk.css",
+    "static/js/546.7d02967f.chunk.js": "./static/js/546.7d02967f.chunk.js",
+    "static/media/themb-bg.png": "./static/media/themb-bg.e7269c1728f24f31a0b0.png",
+    "static/media/answering-bg.png": "./static/media/answering-bg.77f8f9f5c72df8161aec.png",
+    "static/media/bg.png": "./static/media/bg.346ed8238942bfe048a3.png",
+    "static/media/label_02.png": "./static/media/label_02.6b1c4bfbf2be4713aeed.png",
+    "static/media/label_01.png": "./static/media/label_01.06fd498208c379a89975.png",
+    "static/media/label_03.png": "./static/media/label_03.c92e22e6afa57ec0c268.png",
+    "static/media/label_04.png": "./static/media/label_04.c6b30c07cd288ac2da00.png",
+    "static/media/label_05.png": "./static/media/label_05.ec01057d5220b8613970.png",
+    "static/media/img_logo.png": "./static/media/img_logo.f56e24447999ba4a48fa.png",
+    "index.html": "./index.html",
+    "main.05ce7dd1.css.map": "./static/css/main.05ce7dd1.css.map",
+    "main.0ce06caf.js.map": "./static/js/main.0ce06caf.js.map",
+    "546.ef85020b.chunk.css.map": "./static/css/546.ef85020b.chunk.css.map",
+    "546.7d02967f.chunk.js.map": "./static/js/546.7d02967f.chunk.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.05ce7dd1.css",
+    "static/js/main.0ce06caf.js"
+  ]
+}

public/static/js/main.0ce06caf.js.LICENSE.txt

@@ -0,0 +1,80 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

src/views/HomeView.vue

@@ -108,6 +108,18 @@
     </template>
   </div>
 
+  <button
+    v-if="store.state.haveShownStartUp"
+    class="home__answer-btn"
+    @click="answerPageVisible = true"
+  />
+  <iframe
+    v-if="answerPageVisible"
+    src="./answer.html"
+    frameborder="0"
+    style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999"
+  />
+
   <template v-if="$isMobile && store.state.canStart">
     <img
       v-if="showHelper"
@@ -130,7 +142,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject, watch } from "vue"
+import { ref, onMounted, onUnmounted, inject, watch } from "vue"
 import { useRouter } from "vue-router"
 import { useStore } from "vuex"
 import StartUp from '@/components/StartUp.vue'
@@ -149,9 +161,21 @@ const store = useStore()
 
 const showHelper = ref(false)
 const hoveringEntryIdx = ref($isMobile ? 1 : 0)
+const answerPageVisible = ref(false)
+
+const closeIframe = (e) => {
+  if (typeof e.data === "object" && e.data.message === "onBack") {
+    answerPageVisible.value = false
+  }
+}
 
 onMounted(() => {
   stopBgAudio()
+
+  window.addEventListener("message", closeIframe)
+})
+onUnmounted(() => {
+  window.removeEventListener("message", closeIframe)
 })
 
 watch(() => store.state.haveShownStartUp, e => {
@@ -202,6 +226,19 @@ const handleHover = (num) => {
 </script>
 
 <style lang="less" scoped>
+.home__answer-btn {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 164px;
+  height: 172px;
+  background: url('@/assets/images/answer-btn.png') no-repeat center / contain;
+  z-index: 9;
+
+  &:hover {
+    background-image: url('@/assets/images/answer-btn-active.png');
+  }
+}
 .swiper-scene-preview {
   .title {
     position: absolute;

src/views/PanoView.vue

@@ -42,6 +42,16 @@
         :src="require(`@/assets/images/guide/tbn_help-${sceneIdx + 1}-min.png`)"
         @click="showGuide = true"
       >
+      <button
+        class="answer-btn"
+        @click="showAnswerPage"
+      />
+      <iframe
+        v-if="answerPageVisible"
+        src="./answer.html"
+        frameborder="0"
+        style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999"
+      />
       <CameraDesc
         v-if="isShowCameraDesc"
         class="camera-desc"
@@ -464,6 +474,7 @@ const curMsgIndex = ref(0)
 const showGuide = ref(false)
 const showShipGame = ref(false)
 const showScreensaver = ref(false)
+const answerPageVisible = ref(false)
 
 let screensaverTime = 0
 let screensaverTimer = null
@@ -484,7 +495,12 @@ const btnGameEntryPageImgUrl = computed(() => {
 const btnGameEntryPageActiveImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-game-entry-page-active-${sceneIdx.value + 1}.png`) + ')'
 })
-
+const answerEntryPageImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-answer-${sceneIdx.value + 1}.png`) + ')'
+})
+const answerEntryPageActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-answer-${sceneIdx.value + 1}-active.png`) + ')'
+})
 const btnOnTrack1ImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
 })
@@ -552,6 +568,21 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const closeIframe = (e) => {
+  if (typeof e.data === "object" && e.data.message === "onBack") {
+    answerPageVisible.value = false
+  }
+}
+
+onMounted(() => {
+  stopBgAudio()
+
+  window.addEventListener("message", closeIframe)
+})
+onUnmounted(() => {
+  window.removeEventListener("message", closeIframe)
+})
+
 const sceneIdx = computed(() => {
   return Number(route.query.sceneIdx)
 })
@@ -874,6 +905,10 @@ function onPlayedFirstSceneIntroVideoEnded() {
   URL.revokeObjectURL(videoIntroUrl)
 }
 
+const showAnswerPage = () => {
+  answerPageVisible.value = true
+}
+
 // 跳过按钮 位置
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 const skipBtnLeftTop = ref({
@@ -1293,6 +1328,21 @@ const {
         background-image: v-bind(btnGameEntryPageActiveImgUrl);
       }
     }
+    >button.answer-btn{
+      position: absolute;
+      width: 77px;
+      height: 77px;
+      top: 298px;
+      right: 51px;
+      background-image: v-bind(answerEntryPageImgUrl);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      z-index: 5;
+      &:hover{
+        background-image: v-bind(answerEntryPageActiveImgUrl);
+      }
+    }
     .guide-btn{
       position: absolute;
       width: 77px;

vue.config.js

@@ -1,38 +1,60 @@
-const webpack = require('webpack')
-const { defineConfig } = require('@vue/cli-service')
-
-process.env.VUE_APP_VERSION = require('./package.json').version
-
-const dayjs = require('dayjs')
-const time = dayjs().format('YYYY-M-D HH:mm:ss')
-process.env.VUE_APP_UPDATE_TIME = time
-
-module.exports = defineConfig({
-  publicPath: process.env.PUBLIC_PATH,
-  productionSourceMap: process.env.VUE_APP_CLI_MODE === 'prod' ? false : true,
-  // transpileDependencies: true, // 默认false，表示babel-loader 会忽略所有 node_modules 中的文件
-  configureWebpack: {
-    module: {
-      rules: [
-        // {
-        //   test: /\.cur$/,
-        //   use: {
-        //     loader: 'file-loader'
-        //   }
-        // }
-      ]
-    },
-    plugins: [
-      new webpack.ProvidePlugin({
-        utils: ['/src/utils.js', 'default'],
-        store: ['/src/store/index.js', 'default'],
-        api: ['/src/api.js', 'default'],
-        config: ['/src/config.js', 'default'],
-        mapState: ['vuex', 'mapState'],
-        mapGetters: ['vuex', 'mapGetters'],
-        mapMutations: ['vuex', 'mapMutations'],
-        useSizeAdapt: ['/src/useFunctions/useSizeAdapt.js', 'default'],
-      }),
-    ],
-  },
-})
+const webpack = require('webpack')
+const { defineConfig } = require('@vue/cli-service')
+
+process.env.VUE_APP_VERSION = require('./package.json').version
+
+const dayjs = require('dayjs')
+const time = dayjs().format('YYYY-M-D HH:mm:ss')
+process.env.VUE_APP_UPDATE_TIME = time
+
+module.exports = defineConfig({
+  pages: {
+    index: {
+      entry: 'src/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    },
+    answer: {
+      entry: 'public/static/js/main.0ce06caf.js',
+      template: 'public/answer/index.html',
+      filename: 'answer.html'
+    }
+  },
+  publicPath: process.env.PUBLIC_PATH,
+  productionSourceMap: process.env.VUE_APP_CLI_MODE === 'prod' ? false : true,
+  chainWebpack: config => {
+    config.module
+      .rule('images')
+      .test(/\.(jpg|png|gif)$/)
+      .set('parser', {
+        dataUrlCondition: {
+          maxSize: 5 * 1024
+        }
+      })
+  },
+  // transpileDependencies: true, // 默认false，表示babel-loader 会忽略所有 node_modules 中的文件
+  configureWebpack: {
+    module: {
+      rules: [
+        // {
+        //   test: /\.cur$/,
+        //   use: {
+        //     loader: 'file-loader'
+        //   }
+        // }
+      ]
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        utils: ['/src/utils.js', 'default'],
+        store: ['/src/store/index.js', 'default'],
+        api: ['/src/api.js', 'default'],
+        config: ['/src/config.js', 'default'],
+        mapState: ['vuex', 'mapState'],
+        mapGetters: ['vuex', 'mapGetters'],
+        mapMutations: ['vuex', 'mapMutations'],
+        useSizeAdapt: ['/src/useFunctions/useSizeAdapt.js', 'default'],
+      }),
+    ],
+  },
+})