perf: 又改版

src/views/ShuangGou.vue

@@ -29,29 +29,29 @@
     />
     <div class="title">
       <h1>双钩设色</h1>
+      <button
+        class="play-video"
+        @click="isShowVideos = true"
+      >
+        <img
+          class="icon-normal"
+          src="@/assets/images/btn-play-video.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="icon-active"
+          src="@/assets/images/btn-play-video-active.png"
+          alt=""
+          draggable="false"
+        >
+        <span>观看视频</span>
+      </button>
     </div>
     <div class="text">
       <p><span>双钩</span>，中国画技法名。用线条钩描物象的轮廓，通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，也叫“双钩”；双钩后填墨的称为“双钩廓填”。</p>
       <p><span>设色</span>，国画中晕染彩色的意思，画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”，指画面中不出现彩色，或者极少出现彩色的，以墨色为主绘制的作品。</p>
     </div>
-    <button
-      class="play-video"
-      @click="isShowVideos = true"
-    >
-      <img
-        class="icon-normal"
-        src="@/assets/images/btn-play-video.png"
-        alt=""
-        draggable="false"
-      >
-      <img
-        class="icon-active"
-        src="@/assets/images/btn-play-video-active.png"
-        alt=""
-        draggable="false"
-      >
-      <span>观看视频</span>
-    </button>
 
     <div
       v-if="isShowVideos"
@@ -124,10 +124,10 @@ const hotspot1Y = ref(-100)
 const hotspot2X = ref(-100)
 const hotspot2Y = ref(-100)
 function setHotspotPos() {
-  const { x: x1, y: y1 } = utils.mapPosFromDraftToWindow({ x: 484, y: 420 }, 'cover', 1920, 972)
+  const { x: x1, y: y1 } = utils.mapPosFromDraftToWindow({ x: 484, y: 330 }, 'cover', 1920, 972)
   hotspot1X.value = x1
   hotspot1Y.value = y1
-  const { x: x2, y: y2 } = utils.mapPosFromDraftToWindow({ x: 214, y: 700 }, 'cover', 1920, 972)
+  const { x: x2, y: y2 } = utils.mapPosFromDraftToWindow({ x: 214, y: 630 }, 'cover', 1920, 972)
   hotspot2X.value = x2
   hotspot2Y.value = y2
 }
@@ -191,6 +191,13 @@ const activeVideoIdx = ref(0)
     top: 8.13vh;
     left: calc(47vw + 17.9vh + 7.61vh + 28.40vh + 14.51vh);
     position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    @media (max-aspect-ratio: 1250/835) {
+      left: initial;
+      right: 3vw;
+    }
     >h1{
       flex: 0 0 auto;
       writing-mode: vertical-lr;
@@ -200,9 +207,38 @@ const activeVideoIdx = ref(0)
       color: #474747;
       letter-spacing: 0.2em;
     }
-    @media (max-aspect-ratio: 1250/835) {
-      left: initial;
-      right: 3vw;
+    >button.play-video{
+      flex: 0 0 auto;
+      margin-top: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      >img{
+        width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        margin-bottom: calc(14px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      }
+      >img.icon-normal{
+        display: block;
+      }
+      >img.icon-active{
+        display: none;
+      }
+      >span{
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        color: #7B916B;
+        line-height: calc(23px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      }
+    }
+    >button.play-video:hover{
+      >img.icon-normal{
+        display: none;
+      }
+      >img.icon-active{
+        display: block;
+      }
     }
   }
   >.text{
@@ -235,41 +271,6 @@ const activeVideoIdx = ref(0)
     }
   }
 
-  >button.play-video{
-    position: absolute;
-    bottom: calc(37px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    right: calc(33px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    >img{
-      width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      margin-bottom: calc(14px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    }
-    >img.icon-normal{
-      display: block;
-    }
-    >img.icon-active{
-      display: none;
-    }
-    >span{
-      font-family: KaiTi, KaiTi;
-      font-weight: 400;
-      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      color: #7B916B;
-      line-height: calc(23px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    }
-  }
-  >button.play-video:hover{
-    >img.icon-normal{
-      display: none;
-    }
-    >img.icon-active{
-      display: block;
-    }
-  }
-
   >.videos{
     position: absolute;
     left: 0;