feat: stylist&customer&sex页面

src/assets/icons/setting.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760087026383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4682" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z" p-id="4683" fill="#ffffff"></path><path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z" p-id="4684" fill="currentColor"></path></svg>

src/assets/main.css

@@ -25,6 +25,37 @@ a,
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+
+.flex{
+  display: flex;
+}
+.flex-column{
+  flex-direction: column;
+}
+.flex-1{
+  flex: 1;
+}
+.flex-center{
+  align-items: center;
+  justify-content: center;
+}
+.flex-align-center{
+  align-items: center;
+}
+.flex-justify-center{
+  justify-content: center;
+}
+.flex-around{
+  justify-content: space-around;
+}
+.flex-between{
+  justify-content: space-between;
+}
+.flex-evenly{
+  justify-content: space-evenly;
+}
+
+
 /* @media (min-width: 1024px) {
   body {
     display: flex;

src/router/index.ts

@@ -9,17 +9,42 @@ const router = createRouter({
     },
     {
       path: '/login',
+      name: 'LoginPage',
       component: () => import('@/views/login/LoginPage.vue')
     },
     {
       path: '/signup',
+      name: 'SignupPage',
       component: () => import('@/views/login/SignupPage.vue')
     },
-    { path: '/welcome', component: () => import('@/views/login/WelcomePage.vue') },
+    {
+      path: '/welcome',
+      name: 'WelcomePage',
+      component: () => import('@/views/login/WelcomePage.vue')
+    },
     {
       path: '/stylist',
-      component: () => import('@/views/stylist/index.vue')
+      name: 'StylistPage',
+      component: () => import('@/views/stylist/index.vue'),
+      children: [
+        {
+          path: '/sex',
+          name:'sex'
+          component: () => import('@/views/stylist/sex.vue')
+        },
+        {
+          path: '/dressfor',
+          name:'dressfor'
+          component: () => import('@/views/stylist/dressfor.vue')
+        },
+        {
+          path: '/customer',
+          name:'customer',
+          component: () => import('@/views/stylist/customer.vue')
+        }
+      ]
     },
+
     {
       path: '/workshop',
       name: 'Workshop',
@@ -46,38 +71,41 @@ const router = createRouter({
           name: 'SelectModelContinue',
           component: () => import('../views/Workshop/selectModelContinue.vue')
         },
-				{// 上传照片
+        {
-					path: '/workshop/uploadFace',
+          // 上传照片
-					name: 'uploadFace',
+          path: '/workshop/uploadFace',
-					component: () => import('../views/Workshop/uploadFace/index.vue'),
+          name: 'uploadFace',
-				},
+          component: () => import('../views/Workshop/uploadFace/index.vue')
-				{// 自定义创作
+        },
-					path: '/workshop/customize',
+        {
-					name: 'customize',
+          // 自定义创作
-					component: () => import('../views/Workshop/customize/index.vue'),
+          path: '/workshop/customize',
-					children: [
+          name: 'customize',
-						{
+          component: () => import('../views/Workshop/customize/index.vue'),
-							path: '/workshop/customize/home',
+          children: [
-							name: 'customizeHome',
+            {
-							component: () => import('../views/Workshop/customize/home.vue'),
+              path: '/workshop/customize/home',
-						},
+              name: 'customizeHome',
-						{
+              component: () => import('../views/Workshop/customize/home.vue')
-							path: '/workshop/customize/library',
+            },
-							name: 'customizeLibrary',
+            {
-							component: () => import('../views/Workshop/customize/library.vue'),
+              path: '/workshop/customize/library',
-						},
+              name: 'customizeLibrary',
-						{
+              component: () => import('../views/Workshop/customize/library.vue')
-							path: '/workshop/customize/creation',
+            },
-							name: 'customizeCreation',
+            {
-							component: () => import('../views/Workshop/customize/creation.vue'),
+              path: '/workshop/customize/creation',
-						},
+              name: 'customizeCreation',
-					],
+              component: () => import('../views/Workshop/customize/creation.vue')
-				},
+            }
-				{// 完成创建
+          ]
-					path: '/workshop/end',
+        },
-					name: 'end',
+        {
-					component: () => import('../views/Workshop/end/index.vue'),
+          // 完成创建
-				},
+          path: '/workshop/end',
+          name: 'end',
+          component: () => import('../views/Workshop/end/index.vue')
+        }
       ]
     }
   ]

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;
+  // align-items: center;
-  justify-content: center;
+  // justify-content: center;
-  flex: 1;
+  // flex: 1;
   margin: 2rem 0;
 }
 
@@ -239,18 +268,64 @@ const handleContinue = () => {
 
 .continue-button {
   position: absolute;
-  bottom: 3rem;
+  bottom: 6.4rem;
-  right: 2rem;
+  right: 7.6rem;
   padding: 1.2rem 2.4rem;
-  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid #fff;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
   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>