feat: 聊天界面修改&登录界面样式修改

src/views/asistant/components/InputArea.vue

@@ -103,10 +103,14 @@ const handleSend = (): void => {
   line-height: 121%;
   // padding-right: 2rem;
   margin-right: 4.21rem;
-  color: #888;
+  color: #000;
 
   &::placeholder {
     color: #888;
+    letter-spacing: -0.01em;
+    font-weight: 400;
+    font-family: 'robotoBold';
+    word-spacing: -5px;
   }
 }
 

src/views/asistant/components/NoticeItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     class="chat-message"
-    :class="{ 'user-message': value.userId === '1', 'ai-message': value.userId !== '1' }"
+    :class="{ 'user-message': isMyself, 'ai-message': !isMyself }"
   >
     <!-- AI消息显示头像 -->
-    <div v-if="value.userId !== '1'" class="chat-avatar">
+    <div v-if="!isMyself" class="chat-avatar">
       <img :src="value.thumb" alt="AI Avatar" />
     </div>
 
@@ -14,7 +14,7 @@
         {{ value.content }}
       </div>
       <!-- AI消息显示操作栏 -->
-      <div v-if="value.userId !== '1'" class="message-actions flex">
+      <div v-if="!isMyself" class="message-actions flex">
         <SvgIcon
           v-for="item in actionList"
           :key="item.value"
@@ -28,6 +28,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 // 定义消息类型
 interface ChatMessage {
   id: string
@@ -50,6 +51,11 @@ interface NoticeItemProps {
 
 const props = defineProps<NoticeItemProps>()
 
+const isMyself = computed(()=>{
+  console.log('isMyself', props)
+  return props.value.userId === '1'
+})
+
 const handleClickAction = (value: string): void => {
   console.log('click Action', value)
 }

src/views/login/LoginPage.vue

@@ -1,32 +1,21 @@
 <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">
+        <img src="@/assets/images/arrow_left.png" class="back-icon" />
-          <path
-            d="M15 18L9 12L15 6"
-            stroke="white"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
       </div>
 
       <!-- 标题区域 -->
       <div class="header">
-        <h1 class="title">Log in.</h1>
+        <div class="title">Log in.</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="handleLogin" class="login-form">
-          <!-- 邮箱输入框 -->
           <div class="input-group">
             <input
               type="email"
@@ -36,8 +25,6 @@
               required
             />
           </div>
-
-          <!-- 密码输入框 -->
           <div class="input-group pwd">
             <input
               type="password"
@@ -50,47 +37,18 @@
 
           <!-- 登录按钮 -->
           <button type="submit" class="login-button">Log in</button>
-
+          <div class="forgot-password" @click="handleForgotPassword">Forgot password?</div>
-          <!-- 忘记密码链接 -->
-          <div class="forgot-password" @click="handleForgotPassword">
-            Forgot Password?
-          </div>
 
           <!-- Google登录按钮 -->
-          <button type="button" class="google-button" @click="handleGoogleLogin">
+          <div type="button" class="google-button" @click="handleGoogleLogin">
-            <div class="google-icon">
+            <img :src="google" class="google-icon" />
-              <svg width="20" height="20" viewBox="0 0 24 24">
-                <path
-                  fill="#4285F4"
-                  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"
-                />
-                <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 in with Google
-          </button>
-
-          <!-- 注册链接 -->
-          <div class="signup-link">
-            Don't have an account?
-            <a href="#" @click.prevent="handleSignup">Sign Up</a>
           </div>
+          <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
         </form>
       </div>
     </div>
 
-    <!-- 底部版权信息 -->
     <div class="footer">
       <p>Powered by AiDLab for Lane Crawford</p>
     </div>
@@ -101,6 +59,7 @@
 import { ref, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
+import { google } from '@/assets/base64'
 
 const router = useRouter()
 
@@ -261,186 +220,157 @@ 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: 11rem;
-.title {
-  font-size: 3.2rem;
     font-weight: bold;
     margin-bottom: 0.8rem;
     color: white;
+    font-family: 'satoshiBold';
+  }
+
+  .subtitle {
+    font-size: 3rem;
+    color: white;
+    font-weight: 400;
+    line-height: 141%;
+    letter-spacing: 0.08rem;
+  }
 }
 
-.subtitle {
+.content {
-  font-size: 1.6rem;
+  position: relative;
-  margin-bottom: 0.4rem;
+  // z-index: 2;
-  color: white;
+  flex: 1;
-  opacity: 0.9;
-}
-
-.description {
-  font-size: 1.4rem;
-  color: white;
-  opacity: 0.8;
 }
 
 .login-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 20%;
+  margin-top: 7.2rem;
   .login-form {
     position: relative;
-     width: 100%;
+    width: calc(100% - 28.4rem);
-     /* max-width: 70rem; */
+    height: 107.8rem;
-     background: rgba(255, 255, 255, 0.05);
+    background: radial-gradient(
-     backdrop-filter: blur(4rem);
+      100% 100% at 0% 0%,
-     border: 0.1rem solid rgba(255, 255, 255, 0.15);
+      rgba(115, 115, 115, 0.4) 0%,
-     border-radius: 2rem;
+      rgba(0, 0, 0, 0) 100%
-     padding: 8rem 4rem;
+    );
+    backdrop-filter: blur(35px);
+    border: 2px solid rgba(255, 255, 255, 0.15);
+    border-radius: 4.79rem;
+    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: 80rem;
+    font-size: 3.83rem;
-   }
-
-   .login-form::before {
-     content: '';
-     position: absolute;
-     top: 0;
-     left: 0;
-     right: 0;
-     bottom: 0;
-     filter: blur(3rem);
-     z-index: -1;
-     transform: scale(1.1);
   }
 
   .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: 3rem;
+    margin-bottom: 4rem;
     &.pwd {
-      margin-bottom: 5rem;
+      margin-bottom: 6.7rem;
     }
   }
   .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: 1rem;
+    margin-bottom: 1.67rem;
+  }
+  .forgot-password {
+    font-family: 'satoshiRegular';
+    font-size: 2.39rem;
+    font-weight: 400;
+    text-align: center;
+    text-decoration: underline;
+    text-decoration-style: bold;
+    margin-bottom: 21.47rem;
   }
 }
 
