Skip to content

Commit 9ee113e

Browse files
windbyteswindbytes
committed
✨ feat(左侧菜单样式优化): 优化左侧菜单的渐变背景、阴影效果及hover状态，调整样式格式，提升视觉效果和用户交互体验；新增收起状态下的特殊样式，增强菜单的可用性和美观性。
1 parent 7c650a0 commit 9ee113e

1 file changed

Lines changed: 149 additions & 62 deletions

File tree

‎src/layouts/LeftMenu/leftMenu.scss‎

Lines changed: 149 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -35,41 +35,40 @@
3535
overflow: hidden;
3636
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
3737
cursor: pointer;
38-
38+
3939
// 与系统主题协调的渐变背景
40-
background: linear-gradient(135deg,
41-
#f8fafc 0%, // 浅灰白
42-
#e2e8f0 50%, // 浅灰
43-
#cbd5e1 100% // 中灰
44-
);
45-
40+
background: linear-gradient(135deg,
41+
#f8fafc 0%, // 浅灰白
42+
#e2e8f0 50%, // 浅灰
43+
#cbd5e1 100% // 中灰
44+
);
45+
4646
// 边框和阴影效果
4747
border: 1px solid rgba(148, 163, 184, 0.2);
48-
box-shadow:
48+
box-shadow:
4949
0 2px 8px rgba(0, 0, 0, 0.06),
5050
0 1px 3px rgba(0, 0, 0, 0.1),
5151
inset 0 1px 0 rgba(255, 255, 255, 0.8);
5252

5353
// hover浮动效果
5454
&:hover {
5555
transform: translateY(-2px);
56-
background: linear-gradient(135deg,
57-
#ffffff 0%, // 纯白
58-
#f1f5f9 50%, // 极浅灰
59-
#e2e8f0 100% // 浅灰
60-
);
56+
background: linear-gradient(135deg,
57+
#ffffff 0%, // 纯白
58+
#f1f5f9 50%, // 极浅灰
59+
#e2e8f0 100% // 浅灰
60+
);
6161
border-color: rgba(59, 130, 246, 0.3);
62-
box-shadow:
62+
box-shadow:
6363
0 4px 16px rgba(0, 0, 0, 0.1),
6464
0 2px 8px rgba(0, 0, 0, 0.08),
6565
inset 0 1px 0 rgba(255, 255, 255, 0.9);
6666

6767
.logo-background {
6868
transform: scale(1.05);
69-
background: linear-gradient(135deg,
70-
rgba(59, 130, 246, 0.1) 0%,
71-
rgba(59, 130, 246, 0.05) 100%
72-
);
69+
background: linear-gradient(135deg,
70+
rgba(59, 130, 246, 0.1) 0%,
71+
rgba(59, 130, 246, 0.05) 100%);
7372
border-color: rgba(59, 130, 246, 0.2);
7473
}
7574

@@ -80,10 +79,9 @@
8079

8180
.card-glow {
8281
opacity: 0.3;
83-
background: linear-gradient(135deg,
84-
rgba(59, 130, 246, 0.1) 0%,
85-
rgba(147, 197, 253, 0.05) 100%
86-
);
82+
background: linear-gradient(135deg,
83+
rgba(59, 130, 246, 0.1) 0%,
84+
rgba(147, 197, 253, 0.05) 100%);
8785
}
8886
}
8987

