修改话题样式

mlogclub · Sep 12, 2019 · 7ed3fb8 · 7ed3fb8
1 parent 8b414ae
commit 7ed3fb8
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 199 deletions.
diff --git a/site/assets/styles/main.scss b/site/assets/styles/main.scss
@@ -1,2 +1,3 @@
 @import "./common";
 @import "./markdown";
+@import "./topic";
diff --git a/site/assets/styles/markdown.scss b/site/assets/styles/markdown.scss
@@ -1,13 +1,19 @@
 pre {
-  background: #23241f;
   margin: 10px 0;
-  padding: 5px 10px !important;
-  // padding: 0!important;
+  padding: 0!important;
   overflow: auto;
   font-size: 13px;
-  // color: #4d4d4c;
-  color: #fff;
   line-height: 1.5;
+  background: #272822;
+  color: #ddd;
+
+  code {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: #272822;
+    color: #ddd;
+  }
 }
 
 // .hljs {

diff --git a/site/assets/styles/topic.scss b/site/assets/styles/topic.scss
@@ -0,0 +1,129 @@
+.topic-wrap {
+    .header {
+        display: flex;
+
+        .left {
+            min-width: 48px;
+            min-height: 48px;
+
+            .avatar {
+                min-width: 48px;
+                min-height: 48px;
+                width: 48px;
+                height: 48px;
+            }
+        }
+
+        .center {
+            width: 100%;
+            margin-left: 8px;
+
+            .topic-title {
+                color: #555;
+                font-size: 16px;
+                line-height: 21px;
+                font-weight: normal;
+                overflow: hidden;
+                word-break: break-all;
+                -webkit-line-clamp: 2;
+                text-overflow: ellipsis;
+                -webkit-box-orient: vertical;
+                display: -webkit-box;
+            }
+
+            .topic-meta {
+                position: relative;
+                font-size: 12px;
+                line-height: 24px;
+                color: #bbb;
+                margin-top: 3px;
+                display: flex;
+
+                .meta-item {
+                    font-size: 12px;
+
+                    &:not(:last-child) {
+                        margin-right: 8px;
+                    }
+
+                    &.act {
+                        a {
+                            font-size: 12px;
+                            color: #3273dc;
+
+                            i {
+                                font-size: 12px;
+                                color: #000;
+                            }
+                        }
+                    }
+
+                    .tag {
+                        height: auto !important;
+
+                        &:not(:last-child) {
+                            margin-right: 3px;
+                        }
+                    }
+                }
+
+                a {
+                    color: #778087;
+                }
+            }
+        }
+
+        .right {
+            min-width: 100px;
+            max-width: 100px;
+            text-align: right;
+            padding-right: 8px;
+
+            .like {
+                font-size: 12px;
+
+                .like-btn {
+                    transition: all 0.5s;
+                    cursor: pointer;
+
+                    background-color: rgba(126, 107, 1, 0.08);
+                    color: #e7672e;
+                    // padding: 0;
+                    // display: inline-block;
+                    // height: 20px;
+                    // width: 20px;
+                    // line-height: 20px;
+                    // border-radius: 10px;
+                    // text-align: center;
+                    padding: 4px;
+                    border-radius: 50%;
+
+                    &:hover,
+                    &.liked {
+                        color: #fff;
+                        background-color: #e7672e;
+                    }
+                }
+
+                .like-count {
+                    font-weight: bold;
+                    color: #e7672e;
+
+                    &::before {
+                        content: " x ";
+                    }
+                }
+            }
+
+            .count {
+                font-size: 12px;
+                color: #fff;
+
+                background: #aab0c6;
+                padding: 2px 10px;
+                border-radius: 6px;
+                font-weight: 700;
+            }
+        }
+    }
+}
diff --git a/site/components/TopicList.vue b/site/components/TopicList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="topic-list">
+  <ul class="topic-list topic-wrap">
     <template v-for="(topic, index) in topics">
       <li v-if="showAd && (index === 3)" :key="'ad-' + index ">
         <div class="ad">
@@ -17,7 +17,7 @@
         </div>
       </li>
       <li :key="topic.topicId">
-        <div class="topic-item">
+        <div class="header">
           <div class="left">
             <div
               class="avatar avatar-size-45 is-rounded"
@@ -118,121 +118,6 @@ export default {
     // &:not(:last-child) {
     //   border-bottom: 1px dashed #f2f2f2;
     // }
-
-    .topic-item {
-      display: flex;
-
-      .left {
-        min-width: 48px;
-        min-height: 48px;
-
-        .avatar {
-          min-width: 48px;
-          min-height: 48px;
-          width: 48px;
-          height: 48px;
-        }
-      }
-
-      .center {
-        width: 100%;
-        margin-left: 8px;
-
-        .topic-title {
-          color: #555;
-          font-size: 16px;
-          line-height: 21px;
-          font-weight: normal;
-          overflow: hidden;
-          word-break: break-all;
-          -webkit-line-clamp: 2;
-          text-overflow: ellipsis;
-          -webkit-box-orient: vertical;
-          display: -webkit-box;
-        }
-
-        .topic-meta {
-          position: relative;
-          font-size: 12px;
-          line-height: 24px;
-          color: #bbb;
-          margin-top: 3px;
-          display: flex;
-
-          .meta-item {
-            font-size: 12px;
-
-            &:not(:last-child) {
-              margin-right: 8px;
-            }
-
-            .tag {
-              height: auto !important;
-
-              &:not(:last-child) {
-                margin-right: 3px;
-              }
-            }
-          }
-
-          a {
-            color: #778087;
-          }
-        }
-      }
-
-      .right {
-        min-width: 100px;
-        max-width: 100px;
-        text-align: right;
-        padding-right: 8px;
-
-        .like {
-          font-size: 12px;
-
-          .like-btn {
-            transition: all 0.5s;
-            cursor: pointer;
-
-            background-color: rgba(126, 107, 1, 0.08);
-            color: #e7672e;
-            // padding: 0;
-            // display: inline-block;
-            // height: 20px;
-            // width: 20px;
-            // line-height: 20px;
-            // border-radius: 10px;
-            // text-align: center;
-            padding: 4px;
-            border-radius: 50%;
-
-            &:hover, &.liked  {
-              color: #fff;
-              background-color: #e7672e;
-            }
-          }
-
-          .like-count {
-            font-weight: bold;
-            color: #e7672e;
-
-            &::before {
-              content: " x ";
-            }
-          }
-        }
-
-        .count {
-          font-size: 12px;
-          color: #fff;
-
-          background: #aab0c6;
-          padding: 2px 10px;
-          border-radius: 6px;
-          font-weight: 700;
-        }
-      }
-    }
   }
 }
 </style>