优化帖子详情页展示

mlogclub · Mar 20, 2022 · b000217 · b000217
1 parent b4b00f7
commit b000217
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 78 deletions.
diff --git a/site/assets/styles/topic-detail.scss b/site/assets/styles/topic-detail.scss
@@ -1,9 +1,19 @@
 .topic-detail {
   margin-bottom: 20px;
+  background-color: var(--bg-color);
+  border-radius: 3px;
+
+  .topic-header,
+  .topic-content,
+  .topic-tags,
+  .topic-like-users,
+  .topic-actions {
+    margin: 0 16px 16px 16px;
+  }
 
   .topic-header {
     display: flex;
-    margin: 0 10px;
+    // margin: 0 10px;
 
     // @media screen and (max-width: 768px) {
     //   .topic-header-right {
@@ -48,21 +58,13 @@
     }
   }
 
-  .topic-content,
-  .topic-tags,
-  .topic-like-users,
-  .topic-actions {
-    margin: 20px 12px;
-  }
-
   .topic-content {
     font-size: 15px;
     color: var(--text-color);
     white-space: normal;
     word-break: break-all;
     word-wrap: break-word;
     padding-top: 0 !important;
-    margin: 0 12px;
 
     .topic-title {
       font-weight: 700;
@@ -192,30 +194,37 @@
 
   .topic-like-users {
     width: 80%;
-    margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    margin-bottom: 10px;
 
     .avatar-a {
-      margin-right: 3px;
+      margin-right: -3px;
+    }
+
+    .like-count {
+      margin-left: 8px;
+      font-size: 14px;
+      color: var(--text-color);
     }
   }
 
   .topic-actions {
-    margin: 20px auto;
-    padding: 0 25px;
+    padding: 10px 0;
     display: flex;
+    align-items: center;
     justify-content: space-between;
+    border-top: 1px solid var(--border-color);
 
     .action {
-      background: var(--bg-color);
-      cursor: pointer;
       flex: 1;
       display: flex;
       align-items: center;
-      flex-direction: column;
+      justify-content: center;
+      background: var(--bg-color);
+      cursor: pointer;
       color: var(--text-color3);
+      font-size: 14px;
 
       .checked-icon {
         color: var(--color-red);
@@ -234,22 +243,21 @@
       }
 
       > .action-icon {
-        font-size: 30px;
         fill: #8590a6;
       }
 
+      .action-text {
+        color: var(--text-color);
+        margin-left: 5px;
+      }
+
       &:hover {
         color: var(--text-link-color);
 
         > .action-icon {
           fill: var(--text-link-color);
         }
       }
-
-      > .content {
-        margin-top: 10px;
-        font-size: 12px;
-      }
     }
   }
 }
diff --git a/site/components/Avatar.vue b/site/components/Avatar.vue
@@ -65,6 +65,7 @@ export default {
         40: 'font-size: 20px;line-height: 40px;border-radius: 2px',
         35: 'font-size: 18px;line-height: 30px;border-radius: 2px',
         30: 'font-size: 18px;line-height: 30px;border-radius: 2px',
+        24: 'font-size: 12px;line-height: 24px;border-radius: 2px',
         20: 'font-size: 10px;line-height: 20px;border-radius: 2px',
       },
     }
@@ -181,6 +182,13 @@ export default {
   min-height: 30px;
   border-radius: 2px;
 }
