文章归档页面加入了时间线显示

changbin1997 · May 27, 2022 · 30524d4 · 30524d4
1 parent 0057db5
commit 30524d4
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 48 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1038,50 +1038,110 @@ footer {
 /*独立页面-文章归档*/
 .archive {
   @extend .article-page;
-}
-
-//  独立页面-友情链接
-.link-box {
-  background: #f9f9f9;
-  margin: 0 0 20px 0;
-  .link-grid {
-    padding: 15px;
-    border-radius: 4px;
-    .link {
-      background: #ffffff;
-      box-shadow: 0 2px 0 rgba(170, 170, 170, 0.1);
-      padding: 10px;
+  .archives {
+    position: relative;
+    &::before {
+      width: 2px;
+      height: 100%;
+      background: #BBBBBB;
       display: block;
-      .link-logo {
-        width: 32px;
-        height: 32px;
-        margin: 0 10px 0 0;
-      }
-      .icon-logo {
-        background: #0a73b3;
-        color: #ffffff;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 49px;
+    }
+    .archives-item {
+      position: relative;
+      h2 {
+        font-size: 12px !important;
+        background: #FCFCFC;
+        width: 84px;
+        line-height: 24px;
         text-align: center;
-        line-height: 32px;
+        border-radius: 4px;
+        position: relative;
+        z-index: 10;
+        left: 8px;
+        cursor: pointer;
+        border: 1px solid #BBBBBB;
       }
-      .link-name {
-        display: inline-block;
-        line-height: 32px;
+      ul {
+        padding-left: 0;
+        list-style: none;
+        li {
+          font-size: 14px;
+          display: flex;
+          align-items: center;
+          padding: 6px 0;
+          &:hover {
+            .timeline {
+              background: #6C757D;
+            }
+          }
+          .day {
+            display: block;
+            width: 36px;
+            text-align: center;
+            flex: none;
+          }
+          .timeline {
+            width: 8px;
+            height: 8px;
+            background: #BBBBBB;
+            border-radius: 50%;
+            margin: 0 10px;
+            flex: none;
+          }
+        }
       }
-      p {
-        font-size: 12px;
-        margin: 10px 0 0 0;
-        line-height: 18px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    }
+  }
+}
+
+//  独立页面-友情链接
+.link-page {
+  .link-box {
+    background: #f9f9f9;
+    margin: 0 0 20px 0;
+    .link-grid {
+      padding: 15px;
+      border-radius: 4px;
+      .link {
+        background: #ffffff;
+        box-shadow: 0 2px 0 rgba(170, 170, 170, 0.1);
+        padding: 10px;
+        display: block;
+        .link-logo {
+          width: 32px;
+          height: 32px;
+          margin: 0 10px 0 0;
+        }
+        .icon-logo {
+          background: #0a73b3;
+          color: #ffffff;
+          text-align: center;
+          line-height: 32px;
+        }
+        .link-name {
+          display: inline-block;
+          line-height: 32px;
+        }
+        p {
+          font-size: 12px;
+          margin: 10px 0 0 0;
+          line-height: 18px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        img {
+          background: #E0E0E0;
+        }
       }
-      img {
-        background: #E0E0E0;
+      .link:hover {
+        box-shadow: 1px 5px 1px rgba(170, 170, 170, 0.1);
       }
     }
-    .link:hover {
-      box-shadow: 1px 5px 1px rgba(170, 170, 170, 0.1);
-    }
   }
 }