fix yuv420 in webp split desc text from main-video

src/App.vue

@@ -82,6 +82,19 @@ function onFrameProgress(frame: number) {
     eas.play('whoosh');
   }
 
+  if (frame == 243) {
+    descStage.value = [0, 0];
+  } else if (frame == 303) {
+    descStage.value = [0, 1];
+  } else if (frame == 347) {
+    descStage.value = [1, 0];
+  } else if (frame == 506) {
+    descStage.value = [2, 0];
+  } else if (frame == 647) {
+    descStage.value = [3, 0];
+  } else if (frame == 803) {
+    descStage.value = [-1, 0]; // Reset description stage when reaching the end
+  }
 }
 
 function clickBtn(index: number) {
@@ -126,6 +139,25 @@ const loadProgress = ref({ download: 0, decode: 0 });
 const mainVideoURL = new URL('./assets/main.mp4', import.meta.url).href;
 const mainZipURL = new URL('./assets/main.zip', import.meta.url).href;
 
+const descStage = ref([-1, 0])
+
+// 描述内容数据放在 setup 中
+interface DescItem { title: string; contents: string[] }
+const descData: DescItem[] = [
+  { title: '第1步', contents: ['首先，引入一种化学物质', '在反应腔内与硅片表面发生反应形成一层薄膜'] },
+  { title: '第2步', contents: ['然后，将所有残留的分子<br>通过惰性气体或化学惰性气体吹扫出去'] },
+  { title: '第3步', contents: ['接下来，引入第二种元素的反应气体与薄膜发生反应'] },
+  { title: '第4步', contents: ['随后反应腔内残留的原子和分子再次被吹扫清除'] },
+];
+
+const currentDesc = computed(() => {
+  const [sIdx, subIdx] = descStage.value;
+  if (sIdx < 0) return null;
+  const item = descData[sIdx];
+  return { title: item.title, content: item.contents[Math.min(subIdx, item.contents.length - 1)] };
+});
+
+
 </script>
 
 <template>
@@ -178,10 +210,97 @@ const mainZipURL = new URL('./assets/main.zip', import.meta.url).href;
         </div>
       </div>
     </Transition>
+
+    <Transition name="fade">
+      <div class="desc" v-if="descStage[0] >= 0">
+        <div class="desc-wrapper">
+          <Transition name="fade" mode="out-in">
+            <div class="desc-item" :key="descStage[0]">
+              <div class="desc-title">{{ currentDesc?.title }}</div>
+              <Transition name="fade" mode="out-in">
+                <div class="desc-content" :key="descStage[0] + '-' + descStage[1]" v-html="currentDesc?.content"></div>
+              </Transition>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped lang="scss">
+@keyframes stretch {
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+
+.desc {
+  color: white;
+
+  .desc-wrapper {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    aspect-ratio: 16 / 9;
+    height: 100vmin;
+    max-width: 100vmax;
+    max-height: calc(100vmax * 9 / 16);
+  }
+
+  .desc-item {
+    position: relative;
+    left: 9vmin;
+    top: 6vmin;
+    display: flex;
+    /* 横向排列 */
+    flex-direction: row;
+    align-items: flex-end;
+    /* 底部对齐 */
+    gap: 4vmin;
+    /* 标题与内容间距 */
+    padding: 1vmin .5vmin;
+    /* 给下划线留空间 */
+    width: 70vmin;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: .3vmin;
+      /* 更细的下划线 */
+      background-color: white;
+      animation: stretch 1s ease forwards;
+    }
+  }
+
+  .desc-title {
+    font-size: 5.5vmin;
+    letter-spacing: .2em;
+    line-height: 1;
+    /* 避免额外高度 */
+    white-space: nowrap;
+    /* 保持一行 */
+  }
+
+  .desc-content {
+    font-size: 2vmin;
+    line-height: 1.2;
+    font-weight: light;
+  }
+
+
+}
+
+
 .intro-text {
   position: absolute;
   transform: translate(-50%, -50%);
@@ -271,4 +390,14 @@ img {
   height: 100%;
   width: 100%;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .4s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>