feat: customer页面 & dressfor页面

src/views/login/customer.vue

@@ -1,53 +1,48 @@
 <template>
-  <div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
+  <div
+    class="customer-container safe-area-top flex flex-column"
+    :class="{ 'form-mode': pageMode === 'form' }"
+  >
+    <div class="setting flex flex-between">
+      <SvgIcon name="left" size="70" @click.stop="handleBack" />
+      <SvgIcon name="setting" size="70" />
+    </div>
     <template v-if="pageMode === 'entry'">
-      <div class="setting flex flex-between">
-        <SvgIcon name="left" size="70" @click="handleBack" />
-
-        <SvgIcon name="setting" size="70" />
-      </div>
-      <div class="content flex flex-center flex-column">
+      <div class="content flex-1 flex flex-center flex-column">
         <div class="text">Who is Your Customer?</div>
+        <div class="btn-list flex flex-center">
+          <button class="sandblasted-blurred btn">
+            <span>Create</span>
+          </button>
+          <button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
+            <span>Entry</span>
+          </button>
+        </div>
       </div>
-      <div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
     </template>
     <template v-else>
-      <div class="form-container">
-        <div class="menu flex flex-between">
-          <div class="back-container flex flex-between" @click="handleBack">
-            <SvgIcon name="left" size="70" />
-          </div>
-          <SvgIcon name="setting" size="70" />
-        </div>
+      <div class="form-container flex-1 flex flex-column flex-center">
         <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.
+            <p>Redefine the styling experience with AI.</p>
+            <p>Use Styling Angel to speed up your fashion journey.</p>
           </div>
         </div>
 
         <div class="glass-form">
           <div class="form-field">
-            <label class="field-label">VIP ID</label>
+            <label class="field-label">Nickname</label>
             <input
               v-model="customerData.vipId"
               type="text"
-              placeholder="Enter your ID"
+              placeholder="Enter name"
               class="form-input"
             />
           </div>
-          <!-- <div class="form-field email">
-            <label class="field-label">Email Address</label>
-            <input
-              v-model="customerData.email"
-              type="email"
-              placeholder="Enter your email"
-              class="form-input"
-            />
-          </div> -->
           <button class="confirm-btn" @click="handleConfirm">Confirm</button>
         </div>
+        <div class="show-all">Show All</div>
         <div class="copyright">Powered by AiDLab for Lane Crawford</div>
       </div>
     </template>
@@ -64,10 +59,15 @@ const router = useRouter()
 const generateStore = useGenerateStore()
 
 type PageMode = 'form' | 'entry'
-const pageMode = ref<PageMode>('form')
-// const pageMode = ref<PageMode>('entry')
+const pageMode = ref<PageMode>('entry')
 
-const handleBack = () => {
+const handleBack = (e?: Event) => {
+  e.stopPropagation()
+  e.preventDefault()
+  if (pageMode.value === 'form') {
+    pageMode.value = 'entry'
+    return
+  }
   router.go(-1)
 }
 
@@ -94,7 +94,7 @@ const handleConfirm = async () => {
     // console.log('res', res)
     generateStore.setCustomerInfo(res)
     // router.push('/workshop/stylist/index')
-    router.push('/workshop/homeNav')
+    router.push('/workshop/home')
   })
 }
 </script>
@@ -104,13 +104,12 @@ const handleConfirm = async () => {
   overflow: hidden;
   color: #fff;
   position: relative;
-  // background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
+  background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   &.form-mode {
     background: url('@/assets/images/has_shouder_bg.png') no-repeat center center/cover;
-    padding-top: 15.9rem;
   }
 
   .setting {
@@ -122,7 +121,8 @@ const handleConfirm = async () => {
     }
   }
   .content {
-    margin-top: 55.3rem;
+    // margin-top: 55.3rem;
+    row-gap: 12.7rem;
     .text {
       font-family: 'satoshiBold';
       font-size: 13rem;
@@ -140,37 +140,22 @@ const handleConfirm = async () => {
       justify-content: center;
       border-radius: 4rem;
     }
-  }
-  .entry-btn {
-    position: absolute;
-    border: 0.2rem solid #fff;
-    bottom: 10.3rem;
-    right: 5.5rem;
-    height: 9rem;
-    width: 27.5rem;
-    line-height: 9rem;
-    font-size: 5.6rem;
+    .btn-list {
+      column-gap: 17rem;
+      .btn {
+        height: 8.3rem;
+        width: 29.7rem;
+        line-height: 8.3rem;
+        font-size: 4.8rem;
+        border: 0.2rem solid #fff;
+      }
+    }
   }
 
   .form-container {
-    .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;
-        }
-      }
-    }
+    width: 78.8rem;
+    margin: 0 auto;
     .text {
-      padding-left: 15.2rem;
-      margin-top: 15.4rem;
       letter-spacing: 0.02rem;
     }
     .form-title {
@@ -182,18 +167,16 @@ const handleConfirm = async () => {
       font-size: 3.6rem;
       line-height: 141%;
       letter-spacing: 0.08rem;
-      margin-top: 2.7rem;
+      margin: 3.1rem 0 11rem 0;
       font-family: 'satoshiRegular';
     }
 
     .glass-form {
-      height: 68.8rem;
+      height: 68.7rem;
+      width: 78.8rem;
       border: 0.2rem solid #ffffff;
       border-radius: 4.7rem;
-      margin: 0 14.2rem;
-      //   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;
       flex-direction: column;
@@ -251,6 +234,18 @@ const handleConfirm = async () => {
         box-shadow: 0 0.2rem 8px rgba(0, 0, 0, 0.2);
       }
     }
+    .show-all {
+      margin-top: 4rem;
+      width: 19rem;
+      height: 7.6rem;
+      border-radius: 54px;
+      color: #000;
+      text-align: center;
+      line-height: 7.6rem;
+      background-color: #fff;
+      font-size: 3.1rem;
+      font-family: 'satoshiRegular';
+    }
     .copyright {
       font-family: 'satoshiRegular';
       font-size: 3rem;
@@ -259,7 +254,7 @@ const handleConfirm = async () => {
       margin-top: 2.31rem;
       text-align: center;
       font-weight: 400;
-      margin-top: 18.7rem;
+      margin-top: 11.5rem;
     }
   }
 }