0817

src/App.vue

@@ -162,7 +162,7 @@ const currentDesc = computed(() => {
 
 <template>
   <div class="app" :class="{ rotate: isPortrait }">
-    <audio :src="bgmURL" loop autoplay ref="bgm-ele"></audio>
+    <audio :src="bgmURL" loop autoplay ref="bgm-ele" volume="0.7"></audio>
 
     <Transition name="fade">
       <Loader v-if="loadProgress.decode < 1" :progress="loadProgress" />
@@ -197,7 +197,10 @@ const currentDesc = computed(() => {
         <div class="action" v-for="(s, index) in stages" :key="index"
           :style="{ cursor: currentStage == index ? 'pointer' : 'not-allowed' }" @click="clickBtn(index)">
           <img src="./assets/icon_bg.png" alt="" class="bg" />
-          <img :src="stageIcons[index]" alt="" class="icon" />
+          <div class="icon">
+            <span class="step-label">Step</span>
+            <span class="step-number">{{ index + 1 }}</span>
+          </div>
           <AniEle :url="icon_grow" :width="210" :height="242" :rules="[{
             name: 'grow',
             duration: 33,
@@ -267,7 +270,7 @@ const currentDesc = computed(() => {
     /* 标题与内容间距 */
     padding: 1vmin .5vmin;
     /* 给下划线留空间 */
-    width: 70vmin;
+    width: 90vmin;
 
     &::after {
       content: '';
@@ -283,7 +286,7 @@ const currentDesc = computed(() => {
   }
 
   .desc-title {
-    font-size: 5.5vmin;
+    font-size: 6vmin;
     letter-spacing: .2em;
     line-height: 1;
     /* 避免额外高度 */
@@ -292,7 +295,7 @@ const currentDesc = computed(() => {
   }
 
   .desc-content {
-    font-size: 2vmin;
+    font-size: 2.8vmin;
     line-height: 1.2;
     font-weight: light;
   }
@@ -370,9 +373,21 @@ img {
   .icon {
     position: absolute;
     left: 50%;
-    top: 50%;
+    top: 49%;
     transform: translate(-50%, -50%);
     width: 8vmin;
+    color: #3C163F;
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    .step-label {
+      font-size: 2.5vmin;
+    }
+    .step-number {
+      font-size: 6vmin;
+      font-weight: bold;
+      line-height: 5vmin;
+    }
   }
 
   .intro {

src/style.css

@@ -1,5 +1,6 @@
 body{
   margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 * {
@@ -19,7 +20,7 @@ body{
 
 .slide-in-enter-active,
 .slide-in-leave-active {
-  transition: transform 0.5s ease;
+  transition: transform .75s ease;
 }
 
 .slide-in-enter-from,