feat: 聊天页面

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>