@xilonglab/vue-main 1.2.8 → 1.2.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
CHANGED
|
@@ -41,4 +41,190 @@ function handleClick(event) {
|
|
|
41
41
|
</template>
|
|
42
42
|
|
|
43
43
|
|
|
44
|
-
<style lang="less"
|
|
44
|
+
<style lang="less">
|
|
45
|
+
.xl-button {
|
|
46
|
+
position: relative;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
49
|
+
border-radius: 5px;
|
|
50
|
+
font-weight: 500;
|
|
51
|
+
|
|
52
|
+
// 默认按钮科技感样式
|
|
53
|
+
&.el-button--default {
|
|
54
|
+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
55
|
+
border: 1px solid #dee2e6;
|
|
56
|
+
color: #495057;
|
|
57
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
58
|
+
|
|
59
|
+
&:hover {
|
|
60
|
+
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
|
|
61
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
62
|
+
transform: translateY(-1px);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:active {
|
|
66
|
+
transform: translateY(0);
|
|
67
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// 主要按钮科技感样式
|
|
72
|
+
&.el-button--primary {
|
|
73
|
+
background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
|
|
74
|
+
border: 1px solid #409eff;
|
|
75
|
+
color: #ffffff;
|
|
76
|
+
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
|
|
77
|
+
|
|
78
|
+
&:hover {
|
|
79
|
+
background: linear-gradient(135deg, #337ecc 0%, #2b6cb0 100%);
|
|
80
|
+
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
|
|
81
|
+
transform: translateY(-1px);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&:active {
|
|
85
|
+
transform: translateY(0);
|
|
86
|
+
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// 成功按钮科技感样式
|
|
91
|
+
&.el-button--success {
|
|
92
|
+
background: linear-gradient(135deg, #67c23a 0%, #529b2e 100%);
|
|
93
|
+
border: 1px solid #67c23a;
|
|
94
|
+
color: #ffffff;
|
|
95
|
+
box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
|
|
96
|
+
|
|
97
|
+
&:hover {
|
|
98
|
+
background: linear-gradient(135deg, #529b2e 0%, #4a7c59 100%);
|
|
99
|
+
box-shadow: 0 4px 16px rgba(103, 194, 58, 0.4);
|
|
100
|
+
transform: translateY(-1px);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:active {
|
|
104
|
+
transform: translateY(0);
|
|
105
|
+
box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// 警告按钮科技感样式
|
|
110
|
+
&.el-button--warning {
|
|
111
|
+
background: linear-gradient(135deg, #e6a23c 0%, #d4941e 100%);
|
|
112
|
+
border: 1px solid #e6a23c;
|
|
113
|
+
color: #ffffff;
|
|
114
|
+
box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
|
|
115
|
+
|
|
116
|
+
&:hover {
|
|
117
|
+
background: linear-gradient(135deg, #d4941e 0%, #b8860b 100%);
|
|
118
|
+
box-shadow: 0 4px 16px rgba(230, 162, 60, 0.4);
|
|
119
|
+
transform: translateY(-1px);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&:active {
|
|
123
|
+
transform: translateY(0);
|
|
124
|
+
box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// 危险按钮科技感样式
|
|
129
|
+
&.el-button--danger {
|
|
130
|
+
background: linear-gradient(135deg, #f56c6c 0%, #e53e3e 100%);
|
|
131
|
+
border: 1px solid #f56c6c;
|
|
132
|
+
color: #ffffff;
|
|
133
|
+
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
|
|
134
|
+
|
|
135
|
+
&:hover {
|
|
136
|
+
background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
|
|
137
|
+
box-shadow: 0 4px 16px rgba(245, 108, 108, 0.4);
|
|
138
|
+
transform: translateY(-1px);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&:active {
|
|
142
|
+
transform: translateY(0);
|
|
143
|
+
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// 信息按钮科技感样式
|
|
148
|
+
&.el-button--info {
|
|
149
|
+
background: linear-gradient(135deg, #909399 0%, #73767a 100%);
|
|
150
|
+
border: 1px solid #909399;
|
|
151
|
+
color: #ffffff;
|
|
152
|
+
box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
|
|
153
|
+
|
|
154
|
+
&:hover {
|
|
155
|
+
background: linear-gradient(135deg, #73767a 0%, #5a5c5e 100%);
|
|
156
|
+
box-shadow: 0 4px 16px rgba(144, 147, 153, 0.4);
|
|
157
|
+
transform: translateY(-1px);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&:active {
|
|
161
|
+
transform: translateY(0);
|
|
162
|
+
box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// 禁用状态
|
|
167
|
+
&.is-disabled {
|
|
168
|
+
opacity: 0.6;
|
|
169
|
+
cursor: not-allowed;
|
|
170
|
+
transform: none !important;
|
|
171
|
+
box-shadow: none !important;
|
|
172
|
+
|
|
173
|
+
&:hover {
|
|
174
|
+
transform: none !important;
|
|
175
|
+
box-shadow: none !important;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// 加载状态
|
|
180
|
+
&.is-loading {
|
|
181
|
+
position: relative;
|
|
182
|
+
|
|
183
|
+
&::before {
|
|
184
|
+
content: '';
|
|
185
|
+
position: absolute;
|
|
186
|
+
top: 0;
|
|
187
|
+
left: 0;
|
|
188
|
+
right: 0;
|
|
189
|
+
bottom: 0;
|
|
190
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
191
|
+
animation: shimmer 1.5s infinite;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// 发光效果（用于特殊场景）
|
|
196
|
+
&.xl-button--glow {
|
|
197
|
+
&::after {
|
|
198
|
+
content: '';
|
|
199
|
+
position: absolute;
|
|
200
|
+
top: -2px;
|
|
201
|
+
left: -2px;
|
|
202
|
+
right: -2px;
|
|
203
|
+
bottom: -2px;
|
|
204
|
+
background: inherit;
|
|
205
|
+
border-radius: inherit;
|
|
206
|
+
filter: blur(4px);
|
|
207
|
+
opacity: 0.3;
|
|
208
|
+
z-index: -1;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// 闪烁动画
|
|
214
|
+
@keyframes shimmer {
|
|
215
|
+
0% {
|
|
216
|
+
transform: translateX(-100%);
|
|
217
|
+
}
|
|
218
|
+
100% {
|
|
219
|
+
transform: translateX(100%);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// 响应式设计
|
|
224
|
+
@media (max-width: 768px) {
|
|
225
|
+
.xl-button {
|
|
226
|
+
font-size: 14px;
|
|
227
|
+
padding: 8px 16px;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
</style>
|
|
@@ -84,32 +84,66 @@ defineExpose({ show })
|
|
|
84
84
|
<style lang="less">
|
|
85
85
|
.xl-review-dialog {
|
|
86
86
|
text-align: left;
|
|
87
|
-
|
|
88
87
|
border-radius: 10px 10px 7px 7px !important;
|
|
89
88
|
padding: 0;
|
|
90
89
|
|
|
91
90
|
.el-dialog__header {
|
|
92
91
|
border-radius: 7px 7px 0 0;
|
|
93
92
|
padding: 14px 20px 10px;
|
|
94
|
-
|
|
93
|
+
margin: 0!important;
|
|
94
|
+
background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #047857 100%) !important;
|
|
95
|
+
position: relative;
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
|
|
98
|
+
&::before {
|
|
99
|
+
content: '';
|
|
100
|
+
position: absolute;
|
|
101
|
+
top: 0;
|
|
102
|
+
left: 0;
|
|
103
|
+
right: 0;
|
|
104
|
+
bottom: 0;
|
|
105
|
+
background-image:
|
|
106
|
+
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
107
|
+
linear-gradient(180deg, rgba(255,255,255,0.1) 1px, transparent 1px);
|
|
108
|
+
background-size: 20px 20px;
|
|
109
|
+
opacity: 0.3;
|
|
110
|
+
pointer-events: none;
|
|
111
|
+
}
|
|
95
112
|
|
|
96
113
|
.el-dialog__headerbtn {
|
|
97
114
|
top: 14px;
|
|
115
|
+
right: 16px;
|
|
116
|
+
width: 24px;
|
|
117
|
+
height: 24px;
|
|
118
|
+
border-radius: 50%;
|
|
119
|
+
border: 1px solid rgba(255,255,255,0.3);
|
|
120
|
+
background: rgba(255,255,255,0.1);
|
|
121
|
+
transition: all 0.3s ease;
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
background: rgba(255,255,255,0.2);
|
|
125
|
+
border-color: rgba(255,255,255,0.5);
|
|
126
|
+
transform: scale(1.05);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.el-dialog__close {
|
|
130
|
+
color: white !important;
|
|
131
|
+
font-size: 14px;
|
|
132
|
+
font-weight: bold;
|
|
133
|
+
}
|
|
98
134
|
}
|
|
99
135
|
|
|
100
|
-
.el-dialog__title
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
.el-dialog__headerbtn {
|
|
106
|
-
top: 3px !important;
|
|
136
|
+
.el-dialog__title {
|
|
137
|
+
color: white !important;
|
|
138
|
+
font-weight: 500;
|
|
139
|
+
font-size: 16px;
|
|
140
|
+
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
107
141
|
}
|
|
108
|
-
|
|
109
142
|
}
|
|
110
143
|
|
|
111
144
|
.el-dialog__body {
|
|
112
145
|
padding: 10px 10px 5px 10px;
|
|
146
|
+
background-color: #f8f9fa !important;
|
|
113
147
|
}
|
|
114
148
|
}
|
|
115
149
|
</style>
|