Authored by yyq

img & text link

... ... @@ -9,7 +9,7 @@
<div class="main-detail">
<div class="article-context">
<div class="context-title">{{data.articleTitle}}</div>
<div class="context-rich-text" v-html="data.richText"></div>
<div ref="richText" class="context-rich-text" v-html="data.richText"></div>
</div>
<ArticleItemTopics v-if="data.topicList && data.topicList.length" class="topics-wrap" :data="data" :share="share"></ArticleItemTopics>
... ... @@ -76,6 +76,8 @@ export default {
if (!this.$yoho.isiOS) {
this.downgrade = true;
}
this.handleRechText();
},
computed: {
...mapState(['yoho']),
... ... @@ -137,6 +139,11 @@ export default {
return this.data.lazy;
}
},
watch: {
'data.richText': function() {
this.handleRechText();
}
},
methods: {
...mapMutations(['SET_STATUS_BAR_COLOR']),
onFollowAuthor(follow) {
... ... @@ -161,6 +168,15 @@ export default {
},
onActionComment() {
},
handleRechText() {
this.$nextTick(() => {
this.$refs.richText && this.$refs.richText.querySelectorAll('a').forEach(ele => {
if (ele.querySelector('img')) {
ele.classList.add('yoho-img-link');
}
});
});
}
},
components: {
ArticleDetailHeader,
... ... @@ -282,6 +298,50 @@ export default {
list-style: inherit;
}
}
a {
color: #468ee5;
position: relative;
display: inline-block;
&:before {
content: "";
display: inline-block;
width: 36px;
height: 36px;
margin-right: 8px;
background-image: url('~statics/image/article/link-text-icon.png');
background-size: cover;
vertical-align: sub;
position: relative;
top: -1px;
z-index: -1;
}
&.yoho-img-link:after {
content: "";
width: 36px;
height: 36px;
background-image: url('~statics/image/article/link-img-icon.png');
background-size: cover;
position: absolute;
right: 8px;
bottom: 8px;
z-index: 1;
}
> img {
margin-top: -50px;
display: block;
&:after {
content: "1312312";
position: absolute;
z-index: 1;
background-color: #000;
}
}
}
}
.topics-wrap {
... ...