feat: 聊天页面

src/assets/icons/arrow.svg

@@ -0,0 +1 @@
+<svg t="1760412391648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7776" width="200" height="200"><path d="M728.3 126.040c18.8 18.8 18.801 49.1 0 67.901l-318 318 318 318c18.8 18.8 18.8 49.2 0 67.901-18.8 18.8-49.1 18.801-67.901 0l-352-352c-18.8-18.8-18.8-49.2 0-67.901l352-352c9.4-9.4 21.7-14 34-14 12.2 0.1 24.501 4.7 33.9 14.1z" p-id="7777" fill="currentColor"></path></svg>

src/assets/icons/audio.svg

@@ -0,0 +1 @@
+<svg t="1760424451063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13798" width="200" height="200"><path d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1z" p-id="13799" fill="#6d6868"></path><path d="M512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168z m-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z" p-id="13800" fill="#6d6868"></path></svg>

src/assets/icons/more.svg

@@ -0,0 +1 @@
+<svg t="1760423133873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11699" width="200" height="200"><path d="M522.666667 522.666667m-53.333334 0a53.333333 53.333333 0 1 0 106.666667 0 53.333333 53.333333 0 1 0-106.666667 0Z" fill="currentColor" p-id="11700"></path><path d="M266.666667 522.666667m-53.333334 0a53.333333 53.333333 0 1 0 106.666667 0 53.333333 53.333333 0 1 0-106.666667 0Z" fill="currentColor" p-id="11701"></path><path d="M778.666667 522.666667m-53.333334 0a53.333333 53.333333 0 1 0 106.666667 0 53.333333 53.333333 0 1 0-106.666667 0Z" fill="currentColor" p-id="11702"></path></svg>

src/assets/icons/plus.svg

@@ -0,0 +1 @@
+<svg t="1760425581189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23717" width="200" height="200"><path d="M928 608H608v320a96 96 0 0 1-192 0V608H96a96 96 0 0 1 0-192h320V96a96 96 0 0 1 192 0v320h320a96 96 0 0 1 0 192z" fill="#6D6868" p-id="23718"></path></svg>

src/assets/icons/refresh.svg

@@ -0,0 +1 @@
+<svg t="1760423069787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9536" width="200" height="200"><path d="M733.04 379.104a264.112 264.112 0 0 0-468.112 41.76 14.336 14.336 0 0 1-17.968 8.16l-20.256-7.008a12.352 12.352 0 0 1-7.456-16.192 312.112 312.112 0 0 1 556.736-48.56l12.704-44.352a16 16 0 0 1 7.632-9.584l24.752-13.712a14.464 14.464 0 0 1 20.912 16.64l-38.128 132.96a11.136 11.136 0 0 1-13.76 7.632l-132.96-38.128a14.464 14.464 0 0 1-3.04-26.56l24.752-13.712a16 16 0 0 1 12.16-1.392l42.032 12.048z m-447.52 280.352a264.112 264.112 0 0 0 468.112-41.76 14.336 14.336 0 0 1 17.968-8.16l20.256 7.008a12.352 12.352 0 0 1 7.44 16.176c-46.368 118.032-160.8 199.072-290.432 199.072-110.96 0-210.768-59.296-266.304-150.432l-12.704 44.288a16 16 0 0 1-7.616 9.584l-24.752 13.712a14.464 14.464 0 0 1-20.928-16.64l38.128-132.96a11.136 11.136 0 0 1 13.76-7.632l132.976 38.128a14.464 14.464 0 0 1 3.04 26.56l-24.768 13.712a16 16 0 0 1-12.16 1.392l-42.016-12.048z" fill="currentColor" p-id="9537"></path></svg>

src/assets/icons/thumbdown.svg

