@jx3box/jx3box-common-ui 6.7.6 → 6.7.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/assets/css/header.less +119 -82
- package/package.json +4 -2
- package/service/header.js +6 -2
- package/src/author/AuthorInfo.vue +102 -87
- package/src/header/gameSwitch.vue +28 -53
- package/src/header/user.vue +59 -72
package/assets/css/header.less
CHANGED
|
@@ -6,6 +6,44 @@ body {
|
|
|
6
6
|
padding-top: @header-height;
|
|
7
7
|
color: @color;
|
|
8
8
|
}
|
|
9
|
+
// 三角
|
|
10
|
+
.u-delta {
|
|
11
|
+
.pa;
|
|
12
|
+
background-clip: padding-box;
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
color: @color;
|
|
15
|
+
border: 1px solid rgba(27, 31, 35, 0.15);
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
|
|
18
|
+
right: -5px;
|
|
19
|
+
list-style: none;
|
|
20
|
+
margin: -6px 0 0 0;
|
|
21
|
+
position: absolute;
|
|
22
|
+
z-index: 820;
|
|
23
|
+
top: 100%;
|
|
24
|
+
|
|
25
|
+
&:before {
|
|
26
|
+
content: "";
|
|
27
|
+
display: inline-block;
|
|
28
|
+
position: absolute;
|
|
29
|
+
left: auto;
|
|
30
|
+
right: 14px;
|
|
31
|
+
top: -16px;
|
|
32
|
+
border: 8px solid transparent;
|
|
33
|
+
border-bottom-color: rgba(27, 31, 35, 0.15);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:after {
|
|
37
|
+
content: "";
|
|
38
|
+
display: inline-block;
|
|
39
|
+
position: absolute;
|
|
40
|
+
left: auto;
|
|
41
|
+
right: 15px;
|
|
42
|
+
top: -14px;
|
|
43
|
+
border: 7px solid transparent;
|
|
44
|
+
border-bottom-color: #fff;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
9
47
|
|
|
10
48
|
.c-header {
|
|
11
49
|
position: fixed;
|
|
@@ -73,7 +111,7 @@ body {
|
|
|
73
111
|
// font-style: italic;
|
|
74
112
|
}
|
|
75
113
|
|
|
76
|
-
margin-right: 5px;
|
|
114
|
+
// margin-right: 5px;
|
|
77
115
|
}
|
|
78
116
|
@media screen and (max-width: @phone) {
|
|
79
117
|
.c-header-logo {
|
|
@@ -290,43 +328,10 @@ body {
|
|
|
290
328
|
}
|
|
291
329
|
|
|
292
330
|
.u-menu {
|
|
293
|
-
|
|
294
|
-
background-color: #fff;
|
|
295
|
-
color: @color;
|
|
296
|
-
border: 1px solid rgba(27, 31, 35, 0.15);
|
|
297
|
-
border-radius: 4px;
|
|
298
|
-
box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
|
|
299
|
-
right: 0;
|
|
300
|
-
list-style: none;
|
|
301
|
-
margin: -6px 0 0 0;
|
|
331
|
+
.u-delta;
|
|
302
332
|
padding: 5px 0;
|
|
303
|
-
position: absolute;
|
|
304
|
-
.z(820);
|
|
305
|
-
top: 100%;
|
|
306
333
|
width: 160px;
|
|
307
334
|
|
|
308
|
-
&:before {
|
|
309
|
-
content: "";
|
|
310
|
-
display: inline-block;
|
|
311
|
-
position: absolute;
|
|
312
|
-
left: auto;
|
|
313
|
-
right: 9px;
|
|
314
|
-
top: -16px;
|
|
315
|
-
border: 8px solid transparent;
|
|
316
|
-
border-bottom-color: rgba(27, 31, 35, 0.15);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
&:after {
|
|
320
|
-
content: "";
|
|
321
|
-
display: inline-block;
|
|
322
|
-
position: absolute;
|
|
323
|
-
left: auto;
|
|
324
|
-
right: 10px;
|
|
325
|
-
top: -14px;
|
|
326
|
-
border: 7px solid transparent;
|
|
327
|
-
border-bottom-color: #fff;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
335
|
a {
|
|
331
336
|
display: block;
|
|
332
337
|
line-height: 21px;
|
|
@@ -612,6 +617,19 @@ body {
|
|
|
612
617
|
cursor: pointer;
|
|
613
618
|
box-sizing: border-box;
|
|
614
619
|
|
|
620
|
+
.u-pop-content {
|
|
621
|
+
visibility: hidden;
|
|
622
|
+
opacity: 0;
|
|
623
|
+
transition: visibility 0.15s, opacity 0.15s linear;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
&:hover {
|
|
627
|
+
.u-pop-content {
|
|
628
|
+
opacity: 1;
|
|
629
|
+
visibility: visible;
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
|
|
615
633
|
.u-post {
|
|
616
634
|
padding: 0 10px;
|
|
617
635
|
height: 100%;
|
|
@@ -641,7 +659,9 @@ body {
|
|
|
641
659
|
|
|
642
660
|
@media screen and (max-width: @ipad) {
|
|
643
661
|
.c-header-panel {
|
|
644
|
-
|
|
662
|
+
&:not(&.c-header-info) {
|
|
663
|
+
display: none;
|
|
664
|
+
}
|
|
645
665
|
}
|
|
646
666
|
}
|
|
647
667
|
|
|
@@ -677,63 +697,56 @@ body {
|
|
|
677
697
|
}
|
|
678
698
|
|
|
679
699
|
.u-assets {
|
|
680
|
-
.
|
|
681
|
-
background-clip: padding-box;
|
|
682
|
-
background-color: #fff;
|
|
683
|
-
color: #3d454d;
|
|
684
|
-
border: 1px solid rgba(27, 31, 35, 0.15);
|
|
685
|
-
border-radius: 4px;
|
|
686
|
-
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
|
|
687
|
-
right: 0;
|
|
688
|
-
list-style: none;
|
|
689
|
-
margin: -6px 0 0 0;
|
|
690
|
-
padding: 15px;
|
|
691
|
-
position: absolute;
|
|
692
|
-
z-index: 820;
|
|
693
|
-
top: 100%;
|
|
700
|
+
.u-delta;
|
|
694
701
|
width: 200px;
|
|
695
|
-
|
|
696
|
-
&:before {
|
|
697
|
-
content: "";
|
|
698
|
-
display: inline-block;
|
|
699
|
-
position: absolute;
|
|
700
|
-
left: auto;
|
|
701
|
-
right: 9px;
|
|
702
|
-
top: -16px;
|
|
703
|
-
border: 8px solid transparent;
|
|
704
|
-
border-bottom-color: rgba(27, 31, 35, 0.15);
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
&:after {
|
|
708
|
-
content: "";
|
|
709
|
-
display: inline-block;
|
|
710
|
-
position: absolute;
|
|
711
|
-
left: auto;
|
|
712
|
-
right: 10px;
|
|
713
|
-
top: -14px;
|
|
714
|
-
border: 7px solid transparent;
|
|
715
|
-
border-bottom-color: #fff;
|
|
716
|
-
}
|
|
702
|
+
padding: 10px 0;
|
|
717
703
|
}
|
|
718
704
|
|
|
719
705
|
.u-detail {
|
|
720
706
|
.u-item {
|
|
707
|
+
.db;
|
|
721
708
|
font-size: 12px;
|
|
722
709
|
color: #454545;
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
710
|
+
// color:#c0c4cc;
|
|
711
|
+
// .flex;
|
|
712
|
+
// align-items: center;
|
|
713
|
+
// justify-content: space-between;
|
|
714
|
+
padding: 5px 15px;
|
|
715
|
+
|
|
716
|
+
&:hover {
|
|
717
|
+
background-color: @color-link;
|
|
718
|
+
.u-label {
|
|
719
|
+
color: #fff;
|
|
720
|
+
}
|
|
721
|
+
.u-value {
|
|
722
|
+
color: #fff;
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.u-item-primary {
|
|
727
|
+
.flex;
|
|
728
|
+
align-items: center;
|
|
729
|
+
justify-content: space-between;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.u-label {
|
|
733
|
+
color: #454545;
|
|
734
|
+
}
|
|
727
735
|
|
|
728
736
|
.u-value {
|
|
729
737
|
font-weight: bold;
|
|
730
738
|
.ml(5px);
|
|
731
|
-
color: #
|
|
739
|
+
// color: #fba524;
|
|
740
|
+
// color: #e9015f;
|
|
741
|
+
color: @color-link;
|
|
732
742
|
}
|
|
733
743
|
.u-item-extend {
|
|
744
|
+
.none;
|
|
734
745
|
a {
|
|
746
|
+
// color:#fff;
|
|
735
747
|
.ml(5px);
|
|
736
748
|
&:hover {
|
|
749
|
+
// color:#c0c4cc;
|
|
737
750
|
color: @pink;
|
|
738
751
|
}
|
|
739
752
|
}
|
|
@@ -761,11 +774,12 @@ body {
|
|
|
761
774
|
height: 100%;
|
|
762
775
|
.flex;
|
|
763
776
|
align-items: center;
|
|
764
|
-
svg{
|
|
777
|
+
svg {
|
|
778
|
+
.size(19px);
|
|
779
|
+
}
|
|
765
780
|
}
|
|
766
781
|
}
|
|
767
782
|
|
|
768
|
-
|
|
769
783
|
//登录、注册
|
|
770
784
|
.c-header-login {
|
|
771
785
|
margin: 16px 5px 16px 0;
|
|
@@ -843,6 +857,24 @@ body {
|
|
|
843
857
|
// }
|
|
844
858
|
}
|
|
845
859
|
|
|
860
|
+
.c-header-info {
|
|
861
|
+
height: 100%;
|
|
862
|
+
.flex;
|
|
863
|
+
align-items: center;
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
.c-header-userdata {
|
|
867
|
+
.u-delta;
|
|
868
|
+
&:after{
|
|
869
|
+
border-bottom-color:#f4f6f7;
|
|
870
|
+
right:20px;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
top: calc(100% + 17px);
|
|
874
|
+
// padding: 5px 0;
|
|
875
|
+
width: 400px;
|
|
876
|
+
}
|
|
877
|
+
|
|
846
878
|
// 用户信息
|
|
847
879
|
.c-header-profile {
|
|
848
880
|
cursor: pointer;
|
|
@@ -924,7 +956,7 @@ body {
|
|
|
924
956
|
|
|
925
957
|
.c-header-userdata {
|
|
926
958
|
background-clip: padding-box;
|
|
927
|
-
background-color: #fff;
|
|
959
|
+
// background-color: #fff;
|
|
928
960
|
color: #3d454d;
|
|
929
961
|
border: 1px solid rgba(27, 31, 35, 0.15);
|
|
930
962
|
border-radius: 4px;
|
|
@@ -935,12 +967,14 @@ body {
|
|
|
935
967
|
z-index: 820;
|
|
936
968
|
top: 100%;
|
|
937
969
|
width: 400px;
|
|
938
|
-
margin-top:
|
|
970
|
+
margin-top: 10px;
|
|
939
971
|
margin-right: -10px;
|
|
940
972
|
|
|
941
973
|
.u-profile {
|
|
942
974
|
background-color: #f4f6f7;
|
|
943
|
-
padding:
|
|
975
|
+
padding: 12px;
|
|
976
|
+
border-top-left-radius: 4px;
|
|
977
|
+
border-top-right-radius: 4px;
|
|
944
978
|
}
|
|
945
979
|
|
|
946
980
|
.u-basic {
|
|
@@ -955,6 +989,9 @@ body {
|
|
|
955
989
|
max-width: 200px;
|
|
956
990
|
color: @color;
|
|
957
991
|
.bold;
|
|
992
|
+
&:hover {
|
|
993
|
+
color: @color-link;
|
|
994
|
+
}
|
|
958
995
|
}
|
|
959
996
|
|
|
960
997
|
.u-id {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jx3box/jx3box-common-ui",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.8",
|
|
4
4
|
"description": "JX3BOX UI",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"build": "vue-cli-service build",
|
|
10
10
|
"lint": "vue-cli-service lint",
|
|
11
11
|
"inspect": "vue inspect > output.js",
|
|
12
|
-
"update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest",
|
|
12
|
+
"update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-comment-ui@latest @jx3box/jx3box-editor@latest",
|
|
13
13
|
"header": "vue-cli-service build --target lib --name newheader src/Header.vue && cp public/index.html dist/newheader.html"
|
|
14
14
|
},
|
|
15
15
|
"eslintConfig": {
|
|
@@ -30,8 +30,10 @@
|
|
|
30
30
|
"last 2 versions"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
+
"@jx3box/jx3box-comment-ui": "^1.7.8",
|
|
33
34
|
"@jx3box/jx3box-common": "^7.6.2",
|
|
34
35
|
"@jx3box/jx3box-data": "^3.0.3",
|
|
36
|
+
"@jx3box/jx3box-editor": "^1.6.9",
|
|
35
37
|
"axios": "^0.26.1",
|
|
36
38
|
"dayjs": "^1.11.0",
|
|
37
39
|
"element-ui": "^2.13.2",
|
package/service/header.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import axios from "axios";
|
|
2
2
|
import { $helper, $cms } from "@jx3box/jx3box-common/js/https.js";
|
|
3
|
-
import {
|
|
3
|
+
import { __ossMirror } from "@jx3box/jx3box-common/data/jx3box.json";
|
|
4
4
|
|
|
5
5
|
function getMsg() {
|
|
6
6
|
return $helper({ mute: true }).get("/api/messages/unread_total");
|
|
@@ -24,4 +24,8 @@ function getMenu(key) {
|
|
|
24
24
|
return $cms().get(`/api/cms/config/menu/${key}`);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
function getGames(){
|
|
28
|
+
return axios.get(__ossMirror + 'data/product/games.json')
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { getMsg, getNav, getPanel, getBox, getMenu, getGames };
|
|
@@ -3,21 +3,28 @@
|
|
|
3
3
|
<div class="u-author">
|
|
4
4
|
<Avatar class="u-avatar" :uid="uid" :url="data.user_avatar" size="s" :frame="data.user_avatar_frame" />
|
|
5
5
|
<div class="u-info">
|
|
6
|
-
<
|
|
7
|
-
<span>{{ (data.display_name && data.display_name.slice(0, 8)) || "未知" }}</span>
|
|
6
|
+
<div class="u-name">
|
|
8
7
|
<el-tooltip class="item" effect="dark" content="签约作者" placement="top" v-if="isSuperAuthor">
|
|
9
|
-
<a class="u-superauthor" href="/
|
|
8
|
+
<a class="u-superauthor" href="/about/superauthor" target="_blank">
|
|
10
9
|
<img :src="super_author_icon" alt="superauthor" />
|
|
11
10
|
</a>
|
|
12
11
|
</el-tooltip>
|
|
13
|
-
|
|
12
|
+
<a class="u-displayname" :href="authorLink(uid)" target="_blank">
|
|
13
|
+
{{ data.display_name || "未知" }}
|
|
14
|
+
</a>
|
|
15
|
+
</div>
|
|
14
16
|
<div class="u-extend">
|
|
15
17
|
<el-tooltip class="item" effect="dark" placement="top">
|
|
16
18
|
<div slot="content">
|
|
17
19
|
<span class="u-tips">经验值：{{ data.experience }}</span>
|
|
18
20
|
</div>
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
+
<a
|
|
22
|
+
class="u-level"
|
|
23
|
+
:class="'lv-' + level"
|
|
24
|
+
:style="{ backgroundColor: showLevelColor(level) }"
|
|
25
|
+
href="/about/incentives"
|
|
26
|
+
target="_blank"
|
|
27
|
+
>Lv.{{ level }}</a
|
|
21
28
|
>
|
|
22
29
|
</el-tooltip>
|
|
23
30
|
<el-tooltip class="item" effect="dark" :content="vipTypeTitle" placement="top" v-if="isVip">
|
|
@@ -101,99 +108,107 @@ export default {
|
|
|
101
108
|
};
|
|
102
109
|
</script>
|
|
103
110
|
|
|
104
|
-
<style
|
|
105
|
-
.
|
|
106
|
-
.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
.u-avatar {
|
|
112
|
-
.fl;
|
|
113
|
-
.mr(15px);
|
|
114
|
-
.size(68px);
|
|
115
|
-
}
|
|
116
|
-
.u-name {
|
|
117
|
-
.lh(2.2);
|
|
118
|
-
.bold;
|
|
119
|
-
color: @darkblue;
|
|
120
|
-
&:hover {
|
|
121
|
-
color: #f39;
|
|
122
|
-
}
|
|
123
|
-
.nobreak;
|
|
124
|
-
}
|
|
125
|
-
.u-info {
|
|
126
|
-
.pr;
|
|
127
|
-
top: -4px;
|
|
128
|
-
.h(68px);
|
|
129
|
-
display: flex;
|
|
130
|
-
flex-direction: column;
|
|
131
|
-
justify-content: center;
|
|
132
|
-
}
|
|
133
|
-
.u-bio {
|
|
134
|
-
.fz(12px, 2);
|
|
135
|
-
.break(3);
|
|
136
|
-
color: #888;
|
|
137
|
-
padding: 0 5px;
|
|
138
|
-
}
|
|
139
|
-
.u-extend {
|
|
140
|
-
display: flex;
|
|
141
|
-
}
|
|
142
|
-
.u-level {
|
|
143
|
-
padding: 2px 8px;
|
|
144
|
-
.fz(12px, 14px);
|
|
145
|
-
color: #fff;
|
|
146
|
-
background-color: #aaa;
|
|
147
|
-
border-radius: 2px;
|
|
148
|
-
|
|
149
|
-
&.lv-1 {
|
|
150
|
-
background-color: #32d3c4;
|
|
111
|
+
<style lang="less">
|
|
112
|
+
.c-author-info {
|
|
113
|
+
.u-author {
|
|
114
|
+
.clearfix;
|
|
115
|
+
.db;
|
|
116
|
+
.mb(10px);
|
|
117
|
+
.pr;
|
|
151
118
|
}
|
|
152
|
-
|
|
153
|
-
|
|
119
|
+
.u-avatar {
|
|
120
|
+
.fl;
|
|
121
|
+
.mr(15px);
|
|
122
|
+
.size(68px);
|
|
154
123
|
}
|
|
155
|
-
|
|
156
|
-
|
|
124
|
+
.u-name {
|
|
125
|
+
.flex;
|
|
126
|
+
align-items: center;
|
|
157
127
|
}
|
|
158
|
-
|
|
159
|
-
|
|
128
|
+
.u-displayname {
|
|
129
|
+
.lh(2.2);
|
|
130
|
+
.bold;
|
|
131
|
+
color: @darkblue;
|
|
132
|
+
.nobreak;
|
|
133
|
+
&:hover {
|
|
134
|
+
color: #f39;
|
|
135
|
+
}
|
|
160
136
|
}
|
|
161
|
-
|
|
162
|
-
|
|
137
|
+
.u-superauthor {
|
|
138
|
+
// margin-left: 4px;
|
|
139
|
+
// display: inline-block;
|
|
140
|
+
// vertical-align: -2px;
|
|
141
|
+
.fz(12px);
|
|
142
|
+
flex-shrink: 0;
|
|
143
|
+
img {
|
|
144
|
+
.size(16px);
|
|
145
|
+
}
|
|
163
146
|
}
|
|
164
|
-
|
|
165
|
-
|
|
147
|
+
|
|
148
|
+
.u-info {
|
|
149
|
+
.pr;
|
|
150
|
+
top: -4px;
|
|
151
|
+
.h(68px);
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
justify-content: center;
|
|
166
155
|
}
|
|
167
|
-
|
|
168
|
-
|
|
156
|
+
.u-bio {
|
|
157
|
+
.fz(12px, 2);
|
|
158
|
+
.break(3);
|
|
159
|
+
color: #888;
|
|
160
|
+
padding: 0 5px;
|
|
169
161
|
}
|
|
170
|
-
|
|
171
|
-
|
|
162
|
+
.u-extend {
|
|
163
|
+
display: flex;
|
|
164
|
+
align-items: center;
|
|
172
165
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
.ml(5px);
|
|
176
|
-
.db;
|
|
177
|
-
.i-icon-vip {
|
|
178
|
-
.db;
|
|
179
|
-
vertical-align: baseline;
|
|
180
|
-
padding: 2px 6px;
|
|
166
|
+
.u-level {
|
|
167
|
+
padding: 2px 8px;
|
|
181
168
|
.fz(12px, 14px);
|
|
182
|
-
font-style: normal;
|
|
183
|
-
border-radius: 2px;
|
|
184
|
-
background-color: #ddd;
|
|
185
169
|
color: #fff;
|
|
186
|
-
|
|
187
|
-
|
|
170
|
+
background-color: #aaa;
|
|
171
|
+
border-radius: 2px;
|
|
172
|
+
|
|
173
|
+
&.lv-1 {
|
|
174
|
+
background-color: #32d3c4;
|
|
175
|
+
}
|
|
176
|
+
&.lv-2 {
|
|
177
|
+
background-color: #86c0fb;
|
|
178
|
+
}
|
|
179
|
+
&.lv-3 {
|
|
180
|
+
background-color: #33d9ff;
|
|
181
|
+
}
|
|
182
|
+
&.lv-4 {
|
|
183
|
+
background-color: #ffdb2a;
|
|
184
|
+
}
|
|
185
|
+
&.lv-5 {
|
|
186
|
+
background-color: #ffa739;
|
|
187
|
+
}
|
|
188
|
+
&.lv-6 {
|
|
189
|
+
background-color: #ff70b2;
|
|
190
|
+
}
|
|
191
|
+
&.lv-7 {
|
|
192
|
+
background-color: #ff3399;
|
|
193
|
+
}
|
|
194
|
+
&.lv-8 {
|
|
195
|
+
background-color: #f93c3c;
|
|
188
196
|
}
|
|
189
197
|
}
|
|
190
|
-
|
|
191
|
-
.
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
198
|
+
.u-vip {
|
|
199
|
+
.ml(5px);
|
|
200
|
+
.i-icon-vip {
|
|
201
|
+
.db;
|
|
202
|
+
padding: 2px 6px;
|
|
203
|
+
.fz(12px, 14px);
|
|
204
|
+
font-style: normal;
|
|
205
|
+
border-radius: 2px;
|
|
206
|
+
background-color: #ddd;
|
|
207
|
+
color: #fff;
|
|
208
|
+
&.on {
|
|
209
|
+
background-color: #6f42c1;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
197
212
|
}
|
|
198
213
|
}
|
|
199
214
|
</style>
|
|
@@ -5,23 +5,23 @@
|
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
7
|
<div class="c-game-list" v-show="showMore">
|
|
8
|
-
<
|
|
8
|
+
<span
|
|
9
9
|
class="u-game-item"
|
|
10
10
|
v-for="item in games"
|
|
11
11
|
:key="item.key"
|
|
12
12
|
:class="{ active: current === item.key, disabled: item.disabled }"
|
|
13
|
-
:href="itemHref(item)"
|
|
14
13
|
@click.stop="handleClick(item)"
|
|
15
14
|
>
|
|
16
15
|
<img class="u-img" :src="item.img" alt="" />
|
|
17
16
|
<span>{{ item.name }}</span>
|
|
18
|
-
</
|
|
17
|
+
</span>
|
|
19
18
|
</div>
|
|
20
19
|
</div>
|
|
21
20
|
</template>
|
|
22
21
|
|
|
23
22
|
<script>
|
|
24
23
|
import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
|
|
24
|
+
import { getGames } from "../../service/header";
|
|
25
25
|
export default {
|
|
26
26
|
name: "gameSwitch",
|
|
27
27
|
data() {
|
|
@@ -31,58 +31,16 @@ export default {
|
|
|
31
31
|
name: "剑网3",
|
|
32
32
|
img: __imgPath + "image/xsj/jx3czb.png",
|
|
33
33
|
key: "jx3",
|
|
34
|
-
path: "
|
|
34
|
+
path: "www.jx3box.com",
|
|
35
35
|
disabled: false,
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
name: "剑网3缘起",
|
|
39
39
|
img: __imgPath + "image/xsj/jx3yq.png",
|
|
40
40
|
key: "jx3origin",
|
|
41
|
-
path: "
|
|
41
|
+
path: "origin.jx3box.com",
|
|
42
42
|
disabled: false,
|
|
43
43
|
},
|
|
44
|
-
{
|
|
45
|
-
name: "指尖江湖",
|
|
46
|
-
img: __imgPath + "image/xsj/zjjh.png",
|
|
47
|
-
key: "zjjh",
|
|
48
|
-
path: "https://zjjh.jx3box.com",
|
|
49
|
-
disabled: true,
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
name: "指尖对弈",
|
|
53
|
-
img: __imgPath + "image/xsj/zjdy.png",
|
|
54
|
-
key: "zjdy",
|
|
55
|
-
path: "https://zjdy.jx3box.com",
|
|
56
|
-
disabled: true,
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
name: "剑侠世界3",
|
|
60
|
-
img: __imgPath + "image/xsj/jxsj3.png",
|
|
61
|
-
key: "jxsj3",
|
|
62
|
-
path: "https://jxsj3.jx3box.com",
|
|
63
|
-
disabled: true,
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
name: "剑侠世界",
|
|
67
|
-
img: __imgPath + "image/xsj/jxsj.png",
|
|
68
|
-
key: "jxsj",
|
|
69
|
-
path: "https://jxsj.jx3box.com",
|
|
70
|
-
disabled: true,
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
name: "剑网1:归来",
|
|
74
|
-
img: __imgPath + "image/xsj/jx1gl.png",
|
|
75
|
-
key: "jx1",
|
|
76
|
-
path: "https://jx1.jx3box.com",
|
|
77
|
-
disabled: true,
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
name: "双生视界",
|
|
81
|
-
img: __imgPath + "image/xsj/sssj.png",
|
|
82
|
-
key: "sssj",
|
|
83
|
-
path: "https://sssj.jx3box.com",
|
|
84
|
-
disabled: true,
|
|
85
|
-
},
|
|
86
44
|
],
|
|
87
45
|
current: "jx3",
|
|
88
46
|
|
|
@@ -101,20 +59,32 @@ export default {
|
|
|
101
59
|
this.current = _game.key;
|
|
102
60
|
}
|
|
103
61
|
this.close();
|
|
62
|
+
this.loadGames();
|
|
104
63
|
},
|
|
105
64
|
methods: {
|
|
106
65
|
handleClick(item) {
|
|
107
66
|
if (item.disabled) {
|
|
108
67
|
return;
|
|
109
68
|
}
|
|
110
|
-
this.current
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
69
|
+
if (['jx3', 'jx3origin'].includes(this.current) && ['jx3', 'jx3origin'].includes(item.key)) {
|
|
70
|
+
const _current = this.games.find((game) => game.key == this.current);
|
|
71
|
+
const _next = this.games.find((game) => game.key == item.key);
|
|
72
|
+
|
|
73
|
+
location.href = location.href.replace(
|
|
74
|
+
_current.path,
|
|
75
|
+
_next.path
|
|
76
|
+
);
|
|
77
|
+
} else {
|
|
78
|
+
location.href = item.path;
|
|
115
79
|
}
|
|
116
|
-
|
|
80
|
+
this.current = item.key;
|
|
117
81
|
},
|
|
82
|
+
// itemHref(item) {
|
|
83
|
+
// if (item.disabled) {
|
|
84
|
+
// return "javascript:;";
|
|
85
|
+
// }
|
|
86
|
+
// return item.path;
|
|
87
|
+
// },
|
|
118
88
|
onShow() {
|
|
119
89
|
this.showMore = !this.showMore;
|
|
120
90
|
},
|
|
@@ -123,6 +93,11 @@ export default {
|
|
|
123
93
|
this.showMore = false;
|
|
124
94
|
});
|
|
125
95
|
},
|
|
96
|
+
loadGames() {
|
|
97
|
+
getGames().then(res => {
|
|
98
|
+
this.games = this.games.concat(res?.data);
|
|
99
|
+
})
|
|
100
|
+
}
|
|
126
101
|
},
|
|
127
102
|
};
|
|
128
103
|
</script>
|
package/src/header/user.vue
CHANGED
|
@@ -22,34 +22,43 @@
|
|
|
22
22
|
</el-tooltip>
|
|
23
23
|
</div>
|
|
24
24
|
|
|
25
|
+
<!-- vip -->
|
|
26
|
+
<div class="c-header-panel c-header-vip" id="c-header-vip">
|
|
27
|
+
<el-tooltip effect="dark" content="会员中心" placement="bottom" popper-class="c-header-tooltip">
|
|
28
|
+
<a class="u-post u-vip" href="/vip/premium">
|
|
29
|
+
<img class="u-add" svg-inline src="../../assets/img/header/vip.svg" />
|
|
30
|
+
</a>
|
|
31
|
+
</el-tooltip>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
25
34
|
<!-- 我的资产 -->
|
|
26
|
-
<div class="c-header-panel c-header-assets"
|
|
35
|
+
<div class="c-header-panel c-header-assets">
|
|
27
36
|
<a class="u-asset" href="/dashboard/boxcoin">
|
|
28
37
|
<img class="u-coin" svg-inline src="../../assets/img/header/coin.svg" />
|
|
29
38
|
</a>
|
|
30
39
|
|
|
31
|
-
<div class="u-assets
|
|
40
|
+
<div class="u-assets u-pop-content">
|
|
32
41
|
<div class="u-detail">
|
|
33
42
|
<span class="u-item">
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<!-- <span class="u-item-extend"><a href="/
|
|
43
|
+
<a class="u-item-primary" href="/about/incentives" target="_blank">
|
|
44
|
+
<span class="u-label"><i class="el-icon-user"></i> 等级</span>
|
|
45
|
+
<span class="u-value" :style="levelStyle">Lv.{{ level }}</span>
|
|
46
|
+
</a>
|
|
47
|
+
<!-- <span class="u-item-extend"><a href="/about/incentives" target="_blank">[权益]</a></span> -->
|
|
39
48
|
</span>
|
|
40
49
|
<span class="u-item">
|
|
41
|
-
<
|
|
50
|
+
<a class="u-item-primary" href="/dashboard/boxcoin" target="_blank"
|
|
42
51
|
><span class="u-label"><i class="el-icon-coin"></i> 盒币</span>
|
|
43
|
-
<span class="u-value">{{ asset.box_coin }}</span></
|
|
52
|
+
<span class="u-value">{{ asset.box_coin }}</span></a
|
|
44
53
|
>
|
|
45
54
|
<span class="u-item-extend"
|
|
46
55
|
><a href="/dashboard/boxcoin" target="_blank">[兑换通宝]</a></span
|
|
47
56
|
>
|
|
48
57
|
</span>
|
|
49
58
|
<span class="u-item">
|
|
50
|
-
<
|
|
59
|
+
<a class="u-item-primary" href="/dashboard/cny" target="_blank"
|
|
51
60
|
><span class="u-label"><i class="el-icon-wallet"></i> 金箔</span
|
|
52
|
-
><span class="u-value">{{ asset.cny }}</span></
|
|
61
|
+
><span class="u-value">{{ asset.cny }}</span></a
|
|
53
62
|
>
|
|
54
63
|
<span class="u-item-extend"
|
|
55
64
|
><a href="/vip/cny" target="_blank">[充值]</a>
|
|
@@ -57,9 +66,9 @@
|
|
|
57
66
|
>
|
|
58
67
|
</span>
|
|
59
68
|
<span class="u-item">
|
|
60
|
-
<
|
|
69
|
+
<a class="u-item-primary" href="/dashboard/points" target="_blank"
|
|
61
70
|
><span class="u-label"><i class="el-icon-sugar"></i> 银铛</span>
|
|
62
|
-
<span class="u-value">{{ asset.points }}</span></
|
|
71
|
+
<span class="u-value">{{ asset.points }}</span></a
|
|
63
72
|
>
|
|
64
73
|
<span class="u-item-extend"
|
|
65
74
|
><a href="/vip/mall" target="_blank">[兑礼]</a
|
|
@@ -67,9 +76,9 @@
|
|
|
67
76
|
>
|
|
68
77
|
</span>
|
|
69
78
|
<span class="u-item">
|
|
70
|
-
<
|
|
79
|
+
<a class="u-item-primary" href="/dashboard/card" target="_blank"
|
|
71
80
|
><span class="u-label"><i class="el-icon-bank-card"></i> 卡密</span>
|
|
72
|
-
<span class="u-value">{{ asset.ext_info ? asset.ext_info.keycode : 0 }}</span></
|
|
81
|
+
<span class="u-value">{{ asset.ext_info ? asset.ext_info.keycode : 0 }}</span></a
|
|
73
82
|
>
|
|
74
83
|
<span class="u-item-extend"><a href="/dashboard/card" target="_blank">[查看]</a></span>
|
|
75
84
|
</span>
|
|
@@ -77,47 +86,34 @@
|
|
|
77
86
|
</div>
|
|
78
87
|
</div>
|
|
79
88
|
|
|
80
|
-
<!-- vip -->
|
|
81
|
-
<div class="c-header-panel c-header-vip" id="c-header-vip">
|
|
82
|
-
<el-tooltip effect="dark" content="会员中心" placement="bottom" popper-class="c-header-tooltip">
|
|
83
|
-
<a class="u-post u-vip" href="/vip/premium">
|
|
84
|
-
<img class="u-add" svg-inline src="../../assets/img/header/vip.svg" />
|
|
85
|
-
</a>
|
|
86
|
-
</el-tooltip>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
89
|
<!-- manage -->
|
|
90
90
|
<div
|
|
91
91
|
class="c-header-panel c-header-manage"
|
|
92
92
|
id="c-header-manage"
|
|
93
|
-
@mouseenter="showManage = true"
|
|
94
|
-
@mouseleave="showManage = false"
|
|
95
93
|
>
|
|
96
94
|
<span class="u-post u-manage">
|
|
97
95
|
<img class="u-add" svg-inline src="../../assets/img/header/manage.svg" />
|
|
98
96
|
</span>
|
|
99
|
-
<ul class="u-menu
|
|
100
|
-
<li>
|
|
101
|
-
<a href="
|
|
97
|
+
<ul class="u-menu u-pop-content">
|
|
98
|
+
<li v-for="item in finalPanel" :key="item.label">
|
|
99
|
+
<a :href="item.link" target="_blank">{{ item.label }}</a>
|
|
102
100
|
</li>
|
|
103
|
-
<
|
|
104
|
-
|
|
101
|
+
<hr v-if="finalPanel.length" />
|
|
102
|
+
<li v-if="isEditor">
|
|
103
|
+
<a href="https://os.jx3box.com/admin" target="_blank">管理平台</a>
|
|
105
104
|
</li>
|
|
106
105
|
<li v-if="isAdmin">
|
|
107
|
-
<a href="/admin">站点配置</a>
|
|
108
|
-
</li>
|
|
109
|
-
<li v-if="isEditor">
|
|
110
|
-
<a href="https://os.jx3box.com/admin">管理平台</a>
|
|
106
|
+
<a href="/admin" target="_blank">站点配置</a>
|
|
111
107
|
</li>
|
|
112
108
|
</ul>
|
|
113
109
|
</div>
|
|
114
110
|
|
|
115
111
|
<!-- user info -->
|
|
116
|
-
<div class="c-header-info">
|
|
117
|
-
<div class="c-header-profile" id="c-header-profile"
|
|
112
|
+
<div class="c-header-panel c-header-info">
|
|
113
|
+
<div class="c-header-profile" id="c-header-profile">
|
|
118
114
|
<img class="u-avatar" :src="user.avatar" />
|
|
119
115
|
<template v-if="isPhone">
|
|
120
|
-
<ul class="u-menu
|
|
116
|
+
<ul class="u-menu u-pop-content">
|
|
121
117
|
<li>
|
|
122
118
|
<a href="/dashboard">个人中心</a>
|
|
123
119
|
</li>
|
|
@@ -140,7 +136,7 @@
|
|
|
140
136
|
</ul>
|
|
141
137
|
</template>
|
|
142
138
|
<template v-else>
|
|
143
|
-
<div class="c-header-userdata
|
|
139
|
+
<div class="c-header-userdata u-pop-content">
|
|
144
140
|
<div class="u-profile">
|
|
145
141
|
<div class="u-basic">
|
|
146
142
|
<a class="u-displayname" href="/dashboard" :title="user.name">{{
|
|
@@ -172,9 +168,9 @@
|
|
|
172
168
|
</div>
|
|
173
169
|
|
|
174
170
|
<el-button-group class="u-actions">
|
|
175
|
-
<a class="el-button el-button--default" :href="url.profile">资料设置</a>
|
|
176
|
-
<a class="el-button el-button--default" :href="url.homepage">个人主页</a>
|
|
177
|
-
<a class="el-button el-button--default" href="/dashboard/frame">主题风格</a>
|
|
171
|
+
<a class="el-button el-button--default is-plain" :href="url.profile">资料设置</a>
|
|
172
|
+
<a class="el-button el-button--default is-plain" :href="url.homepage">个人主页</a>
|
|
173
|
+
<a class="el-button el-button--default is-plain" href="/dashboard/frame">主题风格</a>
|
|
178
174
|
</el-button-group>
|
|
179
175
|
|
|
180
176
|
<div class="u-other">
|
|
@@ -192,7 +188,7 @@
|
|
|
192
188
|
</a>
|
|
193
189
|
<hr />
|
|
194
190
|
<div class="u-logout">
|
|
195
|
-
<el-button @click="logout" size="small">退出登录</el-button>
|
|
191
|
+
<el-button @click="logout" size="small" plain>退出登录</el-button>
|
|
196
192
|
</div>
|
|
197
193
|
</div>
|
|
198
194
|
</div>
|
|
@@ -312,11 +308,21 @@ export default {
|
|
|
312
308
|
levelStyle: function () {
|
|
313
309
|
return {
|
|
314
310
|
background: __userLevelColor[this.level],
|
|
315
|
-
color:
|
|
316
|
-
padding:
|
|
317
|
-
borderRadius:
|
|
311
|
+
color: "#fff",
|
|
312
|
+
padding: "2px 8px",
|
|
313
|
+
borderRadius: "2px",
|
|
318
314
|
};
|
|
319
315
|
},
|
|
316
|
+
finalPanel: function() {
|
|
317
|
+
// 只返回前两个
|
|
318
|
+
return this.panel.filter(item => {
|
|
319
|
+
// 只返回有权限的
|
|
320
|
+
if (item.onlyAdmin) {
|
|
321
|
+
return this.isAdmin
|
|
322
|
+
}
|
|
323
|
+
return true
|
|
324
|
+
}).slice(0, 2)
|
|
325
|
+
}
|
|
320
326
|
},
|
|
321
327
|
watch: {
|
|
322
328
|
fold(val) {
|
|
@@ -331,18 +337,6 @@ export default {
|
|
|
331
337
|
this.pop = !!res.data.data.unread;
|
|
332
338
|
});
|
|
333
339
|
},
|
|
334
|
-
|
|
335
|
-
// 面板
|
|
336
|
-
showmenu: function (e) {
|
|
337
|
-
e.stopPropagation();
|
|
338
|
-
this.fold = !this.fold;
|
|
339
|
-
},
|
|
340
|
-
closeExpandList: function () {
|
|
341
|
-
const vm = this;
|
|
342
|
-
document.addEventListener("click", function () {
|
|
343
|
-
vm.fold = true;
|
|
344
|
-
});
|
|
345
|
-
},
|
|
346
340
|
loadPanel: function () {
|
|
347
341
|
try {
|
|
348
342
|
const panel = JSON.parse(sessionStorage.getItem("panel"));
|
|
@@ -426,11 +420,13 @@ export default {
|
|
|
426
420
|
this.isSuperAuthor = !!res.sign;
|
|
427
421
|
});
|
|
428
422
|
},
|
|
429
|
-
|
|
430
|
-
this
|
|
423
|
+
handleMouseEnter: function (key, val) {
|
|
424
|
+
this[key] = val;
|
|
431
425
|
},
|
|
432
|
-
|
|
433
|
-
|
|
426
|
+
handleMouseLeave: function (key, val) {
|
|
427
|
+
setTimeout(() => {
|
|
428
|
+
this[key] = val;
|
|
429
|
+
}, 300);
|
|
434
430
|
},
|
|
435
431
|
copyText,
|
|
436
432
|
|
|
@@ -448,19 +444,10 @@ export default {
|
|
|
448
444
|
},
|
|
449
445
|
|
|
450
446
|
showUserName: function (val) {
|
|
451
|
-
|
|
452
|
-
if (val.length < 5) {
|
|
453
|
-
return val;
|
|
454
|
-
} else {
|
|
455
|
-
return val.slice(0, 4) + "..";
|
|
456
|
-
}
|
|
457
|
-
} else {
|
|
458
|
-
return "匿名";
|
|
459
|
-
}
|
|
447
|
+
return val || "匿名";
|
|
460
448
|
},
|
|
461
449
|
},
|
|
462
450
|
created: function () {
|
|
463
|
-
this.closeExpandList();
|
|
464
451
|
this.init();
|
|
465
452
|
},
|
|
466
453
|
components: {},
|