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/layout/components/Sidebar/index.vue | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 49 insertions(+), 1 deletions(-) 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; + } + } + + // 纭繚鎶樺彔鏃跺脊鍑虹殑瀛愯彍鍗曟湁姝g‘鏍峰紡 + .el-tooltip__trigger:focus:not(.focusing) { + outline: none; + } +} </style> -- Gitblit v1.9.3