feat: i18n键

src/views/home/components/Input.vue

@@ -1,16 +1,39 @@
 <template>
   <div class="assist-input-wrapper flex flex-col">
-    <textarea class="input" type="text" v-model="inputValue" placeholder="Please input" />
+    <textarea
+      class="input"
+      type="text"
+      v-model="inputValue"
+      :placeholder="$t('Input.placeholder')"
+    />
     <div class="operate flex align-center">
       <div class="attach flex flex-center">
         <img src="@/assets/icons/attach.svg" alt="" />
       </div>
-      <el-select v-model="typeValue" placeholder="Please select">
+      <el-select v-model="typeValue" :placeholder="$t('Input.selectPlaceholder')">
         <el-option
           v-for="item in typeOptions"
-          class="type-option"
+          class="input-option"
           :key="item.value"
-          :label="item.label"
+          :label="$t(item.label)"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select v-model="areaValue" :placeholder="$t('Input.selectPlaceholder')">
+        <el-option
+          v-for="item in areaOptions"
+          class="input-option"
+          :key="item.value"
+          :label="$t(item.label)"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select v-model="styleValue" :placeholder="$t('Input.selectPlaceholder')">
+        <el-option
+          v-for="item in styleOptions"
+          class="input-option"
+          :key="item.value"
+          :label="$t(item.label)"
           :value="item.value"
         />
       </el-select>
@@ -20,23 +43,38 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { areaList } from '@/utils/area'
+
 const inputValue = ref<string>('')
 
 const typeValue = ref<string>('')
+const areaValue = ref<string>('')
+const styleValue = ref<string>('')
 const typeOptions = ref<any[]>([
   {
-    label: 'Sofa',
+    label: 'Input.types.sofa',
     value: 'Sofa'
   },
   {
-    label: 'Desk',
+    label: 'Input.types.desk',
     value: 'Desk'
   },
   {
-    label: 'Chair',
+    label: 'Input.types.chair',
     value: 'Chair'
   }
 ])
+const areaOptions = ref<any[]>(areaList)
+const styleOptions = ref<any[]>([
+  {
+    label: 'Input.styles.modern',
+    value: 'Modern'
+  },
+  {
+    label: 'Input.styles.classic',
+    value: 'Classic'
+  }
+])
 </script>
 
 <style lang="less" scoped>
@@ -76,11 +114,31 @@ const typeOptions = ref<any[]>([
         height: 100%;
         box-shadow: none;
         border: 0.1rem solid rgba(0, 0, 0, 0.1);
-        .type-option{
-          padding: 0 1rem;
+        font-family: 'GeneralMedium';
+        font-weight: 500;
+        font-size: 1.4rem;
+        .el-select__placeholder {
+          color: #000;
+        }
+        .el-select__icon {
+          color: #000;
         }
       }
     }
   }
 }
+.input-option {
+  // padding: 0 1rem;
+  margin: 0 0.6rem;
+  padding: 0 0.8rem 0 1rem;
+  color: #0d0d0d;
+  font-weight: 510;
+  font-size: 1.3rem;
+  height: 3rem;
+  line-height: 3rem;
+  &.el-select-dropdown__item.is-hovering {
+    background-color: rgba(13, 13, 13, 0.02);
+    // border-radius: 0.6rem;
+  }
+}
 </style>