新增文章块列表组件

2026-07-08 05:12:48 +08:00 · 2023-07-29 16:24:47 +08:00
parent 570c9944ab
commit 2f36a745f9
9 changed files with 179 additions and 3 deletions
--- a/source/components/list/ul-post-block-list/_index.scss
+++ b/source/components/list/ul-post-block-list/_index.scss
@@ -0,0 +1,65 @@
+.ul-post-block-list {
+
+    $spaceSize: 8px;
+    $colCount: 3;
+
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: -$spaceSize;
+
+
+
+
+    .ul-post-block-item {
+        margin: $spaceSize;
+        width: calc((100%/$colCount) - $spaceSize * 2);
+        align-self: normal;
+
+        &:hover {
+            background-color: #efefef;
+        }
+
+        .poster {
+            width: 100%;
+            height: 120px;
+        }
+
+        .title {
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+            color: #333;
+
+            padding: 6px;
+        }
+
+        .desc {
+            padding: 0 6px 6px 6px;
+            font-size: 12px;
+            line-height: 20px;
+            color: #999;
+        }
+    }
+
+    &.fixed-height {
+        .ul-post-block-item {
+            .title {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+            }
+
+            .desc {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}