@jx3box/jx3box-common-ui 8.9.1 → 8.9.2
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/manage.vue +58 -3
package/package.json
CHANGED
package/src/header/manage.vue
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="c-header-panel c-header-manage" id="c-header-manage">
|
|
3
3
|
<span class="u-post u-manage">
|
|
4
|
-
<
|
|
4
|
+
<i class="u-icon u-icon-msg">
|
|
5
|
+
<i class="u-pop" style="display: none" v-show="showPop"></i>
|
|
6
|
+
<img class="u-add" svg-inline src="../../assets/img/header/manage.svg" />
|
|
7
|
+
</i>
|
|
5
8
|
</span>
|
|
6
9
|
<ul class="u-menu u-pop-content">
|
|
7
10
|
<li v-for="item in userPanel" :key="item.label">
|
|
8
11
|
<a :href="item.link" :target="item.target || '_self'" class="u-menu-item">
|
|
9
12
|
<img :src="resolveImg(item.icon)" svg-inline class="u-menu-icon" :alt="item.icon" />
|
|
10
13
|
{{ item.label }}
|
|
14
|
+
<span v-if="showPop" class="u-new">New!</span>
|
|
11
15
|
</a>
|
|
12
16
|
</li>
|
|
13
17
|
<hr v-if="userPanel.length" />
|
|
@@ -32,6 +36,8 @@ export default {
|
|
|
32
36
|
data() {
|
|
33
37
|
return {
|
|
34
38
|
panel,
|
|
39
|
+
|
|
40
|
+
showPop: false,
|
|
35
41
|
};
|
|
36
42
|
},
|
|
37
43
|
props: {
|
|
@@ -61,9 +67,13 @@ export default {
|
|
|
61
67
|
const panel = JSON.parse(sessionStorage.getItem("panel"));
|
|
62
68
|
if (panel) {
|
|
63
69
|
this.panel = panel;
|
|
70
|
+
const item = this.panel?.find(i => i.meta);
|
|
71
|
+
this.initMeta(item)
|
|
64
72
|
} else {
|
|
65
73
|
getMenu("panel").then((res) => {
|
|
66
74
|
this.panel = res.data?.data?.val;
|
|
75
|
+
const item = this.panel?.find(i => i.meta);
|
|
76
|
+
this.initMeta(item)
|
|
67
77
|
sessionStorage.setItem("panel", JSON.stringify(this.panel));
|
|
68
78
|
});
|
|
69
79
|
}
|
|
@@ -73,9 +83,18 @@ export default {
|
|
|
73
83
|
}
|
|
74
84
|
},
|
|
75
85
|
resolveImg: function (img) {
|
|
76
|
-
|
|
77
|
-
return "https://img.jx3box.com/image/box/pvp.svg";
|
|
86
|
+
return img ? __imgPath + "image/header/panel/" + img : __imgPath + "image/header/panel/default.svg";
|
|
78
87
|
},
|
|
88
|
+
initMeta(item) {
|
|
89
|
+
const local = localStorage.getItem("jb_panel_meta");
|
|
90
|
+
|
|
91
|
+
if (local) {
|
|
92
|
+
this.showPop = item?.meta != local
|
|
93
|
+
} else {
|
|
94
|
+
localStorage.setItem("jb_panel_meta", item?.meta);
|
|
95
|
+
this.showPop = true
|
|
96
|
+
}
|
|
97
|
+
}
|
|
79
98
|
},
|
|
80
99
|
};
|
|
81
100
|
</script>
|
|
@@ -96,11 +115,47 @@ export default {
|
|
|
96
115
|
.flex;
|
|
97
116
|
align-items: center;
|
|
98
117
|
gap: 4px;
|
|
118
|
+
|
|
119
|
+
&:hover {
|
|
120
|
+
.u-menu-icon {
|
|
121
|
+
filter: invert(100%) sepia(0%) saturate(5658%) hue-rotate(215deg) brightness(114%) contrast(106%);
|
|
122
|
+
}
|
|
123
|
+
.u-new {
|
|
124
|
+
color: #fff;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
99
127
|
}
|
|
100
128
|
.u-menu-icon {
|
|
101
129
|
width: 16px;
|
|
102
130
|
height: 16px;
|
|
103
131
|
}
|
|
104
132
|
}
|
|
133
|
+
|
|
134
|
+
.u-icon-msg {
|
|
135
|
+
.pr;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.u-pop {
|
|
139
|
+
width: 10px;
|
|
140
|
+
height: 10px;
|
|
141
|
+
color: #fff;
|
|
142
|
+
background-image: linear-gradient(#54a3ff, #006eed);
|
|
143
|
+
background-clip: padding-box;
|
|
144
|
+
border: 2px solid #24292e;
|
|
145
|
+
border-radius: 50%;
|
|
146
|
+
position: absolute;
|
|
147
|
+
right: -5px;
|
|
148
|
+
top: -6px;
|
|
149
|
+
z-index: 1;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.u-new {
|
|
153
|
+
color: #f00;
|
|
154
|
+
font-size: 12px;
|
|
155
|
+
margin-left: 4px;
|
|
156
|
+
background-color: rgba(72, 193, 15, 0.1);
|
|
157
|
+
color: rgba(72, 193, 15, 1);
|
|
158
|
+
padding: 0px 6px;
|
|
159
|
+
}
|
|
105
160
|
}
|
|
106
161
|
</style>
|