feat: 初始化CSS &输入框

2026-02-03 13:15:39 +08:00
parent 734c0129cd
commit 3d7cb5d5d4
10 changed files with 240 additions and 65 deletions
--- a/index.html
+++ b/index.html
@@ -1,24 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
-	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
-	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-	<link rel="stylesheet" href="/css/woff/fontFamily.css">
-    <title>Lane Crawford</title>
-    <!-- Open Graph / WhatsApp share metadata -->
-    <meta property="og:title" content="Lane Crawford" />
-    <meta property="og:description" content="create and share looks from the Lane Crawford creation gallery." />
-    <meta property="og:image" content="" />
-    <meta property="og:url" content="https://www.lc.aida.com.hk" />
-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="Lane Crawford" />
-    <meta name="twitter:card" content="summary_large_image" />
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+    <link rel="stylesheet" href="/css/woff/fontFamily.css">
+    <title>FiDA</title>
  </head>
+
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
-</html>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
        "element-plus": "^2.13.2",
        "gsap": "^3.13.0",
        "markdown-it": "^14.1.0",
+        "normalize.css": "^8.0.1",
        "pinia": "^2.0.32",
        "pinia-persistedstate-plugin": "^0.1.0",
        "pinia-plugin-persistedstate": "^3.1.0",
@@ -5329,6 +5330,12 @@
      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "license": "MIT"
+    },
    "node_modules/npm-run-all": {
      "version": "4.1.5",
      "resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -12459,6 +12466,11 @@
      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
    },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
    "npm-run-all": {
      "version": "4.1.5",
      "resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "element-plus": "^2.13.2",
    "gsap": "^3.13.0",
    "markdown-it": "^14.1.0",
+    "normalize.css": "^8.0.1",
    "pinia": "^2.0.32",
    "pinia-persistedstate-plugin": "^0.1.0",
    "pinia-plugin-persistedstate": "^3.1.0",
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,6 +1,14 @@
-* {
-  padding: 0;
+body,
+html,
+div,
+ul,
+li,
+h1,
+h2,
+h3,
+p {
  margin: 0;
+  padding: 0;
 }
 html,
 body,
@@ -17,3 +25,28 @@ body,
    transform: rotate(360deg);
  }
 }
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-1 {
+  flex: 1;
+}
+.flex-center {
+  align-items: center;
+  justify-content: center;
+}
+.flex-between {
+  justify-content: space-between;
+}
+.align-center {
+  align-items: center;
+}
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -1,23 +1,30 @@
-* {
-	padding: 0;
-	margin: 0;
+body,
+html,
+div,
+ul,
+li,
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+  padding: 0;
 }

 html,
 body,
 #app {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }

