feat: 双勾设色页 优化需求：视频按钮改版

src/views/ShuangGou.vue

@@ -30,16 +30,27 @@
     >
     <div class="title">
       <h1>双钩设色</h1>
-      <button class="play-video">
-        <img
-          class=""
-          src="@/assets/images/icon_video.png"
-          alt=""
-          draggable="false"
-        >
-      </button>
     </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"
       class="videos"
@@ -168,9 +179,6 @@ 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;
     >h1{
       flex: 0 0 auto;
       writing-mode: vertical-lr;
@@ -180,20 +188,47 @@ const activeVideoIdx = ref(0)
       color: #474747;
       letter-spacing: 0.2em;
     }
-    >button.play-video{
-      width: 4.32vh;
-      height: 4.32vh;
-      >img{
-        width: 100%;
-        height: 100%;
-      }
-    }
     @media (max-aspect-ratio: 1250/835) {
       left: initial;
       right: 3vw;
     }
   }
 
+  >button.play-video{
+    position: absolute;
+    bottom: 37px;
+    right: 33px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    >img{
+      width: 48px;
+      height: 48px;
+      margin-bottom: 14px;
+    }
+    >img.icon-normal{
+      display: block;
+    }
+    >img.icon-active{
+      display: none;
+    }
+    >span{
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: 20px;
+      color: #7B916B;
+      line-height: 23px;
+    }
+  }
+  >button.play-video:hover{
+    >img.icon-normal{
+      display: none;
+    }
+    >img.icon-active{
+      display: block;
+    }
+  }
+
   >.videos{
     position: absolute;
     left: 0;