feat: customer页面 & dressfor页面

src/views/stylist/dressfor.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="dressfor-container flex">
     <div class="content flex-1 flex flex-column">
-      <!-- <div class="setting flex flex-between">
-        <van-icon name="arrow-left" color="#fff" @click="handleBack" />
-        <SvgIcon name="setting" size="70" />
-      </div> -->
-      <div class="text">What are you dressing for?</div>
+      <div class="loading-container flex flex-center">
+        <Icon class="icon-element" title="" />
+      </div>
+      <div class="text">
+        What are you <br />
+        dressing for?
+      </div>
       <!-- <div class="start-btn" @click="handleStart">Start</div> -->
       <div class="chatbox flex flex-center">
         <div class="input-box flex">
@@ -25,7 +27,7 @@
             class="audio-icon"
             :name="isRecording ? 'pause' : 'audio'"
             size="35"
-			color="#6D6868"
+            color="#6D6868"
             @click="handleClickAudio"
           />
         </div>
@@ -33,19 +35,45 @@
           <SvgIcon class="send-icon" name="send" size="26" color="#000000" />
         </div>
       </div>
+      <div class="tag-container flex flex-column flex-center">
+        <div class="tag-list short flex flex-justify-center">
+          <div
+            class="tag-item"
+            v-for="item in tagListShort"
+            :key="item"
+            @click="handleClickTag(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="tag-list long flex flex-justify-center">
+          <div
+            class="tag-item"
+            v-for="item in tagListLong"
+            :key="item"
+            @click="handleClickTag(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onUnmounted, nextTick, watch } from 'vue'
-import { showToast } from 'vant'
+import { showToast, closeToast } from 'vant'
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
+import Icon from '../asistant/components/GenerateLoading.vue'
 
 const router = useRouter()
 
+const tagListShort = ['Silk Slip Dress', 'Business Casual', 'Suggest Shoe Styles']
+const tagListLong = ['Linen Suit For Summer  Gaka', 'Recomment Evening Bags']
+
 const inputValue = ref('')
 const isRecording = ref(false)
 const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
@@ -69,11 +97,11 @@ watch(isRecording, async (newVal) => {
 
 const handleSendMessage = () => {
   const message = inputValue.value.trim()
-  if(!message){
+  if (!message) {
     showToast('Please enter a message')
     return
   }
-  showToast('Voice-to-text conversion has been completed.')
+
   router.push({
     path: '/asistant',
     query: message ? { message } : undefined
@@ -109,6 +137,10 @@ const startRecording = () => {
   }
 
   speechRecognition.onstart = () => {
+    showToast({
+      message: 'Listening...',
+      duration: 0
+    })
     isRecording.value = true
   }
 
@@ -136,6 +168,7 @@ const startRecording = () => {
   }
 
   speechRecognition.onend = () => {
+    closeToast()
     isRecording.value = false
     lastTranscript = ''
     isSpeechRecognitionActive = false
@@ -143,6 +176,7 @@ const startRecording = () => {
 
   speechRecognition.onerror = (event: any) => {
     console.error('Speech recognition error:', event.error)
+    closeToast()
     isRecording.value = false
     isSpeechRecognitionActive = false
     showToast('Speech recognition failed, please try again')
@@ -159,6 +193,10 @@ const stopRecording = () => {
   }
 }
 
+const handleClickTag = (tag: string) => {
+  inputValue.value = tag
+}
+
 onUnmounted(() => {
   if (speechRecognition && isRecording.value) {
     speechRecognition.stop()
@@ -167,35 +205,51 @@ onUnmounted(() => {
 })
 </script>
 <style lang="less" scoped>
-.c-svg{
+.c-svg {
   width: initial;
   height: initial;
 }
 .dressfor-container {
   height: calc(100vh - 12rem - 14.9rem);
-  overflow: hidden;
+  // overflow: hidden;
   color: #fff;
   position: relative;
-  background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
+  // background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 6rem 0 0 0;
   .content {
-    .setting {
-      padding: 0 4.9rem 0 8.4rem;
-      font-size: 7rem;
-      .c-svg {
-        width: initial;
+    .loading-container {
+      :deep(.loading-image) {
+        width: 17rem;
+        height: 17rem;
+        animation: none;
+      }
+      :deep(.loading-shadow) {
+        width: 9.2rem;
+        height: 2.4rem;
+        filter: blur(6px);
+        opacity: 0.5;
+        margin: 2.4rem 0 0;
+        // background-color: #d9d9d9;
       }
     }
     .text {
       font-family: 'satoshiBold';
-      font-size: 11rem;
-      line-height: 106%;
+      font-size: 9.6rem;
       text-align: center;
-      margin-top: 43.8rem;
-      margin-bottom: 14rem;
+      padding-top: 9rem;
+      padding-bottom: 14rem;
+
+      font-weight: 700;
+      line-height: 1.12;
+      background: #b3b3b3;
+      background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%),
+        linear-gradient(344deg, #b3b3b2 16%, #000000 66%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .chatbox {
       height: 9.3rem;
@@ -204,7 +258,7 @@ onUnmounted(() => {
       .input-box {
         width: 59.8rem;
         height: 100%;
-        background-color: #fff;
+        background-color: #efefef;
         // border: 2px solid #5f5f5f;
         border-radius: 1rem;
         color: #222222;
@@ -213,7 +267,7 @@ onUnmounted(() => {
         padding: 0 2.6rem;
         column-gap: 2.6rem;
         overflow: hidden;
-        .input-wrapper{
+        .input-wrapper {
           overflow: hidden;
         }
         .recording-visualizer {
@@ -233,6 +287,7 @@ onUnmounted(() => {
           height: 100%;
           outline: none;
           border: none;
+          background-color: #efefef;
         }
         .audio-icon {
           width: initial;
@@ -241,8 +296,34 @@ onUnmounted(() => {
       .send {
         width: 7.6rem;
         height: 7.6rem;
-        background-color: #fff;
-		border-radius: 1rem;
+        background-color: #efefef;
+        border-radius: 1rem;
+      }
+    }
+    .tag-container {
+      row-gap: 3.1rem;
+      padding-top: 5.7rem;
+      .tag-list {
+        color: #000;
+        flex-wrap: wrap;
+        &.short {
+          column-gap: 1.91rem;
+        }
+        &.long {
+          column-gap: 3.1rem;
+          padding-left: 2.1rem;
+        }
+        .tag-item {
+          height: 6.8rem;
+          line-height: 6.8rem;
+          box-sizing: border-box;
+          font-family: 'satoshiRegular';
+          font-size: 2.8rem;
+          border: 0.15rem solid #cdcdcd;
+          text-align: center;
+          border-radius: 4.6rem;
+          padding: 0 2.15rem;
+        }
       }
     }
   }