-
@keyframes loading {
-	0% {
-		transform: rotate(0deg);
-	}
+  0% {
+    transform: rotate(0deg);
+  }

-	100% {
-		transform: rotate(360deg);
-	}
-}
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/assets/icons/attach.svg
+++ b/src/assets/icons/attach.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9451 8.83443C16.017 8.89189 16.0742 8.97812 16.103 9.06431C16.1461 9.1505 16.1605 9.23661 16.1605 9.33716C16.1605 9.43772 16.1461 9.52382 16.103 9.61001C16.0742 9.6962 16.017 9.78244 15.9451 9.8399L8.59016 17.2091C7.64208 18.1572 6.36364 18.6743 5.0277 18.6743C3.69177 18.6743 2.41334 18.1428 1.47962 17.2091C0.531542 16.261 0 14.9826 0 13.6466C0 12.3107 0.531542 11.0323 1.47962 10.0985L10.3858 1.04861C11.0609 0.373458 11.9659 0 12.9284 0C13.8765 0 14.7958 0.373458 15.471 1.04861C16.1318 1.72376 16.5196 2.64314 16.5196 3.59122C16.5196 4.5393 16.1461 5.45868 15.471 6.13383L6.55046 15.1694C6.14825 15.5716 5.6023 15.8014 5.0277 15.8014C4.45311 15.8014 3.90716 15.5716 3.50494 15.1694C3.10273 14.7672 2.87297 14.2212 2.87297 13.6466C2.87297 13.072 3.10273 12.5261 3.50494 12.1239L10.9746 4.52497C11.0464 4.45314 11.1185 4.39569 11.2047 4.3526C11.3052 4.32387 11.3913 4.29508 11.4919 4.29508C11.5781 4.29508 11.6786 4.3095 11.7647 4.3526C11.8653 4.38133 11.9374 4.43875 12.0092 4.49621C12.081 4.56803 12.1239 4.65429 12.167 4.74048C12.2101 4.82666 12.2245 4.92713 12.2245 5.01332C12.2245 5.11388 12.1957 5.21436 12.167 5.30055C12.1239 5.38674 12.0666 5.45861 12.0092 5.53044L4.52479 13.1295C4.45297 13.2013 4.41007 13.2876 4.36698 13.3738C4.32388 13.46 4.30946 13.5461 4.30946 13.6466C4.30946 13.7328 4.32388 13.8333 4.36698 13.9195C4.39571 14.0057 4.45297 14.0775 4.52479 14.1494C4.58225 14.2212 4.66867 14.2786 4.75485 14.3073C4.84104 14.3504 4.92715 14.3649 5.0277 14.3649C5.12826 14.3649 5.21436 14.3504 5.30055 14.3073C5.38674 14.2786 5.47315 14.2212 5.53061 14.1494L14.4511 5.11398C14.8534 4.71176 15.0831 4.16581 15.0831 3.59122C15.0831 3.01662 14.8534 2.47067 14.4511 2.06846C14.0489 1.66624 13.503 1.43649 12.9284 1.43649C12.3538 1.43649 11.8078 1.66624 11.4056 2.06846L2.48509 11.104C2.1547 11.4344 1.89608 11.8367 1.70933 12.2677C1.53696 12.6986 1.43649 13.1726 1.43649 13.6466C1.43649 14.1207 1.53696 14.5803 1.70933 15.0112C1.89608 15.4565 2.1547 15.8445 2.48509 16.1892C2.81549 16.5196 3.21779 16.7782 3.64873 16.965C4.09404 17.1374 4.55366 17.2378 5.0277 17.2378C5.50174 17.2378 5.96136 17.1517 6.40667 16.965C6.83762 16.7782 7.23992 16.5196 7.57031 16.1892L14.9393 8.82005C15.0686 8.69076 15.2555 8.61892 15.4422 8.61892C15.629 8.61892 15.8159 8.69078 15.9451 8.83443Z" fill="black"/>
+</svg>
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,7 @@ import flexible from "./utils/flexible.js";
 import "./router/router-config"  // 路由守卫，做动态路由的地方
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'normalize.css'

 const app = createApp(App)
 app.use(router)
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,42 +7,47 @@ import { createRouter, createWebHistory } from 'vue-router'
 * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
 */
 const router = createRouter({
-	history: createWebHistory('/'),
-	//   history: createWebHistory(import.meta.env.VITE_APP_URL),
-	routes: [
-		{
-			path: '/',
-			redirect: '/home'
-		},
-		{
-			path: '/',
-			name: 'index',
-			component: () => import('../views/login/index.vue'),
-		},
-		{
-			path: '/login',
-			name: 'login',
-			component: () => import('../views/login/login.vue'),
-		},
-		{
-			path: '/home',
-			name: 'home',
-			component: () => import('../views/home/index.vue'),
-			children: [
-				{
-					path: 'test',
-					name: 'test',
-					component: () => import('../views/home/test.vue'),
-					meta: { topNavStyle: '2' }
-				}
-			]
-		},
-		{
-			path: '/:pathMatch(.*)',
-			name: '404',
-			component: () => import('../views/404.vue'),
-		}
-	]
+  history: createWebHistory('/'),
+  //   history: createWebHistory(import.meta.env.VITE_APP_URL),
+  routes: [
+    {
+      path: '/',
+      redirect: '/home'
+    },
+    {
+      path: '/',
+      name: 'index',
+      component: () => import('../views/login/index.vue')
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/login/login.vue')
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: () => import('../views/home/index.vue'),
+      children: [
+        {
+          path: 'test',
+          name: 'test',
+          component: () => import('../views/home/test.vue'),
+          meta: { topNavStyle: '2' }
+        },
+        {
+          path: 'mainInput',
+          name: 'mainInput',
+          component: () => import('../views/home/mainInput.vue')
+        }
+      ]
+    },
+    {
+      path: '/:pathMatch(.*)',
+      name: '404',
+      component: () => import('../views/404.vue')
+    }
+  ]
 })

 export default router
--- a/src/views/home/components/Input.vue
+++ b/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>
--- a/src/views/home/mainInput.vue
+++ b/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>