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 @@ @@ -20,7 +20,7 @@ {{ index }} - + {{ navData.navigate.name }} @@ -44,9 +44,12 @@ export default { } }, //计算属性 - computed: {}, + computed: { + + }, //在实例创建完成后被立即调用 created() { + }, //实例被挂载后调用 mounted() { @@ -74,7 +77,9 @@ export default { //包含 Vue 实例可用过滤器的哈希表。 filters: {}, //侦听器 - watch: {}, + watch: { + + }, } diff --git a/src/components/container/header.vue b/src/components/container/header.vue index 677f850..f89d3c0 100644 --- a/src/components/container/header.vue +++ b/src/components/container/header.vue @@ -7,11 +7,11 @@ > -
+
U - User Name + User Name diff --git a/src/components/container/index.vue b/src/components/container/index.vue index 0f2f260..aa78248 100644 --- a/src/components/container/index.vue +++ b/src/components/container/index.vue @@ -8,18 +8,18 @@
- + - + - - - - + + + +
@@ -45,9 +45,14 @@ export default { return {} }, //计算属性 - computed: {}, + computed: { + navHead() { + return this.$store.state.app.navHead + } + }, //在实例创建完成后被立即调用 created() { + this.$store.commit('navHead', this.$route.matched[0].components.default.navigate.hide) }, //实例被挂载后调用 mounted() { @@ -57,7 +62,11 @@ export default { //包含 Vue 实例可用过滤器的哈希表。 filters: {}, //侦听器 - watch: {}, + watch: { + '$route.path'() { + this.$store.commit('navHead', this.$route.matched[0].components.default.navigate.hide) + } + }, } @@ -69,4 +78,12 @@ export default { .dashed{ height: 100vh; } +.el-main{ + padding: 0px; +} + + diff --git a/src/components/im/index.vue b/src/components/im/index.vue index 70d2080..ce03668 100644 --- a/src/components/im/index.vue +++ b/src/components/im/index.vue @@ -1,7 +1,10 @@