- .forgot-password {
-   text-align: center;
-   text-decoration: none;
-   font-size: 1.6rem;
-   text-decoration: underline;
-   text-underline-offset: 0.5rem;
-   margin-bottom: 20rem;
- }
-
-
 .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: 1.67rem;
-  margin-bottom: 1rem;
+}
+.sign-up-button {
+  font-family: 'satoshiRegular';
+  font-size: 2.39rem;
+  font-weight: 400;
+  text-align: center;
 }
 
 .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: 15.5rem;
 }
 </style>

src/views/login/SignupPage.vue

@@ -51,7 +51,7 @@
           <!-- Google登录按钮 -->
           <div type="button" class="google-button" @click="handleGoogleLogin">
             <img :src="google" class="google-icon" />
-            Sign in with Google
+            Sign up with Google
           </div>
         </form>
       </div>
@@ -202,11 +202,6 @@ const handleGoogleLogin = async () => {
   }
 }
 
-// 处理注册
-const handleSignup = () => {
-  router.push('/signup')
-}
-
 // 实时验证输入
 const handleEmailInput = () => {
   if (formData.email && !validateEmail(formData.email)) {
@@ -299,8 +294,12 @@ const handlePasswordInput = () => {
     position: relative;
     width: calc(100% - 28.4rem);
     height: 118.4rem;
-    background: rgba(255, 255, 255, 0.1);
+    background: radial-gradient(
-    backdrop-filter: blur(4.5rem) brightness(0.8) contrast(1.3);
+      100% 100% at 0% 0%,
+      rgba(115, 115, 115, 0.4) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    backdrop-filter: blur(35px);
     border: 2px solid rgba(255, 255, 255, 0.15);
     border-radius: 4.79rem;
     padding: 11.2rem 8.62rem 14.28rem 7.18rem;

src/views/login/WelcomePage.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="welcome-page safe-area-top safe-area-bottom">
     <div class="content">
-      <div class="title">AI STYLING <br/> ASSISTANT</div>
+      <div class="title">
+        AI STYLING <br />
+        ASSISTANT
+      </div>
       <p class="subtitle">Redefine the styling experience with AI.</p>
-      <div class="sign-btn" @click="goToSignup">Sign up</div>
+      <div class="btn-container flex">
+        <div class="log btn" @click="goToLogin">Log in</div>
+        <div class="sign btn" @click="goToSignup">Sign up</div>
+      </div>
     </div>
   </div>
 </template>
@@ -14,6 +20,10 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const goToSignup = () => {
+  router.push('/signup')
+}
+
+const goToLogin = () => {
   router.push('/login')
 }
 </script>
@@ -22,7 +32,7 @@ const goToSignup = () => {
 .welcome-page {
   width: 100%;
   height: 100%;
-  background: url('/src/assets/images/entry_bg.png') no-repeat center center;
+  background: url('/src/assets/images/welcome_bg.png') no-repeat center center;
   background-size: cover;
   padding-left: 10rem;
   display: flex;
@@ -37,27 +47,34 @@ const goToSignup = () => {
   font-size: 8rem;
   color: #fff;
   font-weight: 400;
-  padding-bottom: 20rem;
+  margin-bottom: 31.5rem;
-  .title{
+  .title {
     font-family: 'boskaRegular';
-    line-height: 7.55rem;
+    line-height: 93%;
+    letter-spacing: -0.02em;
   }
-  .subtitle{
+  .subtitle {
-    font-size: 3rem;
+    font-size: 3.2rem;
     font-family: 'satoshiRegular';
-    margin: 2rem 0;
+    margin: 3.2rem 0 6rem;
+    list-style: 124%;
+    letter-spacing: 0.08em;
   }
-  .sign-btn{
+  .btn-container {
+    column-gap: 3rem;
+    .btn {
       background: transparent;
       color: #fff;
-   width: 25rem;
+      width: 23.9rem;
       font-size: 3rem;
-   height: 5rem;
+      height: 6.05rem;
-   line-height: 5rem;
+      line-height: 6.05rem;
       border: 1px solid #fff;
       text-align: center;
       //  padding: 2rem 1.3rem;
       box-sizing: content-box;
+      font-family: 'satoshiRegular';
+    }
   }
 }
 </style>

src/views/stylist/components/Video.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
-import Video from '@/assets/media/example_video.mp4'
+import Video from '@/assets/media/example.mp4'
 // Props
 interface Props {
   videoSrc?: string

src/views/stylist/customer.vue

@@ -139,16 +139,20 @@ const handleConfirm = () => {
 
     .glass-form {
       height: 84.8rem;
-      border: 2px solid #FFFFFF;
+      border: 2px solid #ffffff;
       border-radius: 4.7rem;
-      background: rgba(115, 115, 115, 0.23);
-      backdrop-filter: blur(70px);
-      -webkit-backdrop-filter: blur(70px);
       margin: 0 14.2rem;
       padding: 8.2rem 7.9rem;
       margin-top: 7.5rem;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 
+      background: radial-gradient(
+        100% 100% at 0% 0%,
+        rgba(115, 115, 115, 0.4) 0%,
+        rgba(0, 0, 0, 0) 100%
+      );
+      backdrop-filter: blur(35px);
+
       .form-field {
         margin-bottom: 3.6rem;
         &.email {
@@ -194,7 +198,7 @@ const handleConfirm = () => {
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
       }
     }
-    .copyright{
+    .copyright {
       font-family: 'satoshiRegular';
       font-size: 3rem;
       line-height: 124%;