@@ -108,17 +106,16 @@
108106
width: 48px;
109107
height: 48px;
110108
border-radius: 10px;
111-
background: linear-gradient(135deg,
112-
rgba(255, 255, 255, 0.8) 0%,
113-
rgba(248, 250, 252, 0.6) 50%,
114-
rgba(241, 245, 249, 0.4) 100%
115-
);
109+
background: linear-gradient(135deg,
110+
rgba(255, 255, 255, 0.8) 0%,
111+
rgba(248, 250, 252, 0.6) 50%,
112+
rgba(241, 245, 249, 0.4) 100%);
116113
border: 1px solid rgba(148, 163, 184, 0.3);
117114
display: flex;
118115
align-items: center;
119116
justify-content: center;
120117
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
121-
box-shadow:
118+
box-shadow:
122119
0 2px 6px rgba(0, 0, 0, 0.08),
123120
inset 0 1px 0 rgba(255, 255, 255, 0.9);
124121
}
@@ -153,11 +150,10 @@
153150
right: -2px;
154151
bottom: -2px;
155152
border-radius: 14px;
156-
background: linear-gradient(135deg,
157-
rgba(59, 130, 246, 0.1) 0%,
158-
rgba(147, 197, 253, 0.05) 50%,
159-
rgba(59, 130, 246, 0.1) 100%
160-
);
153+
background: linear-gradient(135deg,
154+
rgba(59, 130, 246, 0.1) 0%,
155+
rgba(147, 197, 253, 0.05) 50%,
156+
rgba(59, 130, 246, 0.1) 100%);
161157
opacity: 0;
162158
transition: all 0.3s ease;
163159
z-index: 0;
@@ -169,7 +165,7 @@
169165
.system-logo-card {
170166
margin: 8px 4px;
171167
height: 56px;
172-
168+
173169
.logo-card-content {
174170
padding: 0 8px;
175171
justify-content: center;
@@ -186,7 +182,7 @@
186182

187183
&:hover {
188184
transform: translateY(-3px) scale(1.05);
189-
185+
190186
.logo-background {
191187
transform: scale(1.15) rotate(5deg);
192188
}
@@ -197,14 +193,15 @@
197193
// 菜单项美化样式
198194
.side-menu {
199195
.ant-menu {
196+
200197
// 菜单项基础样式
201198
.ant-menu-item {
202199
position: relative;
203200
overflow: hidden;
204201
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
205202
border-radius: 8px;
206203
margin: 2px 8px;
207-
204+
208205
// 渐变背景效果
209206
&::before {
210207
content: '';
@@ -213,10 +210,10 @@
213210
left: -100%;
214211
width: 100%;
215212
height: 100%;
216-
background: linear-gradient(90deg,
217-
transparent 0%,
218-
rgba(24, 144, 255, 0.1) 50%,
219-
transparent 100%);
213+
background: linear-gradient(90deg,
214+
transparent 0%,
215+
rgba(24, 144, 255, 0.1) 50%,
216+
transparent 100%);
220217
transition: left 0.5s ease;
221218
z-index: 0;
222219
}
@@ -225,7 +222,7 @@
225222
&:hover {
226223
transform: translateX(4px);
227224
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
228-
225+
229226
&::before {
230227
left: 100%;
231228
}
@@ -237,11 +234,11 @@
237234

238235
// 选中状态
239236
&.ant-menu-item-selected {
240-
background: linear-gradient(135deg,
241-
rgba(24, 144, 255, 0.1) 0%,
242-
rgba(24, 144, 255, 0.05) 100%);
237+
background: linear-gradient(135deg,
238+
rgba(24, 144, 255, 0.1) 0%,
239+
rgba(24, 144, 255, 0.05) 100%);
243240
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
244-
241+
245242
&::after {
246243
content: '';
247244
position: absolute;
@@ -284,18 +281,18 @@
284281
left: -100%;
285282
width: 100%;
286283
height: 100%;
287-
background: linear-gradient(90deg,
288-
transparent 0%,
289-
rgba(24, 144, 255, 0.1) 50%,
290-
transparent 100%);
284+
background: linear-gradient(90deg,
285+
transparent 0%,
286+
rgba(24, 144, 255, 0.1) 50%,
287+
transparent 100%);
291288
transition: left 0.5s ease;
292289
z-index: 0;
293290
}
294291

295292
&:hover {
296293
transform: translateX(4px);
297294
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
298-
295+
299296
&::before {
300297
left: 100%;
301298
}
@@ -318,25 +315,115 @@
318315
}
319316
}
320317
}
318+
}
319+
}
320+
321+
// 收起状态下的特殊样式
322+
.ant-menu-submenu-popup {
323+
.ant-menu {
324+
.ant-menu-item {
325+
margin: 2px 4px;
326+
position: relative;
327+
overflow: hidden;
328+
border-radius: 8px;
329+
330+
// 渐变背景效果
331+
&::before {
332+
content: '';
333+
position: absolute;
334+
top: 0;
335+
left: -100%;
336+
width: 100%;
337+
height: 100%;
338+
background: linear-gradient(90deg,
339+
transparent 0%,
340+
rgba(24, 144, 255, 0.1) 50%,
341+
transparent 100%);
342+
transition: left 0.5s ease;
343+
z-index: 0;
344+
}
345+
346+
&:hover {
347+
transform: scale(1.05);
348+
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
349+
350+
&::before {
351+
left: 100%;
352+
}
353+
354+
.ant-menu-item-icon {
355+
transform: scale(1.1);
356+
}
357+
}
358+
359+
// 选中状态
360+
&.ant-menu-item-selected {
361+
background: linear-gradient(135deg,
362+
rgba(24, 144, 255, 0.1) 0%,
363+
rgba(24, 144, 255, 0.05) 100%);
364+
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
365+
366+
&::after {
367+
content: '';
368+
position: absolute;
369+
right: 0;
370+
top: 50%;
371+
transform: translateY(-50%);
372+
width: 3px;
373+
height: 20px;
374+
background: var(--color-primary);
375+
border-radius: 2px 0 0 2px;
376+
}
377+
}
378+
379+
.ant-menu-item-icon {
380+
transition: transform 0.3s ease;
381+
z-index: 1;
382+
position: relative;
383+
}
384+
}
321385

322-
// 收起状态下的特殊样式
323-
&.ant-menu-inline-collapsed {
324-
.ant-menu-item {
386+
.ant-menu-submenu {
387+
.ant-menu-submenu-title {
325388
margin: 2px 4px;
326-
389+
position: relative;
390+
overflow: hidden;
391+
border-radius: 8px;
392+
393+
// 渐变背景效果
394+
&::before {
395+
content: '';
396+
position: absolute;
397+
top: 0;
398+
left: -100%;
399+
width: 100%;
400+
height: 100%;
401+
background: linear-gradient(90deg,
402+
transparent 0%,
403+
rgba(24, 144, 255, 0.1) 50%,
404+
transparent 100%);
405+
transition: left 0.5s ease;
406+
z-index: 0;
407+
}
408+
327409
&:hover {
328410
transform: scale(1.05);
329-
}
330-
}
411+
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
331412

332-
.ant-menu-submenu {
333-
.ant-menu-submenu-title {
334-
margin: 2px 4px;
335-
336-
&:hover {
337-
transform: scale(1.05);
413+
&::before {
414+
left: 100%;
415+
}
416+
417+
.ant-menu-item-icon {
418+
transform: scale(1.1);
338419
}
339420
}
421+
422+
.ant-menu-item-icon {
423+
transition: transform 0.3s ease;
424+
z-index: 1;
425+
position: relative;
426+
}
340427
}
341428
}
342429
}

0 commit comments

Comments
 (0)