img & text link

@@ -9,7 +9,7 @@
     <div class="main-detail">
     <div class="main-detail">
       <div class="article-context">
       <div class="article-context">
         <div class="context-title">{{data.articleTitle}}</div>
         <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>
       </div>
 
 
       <ArticleItemTopics v-if="data.topicList && data.topicList.length" class="topics-wrap" :data="data" :share="share"></ArticleItemTopics>
       <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) {
     if (!this.$yoho.isiOS) {
       this.downgrade = true;
       this.downgrade = true;
     }
     }
+
+    this.handleRechText();
   },
   },
   computed: {
   computed: {
     ...mapState(['yoho']),
     ...mapState(['yoho']),
@@ -137,6 +139,11 @@ export default {
       return this.data.lazy;
       return this.data.lazy;
     }
     }
   },
   },
+  watch: {
+    'data.richText': function() {
+      this.handleRechText();
+    }
+  },
   methods: {
   methods: {
     ...mapMutations(['SET_STATUS_BAR_COLOR']),
     ...mapMutations(['SET_STATUS_BAR_COLOR']),
     onFollowAuthor(follow) {
     onFollowAuthor(follow) {
@@ -161,6 +168,15 @@ export default {
     },
     },
     onActionComment() {
     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: {
   components: {
     ArticleDetailHeader,
     ArticleDetailHeader,
@@ -282,6 +298,50 @@ export default {
       list-style: inherit;
       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 {
 .topics-wrap {