style: 样式修改

2025-12-01 11:30:31 +08:00
parent 5d6ad32c80
commit 81df571ddf
11 changed files with 70 additions and 270 deletions
--- a/public/css/woff/fontFamily.css
+++ b/public/css/woff/fontFamily.css
@@ -34,6 +34,13 @@
 	src: url("./Roboto/Roboto-Bold.ttf") format('woff2');
 	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
 }
+@font-face {
+	font-family: 'robotoRegular';
+	font-style: italic;
+	font-weight: 700;
+	src: url("./Roboto/Roboto-Regular.ttf") format('woff2');
+	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
+}
@font-face {
 	font-family: 'boskaRegular';
 	font-style: italic;
--- a/src/assets/icons/setting.svg
+++ b/src/assets/icons/setting.svg
@@ -1 +1,4 @@
-<svg t="1760605228863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10717" width="200" height="200"><path d="M512 341.333333a170.666667 170.666667 0 1 1 0 341.333334 170.666667 170.666667 0 0 1 0-341.333334z m0 64a106.666667 106.666667 0 1 0 0 213.333334 106.666667 106.666667 0 0 0 0-213.333334z" fill="currentColor" p-id="10718"></path><path d="M538.496 42.666667a85.333333 85.333333 0 0 1 78.506667 51.968l2.432 6.4 16.554666 49.578666c7.765333 23.338667 25.514667 41.685333 47.018667 53.632l9.898667 5.76c18.773333 11.264 40.448 17.408 61.952 15.189334l8.064-1.28 51.285333-10.453334a85.333333 85.333333 0 0 1 87.338667 35.157334l3.669333 5.76 26.453333 45.909333a85.333333 85.333333 0 0 1-5.418666 93.610667l-4.608 5.674666-34.773334 39.210667c-16.298667 18.346667-23.338667 42.88-22.954666 67.413333v11.605334c-0.341333 21.802667 5.205333 43.605333 17.877333 61.056l5.12 6.4 34.730667 39.168a85.333333 85.333333 0 0 1 13.44 92.842666l-3.413334 6.442667-26.453333 45.909333a85.333333 85.333333 0 0 1-84.266667 42.026667l-6.741333-1.109333-51.285333-10.496c-24.106667-4.906667-48.896 1.28-69.973334 13.952l-9.941333 5.76c-19.114667 10.666667-35.242667 26.282667-44.074667 46.037333l-2.986666 7.594667-16.512 49.578666a85.333333 85.333333 0 0 1-74.112 58.112l-6.826667 0.256h-52.992a85.333333 85.333333 0 0 1-78.506667-51.968l-2.432-6.4-16.554666-49.578666c-7.765333-23.338667-25.514667-41.685333-47.018667-53.632l-9.898667-5.76c-18.773333-11.264-40.448-17.408-61.952-15.189334l-8.106666 1.28-51.2 10.453334a85.333333 85.333333 0 0 1-87.381334-35.157334l-3.669333-5.76-26.453333-45.909333a85.333333 85.333333 0 0 1 5.418666-93.610667l4.608-5.674666 34.773334-39.210667c16.298667-18.346667 23.338667-42.88 22.954666-67.413333v-11.605334c0.341333-21.802667-5.205333-43.605333-17.877333-61.098666l-5.12-6.314667-34.730667-39.253333a85.333333 85.333333 0 0 1-13.44-92.8l3.413334-6.442667 26.453333-45.909333a85.333333 85.333333 0 0 1 84.266667-42.026667l6.741333 1.109333 51.285333 10.496c24.106667 4.906667 48.896-1.28 69.973334-13.952l9.941333-5.76c19.114667-10.666667 35.242667-26.282667 44.074667-46.037333l2.986666-7.594667 16.512-49.578666a85.333333 85.333333 0 0 1 74.112-58.112l6.826667-0.256h52.992z m0 64h-52.992a21.333333 21.333333 0 0 0-20.224 14.592l-16.554667 49.621333c-12.842667 38.570667-39.936 66.816-69.205333 84.949333l-15.488 9.045334c-31.530667 18.901333-72.533333 30.634667-115.797333 21.76l-51.242667-10.496a21.333333 21.333333 0 0 0-22.784 10.24l-26.453333 45.909333a21.333333 21.333333 0 0 0 2.474666 24.789333l34.773334 39.253334c26.965333 30.378667 37.930667 67.84 38.997333 102.357333l0.085333 18.090667c0.554667 36.736-9.898667 77.994667-39.082666 110.933333l-34.773334 39.168a21.333333 21.333333 0 0 0-2.517333 24.832l26.496 45.909333a21.333333 21.333333 0 0 0 22.784 10.24l51.242667-10.496c39.936-8.192 77.952 1.152 108.373333 17.536l15.530667 8.96c32.042667 17.834667 62.634667 47.445333 76.586666 89.258667l16.554667 49.621333a21.333333 21.333333 0 0 0 20.224 14.592h52.992a21.333333 21.333333 0 0 0 20.224-14.592l16.554667-49.621333c12.885333-38.570667 39.936-66.816 69.205333-84.949333l15.488-9.045334c31.530667-18.901333 72.533333-30.634667 115.797333-21.76l51.285334 10.496a21.333333 21.333333 0 0 0 22.741333-10.24l26.453333-45.909333a21.333333 21.333333 0 0 0-2.474666-24.832l-34.773334-39.210667c-26.965333-30.378667-37.930667-67.84-38.997333-102.357333l-0.085333-18.090667c-0.554667-36.736 9.898667-77.994667 39.082666-110.933333l34.773334-39.210667a21.333333 21.333333 0 0 0 2.517333-24.789333l-26.496-45.909333a21.333333 21.333333 0 0 0-22.741333-10.24l-51.285334 10.496c-39.936 8.192-77.952-1.194667-108.373333-17.536l-15.530667-8.96c-32.042667-17.834667-62.634667-47.445333-76.586666-89.258667l-16.554667-49.621333a21.333333 21.333333 0 0 0-20.224-14.592z" fill="currentColor" p-id="10719"></path></svg>
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1478 8.61658C20.2626 7.40895 20.8235 6.2875 21.7209 5.47132C22.6184 4.65515 23.7879 4.20288 25.0009 4.20288C26.214 4.20288 27.3835 4.65515 28.2809 5.47132C29.1784 6.2875 29.7393 7.40895 29.8541 8.61658C29.9231 9.39669 30.179 10.1487 30.6002 10.8089C31.0214 11.4692 31.5954 12.0183 32.2738 12.4097C32.9521 12.801 33.7148 13.0232 34.4972 13.0575C35.2796 13.0917 36.0587 12.9369 36.7687 12.6062C37.871 12.1057 39.1201 12.0333 40.2728 12.403C41.4256 12.7727 42.3995 13.5581 43.0052 14.6064C43.6108 15.6546 43.8047 16.8907 43.5492 18.074C43.2936 19.2573 42.607 20.3033 41.6228 21.0082C40.9819 21.4579 40.4588 22.0553 40.0976 22.75C39.7365 23.4446 39.5479 24.216 39.5479 24.9989C39.5479 25.7818 39.7365 26.5532 40.0976 27.2478C40.4588 27.9424 40.9819 28.5398 41.6228 28.9895C42.607 29.6945 43.2936 30.7404 43.5492 31.9237C43.8047 33.107 43.6108 34.3431 43.0052 35.3914C42.3995 36.4396 41.4256 37.225 40.2728 37.5947C39.1201 37.9645 37.871 37.892 36.7687 37.3916C36.0587 37.0609 35.2796 36.9061 34.4972 36.9403C33.7148 36.9745 32.9521 37.1967 32.2738 37.5881C31.5954 37.9795 31.0214 38.5285 30.6002 39.1888C30.179 39.849 29.9231 40.601 29.8541 41.3812C29.7393 42.5888 29.1784 43.7102 28.2809 44.5264C27.3835 45.3426 26.214 45.7948 25.0009 45.7948C23.7879 45.7948 22.6184 45.3426 21.7209 44.5264C20.8235 43.7102 20.2626 42.5888 20.1478 41.3812C20.079 40.6008 19.823 39.8485 19.4017 39.188C18.9804 38.5275 18.4061 37.9783 17.7275 37.5868C17.0488 37.1954 16.2859 36.9733 15.5032 36.9393C14.7205 36.9053 13.9412 37.0604 13.2312 37.3916C12.1288 37.892 10.8797 37.9645 9.72699 37.5947C8.57422 37.225 7.60026 36.4396 6.99466 35.3914C6.38906 34.3431 6.19514 33.107 6.45065 31.9237C6.70616 30.7404 7.39282 29.6945 8.37699 28.9895C9.01786 28.5398 9.54101 27.9424 9.90217 27.2478C10.2633 26.5532 10.4519 25.7818 10.4519 24.9989C10.4519 24.216 10.2633 23.4446 9.90217 22.75C9.54101 22.0553 9.01786 21.4579 8.37699 21.0082C7.3942 20.3029 6.70876 19.2574 6.45386 18.0749C6.19897 16.8923 6.39284 15.6573 6.99779 14.6097C7.60274 13.5622 8.57555 12.7769 9.72717 12.4067C10.8788 12.0364 12.127 12.1075 13.2291 12.6062C13.939 12.9369 14.7181 13.0917 15.5005 13.0575C16.2829 13.0232 17.0456 12.801 17.7239 12.4097C18.4023 12.0183 18.9763 11.4692 19.3975 10.8089C19.8187 10.1487 20.0747 9.39669 20.1437 8.61658" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 31.25C28.4518 31.25 31.25 28.4518 31.25 25C31.25 21.5482 28.4518 18.75 25 18.75C21.5482 18.75 18.75 21.5482 18.75 25C18.75 28.4518 21.5482 31.25 25 31.25Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/utils/share.ts
+++ b/src/utils/share.ts
@@ -1,209 +0,0 @@
-/**
- * 分享工具函数
- * 支持移动浏览器原生分享 API 和 WhatsApp 分享
- */
-
-interface ShareData {
-	title?: string
-	text?: string
-	url?: string
-	files?: File[]
-}
-
-/**
- * 检查是否支持 Web Share API
- */
-export function isWebShareSupported(): boolean {
-	return typeof navigator !== 'undefined' && 'share' in navigator
-}
-
-/**
- * 使用 Web Share API 进行分享（移动浏览器原生分享）
- * @param data 分享数据
- */
-async function shareWithWebAPI(data: ShareData): Promise<void> {
-	if (!isWebShareSupported()) {
-		throw new Error('Web Share API is not supported')
-	}
-
-	try {
-		// Web Share API 只支持 title, text, url 和 files
-		const shareData: ShareData = {}
-		
-		if (data.title) shareData.title = data.title
-		if (data.text) shareData.text = data.text
-		if (data.url) shareData.url = data.url
-		if (data.files && data.files.length > 0) shareData.files = data.files
-
-		await navigator.share(shareData)
-	} catch (error: any) {
-		// 用户取消分享时，会抛出 AbortError，这是正常情况
-		if (error.name !== 'AbortError') {
-			console.error('分享失败:', error)
-			throw error
-		}
-	}
-}
-
-/**
- * 分享到 WhatsApp（回退方案）
- * @param text 分享的文本内容
- * @param url 分享的链接（可选）
- */
-export function shareToWhatsApp(text: string, url?: string): void {
-	const shareText = url ? `${text} ${url}` : text
-	const encodedText = encodeURIComponent(shareText)
-	const whatsappScheme = `whatsapp://send?text=${encodedText}`
-	const whatsappWebUrl = `https://wa.me/?text=${encodedText}`
-	const isMobile = typeof navigator !== 'undefined' && /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
-
-	if (typeof window === 'undefined') return
-
-	if (isMobile) {
-		// 优先尝试调用已安装的 WhatsApp 应用，失败后回退到 Web 版本
-		let didFallback = false
-		const fallbackTimer = window.setTimeout(() => {
-			didFallback = true
-			window.location.href = whatsappWebUrl
-		}, 1500)
-
-		try {
-			window.location.href = whatsappScheme
-		} catch (error) {
-			window.clearTimeout(fallbackTimer)
-			window.location.href = whatsappWebUrl
-		}
-
-		// 某些浏览器会在成功唤起 App 时终止脚本，无需额外处理
-		return
-	}
-
-	// 桌面端或不支持 scheme 的环境直接打开 WhatsApp Web
-	window.open(whatsappWebUrl, '_blank')
-}
-
-/**
- * 通用分享函数（优先使用 Web Share API，不支持则回退到 WhatsApp）
- * @param options 分享选项
- */
-export async function share(options: {
-	title?: string
-	text?: string
-	url?: string
-	files?: File[]
-	fallbackToWhatsApp?: boolean
-}): Promise<void> {
-	const { title, text, url, files, fallbackToWhatsApp = true } = options
-
-	// 如果支持 Web Share API，优先使用
-	if (isWebShareSupported() && !files) {
-		try {
-			await shareWithWebAPI({ title, text, url })
-			return
-		} catch (error) {
-			// 如果分享失败且允许回退，则使用 WhatsApp
-			if (fallbackToWhatsApp) {
-				const shareText = [title, text, url].filter(Boolean).join('\n\n')
-				shareToWhatsApp(shareText)
-				return
-			}
-			throw error
-		}
-	}
-
-	// 如果不支持 Web Share API 或需要分享文件，使用 WhatsApp
-	if (fallbackToWhatsApp) {
-		const shareText = [title, text, url].filter(Boolean).join('\n\n')
-		shareToWhatsApp(shareText)
-	} else {
-		throw new Error('Web Share API is not supported and fallback is disabled')
-	}
-}
-
-/**
- * 分享当前页面（优先使用原生分享，不支持则回退到 WhatsApp）
- * @param title 分享的标题
- * @param description 分享的描述（可选）
- */
-export async function shareCurrentPage(title: string, description?: string): Promise<void> {
-	const currentUrl = window.location.href
-	await share({
-		title,
-		text: description,
-		url: currentUrl,
-		fallbackToWhatsApp: true
-	})
-}
-
-/**
- * 分享图片（优先使用原生分享，不支持则回退到 WhatsApp）
- * @param imageUrl 图片链接
- * @param title 分享的标题
- * @param description 分享的描述（可选）
- */
-export async function shareImage(imageUrl: string, title: string, description?: string): Promise<void> {
-	const currentUrl = window.location.href
-	const text = description 
-		? `${description}\n\n查看图片: ${imageUrl}`
-		: `查看图片: ${imageUrl}`
-	
-	await share({
-		title,
-		text,
-		url: currentUrl,
-		fallbackToWhatsApp: true
-	})
-}
-
-/**
- * 分享图片文件（使用 Web Share API，支持直接分享图片文件）
- * @param imageFile 图片文件
- * @param title 分享的标题（可选）
- * @param text 分享的文本（可选）
- */
-export async function shareImageFile(imageFile: File, title?: string, text?: string): Promise<void> {
-	if (!isWebShareSupported()) {
-		throw new Error('WEB_SHARE_UNSUPPORTED')
-	}
-	if (typeof navigator.canShare === 'function' && !navigator.canShare({ files: [imageFile] })) {
-		throw new Error('WEB_SHARE_FILE_UNSUPPORTED')
-	}
-
-	await shareWithWebAPI({
-		title,
-		text,
-		files: [imageFile]
-	})
-}
-
-/**
- * 将远程图片转换为 File 对象，便于提前缓存后再触发分享
- * @param imageUrl 图片链接
- * @param fileName 文件名（可选）
- */
-export async function createImageFileFromUrl(imageUrl: string, fileName?: string): Promise<File> {
-	const response = await fetch(imageUrl)
-	const blob = await response.blob()
-	const name = fileName || imageUrl.split('/').pop() || 'share-image.jpg'
-	return new File([blob], name, { type: blob.type || 'image/jpeg' })
-}
-
-/**
- * 分享当前页面到 WhatsApp（兼容旧版本，推荐使用 shareCurrentPage）
- * @param title 分享的标题
- * @param description 分享的描述（可选）
- */
-export async function shareCurrentPageToWhatsApp(title: string, description?: string): Promise<void> {
-	await shareCurrentPage(title, description)
-}
-
-/**
- * 分享图片到 WhatsApp（兼容旧版本，推荐使用 shareImage）
- * @param imageUrl 图片链接
- * @param title 分享的标题
- * @param description 分享的描述（可选）
- */
-export async function shareImageToWhatsApp(imageUrl: string, title: string, description?: string): Promise<void> {
-	await shareImage(imageUrl, title, description)
-}
-
--- a/src/views/asistant/components/InputArea.vue
+++ b/src/views/asistant/components/InputArea.vue
@@ -296,7 +296,7 @@ const stopRecording = () => {
  .shortcut-item {
    font-size: 4.2rem;
    width: fit-content;
-    font-family: 'robotoBold';
+    font-family: 'robotoRegular';
    white-space: nowrap;
    height: 8.1rem;
    line-height: 8.1rem;
@@ -351,7 +351,7 @@ const stopRecording = () => {
  outline: none;
  background: transparent;
  font-size: 4rem;
-  font-family: 'robotoBold';
+  font-family: 'robotoRegular';
  font-weight: 400;
  line-height: 4.8rem; /* 设置行高等于实际渲染高度，实现垂直居中 */
  padding: 0;
@@ -362,7 +362,7 @@ const stopRecording = () => {
    color: #888;
    letter-spacing: -0.01em;
    font-weight: 400;
-    font-family: 'robotoBold';
+    font-family: 'robotoRegular';
    word-spacing: -5px;
    line-height: 4.8rem;
  }
@@ -405,7 +405,7 @@ const stopRecording = () => {
 }

 .recording-text {
-  font-family: 'robotoBold';
+  font-family: 'robotoRegular';
  font-size: 2.8rem;
  color: #6d6868;
  letter-spacing: 0.02em;
--- a/src/views/asistant/components/NoticeItem.vue
+++ b/src/views/asistant/components/NoticeItem.vue
@@ -97,11 +97,11 @@ const actionList: ActionItem[] = [
  align-items: flex-start;
  .message-text {
    font-size: 4.2rem;
-    font-family: 'robotoBold';
+    font-family: 'robotoRegular';
    line-height: 121%;
    font-weight: 400;
    background-color: #efefef;
-    padding: 4.95rem 3.95rem;
+    padding: 3.43rem 4.35rem;
  }

  &.user-message {
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -2,7 +2,7 @@
  <div class="login-page">
    <div class="content">
      <div class="back-button" @click="goBack">
-        <img src="@/assets/images/arrow_left.png" class="back-icon" />
+         <SvgIcon name="left" size="50" color="#fff" />
      </div>

      <div class="header">
@@ -176,22 +176,16 @@ const handleSignup = () => {
 }

 .back-button {
-  // position: absolute;
-  // top: 2rem;
-  // left: 2rem;
  margin-top: 2.4rem;
  margin-left: 6.1rem;
-  width: 2rem;
-  height: 3.4rem;
  display: flex;
  align-items: center;
-  justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 3.4rem;
-  .back-icon {
-    width: 2.83rem;
-    height: 3.47rem;
+  .c-svg{
+    width: initial;
+    height: initial;
  }
 }

--- a/src/views/login/WelcomePage.vue
+++ b/src/views/login/WelcomePage.vue
@@ -72,7 +72,7 @@ const goToLogin = () => {
      border: 1px solid #fff;
      text-align: center;
      //  padding: 2rem 1.3rem;
-      box-sizing: content-box;
+      box-sizing: border-box;
      font-family: 'satoshiRegular';
    }
  }
--- a/src/views/stylist/customer.vue
+++ b/src/views/stylist/customer.vue
@@ -2,7 +2,7 @@
  <div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
    <template v-if="pageMode === 'entry'">
      <div class="setting flex flex-between">
-        <SvgIcon name="left" size="70"  @click="handleBack" />
+        <SvgIcon name="left" size="70" @click="handleBack" />

        <SvgIcon name="setting" size="70" />
      </div>
@@ -13,13 +13,17 @@
    </template>
    <template v-else>
      <div class="form-container">
-        <div class="back-container flex flex-center" @click="handleBack">
-		  <SvgIcon name="left" size="70"  @click="handleBack" />
+        <div class="menu flex flex-between">
+          <div class="back-container flex flex-between" @click="handleBack">
+            <SvgIcon name="left" size="70" @click="handleBack" />
+          </div>
+          <SvgIcon name="setting" size="70" />
        </div>
        <div class="text">
          <div class="form-title">Customer ID</div>
          <div class="description">
-            Redefine the styling experience with AI. Use<br />Styling Angel to speed up your fashion<br />journey.
+            Redefine the styling experience with AI. Use<br />Styling Angel to speed up your
+            fashion<br />journey.
          </div>
        </div>

@@ -149,25 +153,19 @@ const handleConfirm = async () => {
  }

  .form-container {
-    .back-container {
-      width: 7.3rem;
-      height: 7.3rem;
-    //   border: 0.2rem solid #fff;
-      border-radius: 1.8rem;
-      font-size: 4.3rem;
-    //   background: rgba(0, 0, 0, 0.2);
-    //   backdrop-filter: blur(20px);
-    //   -webkit-backdrop-filter: blur(20px);
-    //   -moz-backdrop-filter: blur(20px);
-    //   -ms-backdrop-filter: blur(20px);
-    //   -o-backdrop-filter: blur(20px);
-      margin-left: 7rem;
-      position: relative;
-    //   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 #000000;
+    .menu {
+      padding: 0 4.8rem 0 8.4rem;
+      .back-container {
+        width: 7.3rem;
+        height: 7.3rem;
+        border-radius: 1.8rem;
+        font-size: 4.3rem;
+        position: relative;

-      .back-icon {
-        width: 2.08rem;
-        height: 3.47rem;
+        .back-icon {
+          width: 2.08rem;
+          height: 3.47rem;
+        }
      }
    }
    .text {
@@ -193,8 +191,8 @@ const handleConfirm = async () => {
      border: 0.2rem solid #ffffff;
      border-radius: 4.7rem;
      margin: 0 14.2rem;
-    //   padding: 8.2rem 7.9rem;
-		padding: 11rem 7.5rem;
+      //   padding: 8.2rem 7.9rem;
+      padding: 11rem 7.5rem;
      margin-top: 11rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      display: flex;
@@ -206,10 +204,10 @@ const handleConfirm = async () => {
        rgba(0, 0, 0, 0) 100%
      );
      backdrop-filter: blur(35px);
-	  justify-content: flex-start;
+      justify-content: flex-start;

      .form-field {
-          margin-bottom: 6.8rem;
+        margin-bottom: 6.8rem;
        &.email {
          margin-bottom: 6.8rem;
        }
@@ -265,4 +263,7 @@ const handleConfirm = async () => {
    }
  }
 }
+.c-svg {
+  width: initial;
+}
 </style>
--- a/src/views/stylist/dressfor.vue
+++ b/src/views/stylist/dressfor.vue
@@ -169,6 +169,10 @@ onUnmounted(() => {
 })
 </script>
 <style lang="less" scoped>
+.c-svg{
+  width: initial;
+  height: initial;
+}
 .dressfor-container {
  height: calc(100vh - 12rem - 14.9rem);
  overflow: hidden;
@@ -203,7 +207,7 @@ onUnmounted(() => {
        width: 59.8rem;
        height: 100%;
        background-color: #fff;
-        border: 2px solid #5f5f5f;
+        // border: 2px solid #5f5f5f;
        border-radius: 1rem;
        color: #222222;
        font-size: 3.2rem;
--- a/src/views/stylist/index.vue
+++ b/src/views/stylist/index.vue
@@ -10,9 +10,8 @@

      <div class="carousel-container" v-show="!showVideo">
        <div class="nav-arrow left" @click="handleChangeSwiper('prev')">
-
          <!-- <van-icon name="arrow-left" color="#fff" /> -->
-		  <SvgIcon name="left" size="70" color="#fff" />
+          <SvgIcon name="left" size="70" color="#fff" />
        </div>

        <van-swipe touchable ref="swiperRef" @change="handleChangeCurrent">
@@ -30,7 +29,7 @@
        </van-swipe>

        <div class="nav-arrow right" @click="handleChangeSwiper('next')">
-          <van-icon name="arrow" color="#fff" />
+          <SvgIcon class="arrow-right" name="left" size="70" color="#fff" />
        </div>
      </div>
    </div>
@@ -103,7 +102,6 @@ const swiperRef = ref<any>(null)
 const showVideo = ref<boolean>(false)
 const videoRef = ref<any>(null)

-
 const handleChangeCurrent = (index: number) => {
  currentChoosed.value = stylists.value[index].id
 }
@@ -118,7 +116,7 @@ const handleChangeSwiper = (type: 'next' | 'prev') => {

 const handleClickStylist = (item: any) => {
  console.log(item)
-//   showVideo.value = true
+  //   showVideo.value = true
 }

 const handleContinue = () => {
@@ -202,13 +200,16 @@ watch(showVideo, (newValue) => {
  z-index: 3;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.25), 0 0 6rem rgba(0, 0, 0, 0.25);
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
-  filter: drop-shadow(.2rem 4px 6.6px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0.2rem 4px 6.6px rgba(0, 0, 0, 0.25));
  &.left {
    left: 1rem;
  }

  &.right {
    right: 1rem;
+    .arrow-right {
+      transform: rotate(180deg);
+    }
  }
 }

@@ -219,7 +220,7 @@ watch(showVideo, (newValue) => {
    .swiper-container {
      width: 66rem;
      height: 100rem;
-      border: .2rem solid #fff;
+      border: 0.2rem solid #fff;
      border-radius: 1.2rem;
      display: flex;
      flex-direction: column;
@@ -281,11 +282,13 @@ watch(showVideo, (newValue) => {
 }

 .continue-button {
+  height: 5.9rem;
+  box-sizing: border-box;
  position: absolute;
  bottom: 6.4rem;
  right: 7.6rem;
-  padding: 1.2rem 2.4rem;
-  border: 1px solid #fff;
+  padding: 0 3.4rem;
+  border: 0.3rem solid #fff;
  border-radius: 1rem;
  color: white;
  font-size: 4rem;
@@ -293,6 +296,8 @@ watch(showVideo, (newValue) => {
  cursor: pointer;
  z-index: 3;
  font-family: 'satoshiRegular';
+  display: flex;
+  align-items: center;
 }

 :deep(.van-overlay) {
@@ -326,12 +331,6 @@ watch(showVideo, (newValue) => {
      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);
-    }
-
    .close-icon {
      color: white;
      font-size: 3.64rem;
--- a/src/views/stylist/sex.vue
+++ b/src/views/stylist/sex.vue
@@ -6,7 +6,7 @@

    <div class="select-list">
      <div
-        class="option"
+        class="option flex flex-center"
        v-for="option in options"
        :key="option.value"
        @click="handleSelect(option.value)"
@@ -76,6 +76,7 @@ const handleSelect = (value: string) => {
      font-family: 'satoshiRegular';
      font-size: 6.4rem;
      width: 29.7rem;
+      height: 8.3rem;
      border: .2rem solid #fff;
    }
  }