添加圈子页面👭

2025-03-08 14:36:43 +08:00
parent 68d5f36a26
commit c2f12f9abe
7 changed files with 181 additions and 1 deletions
@@ -0,0 +1,89 @@
+  // 说说页评论
+  .vh-friends {
+    min-height: 56vh;
+
+    &>main {
+      margin: 1.25rem 0;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+
+      &>article {
+        box-sizing: border-box;
+        padding: 1rem;
+        width: 100%;
+        height: max-content;
+        border-radius: 0.5rem;
+        box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
+        background: #fff linear-gradient(90deg, #EDEEF388, #fff) no-repeat 100% 100% / 0 1px;
+        background-position: 0 100%;
+        background-size: 0 100%;
+        transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s;
+        overflow: hidden;
+
+        &:hover {
+          background-size: 100% 100%;
+        }
+
+        &>a {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          width: 100%;
+          height: max-content;
+
+          &>header {
+            &>h2 {
+              font-size: 1.08rem;
+            }
+          }
+
+          &>p {
+            color: #26262680;
+            font-size: 0.875rem;
+            line-height: 1.8;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            text-overflow: ellipsis;
+            word-break: break-all;
+            overflow: hidden;
+          }
+
+          &>footer {
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            height: max-content;
+
+            &>span,
+            &>time {
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+              gap: 0.5rem;
+              width: max-content;
+              height: 1.56rem;
+              font-size: 0.8rem;
+
+              &>img {
+                width: 1.56rem;
+                height: 1.56rem;
+                border-radius: 50%;
+              }
+            }
+
+            &>time {
+              padding: 0.5rem;
+              background: #F7F7F7;
+              border-radius: 0.8rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 888px) {}