feat: 视频组件修改&示例视频替换

src/assets/icons/mute.svg

@@ -0,0 +1 @@
+<svg t="1761623835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8645" width="200" height="200"><path d="M426.666667 853.333333a42.666667 42.666667 0 0 1-26.453334-9.386666L198.4 682.666667H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V384a42.666667 42.666667 0 0 1 42.666667-42.666667h155.733333l201.813333-161.28a42.666667 42.666667 0 0 1 42.666667-5.12A42.666667 42.666667 0 0 1 469.333333 213.333333v597.333334a42.666667 42.666667 0 0 1-24.32 38.4 38.826667 38.826667 0 0 1-18.346666 4.266666z m-341.333334-256h128a42.666667 42.666667 0 0 1 26.453334 9.386667L384 721.92V302.08l-144.213333 115.2A42.666667 42.666667 0 0 1 213.333333 426.666667H85.333333zM682.666667 682.666667a42.666667 42.666667 0 0 1-30.293334-12.373334 42.666667 42.666667 0 0 1 0-60.586666l256-256a42.666667 42.666667 0 0 1 60.586667 60.586666l-256 256A42.666667 42.666667 0 0 1 682.666667 682.666667z" p-id="8646" fill="#ffffff"></path><path d="M938.666667 682.666667a42.666667 42.666667 0 0 1-30.293334-12.373334l-256-256a42.666667 42.666667 0 0 1 60.586667-60.586666l256 256a42.666667 42.666667 0 0 1 0 60.586666A42.666667 42.666667 0 0 1 938.666667 682.666667z" p-id="8647" fill="#ffffff"></path></svg>

src/assets/icons/vol.svg

@@ -0,0 +1 @@
+<svg t="1761623735176" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7161" width="200" height="200"><path d="M469.333333 853.333333a42.666667 42.666667 0 0 1-26.453333-9.386666L241.066667 682.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V384a42.666667 42.666667 0 0 1 42.666666-42.666667h155.733334l201.813333-161.28a42.666667 42.666667 0 0 1 42.666667-5.12A42.666667 42.666667 0 0 1 512 213.333333v597.333334a42.666667 42.666667 0 0 1-24.32 38.4 38.826667 38.826667 0 0 1-18.346667 4.266666z m-341.333333-256h128a42.666667 42.666667 0 0 1 26.88 9.386667l143.786667 115.2V302.08l-143.786667 115.2A42.666667 42.666667 0 0 1 256 426.666667H128zM813.653333 856.32a42.666667 42.666667 0 0 1-30.293333-12.373333 42.666667 42.666667 0 0 1 0-60.586667 384 384 0 0 0 0-542.72 42.666667 42.666667 0 0 1 60.586667-60.586667 469.333333 469.333333 0 0 1 0 663.893334 42.666667 42.666667 0 0 1-30.293334 12.373333z m-150.613333-151.04a42.666667 42.666667 0 0 1-30.293333-12.373333 42.666667 42.666667 0 0 1 0-60.586667 170.666667 170.666667 0 0 0 0-241.066667 42.666667 42.666667 0 0 1 60.586666-60.586666 256 256 0 0 1 0 362.24 42.666667 42.666667 0 0 1-30.293333 12.373333z" p-id="7162" fill="#ffffff"></path></svg>

src/views/stylist/components/Video.vue

@@ -32,7 +32,7 @@
       <div class="control-right">
         <div class="volume-btn" @click="toggleMute">
           <!-- <van-icon :name="isMuted ? 'volume-mute' : 'volume'" /> -->
-          <SvgIcon :name="isMuted ? 'vol' : 'vol_close'" size="20" />
+          <SvgIcon :name="isMuted ? 'mute' : 'vol'" size="20" />
         </div>
       </div>
     </div>
@@ -142,13 +142,15 @@ defineExpose({
 <style scoped lang="less">
 .video-container {
   position: relative;
-  height: 60rem;
+  width: 100%;
+  height: 100%;
+  min-height: 50rem;
 
   .video {
     width: 100%;
     height: 100%;
     position: relative;
-    object-fit: fill;
+    object-fit: cover;
   }
 
   // 视频控制条样式

src/views/stylist/index.vue

@@ -7,9 +7,7 @@
         <div class="title">CHOOSE YOUR STYLIST</div>
       </div>
 
-      <!-- 轮播容器 -->
-      <div class="carousel-container">
-        <!-- 左箭头 -->
+      <div class="carousel-container" v-show="!showVideo">
         <div class="nav-arrow left" @click="handleChangeSwiper('prev')">
           <van-icon name="arrow-left" color="#fff" size="40" />
         </div>
@@ -30,15 +28,6 @@
 
         <div class="nav-arrow right" @click="handleChangeSwiper('next')">
           <van-icon name="arrow" color="#fff" size="40" />
-          <!-- <svg width="15" height="26" viewBox="0 0 24 24" fill="none">
-            <path
-              d="M9 18L15 12L9 6"
-              stroke="white"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg> -->
         </div>
       </div>
     </div>
@@ -290,9 +279,13 @@ watch(showVideo, (newValue) => {
   font-family: 'satoshiRegular';
 }
 
+:deep(.van-overlay){
+  background: transparent;
+}
+
 :deep(.video-dialog) {
-  width: 80%;
-  background: rgba(0, 0, 0, 0.3);
+  width: calc(100% - 12rem);
+  background: transparent;
 
   .close-btn {
     width: 8.6rem;