Merge branch 'feature/0530' into feature/qk
Showing
14 changed files
with
105 additions
and
17 deletions
1 | <template> | 1 | <template> |
2 | - <ImageFormat :lazy="lazy" class="img-avatar" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat> | 2 | + <div class="avatar-wrap"> |
3 | + <ImageFormat class="img-avatar" :lazy="lazy" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat> | ||
4 | + <span v-if="identityClass" class="identity-icon" :class="identityClass"></span> | ||
5 | + </div> | ||
3 | </template> | 6 | </template> |
4 | 7 | ||
5 | <script> | 8 | <script> |
@@ -21,7 +24,12 @@ export default { | @@ -21,7 +24,12 @@ export default { | ||
21 | lazy: { | 24 | lazy: { |
22 | type: Boolean, | 25 | type: Boolean, |
23 | default: false | 26 | default: false |
24 | - } | 27 | + }, |
28 | + small: { | ||
29 | + type: Boolean, | ||
30 | + default: false | ||
31 | + }, | ||
32 | + group: [Number, String] | ||
25 | }, | 33 | }, |
26 | data() { | 34 | data() { |
27 | return { | 35 | return { |
@@ -32,6 +40,30 @@ export default { | @@ -32,6 +40,30 @@ export default { | ||
32 | computed: { | 40 | computed: { |
33 | imageSrc() { | 41 | imageSrc() { |
34 | return this.imgSrc || this.defaultSrc; | 42 | return this.imgSrc || this.defaultSrc; |
43 | + }, | ||
44 | + identityClass() { | ||
45 | + let className = ''; | ||
46 | + | ||
47 | + switch (+this.group) { | ||
48 | + case 1: // 普通马甲 | ||
49 | + case 2: // 编辑 | ||
50 | + case 4: // 社区大号 | ||
51 | + case 6: // 评论马甲 | ||
52 | + break; | ||
53 | + case 3: // 官方号 | ||
54 | + className = 'identity-gf'; | ||
55 | + break; | ||
56 | + case 5: // 品牌号 | ||
57 | + className = 'identity-pp'; | ||
58 | + break; | ||
59 | + case 7: // 授权KOL | ||
60 | + className = 'identity-king'; | ||
61 | + break; | ||
62 | + default: | ||
63 | + break; | ||
64 | + } | ||
65 | + | ||
66 | + return `${className}${this.small ? '-small' : ''}`; | ||
35 | } | 67 | } |
36 | }, | 68 | }, |
37 | watch: { | 69 | watch: { |
@@ -47,9 +79,49 @@ export default { | @@ -47,9 +79,49 @@ export default { | ||
47 | }; | 79 | }; |
48 | </script> | 80 | </script> |
49 | 81 | ||
50 | -<style lang="scss" scoped> | 82 | +<style lang="css" scoped> |
83 | +.avatar-wrap { | ||
84 | + display: inline-block; | ||
85 | + position: relative; | ||
86 | + | ||
87 | + > img { | ||
88 | + width: 100%; | ||
89 | + height: 100%; | ||
90 | + } | ||
91 | +} | ||
92 | + | ||
51 | .img-avatar { | 93 | .img-avatar { |
52 | border-radius: 50%; | 94 | border-radius: 50%; |
53 | overflow: hidden; | 95 | overflow: hidden; |
54 | } | 96 | } |
97 | + | ||
98 | +.identity-icon { | ||
99 | + width: 45%; | ||
100 | + height: 45%; | ||
101 | + position: absolute; | ||
102 | + right: -6%; | ||
103 | + bottom: -6%; | ||
104 | + background-size: 100%; | ||
105 | +} | ||
106 | + | ||
107 | +.identity-gf { | ||
108 | + background-image: url('~statics/image/userpage/GF-big-ic.png'); | ||
109 | +} | ||
110 | + | ||
111 | +.identity-gf-small { | ||
112 | + background-image: url('~statics/image/userpage/GF-small-ic.png'); | ||
113 | +} | ||
114 | + | ||
115 | +.identity-king, | ||
116 | +.identity-king-small { | ||
117 | + background-image: url('~statics/image/userpage/KING-ic.png'); | ||
118 | +} | ||
119 | + | ||
120 | +.identity-pp { | ||
121 | + background-image: url('~statics/image/userpage/PP-big-ic.png'); | ||
122 | +} | ||
123 | + | ||
124 | +.identity-pp-small { | ||
125 | + background-image: url('~statics/image/userpage/PP-small-ic.png'); | ||
126 | +} | ||
55 | </style> | 127 | </style> |
1 | <template> | 1 | <template> |
2 | <div class="article-item-header"> | 2 | <div class="article-item-header"> |
3 | <div class="avatar" @click="toUserPage"> | 3 | <div class="avatar" @click="toUserPage"> |
4 | - <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar> | 4 | + <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :group="data.authGroupId" :width="70" :height="70"></WidgetAvatar> |
5 | <div class="user-info"> | 5 | <div class="user-info"> |
6 | <p class="user-name">{{data.authorName}}</p> | 6 | <p class="user-name">{{data.authorName}}</p> |
7 | <p v-if="data.authorRank" class="user-rank"> | 7 | <p v-if="data.authorRank" class="user-rank"> |
@@ -52,6 +52,7 @@ export default { | @@ -52,6 +52,7 @@ export default { | ||
52 | authorUid: this.data.authorUid, | 52 | authorUid: this.data.authorUid, |
53 | authorType: this.data.authorType, | 53 | authorType: this.data.authorType, |
54 | authorHeadIco: this.data.authorHeadIco, | 54 | authorHeadIco: this.data.authorHeadIco, |
55 | + authGroupId: this.data.authGroupId, | ||
55 | hasAttention: this.data.hasAttention, | 56 | hasAttention: this.data.hasAttention, |
56 | isAuthor: this.data.isAuthor | 57 | isAuthor: this.data.isAuthor |
57 | }; | 58 | }; |
@@ -4,12 +4,13 @@ | @@ -4,12 +4,13 @@ | ||
4 | <div class="article-item-main"> | 4 | <div class="article-item-main"> |
5 | <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a> | 5 | <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a> |
6 | <div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage"> | 6 | <div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage"> |
7 | + <div v-if="data.sort === 2" class="article-long-icon"></div> | ||
7 | <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat> | 8 | <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat> |
8 | </div> | 9 | </div> |
9 | <div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div> | 10 | <div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div> |
10 | <div class="attribution"> | 11 | <div class="attribution"> |
11 | <div class="auther" @click="toUserPage"> | 12 | <div class="auther" @click="toUserPage"> |
12 | - <WidgetAvatar class="avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar> | 13 | + <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar> |
13 | <span class="name">{{data.authorName}}</span> | 14 | <span class="name">{{data.authorName}}</span> |
14 | </div> | 15 | </div> |
15 | <div class="fav"> | 16 | <div class="fav"> |
@@ -175,6 +176,16 @@ export default { | @@ -175,6 +176,16 @@ export default { | ||
175 | z-index: 1; | 176 | z-index: 1; |
176 | } | 177 | } |
177 | 178 | ||
179 | + .article-long-icon { | ||
180 | + width: 36px; | ||
181 | + height: 36px; | ||
182 | + position: absolute; | ||
183 | + top: 18px; | ||
184 | + right: 18px; | ||
185 | + background-image: url('~statics/image/article/article-long-icon.png'); | ||
186 | + background-size: 100% 100%; | ||
187 | + } | ||
188 | + | ||
178 | .layer-image img { | 189 | .layer-image img { |
179 | width: 100%; | 190 | width: 100%; |
180 | height: 100%; | 191 | height: 100%; |
@@ -185,6 +185,7 @@ export default { | @@ -185,6 +185,7 @@ export default { | ||
185 | authorUid: this.data.authorUid, | 185 | authorUid: this.data.authorUid, |
186 | authorType: this.data.authorType, | 186 | authorType: this.data.authorType, |
187 | authorHeadIco: this.data.authorHeadIco, | 187 | authorHeadIco: this.data.authorHeadIco, |
188 | + authGroupId: this.data.authGroupId, | ||
188 | hasAttention: this.articleState.hasAttention, | 189 | hasAttention: this.articleState.hasAttention, |
189 | isAuthor: this.data.isAuthor | 190 | isAuthor: this.data.isAuthor |
190 | }; | 191 | }; |
@@ -5,6 +5,7 @@ | @@ -5,6 +5,7 @@ | ||
5 | <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a> | 5 | <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a> |
6 | <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`"> | 6 | <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`"> |
7 | <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div> | 7 | <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div> |
8 | + <div v-if="data.sort === 2" class="article-long-icon"></div> | ||
8 | <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat> | 9 | <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat> |
9 | </div> | 10 | </div> |
10 | <div v-if="data.content" class="description" @click="onClick('article')"> | 11 | <div v-if="data.content" class="description" @click="onClick('article')"> |
@@ -13,9 +14,7 @@ | @@ -13,9 +14,7 @@ | ||
13 | 14 | ||
14 | <div class="attribution"> | 15 | <div class="attribution"> |
15 | <div class="auther" @click="onClick('author')"> | 16 | <div class="auther" @click="onClick('author')"> |
16 | - <span class="avatar"> | ||
17 | - <WidgetAvatar :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar> | ||
18 | - </span> | 17 | + <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar> |
19 | <span class="name">{{data.authorName}}</span> | 18 | <span class="name">{{data.authorName}}</span> |
20 | </div> | 19 | </div> |
21 | 20 | ||
@@ -134,6 +133,16 @@ export default { | @@ -134,6 +133,16 @@ export default { | ||
134 | justify-content: center; | 133 | justify-content: center; |
135 | } | 134 | } |
136 | 135 | ||
136 | + .article-long-icon { | ||
137 | + width: 36px; | ||
138 | + height: 36px; | ||
139 | + position: absolute; | ||
140 | + top: 18px; | ||
141 | + right: 18px; | ||
142 | + background-image: url('~statics/image/article/article-long-icon.png'); | ||
143 | + background-size: 100% 100%; | ||
144 | + } | ||
145 | + | ||
137 | > img { | 146 | > img { |
138 | width: 100%; | 147 | width: 100%; |
139 | height: 100%; | 148 | height: 100%; |
@@ -166,10 +175,8 @@ export default { | @@ -166,10 +175,8 @@ export default { | ||
166 | .avatar { | 175 | .avatar { |
167 | width: 40px; | 176 | width: 40px; |
168 | height: 40px; | 177 | height: 40px; |
169 | - border-radius: 50%; | ||
170 | display: inline-block; | 178 | display: inline-block; |
171 | vertical-align: middle; | 179 | vertical-align: middle; |
172 | - overflow: hidden; | ||
173 | 180 | ||
174 | > img { | 181 | > img { |
175 | width: 100%; | 182 | width: 100%; |
@@ -8,7 +8,7 @@ | @@ -8,7 +8,7 @@ | ||
8 | </div> | 8 | </div> |
9 | <div class="h-more"> | 9 | <div class="h-more"> |
10 | <div class="flex"> | 10 | <div class="flex"> |
11 | - <WidgetAvatar class="h-headico" :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar> | 11 | + <WidgetAvatar class="h-headico" :src="authorBaseData.headIco" :group="authorBaseData.authGroupId" :width="100" :height="100"></WidgetAvatar> |
12 | </div> | 12 | </div> |
13 | <div v-if="!isOwner" class="h-follow flex"> | 13 | <div v-if="!isOwner" class="h-follow flex"> |
14 | <WidgetFollow class="widget-follow" :author-uid="authorInfo.authorUid" :author-type="authorInfo.authorType" :follow="isAttention" @on-follow="follow => onFollow(follow)" :pos-id="sceneId"></WidgetFollow> | 14 | <WidgetFollow class="widget-follow" :author-uid="authorInfo.authorUid" :author-type="authorInfo.authorType" :follow="isAttention" @on-follow="follow => onFollow(follow)" :pos-id="sceneId"></WidgetFollow> |
@@ -30,9 +30,7 @@ | @@ -30,9 +30,7 @@ | ||
30 | @scroll-end="onScrollEndHandle" | 30 | @scroll-end="onScrollEndHandle" |
31 | @before-scroll-start="beforeScrollStartHandle"> | 31 | @before-scroll-start="beforeScrollStartHandle"> |
32 | <div ref="authorProfile" class="author-profile"> | 32 | <div ref="authorProfile" class="author-profile"> |
33 | - <span class="avatar-box" :class="{'avatar-opacity': authorBaseData.showAvatar}"> | ||
34 | - <WidgetAvatar :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar> | ||
35 | - </span> | 33 | + <WidgetAvatar class="avatar-box" :class="{'avatar-opacity': authorBaseData.showAvatar}" :src="authorBaseData.headIco" :group="authorBaseData.authGroupId" :width="100" :height="100"></WidgetAvatar> |
36 | <div class="author-section"> | 34 | <div class="author-section"> |
37 | <ul class="author-fans"> | 35 | <ul class="author-fans"> |
38 | <li v-for="item in fansList" :key="item.key"> | 36 | <li v-for="item in fansList" :key="item.key"> |
@@ -503,8 +501,6 @@ export default { | @@ -503,8 +501,6 @@ export default { | ||
503 | .avatar-box { | 501 | .avatar-box { |
504 | width: 150px; | 502 | width: 150px; |
505 | height: 150px; | 503 | height: 150px; |
506 | - overflow: hidden; | ||
507 | - border-radius: 50%; | ||
508 | opacity: 0; | 504 | opacity: 0; |
509 | transition: opacity 300ms ease-in-out; | 505 | transition: opacity 300ms ease-in-out; |
510 | 506 |
@@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
7 | @scroll-end="fetchList"> | 7 | @scroll-end="fetchList"> |
8 | <div class="user-list"> | 8 | <div class="user-list"> |
9 | <div v-for="(item, index) in list" :key="index" class="user-item"> | 9 | <div v-for="(item, index) in list" :key="index" class="user-item"> |
10 | - <WidgetAvatar class="head-ico" :src="item.headIcon" :width="100" :height="100" @click.native="toUserPage(item)"></WidgetAvatar> | 10 | + <WidgetAvatar class="head-ico" :src="item.headIcon" :group="item.authGroupId" :width="100" :height="100" @click.native="toUserPage(item)"></WidgetAvatar> |
11 | <div class="user-info" @click="toUserPage(item)"> | 11 | <div class="user-info" @click="toUserPage(item)"> |
12 | <p class="name">{{item.nickName}}</p> | 12 | <p class="name">{{item.nickName}}</p> |
13 | <p v-if="item.articleCount || item.fansCount" class="extra"> | 13 | <p v-if="item.articleCount || item.fansCount" class="extra"> |

1.08 KB
apps/statics/image/userpage/GF-big-ic.png
0 → 100755

12.5 KB
apps/statics/image/userpage/GF-small-ic.png
0 → 100755

9.7 KB
apps/statics/image/userpage/KING-ic.png
0 → 100755

13.8 KB
apps/statics/image/userpage/PP-big-ic.png
0 → 100755

12.2 KB
apps/statics/image/userpage/PP-small-ic.png
0 → 100755

9.6 KB
-
Please register or login to post a comment