From 10a6a98c217fc09aee8174d6444af80ca762b977 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 14:43:59 +0800
Subject: [PATCH] 1.样式修改
---
src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue | 2
src/assets/styles/sidebar.scss | 119 +++++++++++++++++++++++++--------------
src/layout/components/Sidebar/Logo.vue | 2
src/layout/components/Sidebar/index.vue | 29 +++++++++
src/views/reportAnalysis/productionAnalysis/components/left-top.vue | 2
5 files changed, 110 insertions(+), 44 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 5dd7d5e..be7b7a7 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -65,16 +65,16 @@
margin-right: 16px;
}
- .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
- padding: 10px 8px 18px;
- border-radius: 0 28px 28px 0;
- background: var(--menu-surface);
- backdrop-filter: blur(18px);
- box-shadow: var(--shadow-sm);
- }
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
+ padding: 10px 8px 18px;
+ border-radius: 22px;
+ background: var(--menu-surface);
+ backdrop-filter: blur(18px);
+ box-shadow: var(--shadow-sm);
+ }
.el-menu-item,
.menu-title {
@@ -87,43 +87,51 @@
display: inline-block !important;
}
- // menu hover
+ // menu hover
.submenu-title-noDropdown,
.el-sub-menu__title {
&:hover {
background-color: var(--menu-hover) !important;
+ border-radius: 14px;
}
- }
+ }
& .theme-light .is-active > .el-sub-menu__title {
color: var(--current-color) !important;
}
- & .nest-menu .el-sub-menu > .el-sub-menu__title,
- & .el-sub-menu .el-menu-item {
- min-width: $base-sidebar-width !important;
+ & .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .el-sub-menu .el-menu-item {
+ min-width: 0 !important;
+ margin: 0 12px 6px;
+ width: calc(100% - 24px);
+ padding-left: 8px !important;
+ padding-right: 8px !important;
+ box-sizing: border-box;
+
+ &:hover {
+ background-color: var(--menu-hover) !important;
+ }
+ &.is-active {
+ background-color: var(--menu-active-bg) !important;
+ border-radius: 14px;
+ }
+ }
- &:hover {
- background-color: var(--menu-hover) !important;
- }
- &.is-active {
- background-color: var(--menu-active-bg) !important;
- }
- }
-
- & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
- & .theme-light .el-sub-menu .el-menu-item {
- //background-color: transparent;
-
- &:hover {
- background-color: var(--menu-hover) !important;
- }
- }
- }
+ & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .theme-light .el-sub-menu .el-menu-item {
+ //background-color: transparent;
+
+ &:hover {
+ background-color: var(--menu-hover) !important;
+ border-radius: 14px;
+ }
+ }
+ }
.hideSidebar {
.sidebar-container {
width: 68px !important;
- padding-left: 12px;
+ padding-left: 0;
padding-right: 0;
}
@@ -137,6 +145,10 @@
display: flex !important;
align-items: center;
justify-content: center;
+
+ .svg-icon {
+ margin-right: 0;
+ }
.el-tooltip {
padding: 0 !important;
@@ -175,15 +187,24 @@
.svg-icon {
margin-left: 0;
+ margin-right: 0;
}
}
}
.el-menu--collapse {
+ width: 100% !important;
+ padding: 10px 6px 18px;
+
> .el-menu-item,
.el-sub-menu {
& > .el-sub-menu__title,
&.el-menu-item {
+ margin: 0 0 6px;
+ width: 100%;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ box-sizing: border-box;
display: flex !important;
align-items: center;
justify-content: center;
@@ -193,6 +214,10 @@
height: 18px;
margin-right: 0;
flex-shrink: 0;
+ }
+
+ &:hover {
+ border-radius: 14px;
}
& > span {
@@ -254,16 +279,24 @@
}
}
- .nest-menu .el-sub-menu > .el-sub-menu__title,
- .el-menu-item {
- &:hover {
- // you can use $sub-menuHover
- background-color: var(--menu-hover) !important;
- }
- &.is-active {
- background-color: var(--menu-active-bg) !important;
- }
- }
+ .nest-menu .el-sub-menu > .el-sub-menu__title,
+ .el-menu-item {
+ min-width: 0 !important;
+ margin: 0 12px 6px;
+ width: calc(100% - 24px);
+ padding-left: 8px !important;
+ padding-right: 8px !important;
+ box-sizing: border-box;
+
+ &:hover {
+ // you can use $sub-menuHover
+ background-color: var(--menu-hover) !important;
+ }
+ &.is-active {
+ background-color: var(--menu-active-bg) !important;
+ border-radius: 14px;
+ }
+ }
// the scroll bar appears when the sub-menu is too long
> .el-menu--popup {
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index a25d2a3..57c2b4b 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -86,7 +86,7 @@
line-height: 56px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--surface-border);
- border-radius: 0 22px 22px 0;
+ border-radius: 22px;
text-align: center;
overflow: hidden;
box-shadow: var(--shadow-sm);
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 6ce06de..83d3026 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -64,6 +64,8 @@
<style lang="scss" scoped>
.sidebar-container {
background-color: v-bind(getMenuBackground);
+ border-radius: 22px;
+ overflow: hidden;
.scrollbar-wrapper {
background-color: v-bind(getMenuBackground);
@@ -73,6 +75,7 @@
border: none;
height: 100%;
width: 100% !important;
+ border-radius: 22px;
.el-menu-item,
.el-sub-menu__title {
@@ -82,6 +85,7 @@
&:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+ border-radius: 14px;
}
}
@@ -100,6 +104,26 @@
:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
color: v-bind(theme) !important;
font-weight: 600;
+ background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
+ border-radius: 14px;
+ margin: 0 10px 6px !important;
+ width: calc(100% - 20px) !important;
+ padding-left: 10px !important;
+ padding-right: 10px !important;
+ box-sizing: border-box;
+ overflow: hidden;
+ background-clip: padding-box;
+ }
+
+ :deep(.el-menu-item.is-active) {
+ margin: 0 10px 6px !important;
+ width: calc(100% - 20px) !important;
+ padding-left: 10px !important;
+ padding-right: 10px !important;
+ box-sizing: border-box;
+ overflow: hidden;
+ background-clip: padding-box;
+ border-radius: 14px;
}
:deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
@@ -108,6 +132,11 @@
:deep(.el-menu-item.is-active .svg-icon) {
color: v-bind(theme) !important;
}
+
+ :deep(.el-sub-menu__title:hover),
+ :deep(.el-menu-item:hover) {
+ border-radius: 14px;
+ }
}
}
</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue
index 33f431d..9f6a8c1 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue
@@ -157,9 +157,11 @@
.panel-item-customers {
border: 1px solid #1a58b0;
+ border-radius: 16px;
padding: 18px;
width: 100%;
height: 449px;
+ overflow: hidden;
}
.chart-wrapper {
diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
index 932def8..fd52b1b 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
@@ -189,9 +189,11 @@
.panel-item-customers {
border: 1px solid #1a58b0;
+ border-radius: 16px;
padding: 18px;
width: 100%;
height: 449px;
+ overflow: hidden;
}
.filters-row {
--
Gitblit v1.9.3