fix:更新一些细节

src/views/GameView.vue

@@ -6,7 +6,7 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import Toast from '@/components/ToastBox.vue'
 const router = useRouter()
 
-// home-封面  unity-游戏 scene-线上展
+// home-封面  unity-游戏 scene-线上展  reset-确认是否重新
 const mode = ref('home')
 
 const goBack = () => {
@@ -15,6 +15,7 @@ const goBack = () => {
 
 const goHome = () => {
   router.replace('/')
+  // mode.value = 'reset'
 }
 
 const toast = ref(null)
@@ -47,23 +48,53 @@ onMounted(() => {
   />
   <div class="game-page">
     <!--默认首页 -->
-    <div class="home">
+    <div
+      class="home"
+      :style="{backgroundImage: mode ==='reset' ?`url(${require('@/assets/images/reset-bg.png')})`:'',background:'cover'}"
+    >
       <div
+        v-if="mode !='reset'"
         class="line-scene"
         @click="showToast()"
       >
+        <div class="down-triangle" />
         <div class="line-title">
           《无尽藏》
         </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
+        v-if="mode == 'reset'"
+        class="cancel"
+      >
+        取消
+      </div>
+      <div
+        v-if="mode == 'reset'"
+        class="reset"
+      >
+        <img
+          src="@/assets/images/reset-icon.png"
+          alt=""
+        >
+        重新开始
+      </div>
       <div class="btns">
         <!-- 加载中... -->
         <img
@@ -118,6 +149,32 @@ onMounted(() => {
       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;
@@ -161,10 +218,34 @@ onMounted(() => {
         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;
+          }
+
+        }
       }
 
     }
 
+    .title{
+      position: absolute;
+      left: 52%;
+      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'));
+    }
+
     .btns {
       display: flex;
       flex-direction: column;