@xilonglab/vue-main 1.5.6 → 1.5.8
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
CHANGED
|
@@ -55,12 +55,9 @@ defineExpose({ click })
|
|
|
55
55
|
|
|
56
56
|
|
|
57
57
|
<template>
|
|
58
|
-
<xl-button class="xl-async-button" ref="btnRef" :size="size" :type="type" :disabled="disabled" v-loading="loading"
|
|
58
|
+
<xl-button class="xl-async-button" ref="btnRef" :l="l" :size="size" :type="type" :disabled="disabled" v-loading="loading"
|
|
59
59
|
:icon="icon" @click="handleClick">
|
|
60
|
-
<
|
|
61
|
-
{{ l }}
|
|
62
|
-
<slot />
|
|
63
|
-
</span>
|
|
60
|
+
<slot />
|
|
64
61
|
</xl-button>
|
|
65
62
|
</template>
|
|
66
63
|
|
|
@@ -71,6 +71,9 @@ const triggers = {
|
|
|
71
71
|
@sidebar-color: #f0f0f0;
|
|
72
72
|
@sidebar-active-background: rgb(0 0 0 / 30%);
|
|
73
73
|
@transition-function: width 0.7s cubic-bezier(0.17, 0.67, 0.84, 0.66);
|
|
74
|
+
@menu-item-blue: #1a3a5c;
|
|
75
|
+
@menu-item-blue-dark: #0f2438;
|
|
76
|
+
@menu-item-blue-light: #2a4d6e;
|
|
74
77
|
|
|
75
78
|
.xl-side-bar {
|
|
76
79
|
overflow-y: scroll;
|
|
@@ -102,6 +105,35 @@ const triggers = {
|
|
|
102
105
|
.el-sub-menu__title,
|
|
103
106
|
.el-menu-item {
|
|
104
107
|
background: @sidebar-background;
|
|
108
|
+
margin: 4px 8px;
|
|
109
|
+
border-radius: 6px;
|
|
110
|
+
position: relative;
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
|
|
113
|
+
// 深蓝色渐变背景
|
|
114
|
+
background: linear-gradient(135deg, @menu-item-blue-dark 0%, @menu-item-blue 50%, @menu-item-blue-light 100%);
|
|
115
|
+
|
|
116
|
+
// 光泽反光效果
|
|
117
|
+
&::before {
|
|
118
|
+
content: '';
|
|
119
|
+
position: absolute;
|
|
120
|
+
top: 0;
|
|
121
|
+
left: 0;
|
|
122
|
+
right: 0;
|
|
123
|
+
height: 50%;
|
|
124
|
+
background: linear-gradient(
|
|
125
|
+
180deg,
|
|
126
|
+
rgba(255, 255, 255, 0.15) 0%,
|
|
127
|
+
rgba(255, 255, 255, 0.05) 50%,
|
|
128
|
+
transparent 100%
|
|
129
|
+
);
|
|
130
|
+
pointer-events: none;
|
|
131
|
+
border-radius: 6px 6px 0 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// 底部阴影增强立体感
|
|
135
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
|
|
136
|
+
0 1px 0 rgba(255, 255, 255, 0.1) inset;
|
|
105
137
|
}
|
|
106
138
|
|
|
107
139
|
.el-menu-item {
|
|
@@ -109,10 +141,22 @@ const triggers = {
|
|
|
109
141
|
-moz-transition: @transition-function;
|
|
110
142
|
-webkit-transition: @transition-function;
|
|
111
143
|
-o-transition: @transition-function;
|
|
112
|
-
background: transparent;
|
|
113
144
|
|
|
114
145
|
&:hover {
|
|
115
146
|
color: @sidebar-color !important;
|
|
147
|
+
background: linear-gradient(135deg, @menu-item-blue 0%, @menu-item-blue-light 50%, @menu-item-blue 100%) !important;
|
|
148
|
+
|
|
149
|
+
&::before {
|
|
150
|
+
background: linear-gradient(
|
|
151
|
+
180deg,
|
|
152
|
+
rgba(255, 255, 255, 0.2) 0%,
|
|
153
|
+
rgba(255, 255, 255, 0.08) 50%,
|
|
154
|
+
transparent 100%
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
|
|
159
|
+
0 1px 0 rgba(255, 255, 255, 0.15) inset;
|
|
116
160
|
|
|
117
161
|
i {
|
|
118
162
|
color: @sidebar-color !important;
|
|
@@ -120,7 +164,38 @@ const triggers = {
|
|
|
120
164
|
}
|
|
121
165
|
|
|
122
166
|
&.is-active {
|
|
123
|
-
background: @
|
|
167
|
+
background: linear-gradient(135deg, @menu-item-blue-light 0%, @menu-item-blue 50%, @menu-item-blue-dark 100%) !important;
|
|
168
|
+
|
|
169
|
+
&::before {
|
|
170
|
+
background: linear-gradient(
|
|
171
|
+
180deg,
|
|
172
|
+
rgba(255, 255, 255, 0.25) 0%,
|
|
173
|
+
rgba(255, 255, 255, 0.1) 50%,
|
|
174
|
+
transparent 100%
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5),
|
|
179
|
+
0 2px 0 rgba(255, 255, 255, 0.2) inset;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.el-sub-menu__title {
|
|
184
|
+
&:hover {
|
|
185
|
+
color: @sidebar-color !important;
|
|
186
|
+
background: linear-gradient(135deg, @menu-item-blue 0%, @menu-item-blue-light 50%, @menu-item-blue 100%) !important;
|
|
187
|
+
|
|
188
|
+
&::before {
|
|
189
|
+
background: linear-gradient(
|
|
190
|
+
180deg,
|
|
191
|
+
rgba(255, 255, 255, 0.2) 0%,
|
|
192
|
+
rgba(255, 255, 255, 0.08) 50%,
|
|
193
|
+
transparent 100%
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
|
|
198
|
+
0 1px 0 rgba(255, 255, 255, 0.15) inset;
|
|
124
199
|
}
|
|
125
200
|
}
|
|
126
201
|
|