diff --git a/.env b/.env
new file mode 100644
index 0000000..30fe55b
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VUE_APP_BASE_URL=http://127.0.0.1:3210
diff --git a/package.json b/package.json
index 9c31fe9..4d1b47d 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
"version": "0.1.0",
"private": true,
"scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build"
+ "serve": "vue-cli-service serve --mode serve",
+ "build": "vue-cli-service build --mode build"
},
"dependencies": {
+ "axios": "^0.27.2",
"copy-webpack-plugin": "^11.0.0",
"core-js": "^3.6.5",
"element-themex": "^1.0.3",
diff --git a/public/loginBackground.png b/public/loginBackground.png
new file mode 100644
index 0000000..e68bd1e
Binary files /dev/null and b/public/loginBackground.png differ
diff --git a/src/assets/global.less b/src/assets/global.less
index 8156212..2bbd63d 100644
--- a/src/assets/global.less
+++ b/src/assets/global.less
@@ -2,224 +2,482 @@
@text: #303133;
//靠右
-.f-r {
+.float-right {
float: right;
}
//靠左
-.f-l {
+.float-left {
float: left;
}
//垂直居中
-.f-c {
+.float-center {
display: flex;
align-items: center;
}
+.float-none{
+ float: none;
+}
+
+.float-clear{
+ clear: both;
+}
+
+.position-fixed{
+ position: fixed;
+}
+
//内容居中
-.t-c {
+.text-center {
text-align: center;
}
//内容居右
-.t-r {
+.text-right {
text-align: right;
}
//内容居左
-.t-l {
+.text-left {
text-align: left;
}
+
//图标:小
-.i-s {
+.icon-s {
width: 18px;
height: 18px;
}
//图标:小+
-.i-x {
+.icon-x {
width: 28px;
height: 28px;
}
//图标:中
-.i-m {
+.icon-m {
width: 38px;
height: 38px;
}
//图标:大
-.i-l {
+.icon-l {
width: 48px;
height: 48px;
}
//内间距:小
-.p-s {
+.padding-s {
padding: 10px;
}
-.p-top-s {
+.padding-top-s {
padding-top: 10px;
}
-.p-left-s {
+.padding-left-s {
padding-left: 10px;
}
-.p-right-s {
+.padding-right-s {
padding-right: 10px;
}
-.p-bottom-s {
+.padding-bottom-s {
padding-bottom: 10px;
}
//内间距:小+
-.p-x {
+.padding-x {
padding: 20px;
}
-.p-top-x {
+.padding-top-x {
padding-top: 20px;
}
-.p-left-x {
+.padding-left-x {
padding-left: 20px;
}
-.p-right-x {
+.padding-right-x {
padding-right: 20px;
}
-.p-bottom-x {
+.padding-bottom-x {
padding-bottom: 20px;
}
//内间距:中
-.p-m {
+.padding-m {
padding: 30px;
}
-.p-top-m {
+.padding-top-m {
padding-top: 30px;
}
-.p-left-m {
+.padding-left-m {
padding-left: 30px;
}
-.p-right-m {
+.padding-right-m {
padding-right: 30px;
}
-.p-bottom-m {
+.padding-bottom-m {
padding-bottom: 30px;
}
//内间距:大
-.p-l {
+.padding-l {
padding: 40px;
}
-.p-top-l {
+.padding-top-l {
padding-top: 40px;
}
-.p-left-l {
+.padding-left-l {
padding-left: 40px;
}
-.p-right-l {
+.padding-right-l {
padding-right: 40px;
}
-.p-bottom-l {
+.padding-bottom-l {
padding-bottom: 40px;
}
+
+.top-0 {
+ top: 0px;
+}
+.right-0 {
+ right: 0px;
+}
+.left-0 {
+ left: 0px;
+}
+.top-0 {
+ top: 0px;
+}
+.bottom-0 {
+ bottom: 0px;
+}
+.margin-auto{
+ margin: auto;
+}
+
+//在页面上下左右居中
+.page-center{
+ text-align: center; /*让div内部文字居中*/
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 360px;
+}
+
+
//外间距:小
-.m-s {
+.margin-s {
margin: 10px;
}
-.m-top-s {
+.margin-top-s {
margin-top: 10px;
}
-.m-left-s {
+.margin-left-s {
margin-left: 10px;
}
-.m-right-s {
+.margin-right-s {
margin-right: 10px;
}
-.m-bottom-s {
+.margin-bottom-s {
padding-bottom: 10px;
}
//外间距:小+
-.m-x {
+.margin-x {
margin: 20px;
}
-.m-top-x {
+.margin-top-x {
margin-top: 20px;
}
-.m-left-x {
+.margin-left-x {
margin-left: 20px;
}
-.m-right-x {
+.margin-right-x {
margin-right: 20px;
}
-.m-bottom-x {
+.margin-bottom-x {
padding-bottom: 20px;
}
//外间距:中
-.m-m {
+.margin-m {
margin: 30px;
}
-.m-top-m {
+.margin-top-m {
margin-top: 30px;
}
-.m-left-m {
+.margin-left-m {
margin-left: 30px;
}
-.m-right-m {
+.margin-right-m {
margin-right: 30px;
}
-.m-bottom-m {
+.margin-bottom-m {
padding-bottom: 30px;
}
//外间距:大
-.m-l {
+.margin-l {
margin: 40px;
}
-.m-top-l {
+.margin-top-l {
margin-top: 40px;
}
-.m-left-l {
+.margin-left-l {
margin-left: 40px;
}
-.m-right-l {
+.margin-right-l {
margin-right: 40px;
}
-.m-bottom-l {
+.margin-bottom-l {
padding-bottom: 40px;
}
+
+
+.title{
+ font-size: 18px;
+ font-weight: bold;
+ padding: 9px;
+ color: #303133;
+
+}
+.title-s{
+ font-size: 12px;
+ font-weight: bold;
+ padding: 6px;
+ color: #303133;
+}
+.title-x{
+ font-size: 14px;
+ font-weight: bold;
+ padding: 7px;
+ color: #303133;
+
+}
+.title-m{
+ font-size: 18px;
+ font-weight: bold;
+ padding: 9px;
+ color: #303133;
+
+}
+.title-l{
+ font-size: 22px;
+ font-weight: bold;
+ padding: 11px;
+ color: #303133;
+
+}
+.title-xl{
+ font-size: 48px;
+ font-weight: bold;
+ padding: 22px;
+ color: #303133;
+
+}
+.title-xll{
+ font-size: 62px;
+ font-weight: bold;
+ padding: 31px;
+ color: #303133;
+
+}
+
+
+.mini-title{
+ font-size: 18px;
+ padding: 9px;
+ color: #909399;
+}
+.mini-title-s{
+ font-size: 12px;
+ padding: 6px;
+ color: #909399;
+}
+.mini-title-x{
+ font-size: 14px;
+ padding: 7px;
+ color: #909399;
+}
+.mini-title-m{
+ font-size: 18px;
+ padding: 9px;
+ color: #909399;
+}
+.mini-title-l{
+ font-size: 22px;
+ padding: 11px;
+ color: #909399;
+}
+.mini-title-xl{
+ font-size: 48px;
+ padding: 22px;
+ color: #909399;
+}
+.mini-title-xll{
+ font-size: 62px;
+ padding: 31px;
+ color: #909399;
+}
+
+.text{
+ font-size: 14px;
+ line-height: 14px;
+ color: #606266;
+}
+.text-s{
+ font-size: 12px;
+ line-height: 12px;
+ color: #606266;
+}
+.text-x{
+ font-size: 13px;
+ line-height: 13px;
+ color: #606266;
+
+}
+.text-m{
+ font-size: 14px;
+ line-height: 14px;
+ color: #606266;
+
+}
+.text-l{
+ font-size: 16px;
+ line-height: 16px;
+ color: #606266;
+
+}
+.text-xl{
+ font-size: 18px;
+ line-height: 18px;
+ color: #606266;
+
+}
+.text-xll{
+ font-size: 20px;
+ line-height: 20px;
+ color: #606266;
+
+}
+//主色
+.color-brand-1{
+ color: #409EFF;
+}
+.color-brand-2{
+ color: #67a9f8;
+}
+.color-brand-3{
+ color: #77b1f9;
+}
+.color-brand-4{
+ color: #87bbf9;
+}
+.color-brand-5{
+ color: #97c5fa;
+}
+.color-brand-6{
+ color: #a9cffb;
+}
+.color-brand-7{
+ color: #cbe2fc;
+}
+.color-brand-8{
+ color: #dcecfd;
+}
+.color-brand-9{
+ color: #edf5fe;
+}
+//辅助色
+.color-success-1{
+ color: #67C23A;
+}
+.color-success-2{
+ color: #e4f2da;
+}
+.color-success-3{
+ color: #f2f8ec;
+}
+
+.color-warning-1{
+ color: #E6A23C;
+}
+.color-warning-2{
+ color: #f8ecda;
+}
+.color-warning-3{
+ color: #fcf6ed;
+}
+
+.color-danger-1{
+ color: #F56C6C;
+}
+.color-danger-2{
+ color: #f9e3e2;
+}
+.color-danger-3{
+ color: #fcf0f0;
+}
+
+.color-info-1{
+ color: #909399;
+}
+.color-info-2{
+ color: #e9e9eb;
+}
+.color-info-3{
+ color: #f4f4f5;
+}
+
+.height-100vh{
+ height: 100vh;
+}
+.height-100vw{
+ height: 100vw;
+}
+.width-100vh{
+ width: 100vh;
+}
+.width-100vw{
+ width: 100vw;
+}
+.width-100p{
+ width: 100%;
+}
diff --git a/src/components/container/aside.vue b/src/components/container/aside.vue
index ee4d684..ca6cc34 100644
--- a/src/components/container/aside.vue
+++ b/src/components/container/aside.vue
@@ -10,7 +10,7 @@
+
{{ navData.navigate.name }}
+
{{ navData.navigate.name }}
-