...
|
...
|
@@ -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 {
|
...
|
...
|
|