fix win vframe; prevent context menu

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>

src/App.vue

@@ -117,6 +117,9 @@ window.addEventListener('pointerdown', () => {
   }
 });
 
+window.addEventListener('contextmenu', (e) => {
+  e.preventDefault();
+});
 
 const isPortrait = ref(window.innerHeight > window.innerWidth);
 
@@ -162,7 +165,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 +200,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 +273,7 @@ const currentDesc = computed(() => {
     /* 标题与内容间距 */
     padding: 1vmin .5vmin;
     /* 给下划线留空间 */
-    width: 70vmin;
+    width: 90vmin;
 
     &::after {
       content: '';
@@ -283,7 +289,7 @@ const currentDesc = computed(() => {
   }
 
   .desc-title {
-    font-size: 5.5vmin;
+    font-size: 6vmin;
     letter-spacing: .2em;
     line-height: 1;
     /* 避免额外高度 */
@@ -292,7 +298,7 @@ const currentDesc = computed(() => {
   }
 
   .desc-content {
-    font-size: 2vmin;
+    font-size: 2.8vmin;
     line-height: 1.2;
     font-weight: light;
   }
@@ -370,9 +376,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/ani-comp/utils.ts

@@ -8,7 +8,8 @@ export async function loadFromResSmartly({ url, rules, onprogress }: {
     onprogress?: (progress: { download: number, decode: number }) => void
 }): Promise<CanvasImageSource[]> {
     const isChromium = navigator.userAgent.includes('Chrome') || navigator.userAgent.includes('Chromium');
-    const useWebCodec = isChromium && 'VideoDecoder' in window;
+    const isWindows = navigator.userAgent.includes('Windows');
+    const useWebCodec = isChromium && 'VideoDecoder' in window && !isWindows;
 
     const finalType =
         useWebCodec && url.video ? 'video' :

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,