🎉 init: 添加公共样式

package.json

@@ -22,6 +22,8 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/tsconfig": "^0.5.1",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "npm-run-all2": "^6.1.2",
     "typescript": "~5.4.0",
     "vite": "^5.1.6",

src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+import '@/style/index.less'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

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;
+}

src/style/index.less

@@ -0,0 +1,50 @@
+// 引入清除模式样式
+@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;
+}

src/style/reset.css

@@ -0,0 +1,170 @@
+/**
+ * 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;
+}

src/style/reset.less

@@ -0,0 +1,188 @@
+/**
+ * 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;
+     &:before,
+     &:after {
+         content: '';
+         content: none;
+     }
+ }
+ 
+ sub,
+ sup {
+     font-size: 75%;
+     line-height: 0;
+ 
+     position: relative;
+ 
+     vertical-align: baseline;
+ }
+ sup {
+     top: -.5em;
+ }
+ sub {
+     bottom: -.25em;
+ }
+ 
+ table {
+     border-spacing: 0;
+     border-collapse: collapse;
+ }
+ 
+ input,
+ textarea,
+ button {
+     font-family: inhert;
+     font-size: inherit;
+ 
+     color: inherit;
+ }
+ 
+ select {
+     text-indent: .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;
+ }

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);