feat: 初始化CSS &输入框

src/views/home/components/Input.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="assist-input-wrapper flex flex-col">
+    <textarea class="input" type="text" v-model="inputValue" placeholder="Please input" />
+    <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-option
+          v-for="item in typeOptions"
+          class="type-option"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+const inputValue = ref<string>('')
+
+const typeValue = ref<string>('')
+const typeOptions = ref<any[]>([
+  {
+    label: 'Sofa',
+    value: 'Sofa'
+  },
+  {
+    label: 'Desk',
+    value: 'Desk'
+  },
+  {
+    label: 'Chair',
+    value: 'Chair'
+  }
+])
+</script>
+
+<style lang="less" scoped>
+.assist-input-wrapper {
+  height: 23.5rem;
+  width: 106.3rem;
+  border-radius: 2.8rem;
+  background-color: #fff;
+  border: 0.1rem solid #00000005;
+  box-shadow: 0px 5px 14px 0px #0000001a;
+  margin: 0 auto;
+  padding: 3.4rem 1.7rem 1.7rem 2rem;
+  .input {
+    flex: 1;
+    border: none;
+    outline: none;
+    padding: 0 1.4rem;
+    font-size: 2rem;
+    font-family: 'InterRegular';
+    font-weight: 400;
+    color: #000000;
+    resize: none;
+  }
+  .operate {
+    column-gap: 2rem;
+    .attach {
+      width: 4rem;
+      height: 4rem;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 50%;
+    }
+    .el-select {
+      width: 13.9rem;
+      height: 4rem;
+      :deep(.el-select__wrapper) {
+        border-radius: 0.8rem;
+        height: 100%;
+        box-shadow: none;
+        border: 0.1rem solid rgba(0, 0, 0, 0.1);
+        .type-option{
+          padding: 0 1rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/mainInput.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="main-input-container flex-1">
+    <div class="slogan">
+      <p>Creating Things with <span class="fiDA">FiDA</span> that</p>
+      <p>Bloom Your Creativity</p>
+    </div>
+    <Input />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Input from './components/Input.vue'
+</script>
+
+<style lang="less" scoped>
+.main-input-container {
+  padding-top: 20.2rem;
+  .slogan{
+    color: #000;
+    font-size: 6rem;
+    font-family: 'GeneralMedium';
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 5.6rem;
+    .fiDA{
+      font-family: 'GeneralBold';
+      font-weight: 600;
+    }
+  }
+}
+</style>