From 3d7cb5d5d437a773e4e49e8186c755446d4eaaea Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Tue, 3 Feb 2026 13:15:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96CSS=20&?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 21 +++---- package-lock.json | 12 ++++ package.json | 1 + src/assets/css/style.css | 37 ++++++++++++- src/assets/css/style.less | 35 +++++++----- src/assets/icons/attach.svg | 3 + src/main.ts | 1 + src/router/index.ts | 77 ++++++++++++++------------ src/views/home/components/Input.vue | 86 +++++++++++++++++++++++++++++ src/views/home/mainInput.vue | 32 +++++++++++ 10 files changed, 240 insertions(+), 65 deletions(-) create mode 100644 src/assets/icons/attach.svg create mode 100644 src/views/home/components/Input.vue create mode 100644 src/views/home/mainInput.vue diff --git a/index.html b/index.html index 148096a..6f42dca 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,19 @@ + - - - - Lane Crawford - - - - - - - - + + + + FiDA +
- + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e30a2f1..5691968 100644 --- 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", diff --git a/package.json b/package.json index 0ef6651..703d2b4 100644 --- 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", diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 417e454..a1102e0 100644 --- 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; +} diff --git a/src/assets/css/style.less b/src/assets/css/style.less index 36890a8..d146a31 100644 --- 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); - } -} \ No newline at end of file + 100% { + transform: rotate(360deg); + } +} diff --git a/src/assets/icons/attach.svg b/src/assets/icons/attach.svg new file mode 100644 index 0000000..26caec9 --- /dev/null +++ b/src/assets/icons/attach.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/main.ts b/src/main.ts index a6da966..171751e 100644 --- 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) diff --git a/src/router/index.ts b/src/router/index.ts index 80a40d3..1886d42 100644 --- 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 diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue new file mode 100644 index 0000000..dfb2fa8 --- /dev/null +++ b/src/views/home/components/Input.vue @@ -0,0 +1,86 @@ +