From e943d5c81c311fc9eb51513c018689b6978ae135 Mon Sep 17 00:00:00 2001
From: birt <2499248221@qq.com>
Date: 星期日, 13 四月 2025 13:08:54 +0800
Subject: [PATCH] 123123
---
zhitan-vue/src/components/Breadcrumb/index.vue | 14 --
zhitan-vue/src/assets/styles/index.scss | 53 +++++++---
zhitan-vue/src/assets/styles/sidebar.scss | 84 ++++++++++------
zhitan-vue/src/layout/components/Sidebar/index.vue | 50 +++++++++
zhitan-vue/src/layout/index.vue | 41 -------
zhitan-vue/src/assets/styles/menu-fix.scss | 0
6 files changed, 139 insertions(+), 103 deletions(-)
diff --git a/zhitan-vue/src/assets/styles/index.scss b/zhitan-vue/src/assets/styles/index.scss
index 9ef36a6..c31570b 100644
--- a/zhitan-vue/src/assets/styles/index.scss
+++ b/zhitan-vue/src/assets/styles/index.scss
@@ -207,22 +207,39 @@
}
}
-/* 鍏ㄥ眬婊氬姩鏉℃牱寮� */
-::-webkit-scrollbar {
- width: 6px;
- height: 6px;
-}
-
-::-webkit-scrollbar-track {
- background-color: rgba(0, 0, 0, 0.05);
- border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
- background-color: rgba(144, 147, 153, 0.3);
- border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background-color: rgba(144, 147, 153, 0.5);
+/* 鎶樺彔鑿滃崟鏍峰紡璋冩暣锛岀‘淇濆湪鎵�鏈夋儏鍐典笅鑿滃崟椤瑰眳涓� */
+.el-menu--collapse {
+ width: 54px !important;
+
+ .el-sub-menu, .el-menu-item {
+ width: 36px !important;
+ min-width: 36px !important;
+ margin-left: 9px !important; /* 鍏抽敭锛氳缃浐瀹氱殑宸﹁竟璺�9px浣胯彍鍗曢」灞呬腑 */
+ margin-right: 9px !important;
+ }
+
+ .el-menu-item, .el-sub-menu__title {
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ padding: 0 !important;
+
+ .svg-icon, .el-icon {
+ margin: 0 !important; /* 閲嶈锛氱Щ闄ゅ浘鏍囩殑鎵�鏈夎竟璺� */
+ }
+
+ .el-sub-menu__icon-arrow {
+ display: none !important;
+ }
+
+ > span {
+ display: none !important;
+ }
+ }
+
+ /* 閫変腑鐘舵�佹牱寮� */
+ .el-menu-item.is-active, .el-sub-menu.is-active > .el-sub-menu__title {
+ background-color: #3883FA !important;
+ color: #fff !important;
+ }
}
\ No newline at end of file
diff --git a/zhitan-vue/src/assets/styles/menu-fix.scss b/zhitan-vue/src/assets/styles/menu-fix.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/zhitan-vue/src/assets/styles/menu-fix.scss
diff --git a/zhitan-vue/src/assets/styles/sidebar.scss b/zhitan-vue/src/assets/styles/sidebar.scss
index 2a62f02..297e8e4 100644
--- a/zhitan-vue/src/assets/styles/sidebar.scss
+++ b/zhitan-vue/src/assets/styles/sidebar.scss
@@ -193,22 +193,32 @@
}
.el-menu--collapse {
- .el-sub-menu {
- & > .el-sub-menu__title {
- & > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- & > i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
+ width: 54px !important;
+
+ /* 娓呴櫎鍚庝唬閫夋嫨鍣ㄤ腑骞叉壈灞呬腑鐨勬牱寮� */
+ .el-sub-menu, .el-menu-item {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 100% !important;
+
+ /* 璁╁浘鏍囧拰鑿滃崟椤瑰眳涓� */
+ .el-menu-item, .el-sub-menu__title {
+ width: 36px !important;
+ min-width: 36px !important;
+ height: 38px !important;
+ line-height: 38px !important;
+ margin: 4px 9px !important; /* 绮剧‘璁＄畻灞呬腑杈硅窛 */
+ padding: 0 !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ border-radius: 4px !important;
+ }
+
+ /* 纭繚鍥炬爣灞呬腑 */
+ .svg-icon, .el-icon {
+ margin: 0 !important;
+ padding: 0 !important;
}
}
}
@@ -480,22 +490,32 @@
}
.el-menu--collapse {
- .el-sub-menu {
- & > .el-sub-menu__title {
- & > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- & > i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
+ width: 54px !important;
+
+ /* 娓呴櫎鍚庝唬閫夋嫨鍣ㄤ腑骞叉壈灞呬腑鐨勬牱寮� */
+ .el-sub-menu, .el-menu-item {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 100% !important;
+
+ /* 璁╁浘鏍囧拰鑿滃崟椤瑰眳涓� */
+ .el-menu-item, .el-sub-menu__title {
+ width: 36px !important;
+ min-width: 36px !important;
+ height: 38px !important;
+ line-height: 38px !important;
+ margin: 4px 9px !important; /* 绮剧‘璁＄畻灞呬腑杈硅窛 */
+ padding: 0 !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ border-radius: 4px !important;
+ }
+
+ /* 纭繚鍥炬爣灞呬腑 */
+ .svg-icon, .el-icon {
+ margin: 0 !important;
+ padding: 0 !important;
}
}
}
diff --git a/zhitan-vue/src/components/Breadcrumb/index.vue b/zhitan-vue/src/components/Breadcrumb/index.vue
index 032a6fb..6c873a0 100644
--- a/zhitan-vue/src/components/Breadcrumb/index.vue
+++ b/zhitan-vue/src/components/Breadcrumb/index.vue
@@ -63,19 +63,5 @@
color: #fff;
cursor: text;
}
-
- :deep(.el-breadcrumb__item) {
- .el-breadcrumb__inner {
- color: rgba(255, 255, 255, 0.8);
-
- &:hover {
- color: #fff;
- }
- }
-
- .el-breadcrumb__separator {
- color: rgba(255, 255, 255, 0.8);
- }
- }
}
</style>
\ No newline at end of file
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index b446637..68596a6 100644
--- a/zhitan-vue/src/layout/components/Sidebar/index.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/index.vue
@@ -182,9 +182,11 @@
}
}
-:deep(.custom-menu) {
+.custom-menu {
+ width: 100%;
padding: 6px 0;
height: auto !important; // 鏀逛负鑷�傚簲楂樺害锛岄伩鍏嶅浐瀹氶珮搴﹀鑷村唴瀹规孩鍑�
+ transition: all 0.3s ease;
// Override Element Plus default menu styles
.el-menu-item {
@@ -193,6 +195,7 @@
border-radius: 4px;
margin: 4px 10px;
width: calc(100% - 20px);
+ transition: all 0.2s ease;
&.is-active {
background-color: #3883FA !important;
@@ -211,6 +214,7 @@
border-radius: 4px;
margin: 4px 10px;
width: calc(100% - 20px);
+ transition: all 0.2s ease;
&:hover {
background-color: rgba(56, 131, 250, 0.1) !important;
@@ -427,4 +431,48 @@
height: 38px !important;
line-height: 38px !important;
}
+
+// Add styles for collapsed menu items
+:deep(.custom-menu.el-menu--collapse) {
+ width: 54px !important;
+
+ .el-menu-item, .el-sub-menu__title {
+ width: 36px !important;
+ min-width: 36px !important;
+ margin: 4px 9px !important; /* 9px鏄负浜嗙‘淇濆眳涓細(54px瀹� - 36px鑿滃崟椤�) / 2 = 9px */
+ padding: 0 !important;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+
+ &.is-active {
+ background-color: #3883FA !important;
+ color: #fff !important;
+ box-shadow: 0 2px 6px rgba(56, 131, 250, 0.4);
+ transform: scale(0.95);
+ transition: all 0.2s ease;
+ }
+
+ .el-icon, .svg-icon {
+ margin: 0 !important;
+ font-size: 18px !important;
+
+ svg {
+ width: 1.2em;
+ height: 1.2em;
+ }
+ }
+
+ // 纭繚鎶樺彔鏃跺瓙鑿滃崟鐨勬爣棰樹篃灞呬腑瀵归綈
+ .el-sub-menu__icon-arrow {
+ display: none;
+ }
+ }
+
+ // 纭繚鎶樺彔鏃跺脊鍑虹殑瀛愯彍鍗曟湁姝ｇ‘鏍峰紡
+ .el-tooltip__trigger:focus:not(.focusing) {
+ outline: none;
+ }
+}
</style>
diff --git a/zhitan-vue/src/layout/index.vue b/zhitan-vue/src/layout/index.vue
index ae42aea..f190105 100644
--- a/zhitan-vue/src/layout/index.vue
+++ b/zhitan-vue/src/layout/index.vue
@@ -9,7 +9,7 @@
<img v-if="sideTheme === 'theme-dark'" :src="systemInfo.leftLogo" class="sidebar-logo" />
<img v-else :src="systemInfo.leftLogo" class="sidebar-logo" />
</div>
- <div class="name" v-if="sidebar.opened" :style="{ color: '#fff' }">
+ <div class="name" v-if="sidebar.opened" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }">
{{ title }}
</div>
</div>
@@ -86,7 +86,7 @@
// 璺宠浆鍒版姤璀﹂〉闈�
function goToAlarm() {
- router.push('/alarmmanage/measuremen?modelCode=BJGL')
+ router.push('/alarm/list')
}
// 鎵撳紑AI澶фā鍨嬪璇濇
@@ -351,47 +351,12 @@
}
.themeDark {
- .navbar-container {
- background: #1a235d;
- border-bottom: 2px solid #110f2e;
- }
-
.navbar {
- background: transparent !important;
+ background: #002866 !important;
}
.sidebar-container {
background-color: #002866 !important;
- }
-}
-
-.themeLight {
- .navbar-container {
- background: #3883FA;
- }
-
- .navbar {
- background: transparent !important;
-
- .left {
- .sidebar-logo-container {
- .name {
- color: #fff !important;
- }
- }
- }
-
- .right {
- .right-menu {
- .right-menu-item {
- color: #fff;
-
- .right-menu-icon {
- color: #fff;
- }
- }
- }
- }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3