@@ -0,0 +1 @@
+<svg t="1760422981103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7310" width="200" height="200"><path d="M792.448 128c54.784 0 99.84 42.154667 103.338667 95.658667L896 230.4v246.4c0 54.4-42.837333 98.730667-96.725333 102.186667l-6.826667 0.213333h-86.613333L571.306667 877.226667a32 32 0 0 1-24.533334 18.474666l-4.650666 0.341334c-74.154667 0-134.954667-57.301333-139.093334-129.749334l-0.213333-7.850666v-108.8H232.746667a104.234667 104.234667 0 0 1-67.413334-23.68l-6.058666-5.418667-5.674667-5.888a101.717333 101.717333 0 0 1-25.301333-74.752l0.938666-8.106667 49.365334-316.757333A103.082667 103.082667 0 0 1 274.773333 128.170667L281.685333 128h510.762667zM717.226667 192v323.2h75.264c20.394667 0 37.034667-14.933333 39.253333-33.92l0.298667-4.48V230.4a38.826667 38.826667 0 0 0-34.901334-38.144l-4.650666-0.256H717.226667z m-194.602667 637.482667l130.56-289.194667V192H281.386667a39.594667 39.594667 0 0 0-36.992 23.765333l-1.536 4.394667-1.024 4.608-49.365334 316.757333c-1.706667 11.008 1.621333 22.186667 9.088 30.72a39.893333 39.893333 0 0 0 25.728 13.098667l5.12 0.256h202.410667a32 32 0 0 1 31.701333 27.648l0.298667 4.352v140.8c0 30.293333 18.773333 56.362667 45.610667 67.669333l5.845333 2.176 4.352 1.28z" fill="currentColor" p-id="7311"></path></svg>

src/assets/icons/thumbup.svg

@@ -0,0 +1 @@
+<svg t="1760423035671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8505" width="200" height="200"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="8506" fill="currentColor"></path></svg>

src/assets/icons/upload.svg

@@ -0,0 +1 @@
+<svg t="1760423103746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10594" width="200" height="200"><path d="M823.424 395.296l-287.52-289.248c-3.2-3.2-6.88-5.536-10.816-7.104C521.056 97.12 516.672 96 512 96c-11.264 0-20.704 6.176-26.4 14.976l-254.4 253.952c-12.512 12.48-12.544 32.736-0.032 45.248 6.24 6.272 14.432 9.376 22.656 9.376 8.16 0 16.352-3.104 22.624-9.344L480 206.976 480 768c0 17.696 14.336 32 32 32s32-14.304 32-32L544 204.96l234.048 235.456c6.24 6.272 14.464 9.44 22.688 9.44 8.16 0 16.32-3.104 22.56-9.312C835.84 428.096 835.904 407.84 823.424 395.296z" fill="currentColor" p-id="10595"></path><path d="M896 704c-17.696 0-32 14.304-32 32l0 128L160 864l0-128c0-17.696-14.336-32-32-32s-32 14.304-32 32l0 160c0 17.696 14.336 32 32 32l768 0c17.696 0 32-14.304 32-32l0-160C928 718.304 913.696 704 896 704z" fill="currentColor" p-id="10596"></path></svg>

src/router/index.ts

