feat: stylist&customer&sex页面

src/views/stylist/index.vue

@@ -22,9 +22,9 @@
           </svg>
         </div>
 
-        <van-swipe  touchable ref="swiperRef">
+        <van-swipe touchable ref="swiperRef">
           <van-swipe-item v-for="item in stylists" :key="item.id">
-            <div class="swiper-container">
+            <div class="swiper-container" @click="handleClickStylist(item)">
               <img :src="item.image" />
               <div class="text-container">
                 <div class="name">{{ item.name }}</div>
@@ -52,17 +52,31 @@
 
     <!-- Continue按钮 -->
     <div class="continue-button" @click="handleContinue">Continue</div>
+    <van-dialog
+      class="video-dialog"
+      :show-confirm-button="false"
+      :show-cancel-button="false"
+      v-model:show="showVideo"
+      title=""
+      show-cancel-button
+    >
+      <div class="close-btn" @click="showVideo = false">
+        <van-icon name="cross" class="close-icon" />
+      </div>
+      <Video ref="videoRef" />
+    </van-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import Video from './components/Video.vue'
 
 const router = useRouter()
 
 // stylist数据
-const stylists = ref([
+const stylists = ref<array>([
   {
     id: 1,
     name: 'Vera Lo',
@@ -89,7 +103,9 @@ const stylists = ref([
   }
 ])
 
-const swiperRef = ref(null)
+const swiperRef = ref<any>(null)
+const showVideo = ref<boolean>(false)
+const videoRef = ref<any>(null)
 
 const handleChangeSwiper = (type: 'next' | 'prev') => {
   if (type === 'next') {
@@ -99,10 +115,23 @@ const handleChangeSwiper = (type: 'next' | 'prev') => {
   }
 }
 
+const handleClickStylist = (item: any) => {
+  console.log(item)
+  showVideo.value = true
+}
+
 const handleContinue = () => {
   // 跳转到下一个页面
   router.push('/workshop')
 }
+
+// 监听showVideo变化，关闭时暂停视频
+watch(showVideo, (newValue) => {
+  if (!newValue && videoRef.value) {
+    videoRef.value.pause()
+    videoRef.value.reset()
+  }
+})
 </script>
 
 <style scoped lang="less">
@@ -137,16 +166,16 @@ const handleContinue = () => {
     font-size: 15rem;
     font-weight: 400;
     color: white;
+    font-family: 'boskaRegular';
   }
 }
 
-
 .carousel-container {
   position: relative;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
+  // align-items: center;
+  // justify-content: center;
+  // flex: 1;
   margin: 2rem 0;
 }
 
@@ -239,18 +268,64 @@ const handleContinue = () => {
 
 .continue-button {
   position: absolute;
-  bottom: 3rem;
-  right: 2rem;
+  bottom: 6.4rem;
+  right: 7.6rem;
   padding: 1.2rem 2.4rem;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid #fff;
   border-radius: 1rem;
   color: white;
-  font-size: 1.6rem;
+  font-size: 4rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.3s ease;
   z-index: 3;
+  font-family: 'satoshiRegular';
+}
+
+:deep(.video-dialog) {
+  width: 80%;
+  background: rgba(0, 0, 0, 0.3);
+  
+  .close-btn {
+    width: 8.6rem;
+    height: 8.4rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(145deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
+    border-radius: 50%;
+    cursor: pointer;
+    backdrop-filter: blur(1rem);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 0.8rem 1.6rem rgba(0, 0, 0, 0.4),
+      inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.1),
+      inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    
+    &:hover {
+      transform: translateY(-0.2rem);
+      box-shadow: 
+        0 1.2rem 2.4rem rgba(0, 0, 0, 0.5),
+        inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.15),
+        inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.4);
+    }
+    
+    &:active {
+      transform: translateY(0.1rem);
+      box-shadow: 
+        0 0.4rem 0.8rem rgba(0, 0, 0, 0.3),
+        inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
+    }
+    
+    .close-icon {
+      color: white;
+      font-size: 2.4rem;
+      text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.5);
+    }
+  }
 }
 </style>