@jx3box/jx3box-ui 2.3.26 → 2.3.27
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/src/header/alternate.vue +39 -21
- package/src/header/manage.vue +30 -111
package/package.json
CHANGED
package/src/header/alternate.vue
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
append-to-body
|
|
4
4
|
v-model="visible"
|
|
5
5
|
custom-class="c-alternate"
|
|
6
|
-
width="
|
|
6
|
+
width="360px"
|
|
7
7
|
:title="$jx3boxT('jx3boxUi.commonHeader.alternate.title', '切换马甲')"
|
|
8
8
|
>
|
|
9
9
|
<div class="c-alternate__content">
|
|
@@ -218,33 +218,40 @@ export default {
|
|
|
218
218
|
<style lang="less">
|
|
219
219
|
/* src/header/alternate.vue */
|
|
220
220
|
.c-alternate {
|
|
221
|
+
border-radius: 6px;
|
|
222
|
+
|
|
221
223
|
.el-dialog__title {
|
|
222
|
-
|
|
224
|
+
color: #303133;
|
|
225
|
+
.fz(16px);
|
|
226
|
+
font-weight: 600;
|
|
223
227
|
}
|
|
224
228
|
.el-dialog__body {
|
|
225
229
|
padding: 0;
|
|
226
230
|
}
|
|
227
231
|
.el-dialog__header {
|
|
228
|
-
|
|
229
|
-
|
|
232
|
+
margin-right: 0;
|
|
233
|
+
padding: 16px 20px;
|
|
234
|
+
border-bottom: 1px solid #ebeef5;
|
|
230
235
|
}
|
|
231
236
|
}
|
|
232
237
|
|
|
233
238
|
.c-alternate__content {
|
|
234
|
-
max-height: 600px;
|
|
239
|
+
max-height: min(600px, calc(100vh - 120px));
|
|
235
240
|
overflow-y: auto;
|
|
236
241
|
|
|
237
242
|
.c-alternate-item {
|
|
238
243
|
.flex;
|
|
239
|
-
|
|
244
|
+
align-items: center;
|
|
245
|
+
gap: 12px;
|
|
240
246
|
.pointer;
|
|
241
|
-
padding:
|
|
247
|
+
padding: 12px 16px;
|
|
242
248
|
.pr;
|
|
243
|
-
border-bottom: 1px solid #
|
|
249
|
+
border-bottom: 1px solid #ebeef5;
|
|
244
250
|
.fz(13px);
|
|
251
|
+
transition: background-color 0.15s ease;
|
|
245
252
|
|
|
246
253
|
&:hover {
|
|
247
|
-
background-color: @bg-
|
|
254
|
+
background-color: @bg-gray;
|
|
248
255
|
|
|
249
256
|
.u-remove {
|
|
250
257
|
display: block;
|
|
@@ -254,11 +261,12 @@ export default {
|
|
|
254
261
|
|
|
255
262
|
.u-remove {
|
|
256
263
|
.pa;
|
|
257
|
-
right:
|
|
258
|
-
top:
|
|
259
|
-
color: #
|
|
264
|
+
right: 14px;
|
|
265
|
+
top: 50%;
|
|
266
|
+
color: #909399;
|
|
260
267
|
.pointer;
|
|
261
268
|
font-size: 16px;
|
|
269
|
+
transform: translateY(-50%);
|
|
262
270
|
|
|
263
271
|
&:hover {
|
|
264
272
|
color: #333;
|
|
@@ -270,9 +278,12 @@ export default {
|
|
|
270
278
|
.pr;
|
|
271
279
|
}
|
|
272
280
|
.u-avatar {
|
|
281
|
+
display: block;
|
|
273
282
|
width: 50px;
|
|
274
283
|
height: 50px;
|
|
284
|
+
background-color: #fff;
|
|
275
285
|
border-radius: 50%;
|
|
286
|
+
object-fit: cover;
|
|
276
287
|
}
|
|
277
288
|
.u-active {
|
|
278
289
|
.pa;
|
|
@@ -280,18 +291,26 @@ export default {
|
|
|
280
291
|
top: -6px;
|
|
281
292
|
width: 20px;
|
|
282
293
|
height: 20px;
|
|
283
|
-
// fill: #fff;
|
|
284
294
|
color: #0dbc19;
|
|
295
|
+
background-color: #fff;
|
|
296
|
+
border-radius: 50%;
|
|
297
|
+
box-shadow: 0 0 0 2px #fff;
|
|
285
298
|
}
|
|
286
299
|
|
|
287
300
|
.m-misc {
|
|
301
|
+
min-width: 0;
|
|
288
302
|
.flex;
|
|
289
303
|
flex-direction: column;
|
|
290
|
-
gap:
|
|
304
|
+
gap: 4px;
|
|
305
|
+
}
|
|
306
|
+
.u-name,
|
|
307
|
+
.u-time {
|
|
308
|
+
color: #606266;
|
|
309
|
+
line-height: 20px;
|
|
291
310
|
}
|
|
292
311
|
.u-label {
|
|
293
312
|
font-size: 12px;
|
|
294
|
-
color: #
|
|
313
|
+
color: #909399;
|
|
295
314
|
}
|
|
296
315
|
|
|
297
316
|
.u-extra {
|
|
@@ -306,17 +325,16 @@ export default {
|
|
|
306
325
|
}
|
|
307
326
|
|
|
308
327
|
.c-alternate-btn {
|
|
309
|
-
// padding: 10px;
|
|
310
328
|
text-align: center;
|
|
311
329
|
.pointer;
|
|
312
|
-
// width: 100%;
|
|
313
|
-
// border-radius: 0;
|
|
314
330
|
.size(100%,74px);
|
|
315
331
|
.fz(40px,74px);
|
|
316
|
-
color: #
|
|
332
|
+
color: #909399;
|
|
333
|
+
transition: background-color 0.15s ease, color 0.15s ease;
|
|
334
|
+
|
|
317
335
|
&:hover {
|
|
318
|
-
background-color: @bg-
|
|
319
|
-
color: #
|
|
336
|
+
background-color: @bg-gray;
|
|
337
|
+
color: #606266;
|
|
320
338
|
}
|
|
321
339
|
}
|
|
322
340
|
}
|
package/src/header/manage.vue
CHANGED
|
@@ -16,10 +16,8 @@
|
|
|
16
16
|
<template v-for="item in userPanel" :key="item.label">
|
|
17
17
|
<li>
|
|
18
18
|
<a :href="item.link" :target="item.target || '_self'" class="u-menu-item" @click="onClick(item)">
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
</span>
|
|
22
|
-
<span class="u-menu-label">{{ getPanelLabel(item) }}</span>
|
|
19
|
+
<img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
|
|
20
|
+
{{ getPanelLabel(item) }}
|
|
23
21
|
<span v-if="showPop && isFeaturePanelItem(item)" class="u-new">New!</span>
|
|
24
22
|
</a>
|
|
25
23
|
<a
|
|
@@ -28,10 +26,8 @@
|
|
|
28
26
|
class="u-menu-item u-menu-item--account-ready"
|
|
29
27
|
@click.prevent="openAccountReady"
|
|
30
28
|
>
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
</span>
|
|
34
|
-
<span class="u-menu-label">资料完善</span>
|
|
29
|
+
<img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
|
|
30
|
+
资料完善
|
|
35
31
|
<span class="u-new u-new--important">重要</span>
|
|
36
32
|
</a>
|
|
37
33
|
</li>
|
|
@@ -40,10 +36,8 @@
|
|
|
40
36
|
<hr v-if="adminPanel.length" />
|
|
41
37
|
<li v-for="item in adminPanel" :key="item.label">
|
|
42
38
|
<a :href="item.link" :target="item.target || '_self'" class="u-menu-item">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
</span>
|
|
46
|
-
<span class="u-menu-label">{{ getPanelLabel(item) }}</span>
|
|
39
|
+
<img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
|
|
40
|
+
{{ getPanelLabel(item) }}
|
|
47
41
|
</a>
|
|
48
42
|
</li>
|
|
49
43
|
</template>
|
|
@@ -221,95 +215,36 @@ export default {
|
|
|
221
215
|
align-items: center;
|
|
222
216
|
}
|
|
223
217
|
.u-menu {
|
|
224
|
-
width: 272px;
|
|
225
|
-
box-sizing: border-box;
|
|
226
|
-
right: -10px;
|
|
227
|
-
top: calc(100% + 8px);
|
|
228
|
-
margin: 0;
|
|
229
|
-
padding: 8px;
|
|
230
|
-
border: 1px solid rgba(31, 35, 41, 0.1);
|
|
231
|
-
border-radius: 12px;
|
|
232
|
-
background: rgba(255, 255, 255, 0.98);
|
|
233
|
-
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
|
|
234
|
-
backdrop-filter: blur(12px);
|
|
235
|
-
-webkit-backdrop-filter: blur(12px);
|
|
236
|
-
|
|
237
|
-
&:before {
|
|
238
|
-
right: 16px;
|
|
239
|
-
top: -14px;
|
|
240
|
-
border-width: 7px;
|
|
241
|
-
border-bottom-color: rgba(31, 35, 41, 0.1);
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
&:after {
|
|
245
|
-
right: 17px;
|
|
246
|
-
top: -12px;
|
|
247
|
-
border-width: 6px;
|
|
248
|
-
border-bottom-color: #fff;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
li {
|
|
252
|
-
margin: 0;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
218
|
.u-menu-item {
|
|
256
219
|
.flex;
|
|
257
220
|
align-items: center;
|
|
258
|
-
gap:
|
|
259
|
-
|
|
260
|
-
box-sizing: border-box;
|
|
261
|
-
padding: 8px 10px;
|
|
262
|
-
border-radius: 8px;
|
|
263
|
-
color: #303133;
|
|
264
|
-
font-size: 14px;
|
|
265
|
-
line-height: 20px;
|
|
266
|
-
text-decoration: none;
|
|
267
|
-
transition: background-color 0.16s ease, color 0.16s ease;
|
|
221
|
+
gap: 4px;
|
|
222
|
+
transition: background-color 0.15s ease;
|
|
268
223
|
|
|
269
224
|
&:hover {
|
|
270
|
-
color: #4338ca;
|
|
271
|
-
background: #f4f3ff;
|
|
272
|
-
|
|
273
|
-
.u-menu-icon-wrap {
|
|
274
|
-
background: #e8e7ff;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
225
|
.u-menu-icon {
|
|
278
|
-
|
|
226
|
+
filter: invert(100%) sepia(0%) saturate(5658%) hue-rotate(215deg) brightness(114%) contrast(106%);
|
|
227
|
+
}
|
|
228
|
+
.u-new {
|
|
229
|
+
background-color: #fff;
|
|
230
|
+
color: @v4primary-dark;
|
|
231
|
+
box-shadow: inset 0 0 0 1px fade(@v4primary-dark, 20%);
|
|
232
|
+
}
|
|
233
|
+
.u-new--important {
|
|
234
|
+
color: #f56c6c;
|
|
235
|
+
box-shadow: inset 0 0 0 1px fade(#f56c6c, 20%);
|
|
279
236
|
}
|
|
280
237
|
}
|
|
281
238
|
}
|
|
282
|
-
|
|
283
|
-
.u-menu-icon-wrap {
|
|
284
|
-
.flex;
|
|
285
|
-
align-items: center;
|
|
286
|
-
justify-content: center;
|
|
287
|
-
width: 30px;
|
|
288
|
-
height: 30px;
|
|
289
|
-
flex: 0 0 30px;
|
|
290
|
-
border-radius: 8px;
|
|
291
|
-
background: #f3f4f6;
|
|
292
|
-
transition: background-color 0.16s ease;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
239
|
.u-menu-icon {
|
|
296
|
-
width:
|
|
297
|
-
height:
|
|
298
|
-
opacity: 0.72;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
.u-menu-label {
|
|
302
|
-
flex: 1;
|
|
303
|
-
min-width: 0;
|
|
304
|
-
font-weight: 500;
|
|
305
|
-
letter-spacing: 0.01em;
|
|
240
|
+
width: 16px;
|
|
241
|
+
height: 16px;
|
|
306
242
|
}
|
|
307
243
|
}
|
|
308
244
|
|
|
309
245
|
hr {
|
|
310
246
|
border: 0;
|
|
311
|
-
border-top: 1px solid #
|
|
312
|
-
margin: 6px 4px;
|
|
247
|
+
border-top: 1px solid #eee;
|
|
313
248
|
}
|
|
314
249
|
|
|
315
250
|
.u-icon-msg {
|
|
@@ -332,38 +267,22 @@ export default {
|
|
|
332
267
|
}
|
|
333
268
|
|
|
334
269
|
.u-new {
|
|
335
|
-
flex: 0 0 auto;
|
|
336
|
-
box-sizing: border-box;
|
|
337
|
-
min-width: 38px;
|
|
338
|
-
margin-left: 4px;
|
|
339
|
-
padding: 2px 7px;
|
|
340
|
-
border: 1px solid #d9d6fe;
|
|
341
|
-
border-radius: 999px;
|
|
342
|
-
background: #eeedff;
|
|
343
|
-
color: #4f46e5;
|
|
344
270
|
font-size: 11px;
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
271
|
+
line-height: 18px;
|
|
272
|
+
margin-left: 4px;
|
|
273
|
+
background-color: @v4primary-dark;
|
|
274
|
+
color: #fff;
|
|
275
|
+
padding: 0 5px;
|
|
276
|
+
border-radius: 2px;
|
|
277
|
+
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
348
278
|
}
|
|
349
279
|
|
|
350
280
|
.u-new--important {
|
|
351
|
-
|
|
352
|
-
background: #fff0f0;
|
|
353
|
-
color: #e5484d;
|
|
281
|
+
background-color: #f56c6c;
|
|
354
282
|
}
|
|
355
283
|
|
|
356
284
|
.u-menu-item--account-ready {
|
|
357
|
-
color: #
|
|
358
|
-
|
|
359
|
-
&:hover {
|
|
360
|
-
color: #d9363e;
|
|
361
|
-
background: #fff5f5;
|
|
362
|
-
|
|
363
|
-
.u-menu-icon-wrap {
|
|
364
|
-
background: #ffe8e8;
|
|
365
|
-
}
|
|
366
|
-
}
|
|
285
|
+
color: #f56c6c;
|
|
367
286
|
}
|
|
368
287
|
}
|
|
369
288
|
</style>
|