@@ -25,26 +25,36 @@ const router = createRouter({
     {
       path: '/stylist',
       name: 'StylistPage',
-      component: () => import('@/views/stylist/index.vue'),
+      redirect:'/stylist/index',
+      component: () => import('@/views/stylist/container.vue'),
       children: [
         {
-          path: '/stylist/sex',
+          path: 'index',
+          name: 'index',
+          component: () => import('@/views/stylist/index.vue')
+        },
+        {
+          path: 'sex',
           name: 'sex',
           component: () => import('@/views/stylist/sex.vue')
         },
         {
-          path: '/stylist/dressfor',
+          path: 'dressfor',
           name: 'dressfor',
           component: () => import('@/views/stylist/dressfor.vue')
         },
         {
-          path: '/stylist/customer',
+          path: 'customer',
           name: 'customer',
           component: () => import('@/views/stylist/customer.vue')
         }
       ]
     },
-
+    {
+      path: '/asistant',
+      name: 'asistant',
+      component: () => import('../views/asistant/index.vue')
+    },
     {
       path: '/workshop',
       name: 'Workshop',

src/views/asistant/components/ChatLoading.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="chat-loading">
+    <div class="loading-container flex flex-column flex-align-center">
+      <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
+      <!-- 阴影效果 -->
+      <div class="loading-shadow"></div>
+      <div class="loading-text">Analyzing the Outfit...</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 这个组件只负责显示loading动画
+interface LoadingProps {
+  // 可以在这里定义props类型
+}
+
+// 定义组件props类型
+const props = defineProps<LoadingProps>()
+</script>
+
+<style lang="less" scoped>
+.chat-loading {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.loading-container {
+  position: relative;
+}
+
+.loading-image {
+  width: 36.4rem;
+  height: 36.4rem;
+  animation: rotate 1s linear infinite;
+}
+
+.loading-shadow {
+  width: 19.6rem;
+  height: 5.2rem;
+  background-color: #d9d9d9;
+  border-radius: 50%;
+  filter: blur(35.5px);
+  margin-top: 5.1rem;
+  margin-bottom: 6.4rem;
+}
+
+.loading-text{
+  font-family: 'satoshiRegular';
+  font-size: 4.8rem;
+  letter-spacing: 0.02em;
+  line-height: 124%;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/views/asistant/components/InputArea.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="input-area">
+    <div class="input-container">
+      <!-- 加号图标 -->
+      <div class="icon-wrapper">
+        <SvgIcon name="plus" size="40" />
+      </div>
+
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+
+      <!-- 输入框 -->
+      <div class="input-wrapper">
+        <input
+          v-model="inputValue"
+          type="text"
+          placeholder="Ask anything about your desired outfit"
+          class="text-input"
+          @keyup.enter="handleSend"
+        />
+      </div>
+
+      <!-- 语音图标 -->
+      <div class="icon-wrapper">
+        <SvgIcon name="audio" size="52" />
+      </div>
+
+      <!-- 发送图标 -->
+      <div class="icon-wrapper send-icon" @click="handleSend">
+        <SvgIcon name="send" size="46" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+interface InputAreaEmits {
+  'send-message': [message: string]
+}
+
+const inputValue = ref<string>('')
+
+const emit = defineEmits<InputAreaEmits>()
+
+const handleSend = (): void => {
+  if (inputValue.value.trim()) {
+    console.log('input发送消息:', inputValue.value)
+    emit('send-message', inputValue.value)
+    inputValue.value = ''
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.input-area {
+  background-color: #fff;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  background-color: #efefef;
+  padding: 0 4.85rem 0 5.2rem;
+  height: 19.3rem;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &.send-icon {
+    margin-left: 4.38rem;
+  }
+}
+
+.divider {
+  width: 2px;
+  height: 14.9rem;
+  margin-left: 5.59rem;
+  margin-right: 3.5rem;
+  background-color: #888;
+}
+
+.input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.text-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 4rem;
+  font-family: 'robotoBold';
+  font-weight: 400;
+  line-height: 121%;
+  // padding-right: 2rem;
+  margin-right: 4.21rem;
+  color: #888;
+
+  &::placeholder {
+    color: #888;
+  }
+}
+
+// 确保图标颜色为 #6d6868
+:deep(.svg-icon) {
+  color: #6d6868;
+
+  svg {
+    fill: #6d6868;
+  }
+}
+</style>

src/views/asistant/components/NoticeItem.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    class="chat-message"
+    :class="{ 'user-message': value.userId === '1', 'ai-message': value.userId !== '1' }"
+  >
+    <!-- AI消息显示头像 -->
+    <div v-if="value.userId !== '1'" class="chat-avatar">
+      <img :src="value.thumb" alt="AI Avatar" />
+    </div>
+
+    <!-- 消息内容 -->
+    <div class="message-content">
+      <div class="message-text">
+        {{ value.content }}
+      </div>
+      <!-- AI消息显示操作栏 -->
+      <div v-if="value.userId !== '1'" class="message-actions flex">
+        <SvgIcon
+          v-for="item in actionList"
+          :key="item.value"
+          :name="item.icon"
+          size="39"
+          @click.stop="handleClickAction(item.value)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
+
+// 定义操作项类型
+interface ActionItem {
+  value: string
+  icon: string
+}
+
+// 定义组件props类型
+interface NoticeItemProps {
+  value: ChatMessage
+}
+
+const props = defineProps<NoticeItemProps>()
+
+const handleClickAction = (value: string): void => {
+  console.log('click Action', value)
+}
+
+const actionList: ActionItem[] = [
+  {
+    value: 'thumbup',
+    icon: 'thumbup'
+  },
+  {
+    value: 'thumbdown',
+    icon: 'thumbdown'
+  },
+  {
+    value: 'refresh',
+    icon: 'refresh'
+  },
+  {
+    value: 'upload',
+    icon: 'upload'
+  },
+  {
+    value: 'more',
+    icon: 'more'
+  }
+]
+</script>
+
+<style lang="less" scoped>
+.chat-message {
+  display: flex;
+  margin-bottom: 16px;
+  align-items: flex-start;
+  .message-text {
+    font-size: 4.2rem;
+    font-family: 'robotoBold';
+    line-height: 121%;
+    font-weight: 400;
+    background-color: #efefef;
+    padding: 4.95rem 3.95rem;
+  }
+
+  &.user-message {
+    justify-content: flex-end;
+
+    .message-content {
+      align-items: flex-end;
+
+      .message-text {
+        border-radius: 2rem 2rem 0 2rem;
+      }
+    }
+  }
+
+  &.ai-message {
+    justify-content: flex-start;
+
+    .message-content {
+      align-items: flex-start;
+
+      .message-text {
+        color: #000;
+        border-radius: 0 2rem 2rem 2rem;
+      }
+    }
+  }
+}
+
+.chat-avatar {
+  width: 7.8rem;
+  height: 7.4rem;
+  border-radius: 50%;
+  margin-right: 1.88rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+.message-actions {
+  margin-top: 2.6rem;
+  color: #6b6b6b;
+  column-gap: 1.61rem;
+  .svg-icon {
+    cursor: pointer;
+  }
+}
+</style>

src/views/asistant/components/NoticeList.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="chat-list">
+    <div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
+      <NoticeItem :value="message" @send-message="handleSendMessage" />
+    </div>
+    <!-- Loading效果 -->
+    <div v-if="isLoading" class="chat-message-item">
+      <ChatLoading />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import NoticeItem from './NoticeItem.vue'
+import ChatLoading from './ChatLoading.vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
+
+// 定义组件暴露的方法类型
+interface NoticeListExpose {
+  simulateSendMessage: () => void
+}
+
+const isLoading = ref<boolean>(false)
+let loadingTimer: any = null
+
+const chatMessages = ref<ChatMessage[]>([
+  {
+    id: '1',
+    content: 'I want a chic outfit for dinner.',
+    userId: '1',
+    time: '14:30',
+    thumb: ''
+  },
+  {
+    id: '2',
+    content:
+      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
+    userId: '2',
+    time: '14:31',
+    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  },
+  {
+    id: '3',
+    content: "It's a romantic date, and I prefer classic elegance.",
+    userId: '1',
+    time: '14:32',
+    thumb: ''
+  },
+  {
+    id: '4',
+    content:
+      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
+    userId: '2',
+    time: '14:33',
+    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  }
+])
+
+const handleSendMessage = (message: string): void => {
+  console.log('list发送消息:', message)
+}
+
+const simulateSendMessage = (): void => {
+  isLoading.value = true
+
+  loadingTimer = setTimeout(() => {
+    const newMessage: ChatMessage = {
+      id: Date.now().toString(),
+      content:
+        "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
+      userId: '2',
+      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+      thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+    }
+
+    chatMessages.value.push(newMessage)
+    isLoading.value = false
+  }, 3000)
+}
+</script>
+
+<style lang="less" scoped>
+.chat-list {
+  padding: 16px;
+  background-color: #fff;
+  height: 100%;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.chat-message-item {
+  margin-bottom: 4.84rem;
+}
+</style>

src/views/asistant/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="asistant-container flex flex-column">
+    <div class="header">
+      <HeaderTitle light hasSetting />
+    </div>
+    <div class="content flex-1" v-if="!isLoading">
+      <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
+    </div>
+    <div class="footer" v-if="!isLoading">
+      <InputArea @send-message="handleSendMessage" />
+      <div class="continue">
+        <button class="btn">Continue</button>
+      </div>
+    </div>
+    <!-- Loading状态时显示loading组件 -->
+    <div v-if="isLoading" class="loading-wrapper">
+      <ChatLoading />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import NoticeList from './components/NoticeList.vue'
+import InputArea from './components/InputArea.vue'
+import ChatLoading from './components/ChatLoading.vue'
+import { ref, onMounted } from 'vue'
+
+// 定义NoticeList组件引用类型
+interface NoticeListRef {
+  simulateSendMessage: () => void
+}
+
+const isLoading = ref<boolean>(false)
+const noticeListRef = ref<NoticeListRef | null>(null)
+
+onMounted(() => {
+  // handleSendMessage('123')
+})
+
+const handleSendMessage = (message: string): void => {
+  console.log('收到消息:', message)
+  // 显示loading状态
+  isLoading.value = true
+  
+  // 模拟请求延迟
+  setTimeout(() => {
+    // 调用NoticeList的方法添加新消息
+    if (noticeListRef.value) {
+      noticeListRef.value.simulateSendMessage()
+    }
+    // 隐藏loading状态
+    isLoading.value = false
+  }, 10000) // 3秒后完成
+}
+</script>
+<style lang="less" scoped>
+.asistant-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  flex-shrink: 0;
+  
+  .continue {
+    font-family: 'satoshiRegular';
+    font-size: 3.6rem;
+    color: #fff;
+    text-align: right;
+    padding: 2.6rem 4.5rem;
+    .btn {
+      border-radius: 7px;
+      background-color: #000;
+      width: 24.6rem;
+      height: 5.9rem;
+    }
+  }
+}
+
+.loading-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+</style>
+

src/views/login/SignupPage.vue

@@ -46,7 +46,7 @@
           </div>
 
           <!-- 登录按钮 -->
-          <button type="submit" class="login-button">Log in</button>
+          <button type="submit" class="login-button">Sign Up</button>
 
           <!-- Google登录按钮 -->
           <div type="button" class="google-button" @click="handleGoogleLogin">

src/views/stylist/container.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+    <router-view />
+  </div>
+</template>
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-family: 'satoshiRegular';
+}
+</style>

src/views/stylist/customer.vue

@@ -1,15 +1,41 @@
 <template>
-  <div class="customer-container safe-area-top" :class="{'form-mode': pageMode === 'form'}">
+  <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>
+    <template v-else>
+      <div class="form-container">
+        <div class="back-container flex flex-center" @click="handleChangeMode('entry')">
+          <van-icon name="arrow-left" color="#fff" size="50" />
+        </div>
+        <div class="text">
+          <div class="form-title">Entry ID</div>
+          <div class="description">
+            Redefine the styling experience with AI.<br />
+            Use Styling Angel to speed up your fashion journey.
+          </div>
+        </div>
+
+        <div class="glass-form">
+          <div class="form-field">
+            <label class="field-label">Customer Name</label>
+            <input type="text" placeholder="Name" class="form-input" />
+          </div>
+          <div class="form-field email">
+            <label class="field-label">Customer Email</label>
+            <input type="email" placeholder="Email" class="form-input" />
+          </div>
+          <button class="confirm-btn" @click="handleConfirm">Confirm</button>
+        </div>
+        <div class="copyright">Powered by AiDLab for Lane Crawford</div>
+      </div>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -20,6 +46,10 @@ const pageMode = ref<PageMode>('entry')
 const handleChangeMode = (mode: PageMode) => {
   pageMode.value = mode
 }
+
+const handleConfirm = () => {
+  console.log('handleConfirm')
+}
 </script>
 <style lang="less" scoped>
 .customer-container {
@@ -31,9 +61,9 @@ const handleChangeMode = (mode: PageMode) => {
   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;
+    padding-top: 21.47rem;
   }
 
   .setting {
@@ -70,5 +100,110 @@ const handleChangeMode = (mode: PageMode) => {
     line-height: 9rem;
     font-size: 5.6rem;
   }
+
+  .form-container {
+    .back-container {
+      width: 7.3rem;
+      height: 7.3rem;
+      border: 2px solid #fff;
+      border-radius: 1.8rem;
+      background: rgba(0, 0, 0, 0.2);
+      backdrop-filter: blur(20px);
+      -webkit-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;
+
+      .back-icon {
+        width: 2.08rem;
+        height: 3.47rem;
+      }
+    }
+    .text {
+      padding-left: 15.2rem;
+      margin-top: 7.9rem;
+      letter-spacing: 0.02rem;
+    }
+    .form-title {
+      font-family: 'satoshiBold';
+      font-size: 11rem;
+      line-height: 1.24em;
+    }
+    .description {
+      font-size: 3rem;
+      line-height: 141%;
+      letter-spacing: 0.08rem;
+      margin-top: 2.7rem;
+      font-family: 'satoshiRegular';
+    }
+
+    .glass-form {
+      height: 84.8rem;
+      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);
+
+      .form-field {
+        margin-bottom: 3.6rem;
+        &.email {
+          margin-bottom: 6.8rem;
+        }
+        .field-label {
+          display: block;
+          color: #fff;
+          font-size: 3.6rem;
+          font-family: 'satoshiRegular';
+          margin-bottom: 3rem;
+        }
+
+        .form-input {
+          width: 100%;
+          height: 10rem;
+          line-height: 10rem;
+          border: 2px solid #fff;
+          border-radius: 7rem;
+          padding: 0 5.5rem;
+          color: #fff;
+          font-size: 3.8rem;
+          font-family: 'satoshiRegular';
+          background: transparent;
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+      }
+
+      .confirm-btn {
+        width: 100%;
+        height: 10rem;
+        line-height: 10rem;
+        background: #000;
+        border: none;
+        border-radius: 7rem;
+        color: #fff;
+        font-size: 4rem;
+        font-family: 'satoshiRegular';
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+    }
+    .copyright{
+      font-family: 'satoshiRegular';
+      font-size: 3rem;
+      line-height: 124%;
+      letter-spacing: 0.08rem;
+      margin-top: 2.7rem;
+      text-align: center;
+      font-weight: 400;
+      margin-top: 18.7rem;
+    }
+  }
 }
 </style>