diff --git a/package.json b/package.json index e506c34..1e156de 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "mockjs": "^1.1.0", "pinia": "^2.1.7", "tdesign-vue-next": "^1.9.3", + "vite-plugin-mock": "^3.0.1", "vue": "^3.4.21", "vue-router": "^4.3.0" }, diff --git a/src/pages/index.vue b/src/pages/index.vue index e69de29..9363f98 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/router/index.js b/src/router/index.js index a49ae50..d81efb9 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,23 +1,15 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' +import { createRouter, createWebHistory } from "vue-router"; +import HomeView from "@/pages/index.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { - path: '/', - name: 'home', - component: HomeView + path: "/", + name: "home", + component: HomeView, }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } - ] -}) + ], +}); -export default router +export default router; diff --git a/src/style/index.css b/src/style/index.css new file mode 100644 index 0000000..621b4cf --- /dev/null +++ b/src/style/index.css @@ -0,0 +1,205 @@ +/** + * ENGINE + * v0.2 | 20150615 + * License: none (public domain) + */ +*, +*:after, +*:before { + box-sizing: border-box; + outline: none; +} +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + font: inherit; + font-size: 100%; + margin: 0; + padding: 0; + vertical-align: baseline; + border: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +q:before, +blockquote:after, +q:after { + content: ''; + content: none; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +table { + border-spacing: 0; + border-collapse: collapse; +} +input, +textarea, +button { + font-family: inhert; + font-size: inherit; + color: inherit; +} +select { + text-indent: 0.01px; + text-overflow: ''; + border: 0; + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; +} +select::-ms-expand { + display: none; +} +code, +pre { + font-family: monospace, monospace; + font-size: 1em; +} +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + width: 10px; + border-radius: 10px; +} +::-webkit-scrollbar-thumb { + border-radius: 8px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background: #e5e5e5; +} +.t-default-menu__inner .t-menu--scroll { + background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2)); +} +.back-color { + background-color: #f5f7fb; + padding: 16px 24px; + height: calc(95vh - 64px); + overflow-y: auto; + overflow-x: hidden; +} +a, +a:link, +a:visited, +a:hover, +a:active { + text-decoration: none; +} +.t-button--variant-text .t-button__text { + color: #0052d9; +} +.t-button--variant-text .t-button__text:hover { + color: #8799a3; +} diff --git a/src/style/index.less b/src/style/index.less new file mode 100644 index 0000000..42f1256 --- /dev/null +++ b/src/style/index.less @@ -0,0 +1,51 @@ +// 引入清除模式样式 +@import './reset.less'; +@import './variables.less'; + +// 滚动条外观样式 +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + width: 10px; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 8px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background: @base-scrollbar-color; +} + +.t-default-menu__inner .t-menu--scroll { + background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2)); +} + +// 主体背景颜色以及大小 +.back-color { + background-color: #f5f7fb; + padding: 16px 24px; + height: calc(95vh - 64px); + overflow-y: auto; + overflow-x: hidden; +} + +// 去除a标签默认样式 +a, +a:link, +a:visited, +a:hover, +a:active { + text-decoration: none; +} + +// 改变文字按钮的颜色 +.t-button--variant-text .t-button__text { + color: @base-text-color; +} + +// 改变文字按钮移入的颜色 +.t-button--variant-text .t-button__text:hover { + color: #8799a3; +} \ No newline at end of file diff --git a/src/style/indx.css b/src/style/reset.css similarity index 89% rename from src/style/indx.css rename to src/style/reset.css index 963bb0c..bd1f592 100644 --- a/src/style/indx.css +++ b/src/style/reset.css @@ -168,16 +168,3 @@ pre { font-family: monospace, monospace; font-size: 1em; } -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} -a, -.green { - text-decoration: none; - color: hsl(160, 100%, 37%); - transition: 0.4s; - padding: 3px; -} diff --git a/src/style/indx.less b/src/style/reset.less similarity index 90% rename from src/style/indx.less rename to src/style/reset.less index d30d641..aabb129 100644 --- a/src/style/indx.less +++ b/src/style/reset.less @@ -185,18 +185,4 @@ pre { font-family: monospace, monospace; font-size: 1em; - } - #app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} + } \ No newline at end of file diff --git a/src/style/variables.css b/src/style/variables.css new file mode 100644 index 0000000..e69de29 diff --git a/src/style/variables.less b/src/style/variables.less new file mode 100644 index 0000000..51be775 --- /dev/null +++ b/src/style/variables.less @@ -0,0 +1,14 @@ +// 设置less全局变量 + +// 左侧的菜单的宽度 +@base-menu-width: 260px; +// 左侧菜单的背景颜色 +@base-menu-background: rgb(229, 229, 229); +// 顶部导航高度b +@base-tabbar-height: 50px; +// 公用颜色 +@base-white-color: #fff; +// text按钮的颜色 +@base-text-color: #0052d9; +// 滚动条的颜色 +@base-scrollbar-color: rgb(229, 229, 229); \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index b9d1305..b8b7c4f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,9 +1,10 @@ -import { fileURLToPath, URL } from 'node:url' +import { fileURLToPath, URL } from "node:url"; +import path from "path"; -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import vueJsx from '@vitejs/plugin-vue-jsx' -import { viteMockServe } from 'vite-plugin-mock' +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; +import vueJsx from "@vitejs/plugin-vue-jsx"; +import { viteMockServe } from "vite-plugin-mock"; // https://vitejs.dev/config/ export default defineConfig({ @@ -11,24 +12,26 @@ export default defineConfig({ vue(), vueJsx(), viteMockServe({ - mockPath: 'mock', - enable: true - }) + mockPath: "mock", + enable: true, + }), ], resolve: { alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } + "@": fileURLToPath(new URL("./src", import.meta.url)), + }, }, css: { preprocessorOptions: { less: { modifyVars: { - hack: `true; @import (reference) "${path.resolve('src/style/variables.less')}";` + hack: `true; @import (reference) "${path.resolve( + "src/style/variables.less" + )}";`, }, - math: 'strict', - javascriptEnabled: true - } - } - } -}) + math: "strict", + javascriptEnabled: true, + }, + }, + }, +});