feat: stylist&customer&sex页面

src/views/login/LoginPage.vue

@@ -291,6 +291,7 @@ const handlePasswordInput = () => {
 .header {
   margin-bottom: 4rem;
   color: white;
+  font-family: 'satoshiRegular';
 }
 
 .title {

src/views/login/WelcomePage.vue

@@ -39,12 +39,12 @@ const goToSignup = () => {
   font-weight: 400;
   padding-bottom: 20rem;
   .title{
-    font-family: Boska;
+    font-family: 'boskaRegular';
     line-height: 7.55rem;
   }
   .subtitle{
     font-size: 3rem;
-    font-family: Satoshi;
+    font-family: 'satoshiRegular';
     margin: 2rem 0;
   }
   .sign-btn{

src/views/stylist/components/Video.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="video-container">
+    <video
+      ref="videoRef"
+      class="video"
+      :src="videoSrc"
+      @loadedmetadata="onVideoLoaded"
+      @timeupdate="onTimeUpdate"
+      @ended="onVideoEnded"
+    ></video>
+
+    <!-- 视频控制条 -->
+    <div class="video-controls">
+      <div class="control-left">
+        <div class="play-btn" @click="togglePlay">
+          <van-icon :name="isPlaying ? 'pause' : 'play'" />
+        </div>
+      </div>
+
+      <div class="progress-section">
+        <div class="current-time">{{ formatTime(currentTime) }}</div>
+        <div class="progress-container">
+          <div class="progress-bar" @click="seekTo">
+            <div class="progress-bg"></div>
+            <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
+            <div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
+          </div>
+        </div>
+        <div class="total-time">{{ formatTime(duration) }}</div>
+      </div>
+
+      <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" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import Video from '@/assets/media/example_video.mp4'
+// Props
+interface Props {
+  videoSrc?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  videoSrc: Video
+})
+
+// 视频相关状态
+const videoRef = ref<HTMLVideoElement | null>(null)
+const isPlaying = ref<boolean>(false)
+const currentTime = ref<number>(0)
+const duration = ref<number>(0)
+const isMuted = ref<boolean>(false)
+
+// 计算进度百分比
+const progressPercentage = computed(() => {
+  if (duration.value === 0) return 0
+  return (currentTime.value / duration.value) * 100
+})
+
+// 格式化时间显示
+const formatTime = (time: number): string => {
+  const minutes = Math.floor(time / 60)
+  const seconds = Math.floor(time % 60)
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+}
+
+// 视频事件处理
+const onVideoLoaded = () => {
+  if (videoRef.value) {
+    duration.value = videoRef.value.duration
+  }
+}
+
+const onTimeUpdate = () => {
+  if (videoRef.value) {
+    currentTime.value = videoRef.value.currentTime
+  }
+}
+
+const onVideoEnded = () => {
+  isPlaying.value = false
+  currentTime.value = 0
+}
+
+// 视频控制方法
+const togglePlay = () => {
+  if (videoRef.value) {
+    if (isPlaying.value) {
+      videoRef.value.pause()
+    } else {
+      videoRef.value.play()
+    }
+    isPlaying.value = !isPlaying.value
+  }
+}
+
+const toggleMute = () => {
+  if (videoRef.value) {
+    videoRef.value.muted = !videoRef.value.muted
+    isMuted.value = videoRef.value.muted
+  }
+}
+
+const seekTo = (event: MouseEvent) => {
+  if (videoRef.value && duration.value > 0) {
+    const progressBar = event.currentTarget as HTMLElement
+    const rect = progressBar.getBoundingClientRect()
+    const clickX = event.clientX - rect.left
+    const percentage = clickX / rect.width
+    const newTime = percentage * duration.value
+    videoRef.value.currentTime = newTime
+    currentTime.value = newTime
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  pause: () => {
+    if (videoRef.value) {
+      videoRef.value.pause()
+      isPlaying.value = false
+    }
+  },
+  reset: () => {
+    if (videoRef.value) {
+      videoRef.value.pause()
+      videoRef.value.currentTime = 0
+      isPlaying.value = false
+      currentTime.value = 0
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.video-container {
+  position: relative;
+  height: 60rem;
+
+  .video {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    object-fit: fill;
+  }
+
+  // 视频控制条样式
+  .video-controls {
+    position: absolute;
+    bottom: 2rem;
+    left: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.7);
+    // padding: 1.5rem 2rem;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    z-index: 2;
+    border-radius: 5px;
+
+    .control-left {
+      display: flex;
+      align-items: center;
+
+      .play-btn {
+        width: 4rem;
+        height: 4rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: white;
+        font-size: 2rem;
+      }
+    }
+
+    .progress-section {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+
+      .current-time,
+      .total-time {
+        color: white;
+        font-size: 1.4rem;
+        font-family: 'satoshiRegular';
+        white-space: nowrap;
+        min-width: 4rem;
+        text-align: center;
+      }
+
+      .progress-container {
+        flex: 1;
+        height: 0.4rem;
+        position: relative;
+        cursor: pointer;
+
+        .progress-bar {
+          width: 100%;
+          height: 100%;
+          position: relative;
+
+          .progress-bg {
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 0.2rem;
+          }
+
+          .progress-fill {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            background: white;
+            border-radius: 0.2rem;
+            transition: width 0.1s ease;
+          }
+
+          .progress-thumb {
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 1.2rem;
+            height: 1.2rem;
+            background: white;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: left 0.1s ease;
+          }
+        }
+      }
+    }
+
+    .control-right {
+      display: flex;
+      align-items: center;
+
+      .volume-btn {
+        width: 4rem;
+        height: 4rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: white;
+        font-size: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/stylist/customer.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="customer-container safe-area-top" :class="{'form-mode': pageMode === 'form'}">
+    <template v-if="pageMode === 'entry'">
+      <div class="setting flex flex-between">
+        <van-icon name="arrow-left" color="#fff" size="70" />
+        <SvgIcon name="setting" color="#fff" size="70" style="width: 7rem" />
+      </div>
+      <div class="content flex flex-center flex-column">
+        <div class="text">Who is Your Customer?</div>
+      </div>
+      <div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+type PageMode = 'form' | 'entry'
+const pageMode = ref<PageMode>('entry')
+
+const handleChangeMode = (mode: PageMode) => {
+  pageMode.value = mode
+}
+</script>
+<style lang="less" scoped>
+.customer-container {
+  height: 100vh;
+  overflow: hidden;
+  color: #fff;
+  position: relative;
+  background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding-top: 12.17rem;
+  &.form-mode {
+    background: url('@/assets/images/has_shouder_bg.png') no-repeat center center;
+  }
+
+  .setting {
+    z-index: 1;
+    padding: 3.17rem 4.9rem 0 8.4rem;
+  }
+  .content {
+    margin-top: 55.3rem;
+    .text {
+      font-family: 'satoshiBold';
+      font-size: 13rem;
+      line-height: 112.99%;
+      text-align: center;
+      letter-spacing: 2;
+    }
+    .start-btn {
+      font-size: 5.6rem;
+      width: 32.5rem;
+      height: 8.1rem;
+      border: 2px solid #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4rem;
+    }
+  }
+  .entry-btn {
+    position: absolute;
+    border: 2px solid #fff;
+    bottom: 10.3rem;
+    right: 5.5rem;
+    height: 9rem;
+    width: 27.5rem;
+    line-height: 9rem;
+    font-size: 5.6rem;
+  }
+}
+</style>

src/views/stylist/dressfor.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="dressfor-container flex flex-center">
+    <div class="content flex flex-center flex-column">
+      <div class="text">What are you dressing for?</div>
+      <div class="start-btn" @click="handleStart">Start</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const handleStart = () => {
+  console.log('click start')
+}
+</script>
+<style lang="less" scoped>
+.dressfor-container {
+  height: 100vh;
+  overflow: hidden;
+  color: #fff;
+  position: relative;
+  background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 6rem 12.4rem 0 8.5rem;
+  .content {
+    row-gap: 20rem;
+    .text {
+      font-family: 'satoshiBold';
+      font-size: 11rem;
+      line-height: 106%;
+      text-align: center;
+    }
+    .start-btn {
+      font-size: 5.6rem;
+      width: 32.5rem;
+      height: 8.1rem;
+      border: 2px solid #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4rem;
+    }
+  }
+}
+</style>

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>

src/views/stylist/sex.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="sex-select">
+    <div class="text">Before we begin.</div>
+    <div class="desc">Who are you styling?</div>
+
+    <div class="select-list">
+      <div
+        class="option"
+        v-for="option in options"
+        :key="option.value"
+        @click="handleSelect(option.value)"
+      >
+        {{ option.label }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const options = ref([
+  { label: 'Female', value: '1' },
+  { label: 'Male', value: '0' }
+])
+
+const handleSelect = (value: string) => {
+  console.log(value)
+}
+</script>
+<style lang="less" scoped>
+.sex-select {
+  height: 100vh;
+  overflow: hidden;
+  color: #fff;
+  position: relative;
+  background: url('@/assets/images/sex_select_bg.png') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 6rem 12.4rem 0 8.5rem;
+  .text {
+    font-family: 'robotoBold';
+    font-size: 13rem;
+    line-height: 106%;
+  }
+  .desc {
+    font-family: 'satoshiRegular';
+    font-size: 6.4rem;
+    line-height: 132%;
+  }
+  .select-list {
+    display: flex;
+    position: absolute;
+    bottom: 31.6rem;
+    width: calc(100% - 12.4rem - 8.5rem);
+    display: flex;
+    justify-content: space-between;
+    .option {
+      // flex: 1;
+      text-align: center;
+      font-family: 'satoshiRegular';
+      font-size: 6.4rem;
+      width: 29.7rem;
+      border: .2rem solid #fff;
+    }
+  }
+}
+</style>