topic

 <template>
 <template>
   <div v-if="topic" class="topic-wrap" @click="onClick">
   <div v-if="topic" class="topic-wrap" @click="onClick">
-    <div class="topic-icon">#</div>
+    <div class="topic-icon">
+      <span>#</span>
+    </div>
     <span class="topic-text">{{topic}}</span>
     <span class="topic-text">{{topic}}</span>
   </div>
   </div>
 </template>
 </template>
@@ -35,23 +37,19 @@ export default {
     }
     }
 
 
     .topic-icon {
     .topic-icon {
-      width: 38px;
-      height: 38px;
-      line-height: 38px;
-      font-size: 28px;
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
       border-radius: 50%;
       border-radius: 50%;
-      margin: 5px;
+      margin: 10px;
       text-align: center;
       text-align: center;
-      color: #fff;
       background-color: #222;
       background-color: #222;
-      transform: scale(0.8, 0.8);
 
 
-
-      .iconfont {
+      > span {
         font-size: 24px;
         font-size: 24px;
         color: #fff;
         color: #fff;
-        display: block;
-        transform: scale(0.76, 0.76);
+        transform: scale(0.8, 0.8);
+        display: inline-block;
       }
       }
     }
     }
 
 

@@ -9,10 +9,10 @@
     <div class="topics">
     <div class="topics">
       <WidgetTopic
       <WidgetTopic
         :share="share"
         :share="share"
-        :topic="label.labelName"
-        @click.native="onTopic(label)"
-        v-for="label in data.labelList"
-        :key="label.labelId">
+        :topic="topic.topicName"
+        @click.native="onTopic(topic)"
+        v-for="topic in data.topicList"
+        :key="topic.topicId">
       </WidgetTopic>
       </WidgetTopic>
     </div>
     </div>
     <div class="widgets">
     <div class="widgets">
@@ -152,7 +152,7 @@ export default {
       }
       }
       this.$refs.intro && this.$refs.intro.addEventListener('transitionend', this.onExpand.bind(this));
       this.$refs.intro && this.$refs.intro.addEventListener('transitionend', this.onExpand.bind(this));
     },
     },
-    onTopic({labelId, labelName}) {
+    onTopic({topicId, topicName}) {
       if (this.share) {
       if (this.share) {
         return this.$links.toDownloadApp();
         return this.$links.toDownloadApp();
       }
       }
@@ -163,12 +163,12 @@ export default {
       this.$router.push({
       this.$router.push({
         name: 'topic',
         name: 'topic',
         params: {
         params: {
-          topicId: labelId,
-          topicName: labelName
+          topicId: topicId,
+          topicName: topicName
         }
         }
       });
       });
 
 
-      this.reportLabel(labelId);
+      this.reportLabel(topicId);
     },
     },
     onShare() {
     onShare() {
       this.$yoho.share({
       this.$yoho.share({

@@ -70,7 +70,7 @@ export default {
         introHeight: this.data.introHeight,
         introHeight: this.data.introHeight,
         introCollapseHeight: this.data.introCollapseHeight,
         introCollapseHeight: this.data.introCollapseHeight,
         articleType: this.data.articleType,
         articleType: this.data.articleType,
-        labelList: this.data.labelList,
+        topicList: this.data.topicList,
         hasFavor: this.articleState.hasFavor,
         hasFavor: this.articleState.hasFavor,
         hasPraise: this.articleState.hasPraise,
         hasPraise: this.articleState.hasPraise,
         commentCount: this.articleState.commentCount,
         commentCount: this.articleState.commentCount,