diff --git a/jero-web/src/assets/icon_link_document.png b/jero-web/src/assets/icon_link_document.png
new file mode 100644
index 000000000..c23dc978d
Binary files /dev/null and b/jero-web/src/assets/icon_link_document.png differ
diff --git a/jero-web/src/assets/icon_star_document.png b/jero-web/src/assets/icon_star_document.png
new file mode 100644
index 000000000..580dcb5ab
Binary files /dev/null and b/jero-web/src/assets/icon_star_document.png differ
diff --git a/jero-web/src/assets/icon_wiki.png b/jero-web/src/assets/icon_wiki.png
new file mode 100644
index 000000000..9bdaee314
Binary files /dev/null and b/jero-web/src/assets/icon_wiki.png differ
diff --git a/jero-web/src/views/phoneView/documentDetails.vue b/jero-web/src/views/phoneView/documentDetails.vue
index e30aac0fc..38bf80073 100644
--- a/jero-web/src/views/phoneView/documentDetails.vue
+++ b/jero-web/src/views/phoneView/documentDetails.vue
@@ -8,12 +8,14 @@
     </div>
     <div class="header-right">
       <div class="header-right-text" @click="subscribeClick">
-        <img src="~@/assets/icon_link.png" alt="">
-        <span>{{$t('subscribe')}}</span>
+        <img v-if="subscribeFlag == '1'" src="~@/assets/icon_link_document.png" alt="">
+        <img v-else src="~@/assets/icon_link.png" alt="">
+        <span :class="{'header-right-text-color':subscribeFlag == '1'?true:false}">{{$t('subscribe')}}</span>
       </div>
       <div class="header-right-text" @click="collectionClick">
-        <img src="~@/assets/icon_star.png" alt="">
-        <span>{{$t('Collection')}}</span>
+        <img v-if="collectFlag == '1'" src="~@/assets/icon_star_document.png" alt="">
+        <img v-else src="~@/assets/icon_star.png" alt="">
+        <span :class="{'header-right-text-color':collectFlag == '1'?true:false}">{{$t('Collection')}}</span>
       </div>
     </div>
     <van-collapse class="collapse" v-model="activeNames">
@@ -130,6 +132,7 @@
     mounted() {
       document.title = 'NIO GRP'
       let _this = this
+      this.getWdkCollectAndSubscribeInfoByUser()
       this.getTitle(function() {
         _this.getInfoById()
       })
@@ -137,6 +140,7 @@
     watch: {
       '$route': function(res) {
         let _this = this
+        this.getWdkCollectAndSubscribeInfoByUser()
         this.getTitle(function() {
           _this.getInfoById()
         })
@@ -146,6 +150,22 @@
       iconClick() {
         this.$router.go(-1)
       },
+      getWdkCollectAndSubscribeInfoByUser() {
+        getAction('/phone/search/getWdkCollectAndSubscribeInfoByUser', { id: this.$route.query.id }).then((res) => {
+          if (res.success) {
+            if (res.result.subscribeList && res.result.subscribeList.length > 0) {
+              this.subscribeFlag = '1'
+            } else {
+              this.subscribeFlag = '0'
+            }
+            if (res.result.collectionList && res.result.collectionList.length > 0) {
+              this.collectFlag = '1'
+            } else {
+              this.collectFlag = '0'
+            }
+          }
+        })
+      },
       getTitle(callback) {
         this.show = true
         let _id = this.$route.query.id
@@ -179,6 +199,7 @@
         getAction(url, { id: this.$route.query.id }).then((res) => {
           if (res.success) {
             Toast(this.$t('OperationSuccessful'))
+            this.getWdkCollectAndSubscribeInfoByUser()
           } else {
             Toast(this.$t('operationFailed'))
           }
@@ -194,6 +215,7 @@
         getAction(url, { id: this.$route.query.id }).then((res) => {
           if (res.success) {
             Toast(this.$t('OperationSuccessful'))
+            this.getWdkCollectAndSubscribeInfoByUser()
           } else {
             Toast(this.$t('operationFailed'))
           }
@@ -504,4 +526,8 @@
     align-items: center;
     justify-content: center;
   }
+
+  .header-right-text-color {
+    color: #01A0AC!important;
+  }
 </style>
\ No newline at end of file