feat:新增游戏结尾页面（逻辑未接通）

src/router/index.js

@@ -1,6 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import MoreContent from '../views/MoreContent.vue'
+import GameView from '../views/GameView.vue'
+
 // import store from '@/store/index.js'
 
 const routes = [
@@ -18,6 +20,12 @@ const routes = [
     name: 'MoreContent',
     component: MoreContent,
   },
+  {
+    path: '/game',
+    name: 'Game',
+    component: GameView,
+  },
+
 ]
 
 const router = createRouter({

src/views/GameView.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { ref } from 'vue'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+
+// home-封面  unity-游戏 scene-线上展
+const mode = ref('home')
+
+const goBack = () => {
+  window.history.back()
+}
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+</script>
+
+<template>
+  <div class="game-page">
+    <!--默认首页 -->
+    <div class="home">
+      <div class="line-scene">
+        <div class="line-title">
+          《无尽藏》
+        </div>
+        线上展
+      </div>
+      <div
+        class="game-income"
+        @click="() => { mode = 'unity' }"
+      >
+        <div class="down-triangle" />
+        <div>《修篁树石图》画作创作</div>
+      </div>
+      <div class="btns">
+        <!-- 加载中... -->
+        <img
+          src="@/assets/images/icon-loading.png"
+          alt="loading"
+        >
+        <!-- 返回... -->
+        <img
+          src="@/assets/images/icon_back_white.png"
+          alt="loading"
+          @click="goBack()"
+        >
+      </div>
+    </div>
+    <!-- 游戏页面 -->
+    <iframe
+      v-if="mode === 'unity'"
+      class="game-box"
+      src="https://sit-cnzhengquan.4dage.com/web/index.html#/"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.game-page {
+  width: 100%;
+  height: 100%;
+
+  .home {
+    width: 100%;
+    height: 100%;
+    background: url(@/assets/images/bg-game.png);
+    background-size: 100% 100%;
+
+    // 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: absolute;
+      top: calc(487 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: 50%;
+      transform: translateX(-50%);
+      padding-top: 30px;
+      letter-spacing: .05em;
+
+      >.line-title {
+        color: #707F48;
+        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;
+    }
+
+    >.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'));
+      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';
+
+      position: absolute;
+      top: calc(576 /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;
+      }
+
+    }
+
+    .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'));
+      }
+    }
+
+  }
+
+  .game-box {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+</style>