fix:抽离游戏和场景

src/router/index.js

@@ -6,6 +6,7 @@ import PoemList from '../views/PoemList.vue'
 import PaintingList from '../views/PaintingList.vue'
 import PaintingDetailList from '../views/PaintingDetailList.vue'
 import GameView from '../views/GameView.vue'
+import SceneView from '../views/SceneView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
 import BambooHotView from '../views/BambooHotView2/index.vue'
 import ShuanggouDetail from '../views/ShuangGouSheSeDetail.vue'
@@ -55,6 +56,12 @@ const routes = [
     name: 'Game',
     component: GameView,
   },
+  // 线上展厅
+  {
+    path: '/scene',
+    name: 'Scene',
+    component: SceneView,
+  },
   // 竹谱
   {
     path: '/bambooBook',

src/views/GameView.vue

@@ -1,391 +1,225 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRouter } from "vue-router"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
+const isShowToastFromGame = ref(false)
+const input1 = ref("")
+const input2 = ref("")
+const input1Ref = ref(null)
+const input2Ref = ref(null)
 
-import Toast from '@/components/ToastBox.vue'
 const router = useRouter()
 
-const store = useStore()
 
-// home-封面  unity-游戏 scene-线上展  reset-确认是否重新
-const mode = ref('home')
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
-const goBack = () => {
-  window.history.back()
-}
 
