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 @@
+
+ 111111111111111
+
+
+
+
+
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,
+ },
+ },
+ },
+});