feat: 登录注册页样式修改

.gitignore

@@ -6,7 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+components.d.ts*
+auto-imports.d.ts*
 node_modules
 .DS_Store
 dist

components.d.ts

@@ -14,5 +14,9 @@ declare module '@vue/runtime-core' {
     RouterView: typeof import('vue-router')['RouterView']
     SelectItem: typeof import('./src/components/selectStyle/selectItem.vue')['default']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
+    VanDialog: typeof import('vant/es')['Dialog']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanSwipe: typeof import('vant/es')['Swipe']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
   }
 }

src/views/login/SignupPage.vue

@@ -1,38 +1,36 @@
 <template>
   <div class="login-page">
+    <!-- 主要内容区域 -->
     <div class="content">
+      <!-- 返回按钮 -->
       <div class="back-button" @click="goBack">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <!-- <van-icon name="arrow-left" size="3rem" /> -->
-          <path
+        <img src="@/assets/images/arrow_left.png" class="back-icon" />
-            d="M15 18L9 12L15 6"
-            stroke="white"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
       </div>
+
+      <!-- 标题区域 -->
       <div class="header">
-        <h1 class="title">Sign up.</h1>
+        <div class="title">Sign up.</div>
         <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="description">Use Styling Angel to speed up your fashion journey.</p>
+        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
       </div>
+
       <div class="login-container">
-        <form @submit.prevent="handleSignup" class="login-form">
+        <form @submit.prevent="handleLogin" class="login-form">
           <div class="input-group">
             <input
-              type="email"
+              type="text"
-              v-model="formData.email"
+              v-model="formData.name"
-              placeholder="Email"
+              placeholder="Name"
               class="input-field"
               required
             />
           </div>
           <div class="input-group">
             <input
-              type="text"
+              type="email"
-              v-model="formData.name"
+              v-model="formData.email"
-              placeholder="Name"
+              placeholder="Email"
               class="input-field"
               required
             />
@@ -46,33 +44,19 @@
               required
             />
           </div>
-          <button type="submit" class="signup-btn">Sign up</button>
+
-          <button type="button" class="google-button" @click="handleGoogleLogin">
+          <!-- 登录按钮 -->
-            <div class="google-icon">
+          <button type="submit" class="login-button">Log in</button>
-              <svg width="20" height="20" viewBox="0 0 24 24">
+
-                <path
+          <!-- Google登录按钮 -->
-                  fill="#4285F4"
+          <div type="button" class="google-button" @click="handleGoogleLogin">
-                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            <img :src="google" class="google-icon" />
-                />
+            Sign in with Google
-                <path
-                  fill="#34A853"
-                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                />
-                <path
-                  fill="#FBBC05"
-                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                />
-                <path
-                  fill="#EA4335"
-                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                />
-              </svg>
           </div>
-            Sign up with Google
-          </button>
         </form>
       </div>
     </div>
+
     <div class="footer">
       <p>Powered by AiDLab for Lane Crawford</p>
     </div>