+.avatar-size-24 {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 2px;
+}
 .avatar-size-20 {
   width: 20px;
   height: 20px;

diff --git a/site/components/Comment.vue b/site/components/Comment.vue
@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="comment-component">
     <div class="comment-header">
-      评论<span v-if="commentCount > 0">({{ commentCount }})</span>
+      <span v-if="commentCount > 0">{{ commentCount }}条评论</span>
+      <span v-else>评论</span>
     </div>
 
     <template v-if="isLogin">
@@ -105,32 +106,37 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.comment-header {
-  display: flex;
-  padding-top: 20px;
-  margin: 0 10px;
-  color: var(--text-color3);
-  font-size: 16px;
-}
+.comment-component {
+  background-color: var(--bg-color);
+  border-radius: 3px;
+  .comment-header {
+    display: flex;
+    padding-top: 20px;
+    margin: 0 10px;
+    color: var(--text-color);
+    font-size: 16px;
+    font-weight: 500;
+  }
 
-.comment-not-login {
-  margin: 10px;
-  border: 1px solid var(--border-color);
-  border-radius: 0;
-  overflow: hidden;
-  position: relative;
-  padding: 10px;
-  box-sizing: border-box;
+  .comment-not-login {
+    margin: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 0;
+    overflow: hidden;
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
 
-  .comment-login-div {
-    color: var(--text-color4);
-    cursor: pointer;
-    border-radius: 3px;
-    padding: 0 10px;
+    .comment-login-div {
+      color: var(--text-color4);
+      cursor: pointer;
+      border-radius: 3px;
+      padding: 0 10px;
 
-    a {
-      margin-left: 10px;
-      margin-right: 10px;
+      a {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
     }
   }
 }

diff --git a/site/pages/topic/_id.vue b/site/pages/topic/_id.vue
@@ -3,7 +3,7 @@
     <section class="main">
       <div class="container main-container left-main size-360">
         <div class="left-container">
-          <div class="main-content no-padding">
+          <div class="main-content no-padding no-bg">
             <article
               class="topic-detail"
               itemscope
@@ -108,22 +108,23 @@
                   :user="likeUser"
                   :round="true"
                   :has-border="true"
-                  size="30"
+                  size="24"
                 />
+                <span class="like-count">{{ topic.likeCount }}</span>
               </div>
 
               <!-- 功能按钮 -->
               <div class="topic-actions">
-                <a class="action disabled">
+                <div class="action disabled">
                   <i class="action-icon iconfont icon-read" />
-                  <span class="content">
+                  <div class="action-text">
                     <span>浏览</span>
-                    <span v-if="topic.viewCount > 0">
+                    <span v-if="topic.viewCount > 0" class="action-text">
                       ({{ topic.viewCount }})
                     </span>
-                  </span>
-                </a>
-                <a
+                  </div>
+                </div>
+                <div
                   class="action"
                   :class="{ disabled: liked }"
                   @click="like(topic)"
@@ -132,14 +133,14 @@
                     class="action-icon iconfont icon-like"
                     :class="{ 'checked-icon': liked }"
                   />
-                  <span class="content">
+                  <div class="action-text">
                     <span>点赞</span>
                     <span v-if="topic.likeCount > 0">
                       ({{ topic.likeCount }})
                     </span>
-                  </span>
-                </a>
-                <a class="action" @click="addFavorite(topic.topicId)">
+                  </div>
+                </div>
+                <div class="action" @click="addFavorite(topic.topicId)">
                   <i
                     class="action-icon iconfont"
                     :class="{
@@ -148,22 +149,22 @@
                       'checked-icon': favorited,
                     }"
                   />
-                  <span class="content">
+                  <div class="action-text">
                     <span>收藏</span>
-                  </span>
-                </a>
+                  </div>
+                </div>
               </div>
-
-              <!-- 评论 -->
-              <comment
-                :entity-id="topic.topicId"
-                :comments-page="commentsPage"
-                :comment-count="topic.commentCount"
-                :show-ad="false"
-                :mode="topic.type === 1 ? 'text' : 'markdown'"
-                entity-type="topic"
-              />
             </article>
+
+            <!-- 评论 -->
+            <comment
+              :entity-id="topic.topicId"
+              :comments-page="commentsPage"
+              :comment-count="topic.commentCount"
+              :show-ad="false"
+              :mode="topic.type === 1 ? 'text' : 'markdown'"
+              entity-type="topic"
+            />
           </div>
         </div>
         <div class="right-container">
@@ -173,11 +174,6 @@
             <!-- 展示广告 -->
             <adsbygoogle ad-slot="1742173616" />
           </div>
-
-          <div v-if="topic.toc" ref="toc" class="widget no-bg toc">
-            <div class="widget-header">目录</div>
-            <div class="widget-content" v-html="topic.toc" />
-          </div>
         </div>
       </div>
     </section>