0817

2025-08-17 16:40:04 +08:00 · 2025-08-17 16:40:04 +08:00 · 8dd2842059
commit 8dd2842059
parent 98b4d3a543
6 changed files with 25 additions and 9 deletions
--- a/index.html
+++ b/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/ico.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>ASM 科普 H5</title>
  </head>
  <body>
    <div id="app"></div>
--- a/public/ico.png
+++ b/public/ico.png
--- a/src/App.vue
+++ b/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 {
--- a/src/assets/main.mp4
+++ b/src/assets/main.mp4
--- a/src/assets/main.zip
+++ b/src/assets/main.zip
--- a/src/style.css
+++ b/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,