fix style

@@ -134,10 +134,11 @@ export default {
 
   .product-name {
     font-size: 24px;
+    line-height: 36px;
     color: #9b9b9b;
-    height: 68px;
+    height: 72px;
     padding-right: 10px;
-    margin-bottom: 30px;
+    margin-bottom: 26px;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;

 <template>
   <div v-if="topic" class="topic-wrap" @click="onClick">
-    <div class="topic-icon">
-      <span>#</span>
-    </div>
+    <div class="topic-icon"></div>
     <span class="topic-text">{{topic}}</span>
   </div>
 </template>
@@ -43,14 +41,8 @@ export default {
       border-radius: 50%;
       margin: 10px;
       text-align: center;
-      background-color: #222;
-
-      > span {
-        font-size: 24px;
-        color: #fff;
-        transform: scale(0.8, 0.8);
-        display: inline-block;
-      }
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAQAAABvygHQAAACGklEQVRIx7WXsUvDQBTGM/U/6NrhLlBKSRcXnYRuTi7SSQRx7GBxbRBEhbZLwcFVq3YRdXOoiB1aoatuXUIdBKHgkqGC1PPlJTnbNHdNY3IflHy95tfL3bt3L4oibUSjZdKkbdKnJjXhsw2uTDQlXCOaWicGYQIZ0LsYmqRog4yFQFdj+FUqEDCbUCv0ay7Q1UitZBNzkGqSdAIDXXXUpASZzpHBwkhLg3ROiIT1ZeFETV8sPPggLNIe7cwkZBMh5nJmbj1LRqv/RoLUylRcklEUUKD8xS0EMYtGtME3pHz3bDOrnXK/gf5SsMuczQu7WPrvJwjZ4f4I/Z5oXuv2SA05tIuQJe7v0eeFqcbeRfJZYiYgjIlv3sF/Su6AbUB1OXQNx3XD/TL6J9kwdIU0/bsOHN0hpMX9FfouXguwTQVyuW9XkCYYaVsh/aihpK+IMlMRVWI/PrCh0yvKWIo83a0jpMd9Hv3DnDQofHxb+wg55v4QfU2+WfvChbJ16wn0Z/Sb8pG2hSG1hXrzXaCi0ysOKT3ykCpbOSrqkNKECaUG6uGt13htqeWsveuFCUWW+h4RssL9OfqC/Eipz0nSQ0B8TPgX8N8sIy2FeIXlf5ysOqnE9RkAMvYa7DjBgsynetr1BHoB/UXQg8//iD7zBHoVfSnoER1TMRFL2RNTgRZTKRlT0RtTeR7Ti0RsrzxTEaHPvJzp0mWB9gvPWcQH0DXIXAAAAABJRU5ErkJggg==');
+      background-size: 100% 100%;
     }
 
     .topic-text {

@@ -21,8 +21,9 @@
       <div class="total hover-opacity" @click="onShowComment">查看{{data.commentCount}}条评论</div>
     </div>
     <div class="comment">
-      <WidgetAvatar :lazy="true" class="widget-avatar" :src="userHeadIco" :width="70" :height="70" @click.native="onComment"></WidgetAvatar>
+      <WidgetAvatar :lazy="true" class="widget-avatar" :src="userHeadIco" :width="70" :height="70" @click.native="commentClick"></WidgetAvatar>
       <CommentPlaceholder
+        ref="commentInput"
         :share="share"
         class="comment-input hover-opacity"
         :dest-id="data.articleId"
@@ -80,6 +81,9 @@ export default {
         return `${content.substring(0, 50)}...`;
       }
     },
+    commentClick() {
+      this.$refs.commentInput.$el.click();
+    },
     onComment() {
       this.ASYNC_ARTICLE_COMMENT({articleId: this.data.articleId, type: this.type});
       this.$emit('on-resize');

@@ -210,9 +210,9 @@ export default {
       });
     },
     onShowComment() {
-      if (this.data.commentCount) {
-        this.$emit('on-show-comment');
-      }
+      this.$emit('on-show-comment', {
+        commentCount: this.data.commentCount
+      });
     },
     onPraise() {
       if (this.data.hasPraise !== 'Y') {

@@ -7,7 +7,7 @@
       <ArticleItemIntro ref="articleIntro" :thumb="thumb" :type="type" :share="share" :data="introData" @on-expand="onExpand" @on-expanding="onExpanding" @on-show-guang="onShowGuang" @on-show-comment="onShowComment"
       :article-id="articleId" :pos-id="posId">
       </ArticleItemIntro>
-      <ArticleItemComment :thumb="thumb" :type="type" :share="share" :data="commentData" :user-head-ico="userHeadIco" @on-show-comment="onShowComment" @on-resize="onResize" :pos-id="posId" :article-id="data.articleId" ></ArticleItemComment>
+      <ArticleItemComment ref="comment" :thumb="thumb" :type="type" :share="share" :data="commentData" :user-head-ico="userHeadIco" @on-show-comment="onShowComment" @on-resize="onResize" :pos-id="posId" :article-id="data.articleId" ></ArticleItemComment>
     </slot>
     <div class="line"></div>
   </div>
@@ -123,8 +123,12 @@ export default {
       this.$emit('on-show-guang', {articleId: this.data.relateId, grassId: this.data.articleId});
       this.reportOpenGuang();
     },
-    onShowComment() {
-      this.$emit('on-show-comment', {articleId: this.data.articleId, index: this.index, commentCount: this.data.commentCount});
+    onShowComment({commentCount}) {
+      if (commentCount) {
+        this.$emit('on-show-comment', {articleId: this.data.articleId, index: this.index, commentCount: this.data.commentCount});
+      } else {
+        this.$refs.comment.commentClick();
+      }
     },
     onShowMore() {
       this.$emit('on-show-more', {article: this.data, index: this.index});

@@ -85,13 +85,13 @@ export default {
 <style lang="css">
   .wf-item {
     width: 100%;
-    padding: 6px;
+    padding: 5px;
     font-size: 24px;
 
     .wf-item-mid {
       border-radius: 2PX;
-      box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
       overflow: hidden;
+      background-color: #fff;
     }
 
     .layer-image {

@@ -48,7 +48,7 @@
         </div>
       </div>
       <p v-if="authorBaseData.signature" class="author-desc">{{authorBaseData.signature}}</p>
-      <div ref="tabBlock">
+      <div ref="tabBlock" class="tab-block">
         <FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
       </div>
       <div ref="contantList" class="contant-list" :style="`min-height: ${listMinHeight}px;`">
@@ -478,7 +478,6 @@ export default {
     }
   }
 
-
   .header-share {
     margin-right: 26px;
     color: #222;
@@ -591,10 +590,28 @@ export default {
     white-space: nowrap;
   }
 
+  .tab-block {
+    position: relative;
+
+    &:before {
+      content: "";
+      height: 1px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      background-color: #f4f4f4;
+    }
+  }
+
   .contant-list {
     position: relative;
   }
 
+  .pannel-wrap {
+    background-color: #f7f7f7;
+  }
+
   .empty-tip {
     width: 100%;
     display: flex;

@@ -193,7 +193,7 @@ export default {
 
 <style lang="css">
   .sr-list {
-    padding: 0 8px;
+    padding: 5px;
     display: flex;
     align-items: flex-start;