From 6b15ae13da4c06dcca6ec2418bc1a58532a90b61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Wed, 27 Sep 2023 16:04:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BB=A5=E5=8F=8A=E5=9B=BE?=
=?UTF-8?q?=E6=A0=87=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/icons/svg/diy1.svg | 18 ++++++++++
src/assets/icons/svg/diy2.svg | 40 +++++++++++++++++++++
src/assets/icons/svg/diy3.svg | 17 +++++++++
src/assets/icons/svg/diy4.svg | 17 +++++++++
src/assets/icons/svg/diy5.svg | 15 ++++++++
src/assets/styles/sidebar.scss | 15 ++++++--
src/components/TopNav/index.vue | 64 ++++++++++++++++++++-------------
src/layout/index.vue | 3 +-
8 files changed, 161 insertions(+), 28 deletions(-)
create mode 100644 src/assets/icons/svg/diy1.svg
create mode 100644 src/assets/icons/svg/diy2.svg
create mode 100644 src/assets/icons/svg/diy3.svg
create mode 100644 src/assets/icons/svg/diy4.svg
create mode 100644 src/assets/icons/svg/diy5.svg
diff --git a/src/assets/icons/svg/diy1.svg b/src/assets/icons/svg/diy1.svg
new file mode 100644
index 0000000..df7190e
--- /dev/null
+++ b/src/assets/icons/svg/diy1.svg
@@ -0,0 +1,18 @@
+
+
+
diff --git a/src/assets/icons/svg/diy2.svg b/src/assets/icons/svg/diy2.svg
new file mode 100644
index 0000000..c2e867d
--- /dev/null
+++ b/src/assets/icons/svg/diy2.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/src/assets/icons/svg/diy3.svg b/src/assets/icons/svg/diy3.svg
new file mode 100644
index 0000000..2c8f364
--- /dev/null
+++ b/src/assets/icons/svg/diy3.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/assets/icons/svg/diy4.svg b/src/assets/icons/svg/diy4.svg
new file mode 100644
index 0000000..e7b3033
--- /dev/null
+++ b/src/assets/icons/svg/diy4.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/assets/icons/svg/diy5.svg b/src/assets/icons/svg/diy5.svg
new file mode 100644
index 0000000..8fa6ca9
--- /dev/null
+++ b/src/assets/icons/svg/diy5.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 2a5c264..943f8fe 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -24,8 +24,8 @@
left: 0;
z-index: 1001;
overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
- box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+ // -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+ // box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
// reset element-ui css
.horizontal-collapse-transition {
@@ -73,6 +73,11 @@
.el-menu-item,
.el-submenu__title {
+ font-size: 14px !important;
+ font-family: "Alibaba-PuHuiTi-Regular";
+
+ height: 50px !important;
+ line-height: 50px;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
@@ -82,6 +87,7 @@
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
+ border-radius: 5px !important;
color: #f8414d !important;
background-color: rgba(255, 72, 83, 0.2) !important;
}
@@ -89,6 +95,8 @@
& .theme-dark .is-active > .el-submenu__title {
// color: $base-menu-color-active !important;
+ border-radius: 5px !important;
+
color: #fff !important;
background-color: #f23f4a !important;
}
@@ -111,9 +119,12 @@
& .theme-dark .el-submenu .el-menu-item {
// background-color: $base-sub-menu-background !important;
background-color: #faf7f7 !important;
+ height: 50px !important;
+ line-height: 50px !important;
&:hover {
// background-color: $base-sub-menu-hover !important;
+ border-radius: 5px !important;
color: #f8414d !important;
background-color: rgba(255, 72, 83, 0.2) !important;
}
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index daee1b8..1e703dc 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -5,7 +5,11 @@
@select="handleSelect"
>
-
-
+
更多菜单
{
for (var item in router.children) {
if (router.children[item].parentPath === undefined) {
- if(router.path === "/") {
+ if (router.path === "/") {
router.children[item].path = "/" + router.children[item].path;
} else {
- if(!this.ishttp(router.children[item].path)) {
- router.children[item].path = router.path + "/" + router.children[item].path;
+ if (!this.ishttp(router.children[item].path)) {
+ router.children[item].path =
+ router.path + "/" + router.children[item].path;
}
}
router.children[item].parentPath = router.path;
@@ -92,25 +101,29 @@ export default {
activeMenu() {
const path = this.$route.path;
let activePath = path;
- if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+ if (
+ path !== undefined &&
+ path.lastIndexOf("/") > 0 &&
+ hideList.indexOf(path) === -1
+ ) {
const tmpPath = path.substring(1, path.length);
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
if (!this.$route.meta.link) {
- this.$store.dispatch('app/toggleSideBarHide', false);
+ this.$store.dispatch("app/toggleSideBarHide", false);
}
- } else if(!this.$route.children) {
+ } else if (!this.$route.children) {
activePath = path;
- this.$store.dispatch('app/toggleSideBarHide', true);
+ this.$store.dispatch("app/toggleSideBarHide", true);
}
this.activeRoutes(activePath);
return activePath;
},
},
beforeMount() {
- window.addEventListener('resize', this.setVisibleNumber)
+ window.addEventListener("resize", this.setVisibleNumber);
},
beforeDestroy() {
- window.removeEventListener('resize', this.setVisibleNumber)
+ window.removeEventListener("resize", this.setVisibleNumber);
},
mounted() {
this.setVisibleNumber();
@@ -124,24 +137,24 @@ export default {
// 菜单选择事件
handleSelect(key, keyPath) {
this.currentIndex = key;
- const route = this.routers.find(item => item.path === key);
+ const route = this.routers.find((item) => item.path === key);
if (this.ishttp(key)) {
// http(s):// 路径新窗口打开
window.open(key, "_blank");
} else if (!route || !route.children) {
// 没有子路由路径内部打开
- const routeMenu = this.childrenMenus.find(item => item.path === key);
+ const routeMenu = this.childrenMenus.find((item) => item.path === key);
if (routeMenu && routeMenu.query) {
let query = JSON.parse(routeMenu.query);
this.$router.push({ path: key, query: query });
} else {
this.$router.push({ path: key });
}
- this.$store.dispatch('app/toggleSideBarHide', true);
+ this.$store.dispatch("app/toggleSideBarHide", true);
} else {
// 显示左侧联动菜单
this.activeRoutes(key);
- this.$store.dispatch('app/toggleSideBarHide', false);
+ this.$store.dispatch("app/toggleSideBarHide", false);
}
},
// 当前激活的路由
@@ -154,15 +167,15 @@ export default {
}
});
}
- if(routes.length > 0) {
+ if (routes.length > 0) {
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
} else {
- this.$store.dispatch('app/toggleSideBarHide', true);
+ this.$store.dispatch("app/toggleSideBarHide", true);
}
},
ishttp(url) {
- return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
- }
+ return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
+ },
},
};
@@ -177,8 +190,9 @@ export default {
margin: 0 10px !important;
}
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
- border-bottom: 2px solid #{'var(--theme)'} !important;
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+ border-bottom: 2px solid #{"var(--theme)"} !important;
color: #303133;
}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ef598fc..b9fc486 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -107,7 +107,8 @@ export default {
.left-sidebar {
height: 100%;
background: url("~@/assets/images/sidebar.png");
- background-size: cover;
+ background-size: 100% 100%;
+ padding: 20px;
}
.right-page {
background: #f5f5f5;