@xilonglab/vue-main 1.5.7 → 1.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/packages/else/XlSideBar.vue +88 -9
package/package.json
CHANGED
|
@@ -67,25 +67,34 @@ const triggers = {
|
|
|
67
67
|
|
|
68
68
|
|
|
69
69
|
<style lang="less">
|
|
70
|
+
// ==================== 变量定义 ====================
|
|
70
71
|
@sidebar-background: rgb(0 0 0 / 40%);
|
|
71
72
|
@sidebar-color: #f0f0f0;
|
|
72
73
|
@sidebar-active-background: rgb(0 0 0 / 30%);
|
|
73
74
|
@transition-function: width 0.7s cubic-bezier(0.17, 0.67, 0.84, 0.66);
|
|
75
|
+
@menu-item-blue: rgba(23, 80, 141, 0.7);
|
|
76
|
+
@menu-item-blue-dark: rgba(15, 36, 56, 0.7);
|
|
77
|
+
@menu-item-blue-light: transparent;
|
|
74
78
|
|
|
79
|
+
// ==================== 主容器 ====================
|
|
75
80
|
.xl-side-bar {
|
|
81
|
+
height: 100%;
|
|
82
|
+
width: 150px;
|
|
76
83
|
overflow-y: scroll;
|
|
77
84
|
scrollbar-width: none;
|
|
78
85
|
border-right: 0 !important;
|
|
79
|
-
height: 100%;
|
|
80
86
|
|
|
87
|
+
&::-webkit-scrollbar {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// ==================== 菜单容器 ====================
|
|
81
92
|
.side-bar-menu {
|
|
82
93
|
margin: 5px;
|
|
83
|
-
background: @sidebar-background;
|
|
84
94
|
height: calc(~"100% - 10px");
|
|
95
|
+
background: @sidebar-background;
|
|
85
96
|
border-radius: 7px;
|
|
86
97
|
border: 0;
|
|
87
|
-
overflow: hidden;
|
|
88
|
-
|
|
89
98
|
overflow: auto;
|
|
90
99
|
scrollbar-width: none;
|
|
91
100
|
-ms-overflow-style: none;
|
|
@@ -99,11 +108,39 @@ const triggers = {
|
|
|
99
108
|
}
|
|
100
109
|
}
|
|
101
110
|
|
|
111
|
+
// ==================== 菜单项基础样式（共同部分）====================
|
|
102
112
|
.el-sub-menu__title,
|
|
103
113
|
.el-menu-item {
|
|
104
|
-
background:
|
|
114
|
+
background: transparent;
|
|
115
|
+
margin: 4px 8px;
|
|
116
|
+
border-radius: 6px;
|
|
117
|
+
position: relative;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
|
|
120
|
+
// 光泽反光效果
|
|
121
|
+
&::before {
|
|
122
|
+
content: '';
|
|
123
|
+
position: absolute;
|
|
124
|
+
top: 0;
|
|
125
|
+
left: 0;
|
|
126
|
+
right: 0;
|
|
127
|
+
height: 50%;
|
|
128
|
+
background: linear-gradient(
|
|
129
|
+
180deg,
|
|
130
|
+
rgba(255, 255, 255, 0.15) 0%,
|
|
131
|
+
rgba(255, 255, 255, 0.05) 50%,
|
|
132
|
+
transparent 100%
|
|
133
|
+
);
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
border-radius: 6px 6px 0 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// 底部阴影增强立体感
|
|
139
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
|
|
140
|
+
0 1px 0 rgba(255, 255, 255, 0.1) inset;
|
|
105
141
|
}
|
|
106
142
|
|
|
143
|
+
// ==================== 菜单项特定样式 ====================
|
|
107
144
|
.el-menu-item {
|
|
108
145
|
transition: @transition-function;
|
|
109
146
|
-moz-transition: @transition-function;
|
|
@@ -113,6 +150,19 @@ const triggers = {
|
|
|
113
150
|
|
|
114
151
|
&:hover {
|
|
115
152
|
color: @sidebar-color !important;
|
|
153
|
+
background: linear-gradient(135deg, @menu-item-blue 0%, @menu-item-blue-light 50%, @menu-item-blue 100%) !important;
|
|
154
|
+
|
|
155
|
+
&::before {
|
|
156
|
+
background: linear-gradient(
|
|
157
|
+
180deg,
|
|
158
|
+
rgba(255, 255, 255, 0.2) 0%,
|
|
159
|
+
rgba(255, 255, 255, 0.08) 50%,
|
|
160
|
+
transparent 100%
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
|
|
165
|
+
0 1px 0 rgba(255, 255, 255, 0.15) inset;
|
|
116
166
|
|
|
117
167
|
i {
|
|
118
168
|
color: @sidebar-color !important;
|
|
@@ -120,15 +170,44 @@ const triggers = {
|
|
|
120
170
|
}
|
|
121
171
|
|
|
122
172
|
&.is-active {
|
|
123
|
-
background: @
|
|
173
|
+
background: linear-gradient(135deg, @menu-item-blue-light 0%, @menu-item-blue 50%, @menu-item-blue-dark 100%) !important;
|
|
174
|
+
|
|
175
|
+
&::before {
|
|
176
|
+
background: linear-gradient(
|
|
177
|
+
180deg,
|
|
178
|
+
rgba(255, 255, 255, 0.25) 0%,
|
|
179
|
+
rgba(255, 255, 255, 0.1) 50%,
|
|
180
|
+
transparent 100%
|
|
181
|
+
);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5),
|
|
185
|
+
0 2px 0 rgba(255, 255, 255, 0.2) inset;
|
|
124
186
|
}
|
|
125
187
|
}
|
|
126
188
|
|
|
127
|
-
|
|
128
|
-
|
|
189
|
+
// ==================== 子菜单标题样式 ====================
|
|
190
|
+
.el-sub-menu__title {
|
|
191
|
+
&:hover {
|
|
192
|
+
color: @sidebar-color !important;
|
|
193
|
+
background: linear-gradient(135deg, @menu-item-blue 0%, @menu-item-blue-light 50%, @menu-item-blue 100%) !important;
|
|
194
|
+
|
|
195
|
+
&::before {
|
|
196
|
+
background: linear-gradient(
|
|
197
|
+
180deg,
|
|
198
|
+
rgba(255, 255, 255, 0.2) 0%,
|
|
199
|
+
rgba(255, 255, 255, 0.08) 50%,
|
|
200
|
+
transparent 100%
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
|
|
205
|
+
0 1px 0 rgba(255, 255, 255, 0.15) inset;
|
|
206
|
+
}
|
|
129
207
|
}
|
|
130
208
|
|
|
131
|
-
|
|
209
|
+
// ==================== 其他辅助样式 ====================
|
|
210
|
+
.el-menu-item-group__title {
|
|
132
211
|
display: none;
|
|
133
212
|
}
|
|
134
213
|
}
|