@@ -83,18 +67,20 @@
 import { ref, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
+import { google } from '@/assets/base64'
 
 const router = useRouter()
 
 // 表单数据
 const formData = reactive({
+  name:'',
   email: '',
-  password: '',
+  password: ''
-  name:''
 })
 
 // 表单验证状态
 const formErrors = reactive({
+  name:'',
   email: '',
   password: ''
 })
@@ -117,10 +103,11 @@ const validateForm = () => {
   let isValid = true
 
   // 重置错误信息
+  formErrors.name = ''
   formErrors.email = ''
   formErrors.password = ''
-  formErrors.name = ''
 
+  // 验证邮箱
   if (!formData.name) {
     formErrors.name = '请输入姓名'
     isValid = false
@@ -164,7 +151,7 @@ const goBack = () => {
 }
 
 // 处理登录
-const handleSignup = async () => {
+const handleLogin = async () => {
   if (!validateForm()) {
     showToast('请检查输入信息')
     return
@@ -179,34 +166,46 @@ const handleSignup = async () => {
     // 这里添加实际的登录API调用
     // const response = await loginAPI(formData)
 
-    showToast('注册成功')
+    showToast('登录成功')
 
     // 登录成功后跳转到主页或工作台
     router.push('/workshop')
   } catch (error) {
-    console.error('注册失败:', error)
+    console.error('登录失败:', error)
-    showToast('注册失败，请重试')
+    showToast('登录失败，请重试')
   } finally {
     isLoading.value = false
   }
 }
 
+// 处理忘记密码
+const handleForgotPassword = () => {
+  showToast('忘记密码功能开发中...')
+  console.log('11111111111')
+  // 这里可以跳转到忘记密码页面
+  // router.push('/forgot-password')
+}
+
 // 处理Google登录
 const handleGoogleLogin = async () => {
   try {
     isLoading.value = true
-    showToast('Google注册功能开发中...')
+    showToast('Google登录功能开发中...')
 
     // 这里添加Google OAuth登录逻辑
     // const response = await googleLoginAPI()
   } catch (error) {
-    console.error('Google注册失败:', error)
+    console.error('Google登录失败:', error)
-    showToast('Google注册失败，请重试')
+    showToast('Google登录失败，请重试')
   } finally {
     isLoading.value = false
   }
 }
 
+// 处理注册
+const handleSignup = () => {
+  router.push('/signup')
+}
 
 // 实时验证输入
 const handleEmailInput = () => {
@@ -239,159 +238,137 @@ const handlePasswordInput = () => {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-}
+  padding-top: 12rem;
-
+  font-family: 'satoshiRegular';
-.content {
-  position: relative;
-  z-index: 2;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 2rem;
-  padding-top: 6rem; /* 为状态栏留出空间 */
 }
 
 .back-button {
-  position: absolute;
+  // position: absolute;
-  top: 2rem;
+  // top: 2rem;
-  left: 2rem;
+  // left: 2rem;
-  width: 4rem;
+  margin-top: 2.4rem;
-  height: 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;
+  }
 }
 
 .header {
-  margin-bottom: 4rem;
+  margin-top: 1.42rem;
+  padding-left: 15.5rem;
   color: white;
-}
+  font-family: 'satoshiRegular';
-
   .title {
-  font-size: 3.2rem;
+    font-size: 11rem;
     font-weight: bold;
     margin-bottom: 0.8rem;
     color: white;
+    font-family: 'satoshiBold';
   }
 
   .subtitle {
-  font-size: 1.6rem;
+    font-size: 3rem;
-  margin-bottom: 0.4rem;
     color: white;
-  opacity: 0.9;
+    font-weight: 400;
+    line-height: 141%;
+    letter-spacing: 0.08rem;
+  }
 }
 
-.description {
+.content {
-  font-size: 1.4rem;
+  position: relative;
-  color: white;
+  // z-index: 2;
-  opacity: 0.8;
+  flex: 1;
 }
 
 .login-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 30%;
+  margin-top: 7.2rem;
   .login-form {
     position: relative;
-    width: 100%;
+    width: calc(100% - 28.4rem);
-    /* max-width: 70rem; */
+    height: 118.4rem;
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(30px);
+    backdrop-filter: blur(4.5rem) brightness(0.8) contrast(1.3);
-    border: 0.1rem solid rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.15);
-    border-radius: 2rem;
+    border-radius: 4.79rem;
-    padding: 10rem 4rem;
+    padding: 11.2rem 8.62rem 14.28rem 7.18rem;
     box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
     overflow: hidden;
-    margin: 0 10rem;
+    border: 2px solid #fff;
-    height: 115rem;
+    font-size: 3.83rem;
   }
 
   .input-field {
     width: 100%;
+    height: 10rem;
     padding: 16px 20px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    border: 2px solid #fff;
-    border-radius: 25px;
+    background: transparent;
-    background: rgba(255, 255, 255, 0.1);
+    border-radius: 7.1rem;
     color: white;
-    font-size: 1.6rem;
     outline: none;
-    transition: all 0.3s ease;
+    font-size: 3.83rem;
+    padding: 0 5.5rem;
   }
 
   .input-field::placeholder {
     color: rgba(255, 255, 255, 0.6);
-  }
+    font-size: 3.83rem;
-
-  .input-field:focus {
-    border-color: rgba(255, 255, 255, 0.6);
-    background: rgba(255, 255, 255, 0.15);
   }
 
   .input-group {
-    margin-bottom: 5rem;
+    margin-bottom: 4rem;
-    
+    &.pwd {
+      margin-bottom: 6.7rem;
     }
-  .signup-btn {
+  }
+  .login-button {
     width: 100%;
-    padding: 1.6rem;
+    height: 10rem;
     background: #000;
     color: white;
     border: none;
-    border-radius: 25px;
+    border-radius: 7rem;
-    font-size: 1.6rem;
+    font-size: 4rem;
-    margin-bottom: 37rem;
+    margin-bottom: 26.3rem;
   }
 }
 
 .google-button {
   width: 100%;
   padding: 16px;
-  background: transparent;
+  border: 2px solid #fff;
-  color: #000;
+  border-radius: 7rem;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  font-size: 3.83rem;
-  border-radius: 25px;
-  font-size: 16px;
   cursor: pointer;
-  transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  column-gap: 3.1rem;
-  background: rgba(255, 255, 255, 0.9);
-  margin-bottom: 1rem;
 }
 
 .google-icon {
-  width: 20px;
+  width: 4.8rem;
-  height: 20px;
+  height: 4.8rem;
-}
-
-.signup-link {
-  text-align: center;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 14px;
-}
-
-.signup-link a {
-  color: white;
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.signup-link a:hover {
-  text-decoration: underline;
 }
 
 .footer {
   position: relative;
-  z-index: 2;
   text-align: center;
-  padding: 20px;
   color: white;
-  font-size: 12px;
+  font-size: 3rem;
-  opacity: 0.8;
+  margin-bottom: 9rem;
 }
 </style>

src/views/stylist/index.vue

@@ -58,7 +58,6 @@
       :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" />
@@ -76,7 +75,7 @@ import Video from './components/Video.vue'
 const router = useRouter()
 
 // stylist数据
-const stylists = ref<array>([
+const stylists = ref<Array<any>>([
   {
     id: 1,
     name: 'Vera Lo',

src/views/stylist/sex.vue

@@ -16,6 +16,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from 'vue'
 const options = ref([
   { label: 'Female', value: '1' },
   { label: 'Male', value: '0' }