@jx3box/jx3box-common-ui 5.7.2 → 5.7.3
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/author.less +5 -3
- package/package.json +2 -2
- package/src/App.vue +2 -2
- package/src/author/Avatar.vue +9 -59
package/assets/css/author.less
CHANGED
|
@@ -176,12 +176,14 @@
|
|
|
176
176
|
background-color: #e6f0fb;
|
|
177
177
|
// color:@color-link;
|
|
178
178
|
}
|
|
179
|
-
padding:
|
|
179
|
+
padding: 4px 4px;
|
|
180
|
+
.r(3px);
|
|
180
181
|
}
|
|
181
182
|
.u-team-logo {
|
|
182
|
-
.size(
|
|
183
|
+
.size(24px);
|
|
183
184
|
.y;
|
|
184
|
-
.mr(
|
|
185
|
+
.mr(4px);
|
|
186
|
+
.r(4px);
|
|
185
187
|
}
|
|
186
188
|
.u-team-name {
|
|
187
189
|
.fz(12px);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jx3box/jx3box-common-ui",
|
|
3
|
-
"version": "5.7.
|
|
3
|
+
"version": "5.7.3",
|
|
4
4
|
"description": "JX3BOX UI",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@jx3box/jx3box-comment-ui": "^1.7.0",
|
|
34
|
-
"@jx3box/jx3box-common": "^7.1.
|
|
34
|
+
"@jx3box/jx3box-common": "^7.1.5",
|
|
35
35
|
"@jx3box/jx3box-data": "^1.9.4",
|
|
36
36
|
"@jx3box/jx3box-editor": "^1.2.7",
|
|
37
37
|
"axios": "^0.26.1",
|
package/src/App.vue
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
<LeftSidebar :open="true">
|
|
10
10
|
<LeftSideToggle :mobileOnly="true" />
|
|
11
|
-
<Author :author="author" :uid="
|
|
11
|
+
<Author :author="author" :uid="2" />
|
|
12
12
|
</LeftSidebar>
|
|
13
13
|
|
|
14
14
|
<Main :withoutLeft="false" :withoutRight="false">
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<el-radio :label="224">l-224</el-radio>
|
|
22
22
|
</el-radio-group>
|
|
23
23
|
<div>
|
|
24
|
-
<Avatar :
|
|
24
|
+
<Avatar :id="8" url="" :size="avatar_size" frame="" />
|
|
25
25
|
</div>
|
|
26
26
|
</el-tab-pane>
|
|
27
27
|
<el-tab-pane label="CMS作品" name="post">
|
package/src/author/Avatar.vue
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<a class="c-avatar" :href="authorLink(uid)">
|
|
3
|
-
<img :src="showAvatar(url)" class="c-avatar-pic"
|
|
4
|
-
<i class="c-avatar-frame" v-if="
|
|
3
|
+
<img :src="showAvatar(url)" class="c-avatar-pic"/>
|
|
4
|
+
<i class="c-avatar-frame" v-if="frame">
|
|
5
5
|
<img :src="frameUrl" />
|
|
6
6
|
</i>
|
|
7
7
|
<slot></slot>
|
|
@@ -9,9 +9,7 @@
|
|
|
9
9
|
</template>
|
|
10
10
|
|
|
11
11
|
<script>
|
|
12
|
-
import default_frames from "@jx3box/jx3box-common/data/user_avatar_frame.json";
|
|
13
12
|
import { __server, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
|
|
14
|
-
import { getFrames } from "../../service/author";
|
|
15
13
|
import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
|
|
16
14
|
export default {
|
|
17
15
|
name: "Avatar",
|
|
@@ -29,66 +27,17 @@ export default {
|
|
|
29
27
|
};
|
|
30
28
|
},
|
|
31
29
|
computed: {
|
|
32
|
-
frameName: function() {
|
|
33
|
-
return this.frame && this.frames[this.frame] ? this.frame : "";
|
|
34
|
-
},
|
|
35
30
|
frameUrl: function() {
|
|
36
|
-
|
|
37
|
-
let fileName = this.frames[this.frameName].files[this.style].file;
|
|
38
|
-
return __imgPath + `avatar/images/${this.frameName}/${fileName}`;
|
|
39
|
-
}
|
|
40
|
-
return "";
|
|
41
|
-
},
|
|
42
|
-
isCircle: function() {
|
|
43
|
-
return this.frameName && this.frames[this.frameName].style == "circle";
|
|
44
|
-
},
|
|
45
|
-
style: function() {
|
|
46
|
-
let style = ~~this.size;
|
|
47
|
-
for(let [i,v] of this.styles.entries()){
|
|
48
|
-
if(style < v.size){
|
|
49
|
-
return this.styles[i]['cls']
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
return "s";
|
|
53
|
-
},
|
|
54
|
-
data: function() {
|
|
55
|
-
return [this.uid, this.url, this.size, this.frame];
|
|
31
|
+
return __imgPath + `avatar/images/${this.frame}/${this.frame}.svg`;
|
|
56
32
|
},
|
|
57
33
|
},
|
|
58
34
|
methods: {
|
|
59
|
-
loadFrames: function() {
|
|
60
|
-
|
|
61
|
-
// 无头像框
|
|
62
|
-
if(!this.frame) return
|
|
63
|
-
|
|
64
|
-
let frames = sessionStorage.getItem("avatarFrames");
|
|
65
|
-
|
|
66
|
-
// 本地缓存
|
|
67
|
-
if(frames){
|
|
68
|
-
try {
|
|
69
|
-
frames = JSON.parse(frames);
|
|
70
|
-
this.frames = frames;
|
|
71
|
-
} catch (e) {
|
|
72
|
-
this.frames = default_frames
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// 线上数据
|
|
76
|
-
}else{
|
|
77
|
-
getFrames().then((res) => {
|
|
78
|
-
if (res.data) {
|
|
79
|
-
this.frames = res.data || {};
|
|
80
|
-
sessionStorage.setItem("avatarFrames", JSON.stringify(this.frames));
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
35
|
showAvatar: function(val) {
|
|
86
36
|
return showAvatar(val, this.size*3);
|
|
87
37
|
},
|
|
88
38
|
authorLink,
|
|
89
39
|
},
|
|
90
40
|
mounted : function (){
|
|
91
|
-
this.loadFrames()
|
|
92
41
|
}
|
|
93
42
|
};
|
|
94
43
|
</script>
|
|
@@ -101,18 +50,19 @@ export default {
|
|
|
101
50
|
.c-avatar-pic {
|
|
102
51
|
.db;
|
|
103
52
|
.full;
|
|
104
|
-
.r(
|
|
105
|
-
&.isCircle {
|
|
106
|
-
.r(100%);
|
|
107
|
-
}
|
|
53
|
+
.r(100%);
|
|
108
54
|
}
|
|
109
55
|
.c-avatar-frame {
|
|
110
56
|
.pa;
|
|
57
|
+
.lt(-10px);
|
|
58
|
+
.size(100%);
|
|
59
|
+
padding: 10px;
|
|
60
|
+
box-sizing: content-box;
|
|
111
61
|
img {
|
|
112
62
|
.db;
|
|
113
63
|
.pa;
|
|
114
|
-
.lt(0);
|
|
115
64
|
.size(100%);
|
|
65
|
+
.lt(0);
|
|
116
66
|
}
|
|
117
67
|
|
|
118
68
|
&.xs {
|