对接首页通知公告和友情链接和关于我们

src/pages/index/index.less

@@ -31,43 +31,70 @@
 }
 .noticeList {
   padding: 10px 0;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  .noticeName {
-    font-size: 18px;
+  .noticeTitle {
+    font-size: 22px;
     font-weight: 600;
-    color: @main-danger-color;
-    width: 50px;
-    line-height: 20px;
-    text-align: center;
+    color: @main-color;
+    padding: 10px 7px;
   }
   .noticeItem {
-    margin-right: 20px;
-    flex: 1;
-    width: 0;
-    .cardTitle {
+    background-color: #fff;
+    padding: 24px;
+    border-radius: 16px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
+    height: 249px;
+    .title {
+      margin: 14px 0;
+      font-size: 20px;
+      font-weight: 600;
+      // 超过两行显示省略号
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 63px;
+    }
+    .content{
+      font-size: 16px;
+      color: @main-text-color-2;
+      // 超过两行显示省略号
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .button{
+      color: @main-color;
+      font-size: 16px;
+      margin-top: 14px;
+      cursor: pointer;
+    }
+    .header {
       display: flex;
       justify-content: space-between;
-      .cardTitleText {
-        font-size: 18px;
-        font-weight: 600;
-        color: @main-color;
-        cursor: pointer;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      .cardTitleTime {
+      align-items: center;
+      .time {
+        font-size: 14px;
         color: @main-text-color-2;
       }
-    }
-    .cardContent {
-      color: @main-text-color-2;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      margin-bottom: 0;
+      .type {
+        display: inline-block;
+        background-color: @main-color;
+        color: #fff;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 20px;
+        &.primary {
+          background-color: rgba(59, 130, 246, 0.1);
+          color: #3b82f6;
+        }
+        &.danger {
+          background-color: rgba(255, 77, 77, 0.1);
+          color: #ff4d4d;
+        }
+      }
     }
   }
 }
@@ -136,7 +163,7 @@
       }
     }
   }
-  .search{
+  .search {
     height: 100%;
   }
 }