@jx3box/jx3box-ui 2.0.30 → 2.0.32
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/interact/mark.less +34 -0
- package/package.json +1 -1
- package/src/App.vue +7 -0
- package/src/comment/ReplyList.vue +7 -2
- package/src/interact/Mark.vue +55 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.w-mark{
|
|
2
|
+
display: inline-block;
|
|
3
|
+
.clearfix;
|
|
4
|
+
.r(3px);.clip;
|
|
5
|
+
width: fit-content;
|
|
6
|
+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
|
|
7
|
+
|
|
8
|
+
.w-mark-key,.w-mark-value{
|
|
9
|
+
padding: 2px 5px;
|
|
10
|
+
.fz(12px, 20px);
|
|
11
|
+
.h(20px);
|
|
12
|
+
.fl;.db;
|
|
13
|
+
color: #fff;
|
|
14
|
+
box-sizing: content-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.w-mark-key {
|
|
18
|
+
svg {
|
|
19
|
+
.size(20px);
|
|
20
|
+
.fl;
|
|
21
|
+
.mr(5px);
|
|
22
|
+
fill: #fff;
|
|
23
|
+
}
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: normal;
|
|
26
|
+
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
27
|
+
background-color: @bg-black;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.w-mark-value {
|
|
31
|
+
background-color: @primary;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
}
|
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -30,6 +30,11 @@
|
|
|
30
30
|
<UserPop title="添加用户" v-model="userpop"></UserPop>
|
|
31
31
|
</div>
|
|
32
32
|
|
|
33
|
+
<h1 class="m-title">奇怪的组件</h1>
|
|
34
|
+
<div class="m-block">
|
|
35
|
+
<Mark label="渊穷砂" BGL="#24292e" BGR="#ffadcb" value="按键启动"></Mark>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
33
38
|
<h1 class="m-title">切换侧边栏</h1>
|
|
34
39
|
<div class="m-block">
|
|
35
40
|
<LeftSideToggle :mobileOnly="false" />
|
|
@@ -189,6 +194,7 @@ import PostVersion from "./single/PostVersion.vue";
|
|
|
189
194
|
import PostCollection from "./single/PostCollection.vue";
|
|
190
195
|
import QRcode from "./interact/QRcode.vue";
|
|
191
196
|
import UploadBanner from "./upload/UploadBanner.vue";
|
|
197
|
+
import Mark from "./interact/Mark.vue"
|
|
192
198
|
|
|
193
199
|
import GamePrice from "./wiki/GamePrice.vue";
|
|
194
200
|
import WikiComments from "./wiki/WikiComments.vue";
|
|
@@ -197,6 +203,7 @@ import WikiPanel from "./wiki/WikiPanel.vue";
|
|
|
197
203
|
export default {
|
|
198
204
|
name: "App",
|
|
199
205
|
components: {
|
|
206
|
+
Mark,
|
|
200
207
|
Author,
|
|
201
208
|
// PostHeader,
|
|
202
209
|
PostTopic,
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
<!-- 分页 -->
|
|
15
15
|
<el-row v-if="data.length >= 3 || showPager">
|
|
16
16
|
<el-col :span="4">
|
|
17
|
-
<el-button link v-show="showPager" @click="showLess()">{{
|
|
17
|
+
<el-button class="u-op" link v-show="showPager" @click="showLess()" icon="DCaret">{{
|
|
18
18
|
$jx3boxT("jx3boxUi.replyList.collapse", "收起")
|
|
19
19
|
}}</el-button>
|
|
20
|
-
<el-button link v-show="!showPager" @click="showMore()">{{
|
|
20
|
+
<el-button class="u-op" link v-show="!showPager" @click="showMore()" icon="DCaret">{{
|
|
21
21
|
$jx3boxT("jx3boxUi.replyList.showMore", "查看更多")
|
|
22
22
|
}}</el-button>
|
|
23
23
|
</el-col>
|
|
@@ -102,6 +102,11 @@ export default {
|
|
|
102
102
|
.c-comment-replylist {
|
|
103
103
|
padding: 10px 0 10px 68px;
|
|
104
104
|
border-top: 1px dashed #eee;
|
|
105
|
+
|
|
106
|
+
.u-op {
|
|
107
|
+
margin-left:0;
|
|
108
|
+
font-weight: normal;
|
|
109
|
+
}
|
|
105
110
|
}
|
|
106
111
|
.c-comment-reply {
|
|
107
112
|
padding-top: 5px;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="w-mark">
|
|
3
|
+
<i class="w-mark-key" :style="{ 'background-color': BGL }">
|
|
4
|
+
<img
|
|
5
|
+
v-if="!$slots.default"
|
|
6
|
+
svg-inline
|
|
7
|
+
src="../../assets/img/header/logo.svg"
|
|
8
|
+
/>
|
|
9
|
+
<slot></slot>
|
|
10
|
+
{{ mark_key }}
|
|
11
|
+
</i>
|
|
12
|
+
<span
|
|
13
|
+
v-if="mark_value"
|
|
14
|
+
class="w-mark-value"
|
|
15
|
+
:style="{ 'background-color': BGR }"
|
|
16
|
+
>{{ mark_value }}</span
|
|
17
|
+
>
|
|
18
|
+
</span>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
export default {
|
|
23
|
+
name: "Mark",
|
|
24
|
+
// ["label", "value", "BGL", "BGR"]
|
|
25
|
+
props: {
|
|
26
|
+
label: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: "JX3BOX",
|
|
29
|
+
},
|
|
30
|
+
value: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: "Mark",
|
|
33
|
+
},
|
|
34
|
+
BGL: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: "#409EFF",
|
|
37
|
+
},
|
|
38
|
+
BGR: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: "#67C23A",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
data: function() {
|
|
44
|
+
return {
|
|
45
|
+
mark_key: this.label || "JX3BOX",
|
|
46
|
+
mark_value: this.value,
|
|
47
|
+
};
|
|
48
|
+
},
|
|
49
|
+
mounted: function() {},
|
|
50
|
+
};
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style lang="less">
|
|
54
|
+
@import "../../assets/css/interact/mark.less";
|
|
55
|
+
</style>
|