-const goHome = () => {
-  // router.replace('/')
-  mode.value = 'reset'
+const handleInput1 = () => {
+  console.log("第一个框得内容", input1.value)
+  if (input1.value.length >= 7) {
+    input1.value = input1.value.slice(0, 7) // 限制输入长度
+    input2Ref.value.focus() // 聚焦到第二个输入框
+  }
 }
 
-const resetHome = () => {
-  store.commit('setShowingStartup', false)
-  router.replace('/')
+const checkInput1 = (event) => {
+  if (event.key === "Backspace" && input1.value.length === 0) {
+    input2.value = "" // 清空第二个输入框
+    input1Ref.value.focus() // 聚焦回到第一个输入框
+  }
 }
 
-const toast = ref(null)
-const showToast = () => {
-  toast.value.show()
-  setTimeout(() => {
-    if (toast?.value) {
-      toast.value.hide()
-    }
-  }, 2000)
+const handleInput2 = () => {
+  // 这里可以添加类似的逻辑，但通常不需要，因为我们假设第二个输入框不会自动跳转回去
+  if (input2.value.length >= 7) {
+    input2.value = input2.value.slice(0, 7)
+  }
 }
 
-
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
+const checkInput2 = (event) => {
+  if (event.key === "Backspace" && input2.value.length === 0) {
+    input1Ref.value.focus() // 如果需要从第二个输入框清空后聚焦回第一个输入框
+  }
+}
+const saveTitle = () => {
+  var iframe = document.getElementById("gameIframe")
+  var iframeWindow = iframe.contentWindow || window.frames["yourIframeId"]
+  if (iframeWindow) {
+    iframeWindow.saveTitle(
+      input1.value.length >= 7
+        ? input1.value + "\n" + input2.value
+        : input1.value
+    )
+    isShowToastFromGame.value = false
+  }
+}
 
 onMounted(() => {
+  window.isShowToastFromGame = () => {
+    isShowToastFromGame.value = true
+    input1.value = ""
+    input2.value = ""
+  }
+
   window.closeGame = () => {
-    mode.value = 'home'
+    router.replace('/more-content?anchorIdx=2')
   }
 })
-
-/**
- * 右滑返回
- */
-
-const onSwipeLeft = () => {
-
-}
-
-const onSwipeRight = () => {
-  router.replace({
-    name: 'MoreContent',
-    query: {
-      anchorIdx: 1,
-    }
-  })
-}
-
 </script>
 
 <template>
-  <div
-    v-touch:swipe.left="onSwipeLeft"
-    v-touch:swipe.right="onSwipeRight"
-    class="game-page"
-  >
-    <Toast
-      ref="toast"
-      :message="`暂未开发`"
-      :duration="`3000`"
+  <div class="game-box">
+    <iframe
+      id="gameIframe"
+      :src="`./game/index.html`"
     />
 
-    <!--默认首页 -->
+    <!-- edit弹框 -->
     <div
-      class="home"
-      :style="{backgroundImage: mode ==='reset' ?`url(${require('@/assets/images/reset-bg.png')})`:'',background:'cover'}"
+      v-if="isShowToastFromGame"
+      class="edit-box"
     >
-      <div
-        v-if="mode !='reset'"
-        class="line-scene"
-        @click="() => {router.replace('/onlone-scene')}"
-      >
-        <div class="down-triangle" />
-        <div class="line-title">
-          《无尽藏》
+      <div class="input-box">
+        <input
+          ref="input1Ref"
+          v-model="input1"
+          @input="handleInput1"
+          @keyup="checkInput1"
+        >
+        <input
+          ref="input2Ref"
+          v-model="input2"
+          :readonly="input1.length < 7"
+          @input="handleInput2"
+          @keyup="checkInput2"
+        >
+        <div class="tips">
+          请输入内容
         </div>
-        线上展
-      </div>
-      <div
-        v-if="mode !='reset'"
-        class="game-income"
-        @click="() => { mode = 'unity' }"
-      >
-        <div class="down-triangle" />
-        <div>《修篁树石图》画作创作</div>
-      </div>
-      <!-- reset部分 -->
-      <div
-        v-if="mode == 'reset'"
-        class="title"
-      >
-        是否重新开始<div>？</div>
       </div>
       <div
-        v-if="mode == 'reset'"
-        class="cancel"
-        @click="() => {
-          mode = 'home'
-        }"
+        class="cencel-btn"
+        @click="isShowToastFromGame = false"
       >
         取消
       </div>
       <div
-        v-if="mode == 'reset'"
-        class="reset"
-        @click="resetHome()"
+        class="yes-btn"
+        @click="saveTitle"
       >
-        <img
-          src="@/assets/images/reset-icon.png"
-          alt=""
-        >
-        重新开始
-        <div class="cicle" />
-      </div>
-      <div class="btns">
-        <!-- 加载中... -->
-        <img
-          src="@/assets/images/icon-loading.png"
-          alt="loading"
-          @click="goHome()"
-        >
-        <!-- <BtnBack @click="goBack()" /> -->
+        保存
       </div>
-
-      <PaginationComp
-        class="pagination"
-        :total="3"
-        :idx="2"
-      />
     </div>
-
-
-    <!-- 游戏页面 -->
-    <iframe
-      v-if="mode === 'unity'"
-      class="game-box"
-      :src="`./game/index.html`"
-    />
   </div>
 </template>
 
-<style lang="less" scoped>
-.game-page {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .home {
+<style lang='less' scoped>
+  .game-box {
     width: 100%;
     height: 100%;
-    background: url(@/assets/images/bg-game.png);
-    background-size: cover;
-    transition: all .3s;
-
-
-    >.line-scene {
-      padding: 20px 10px;
-      background-image: url(@/assets/images/line-scene.png);
-      background-size: 100% 100%;
-      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: calc(187 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(56 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      white-space: nowrap;
-      font-family: 'KaiTi';
+    position: relative;
 
+    > iframe {
+      width: 100%;
+      height: 100%;
       position: absolute;
-      bottom: calc(300 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      left: 50%;
-      transform: translateX(-50%);
-      padding-top: 30px;
-      letter-spacing: .05em;
-
-
-      >.down-triangle {
-        width: 0;
-        height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid #6F917F;
-        margin-bottom: 10px;
-        position: absolute;
-        top: -5px;
-        animation: fade-in-out 1.5s infinite;
-
-        @keyframes fade-in-out {
-          0%{
-            opacity: 0.1;
-          }
-          50%{
-            opacity: 1;
-          }
-          100%{
-            opacity: 0.1;
-          }
-
-        }
-      }
-
-      >.line-title {
-        color: #707f48c7;
-        font-weight: 600;
-        line-height: 29px;
-        // text-stroke: 1px #707F48;
-        // text-align: center;
-        // font-style: normal;
-        // text-transform: none;
-        // -webkit-text-stroke: 1px #707F48;
-      }
-
-      color: #474747;
+      top: 0;
+      left: 0;
     }
 
-    >.game-income {
-      padding: 20px 10px;
-      // background-image: url(@/assets/images/line-scene.png);
-      // background-size: 100% 100%;
-      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    .edit-box {
+      width: 125%;
+      height: 35vh;
       display: flex;
       flex-direction: column;
-      align-items: center;
       justify-content: center;
-      width: calc(187 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(56 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      white-space: nowrap;
-      font-family: 'KaiTi';
-
+      align-items: center;
+      background: url(@/assets/images/game-tip.png);
+      background-size: 100% 100%;
       position: absolute;
-      bottom: calc(229 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: 50%;
       left: 50%;
-      transform: translateX(-50%);
-      padding-top: 30px;
-      letter-spacing: .05em;
-
-      >.down-triangle {
-        width: 0;
-        height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid #6F917F;
-        margin-bottom: 10px;
-        animation: fade-in-out 1.5s infinite;
-
-        @keyframes fade-in-out {
-          0%{
-            opacity: 0.1;
-          }
-          50%{
-            opacity: 1;
-          }
-          100%{
-            opacity: 0.1;
-          }
+      transform: translate(-50%, -50%);
+      z-index: 2;
+      font-family: "KaiTi";
+
+      > .input-box {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10%;
+        margin-right: 5%;
+
+        > input {
+          width: 100%;
+          height: 45px;
+          background: none;
+          border: none;
+          font-size: 20px;
+          white-space: pre-wrap;
+          color: white;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.548);
+          font-family: "KaiTi";
+          letter-spacing: 2px;
+        }
 
+        .tips {
+          font-family: "KaiTi";
+          font-size: 14px;
+          margin-top: calc(
+            5 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+          color: rgba(255, 255, 255, 0.418);
         }
       }
 
-    }
-
-    .title{
-      position: absolute;
-      left: 52%;
-      top:20%;
-      writing-mode: vertical-rl;
-      color: #476446;
-      font-family: 'KingHwa_OldSong';
-      font-size: calc(26 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      line-height: calc(35 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      display: flex;
-      letter-spacing: 6px;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      >div{
-        transform: translateX(-25%);
+      > textarea {
+        width: 34%;
+        height: 40%;
+        background: none;
+        border: none;
+        font-size: 20px;
+        white-space: pre-wrap;
       }
 
-    }
-
-    .cancel{
-      width: calc(92 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(36 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      background-image: url(@/assets/images/cancel-bg.png);
-      background-size: 100% 100%;
-      position: absolute;
-      left: 50%;
-      bottom: 40%;
-      transform: translateX(-20%);
-      display: flex;
-      justify-content: center;
-      align-items: end;
-      // padding-bottom: 10px;
-      color: #474747;
-      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: 'KaiTi';
-    }
-    .reset{
-      display: flex;
-      color: #474747;
-      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: 'KaiTi';
-      position: absolute;
-      left: 50%;
-      bottom: 30%;
-      transform: translateX(-35%);
-      >img{
-        margin-right: 10px;
-        animation: fade-in-out 1.5s infinite;
-
-        @keyframes fade-in-out {
-          0%{
-            opacity: 0.1;
-          }
-          50%{
-            opacity: 1;
-          }
-          100%{
-            opacity: 0.1;
-          }
-
-        }
-      }
-      >.cicle{
-        width: 15px;
-        height: 15px;
-        border-radius: 50px;
-        border: 1px solid #7B916B;
+      > .cencel-btn {
+        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: url(@/assets/images/game-tip-cancel.png);
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
         position: absolute;
-        right: -5px;
-        bottom: 0px;
+        left: 30%;
+        bottom: calc(
+          60 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        padding: 5px 10px;
+        font-family: "KaiTi";
       }
-    }
-
-    .btns {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-evenly;
-      position: absolute;
-      // height: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      left: calc(25 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      bottom: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
-      >img {
-        width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(24 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      > .yes-btn {
+        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: url(@/assets/images/game-tip-yes.png);
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #f4e09d;
+        position: absolute;
+        right: 38%;
+        bottom: calc(
+          60 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        padding: 5px 10px;
+        font-family: "KaiTi";
       }
     }
-
-    >.pagination {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
   }
-
-  .game-box {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-  }
-}
 </style>

src/views/MoreContent.vue

@@ -259,9 +259,7 @@
           <div
             class="watch-detail animation-show-long-hide"
             @click="
-              () => {
-                isShowGamePage = true;
-              }
+              router.replace('/game')
             "
           >
             开始体验
@@ -383,67 +381,6 @@
         x5-video-player-type="h5"
       />
     </Transition>
-    <!-- 游戏页面 -->
-    <div
-      v-if="isShowGamePage"
-      class="game-box"
-    >
-      <iframe
-        id="gameIframe"
-        :src="`./game/index.html`"
-      />
-      <!-- edit弹框 -->
-      <div
-        v-if="isShowToastFromGame"
-        class="edit-box"
-      >
-        <div class="input-box">
-          <input
-            ref="input1Ref"
-            v-model="input1"
-            @input="handleInput1"
-            @keyup="checkInput1"
-          >
-          <input
-            ref="input2Ref"
-            v-model="input2"
-            :readonly="input1.length < 7"
-            @input="handleInput2"
-            @keyup="checkInput2"
-          >
-          <div class="tips">
-            请输入内容
-          </div>
-        </div>
-        <div
-          class="cencel-btn"
-          @click="isShowToastFromGame = false"
-        >
-          取消
-        </div>
-        <div
-          class="yes-btn"
-          @click="saveTitle"
-        >
-          保存
-        </div>
-      </div>
-    </div>
-
-    <!-- 线上展厅 -->
-    <div
-      v-if="isShowScenePage"
-      class="scene-box"
-    >
-      <BtnBack
-        class="scene-back"
-        @click="closeScene()"
-      />
-      <iframe
-        src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
-        frameborder="0"
-      />
-    </div>
   </div>
 </template>
 
@@ -460,69 +397,13 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-const isShowGamePage = ref(false)
-
-const isShowScenePage = ref(false)
-
-const isShowToastFromGame = ref(false)
-
 const OpenScene = () => {
-  isShowScenePage.value = true
   const musicDom = document.getElementById("bg-music")
   musicDom.pause()
+  router.replace('/scene')
 }
 
-const closeScene = () => {
-  isShowScenePage.value = false
-  const musicDom = document.getElementById("bg-music")
-  musicDom.play()
-}
-
-const input1 = ref("")
-const input2 = ref("")
-const input1Ref = ref(null)
-const input2Ref = ref(null)
 
-const handleInput1 = () => {
-  console.log("第一个框得内容", input1.value)
-  if (input1.value.length >= 7) {
-    input1.value = input1.value.slice(0, 7) // 限制输入长度
-    input2Ref.value.focus() // 聚焦到第二个输入框
-  }
-}
-
-const checkInput1 = (event) => {
-  if (event.key === "Backspace" && input1.value.length === 0) {
-    input2.value = "" // 清空第二个输入框
-    input1Ref.value.focus() // 聚焦回到第一个输入框
-  }
-}
-
-const handleInput2 = () => {
-  // 这里可以添加类似的逻辑，但通常不需要，因为我们假设第二个输入框不会自动跳转回去
-  if (input2.value.length >= 7) {
-    input2.value = input2.value.slice(0, 7)
-  }
-}
-
-const checkInput2 = (event) => {
-  if (event.key === "Backspace" && input2.value.length === 0) {
-    input1Ref.value.focus() // 如果需要从第二个输入框清空后聚焦回第一个输入框
-  }
-}
-
-const saveTitle = () => {
-  var iframe = document.getElementById("gameIframe")
-  var iframeWindow = iframe.contentWindow || window.frames["yourIframeId"]
-  if (iframeWindow) {
-    iframeWindow.saveTitle(
-      input1.value.length >= 7
-        ? input1.value + "\n" + input2.value
-        : input1.value
-    )
-    isShowToastFromGame.value = false
-  }
-}
 
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
@@ -703,15 +584,6 @@ onMounted(() => {
   windowWidth.value = window.windowWidth
   windowHeight.value = window.windowHeight
 
-  window.closeGame = () => {
-    isShowGamePage.value = false
-  }
-
-  window.isShowToastFromGame = () => {
-    isShowToastFromGame.value = true
-    input1.value = ""
-    input2.value = ""
-  }
 })
 </script>
 

src/views/SceneView.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const closeScene = () => {
+  const musicDom = document.getElementById('bg-music')
+  musicDom.play()
+  router.replace('/more-content?anchorIdx=3')
+}
+</script>
+
+<template>
+  <div class="scene-box">
+    <BtnBack
+      class="scene-back"
+      @click="closeScene()"
+    />
+    <iframe
+      src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
+      frameborder="0"
+    />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.scene-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  >.scene-back {
+    position: absolute;
+    left: 20px;
+    top: 25px;
+    transform: scale(1.2);
+    z-index: 2;
+  }
+
+  >iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>