feat:新增游戏入口确认页面

src/views/GameView.vue

@@ -7,15 +7,19 @@ import Toast from '@/components/ToastBox.vue'
 const router = useRouter()
 
 // home-封面  unity-游戏 scene-线上展  reset-确认是否重新
-const mode = ref('home')
+const mode = ref('reset')
 
 const goBack = () => {
   window.history.back()
 }
 
 const goHome = () => {
+  // router.replace('/')
+  mode.value = 'reset'
+}
+
+const resetHome = () => {
   router.replace('/')
-  // mode.value = 'reset'
 }
 
 const toast = ref(null)
@@ -71,29 +75,33 @@ onMounted(() => {
         <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'
+        }"
       >
         取消
       </div>
       <div
         v-if="mode == 'reset'"
         class="reset"
+        @click="resetHome()"
       >
         <img
           src="@/assets/images/reset-icon.png"
           alt=""
         >
         重新开始
+        <div class="cicle" />
       </div>
       <div class="btns">
         <!-- 加载中... -->
@@ -242,8 +250,72 @@ onMounted(() => {
       top:20%;
       writing-mode: vertical-rl;
       color: #476446;
-      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      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%);
+      }
+
+    }
+
+    .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;
+        position: absolute;
+        right: -5px;
+        bottom: 0px;
+      }
     }
 
     .btns {