@jx3box/jx3box-ui 2.1.0 → 2.1.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/assets/css/wiki/wiki-comments.less +1 -0
- package/assets/css/wiki/wiki-panel.less +54 -80
- package/assets/img/price/jin.png +0 -0
- package/assets/img/price/tong.png +0 -0
- package/assets/img/price/yin.png +0 -0
- package/assets/img/price/zhuan.png +0 -0
- package/package.json +1 -1
- package/src/wiki/GamePrice.vue +51 -25
- package/src/wiki/WikiComments.vue +3 -3
- package/src/wiki/WikiPanel.vue +6 -7
|
@@ -2,36 +2,25 @@
|
|
|
2
2
|
.c-wiki-panel {
|
|
3
3
|
.db;
|
|
4
4
|
.mb(15px);
|
|
5
|
-
background-color: #fafbfc;
|
|
6
|
-
border: 1px solid #eeeeee;
|
|
7
|
-
border-radius: 5px;
|
|
8
5
|
font-size: 14px;
|
|
9
6
|
|
|
10
|
-
img {
|
|
11
|
-
height: auto;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
b,
|
|
15
|
-
strong {
|
|
16
|
-
font-weight: bold;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&.border-none {
|
|
20
|
-
background-color: transparent;
|
|
21
|
-
border: none;
|
|
22
|
-
|
|
23
|
-
.m-panel-head {
|
|
24
|
-
background-color: transparent;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
7
|
.m-panel-head {
|
|
29
8
|
.pr;
|
|
30
9
|
padding: 0 15px;
|
|
31
|
-
background-color: #f5f7fa;
|
|
32
10
|
border-bottom: 1px solid #eeeeee;
|
|
11
|
+
.flex(y);
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
.m-panel-title {
|
|
16
|
+
.flex(y);
|
|
17
|
+
.gap(5px);
|
|
18
|
+
padding: 10px 0;
|
|
19
|
+
color: #6c645c;
|
|
20
|
+
font-weight: 500;
|
|
21
|
+
}
|
|
33
22
|
|
|
34
|
-
|
|
23
|
+
.m-panel-actions {
|
|
35
24
|
.pa;
|
|
36
25
|
right: 15px;
|
|
37
26
|
top: 50%;
|
|
@@ -39,31 +28,7 @@
|
|
|
39
28
|
font-size: 12px;
|
|
40
29
|
z-index: 30;
|
|
41
30
|
.flex(y);
|
|
42
|
-
|
|
43
|
-
.u-more,
|
|
44
|
-
.el-button {
|
|
45
|
-
.dbi;
|
|
46
|
-
.ml(15px);
|
|
47
|
-
|
|
48
|
-
&:first-child {
|
|
49
|
-
.ml(0);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.u-more {
|
|
54
|
-
color: var(--el-color-primary);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.el-button {
|
|
58
|
-
font-size: 12px;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
& .m-panel-title {
|
|
63
|
-
padding: 10px 0;
|
|
64
|
-
color: #6c645c;
|
|
65
|
-
margin: 0;
|
|
66
|
-
font-weight: 500;
|
|
31
|
+
.gap(10px);
|
|
67
32
|
}
|
|
68
33
|
}
|
|
69
34
|
|
|
@@ -73,6 +38,15 @@
|
|
|
73
38
|
word-break: break-all;
|
|
74
39
|
}
|
|
75
40
|
|
|
41
|
+
&.border {
|
|
42
|
+
background-color: #fafbfc;
|
|
43
|
+
border: 1px solid #eeeeee;
|
|
44
|
+
border-radius: 5px;
|
|
45
|
+
.m-panel-head {
|
|
46
|
+
background-color: #f5f7fa;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
76
50
|
.m-wiki-metas {
|
|
77
51
|
.mb(5px);
|
|
78
52
|
font-size: 12px;
|
|
@@ -143,36 +117,36 @@
|
|
|
143
117
|
}
|
|
144
118
|
|
|
145
119
|
// 详情场景
|
|
146
|
-
&.m-detail-scene {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}
|
|
120
|
+
// &.m-detail-scene {
|
|
121
|
+
// .m-panel-title {
|
|
122
|
+
// img,
|
|
123
|
+
// svg,
|
|
124
|
+
// i,
|
|
125
|
+
// span {
|
|
126
|
+
// .dbi;
|
|
127
|
+
// vertical-align: middle;
|
|
128
|
+
// }
|
|
129
|
+
|
|
130
|
+
// img,
|
|
131
|
+
// svg,
|
|
132
|
+
// i {
|
|
133
|
+
// width: 28px;
|
|
134
|
+
// height: 28px;
|
|
135
|
+
// line-height: 28px;
|
|
136
|
+
// color: var(--el-color-primary);
|
|
137
|
+
// fill: var(--el-color-primary);
|
|
138
|
+
// font-size: 22px;
|
|
139
|
+
// }
|
|
140
|
+
|
|
141
|
+
// img,
|
|
142
|
+
// svg {
|
|
143
|
+
// .mr(7px);
|
|
144
|
+
// }
|
|
145
|
+
|
|
146
|
+
// span {
|
|
147
|
+
// font-size: 17px;
|
|
148
|
+
// font-weight: 300;
|
|
149
|
+
// }
|
|
150
|
+
// }
|
|
151
|
+
// }
|
|
178
152
|
}
|
package/assets/img/price/jin.png
CHANGED
|
Binary file
|
|
Binary file
|
package/assets/img/price/yin.png
CHANGED
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
package/src/wiki/GamePrice.vue
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<span class="c-game-price" :class="
|
|
2
|
+
<span class="c-game-price" :class="alignClass">
|
|
3
3
|
<span class="u-neg" v-if="numericPrice < 0">- </span>
|
|
4
|
-
<span
|
|
5
|
-
<
|
|
6
|
-
|
|
4
|
+
<span class="u-price">
|
|
5
|
+
<template v-for="part in priceParts" :key="part.unit">
|
|
6
|
+
<span class="u-part" :class="`u-${part.unit}`">
|
|
7
|
+
<span class="u-price-value">{{ part.value }}</span>
|
|
8
|
+
<img :src="part.icon" :alt="part.alt" />
|
|
9
|
+
</span>
|
|
10
|
+
</template>
|
|
7
11
|
</span>
|
|
8
12
|
</span>
|
|
9
13
|
</template>
|
|
@@ -29,7 +33,7 @@ export default {
|
|
|
29
33
|
default: 0,
|
|
30
34
|
},
|
|
31
35
|
align: {
|
|
32
|
-
type: Boolean,
|
|
36
|
+
type: [Boolean, String],
|
|
33
37
|
default: false,
|
|
34
38
|
},
|
|
35
39
|
},
|
|
@@ -38,6 +42,11 @@ export default {
|
|
|
38
42
|
const value = Number(this.price);
|
|
39
43
|
return Number.isFinite(value) ? Math.trunc(value) : 0;
|
|
40
44
|
},
|
|
45
|
+
alignClass() {
|
|
46
|
+
if (this.align === true) return "is-align";
|
|
47
|
+
if (typeof this.align === "string" && this.align) return `is-${this.align}`;
|
|
48
|
+
return "";
|
|
49
|
+
},
|
|
41
50
|
priceParts() {
|
|
42
51
|
const value = Math.abs(this.numericPrice);
|
|
43
52
|
let remainder = value;
|
|
@@ -51,58 +60,75 @@ export default {
|
|
|
51
60
|
};
|
|
52
61
|
});
|
|
53
62
|
|
|
54
|
-
const
|
|
63
|
+
const zhuanIndex = parts.findIndex((item) => item.unit === "zhuan");
|
|
64
|
+
const jinIndex = parts.findIndex((item) => item.unit === "jin");
|
|
55
65
|
|
|
56
|
-
if (
|
|
57
|
-
|
|
58
|
-
return tong ? [{ ...tong, value: 0 }] : [];
|
|
66
|
+
if (parts[zhuanIndex] && parts[zhuanIndex].value > 0) {
|
|
67
|
+
return parts.slice(zhuanIndex);
|
|
59
68
|
}
|
|
60
69
|
|
|
61
|
-
return
|
|
70
|
+
return parts.slice(jinIndex);
|
|
62
71
|
},
|
|
63
72
|
},
|
|
64
73
|
};
|
|
65
74
|
</script>
|
|
66
75
|
|
|
67
76
|
<style lang="less">
|
|
68
|
-
/* src/wiki/GamePrice.vue */
|
|
69
77
|
.c-game-price {
|
|
70
78
|
display: inline-flex;
|
|
71
79
|
align-items: center;
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
color: #333;
|
|
81
|
+
font-weight: 500;
|
|
74
82
|
|
|
75
|
-
.u-
|
|
76
|
-
.u-zhuan,
|
|
77
|
-
.u-jin,
|
|
78
|
-
.u-yin,
|
|
79
|
-
.u-tong {
|
|
83
|
+
.u-price {
|
|
80
84
|
display: inline-flex;
|
|
81
85
|
align-items: center;
|
|
82
|
-
flex-
|
|
86
|
+
flex-wrap: wrap;
|
|
87
|
+
gap: 6px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.u-neg {
|
|
91
|
+
display: inline-flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.u-part {
|
|
96
|
+
display: inline-flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
gap: 2px;
|
|
99
|
+
white-space: nowrap;
|
|
83
100
|
}
|
|
84
101
|
|
|
85
102
|
img {
|
|
86
|
-
|
|
87
|
-
|
|
103
|
+
width: 18px;
|
|
104
|
+
height: 18px;
|
|
105
|
+
object-fit: contain;
|
|
106
|
+
vertical-align: middle;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.u-price-value {
|
|
110
|
+
.fz(12px,18px);
|
|
88
111
|
}
|
|
89
112
|
|
|
90
113
|
&.is-align {
|
|
91
114
|
.u-jin {
|
|
92
|
-
.u-value {
|
|
115
|
+
.u-price-value {
|
|
93
116
|
display: inline-block;
|
|
94
|
-
width: 4ch;
|
|
95
117
|
text-align: right;
|
|
96
118
|
}
|
|
97
119
|
}
|
|
98
120
|
.u-yin,
|
|
99
121
|
.u-tong {
|
|
100
|
-
.u-value {
|
|
122
|
+
.u-price-value {
|
|
101
123
|
display: inline-block;
|
|
102
|
-
width: 2ch;
|
|
103
124
|
text-align: right;
|
|
104
125
|
}
|
|
105
126
|
}
|
|
106
127
|
}
|
|
128
|
+
|
|
129
|
+
&.is-right {
|
|
130
|
+
justify-content: flex-end;
|
|
131
|
+
width: 100%;
|
|
132
|
+
}
|
|
107
133
|
}
|
|
108
134
|
</style>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<WikiPanel class="c-wiki-comments" scene="detail">
|
|
3
3
|
<template #head-title>
|
|
4
|
-
<i class="el-icon-chat-line-round"></i>
|
|
5
|
-
<span>百科评论</span>
|
|
4
|
+
<i class="u-icon el-icon-chat-line-round"></i>
|
|
5
|
+
<span class="u-txt">百科评论</span>
|
|
6
6
|
</template>
|
|
7
7
|
<template #body>
|
|
8
8
|
<div class="m-comments-panel" v-loading="loading">
|
|
@@ -143,7 +143,7 @@ export default {
|
|
|
143
143
|
type: this.type,
|
|
144
144
|
source_id: this.sourceId,
|
|
145
145
|
parent_id: parent_id,
|
|
146
|
-
user_nickname: form.user_nickname || User.getInfo().name ||
|
|
146
|
+
user_nickname: form.user_nickname || User.getInfo().name || "神秘侠士",
|
|
147
147
|
content: form.content,
|
|
148
148
|
client: this.client,
|
|
149
149
|
};
|
package/src/wiki/WikiPanel.vue
CHANGED
|
@@ -2,19 +2,18 @@
|
|
|
2
2
|
<div
|
|
3
3
|
class="c-wiki-panel"
|
|
4
4
|
:class="{
|
|
5
|
-
|
|
6
|
-
'm-detail-scene': wikiPost || scene === 'detail',
|
|
5
|
+
border: border,
|
|
7
6
|
}"
|
|
8
7
|
>
|
|
9
8
|
<div class="m-panel-head">
|
|
10
9
|
<slot name="head-before"></slot>
|
|
10
|
+
<div class="m-panel-title">
|
|
11
|
+
<slot name="head-title"></slot>
|
|
12
|
+
</div>
|
|
11
13
|
<div class="m-panel-actions">
|
|
12
14
|
<QRcode v-if="wikiPost && showQR" class="u-qr" />
|
|
13
15
|
<slot name="head-actions"></slot>
|
|
14
16
|
</div>
|
|
15
|
-
<div class="m-panel-title">
|
|
16
|
-
<slot name="head-title"></slot>
|
|
17
|
-
</div>
|
|
18
17
|
<slot name="head-after"></slot>
|
|
19
18
|
</div>
|
|
20
19
|
<div class="m-panel-body">
|
|
@@ -73,9 +72,9 @@ export default {
|
|
|
73
72
|
type: String,
|
|
74
73
|
default: "default",
|
|
75
74
|
},
|
|
76
|
-
|
|
75
|
+
border: {
|
|
77
76
|
type: Boolean,
|
|
78
|
-
default:
|
|
77
|
+
default: true,
|
|
79
78
|
},
|
|
80
79
|
showQR: {
|
|
81
80
|
type: Boolean,
|