From 72a3f0e12bbc87cda08003548a6c7d69d9485839 Mon Sep 17 00:00:00 2001 From: Leo <98382335+gaoziman@users.noreply.github.com> Date: Fri, 10 Oct 2025 21:07:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BC=A0=E6=89=BF=E4=BA=BA?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=92=8C=E8=B5=84=E8=AE=AF=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构InheritorCard底部统计信息布局，采用网格布局提升视觉效果 - 优化统计项的交互状态，添加悬停动画效果 - 修复NewsCard高度布局问题，确保卡片内容对齐一致 - 统一组件间距和颜色规范，提升整体视觉一致性 --- src/components/InheritorCard/index.css | 49 +++++++++++++++++++------- src/components/InheritorCard/index.tsx | 20 +++++------ src/components/NewsCard/index.css | 32 +++++++++++++++-- src/components/NewsCard/index.tsx | 4 +-- 4 files changed, 75 insertions(+), 30 deletions(-) diff --git a/src/components/InheritorCard/index.css b/src/components/InheritorCard/index.css index 4c852c2..3aa14e5 100644 --- a/src/components/InheritorCard/index.css +++ b/src/components/InheritorCard/index.css @@ -75,26 +75,49 @@ } .inheritor-card-footer { - padding-top: 16px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + margin-top: 12px; + padding-top: 12px; border-top: 1px solid #f0ebe3; } -.stat-item { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 13px; - color: #999999; +.inheritor-card .stat-item { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: center !important; + gap: 4px !important; + padding: 8px 6px !important; + background: #f5f0e8 !important; + border-radius: 6px !important; + white-space: nowrap !important; + transition: all 0.3s ease !important; + border: 1px solid #e8e3db !important; + min-height: 36px !important; } -.stat-item .anticon { - font-size: 14px; - color: #d4a574; +.inheritor-card .stat-item:hover { + background: #ffe7c8 !important; + border-color: #d4a574 !important; + transform: translateY(-1px) !important; } -.stat-item .ant-typography { - color: #999999; - font-size: 13px; +.inheritor-card .stat-item .anticon { + font-size: 14px !important; + color: #d4a574 !important; + flex-shrink: 0 !important; + margin: 0 !important; +} + +.inheritor-card .stat-item .ant-typography { + color: #666666 !important; + font-size: 12px !important; + font-weight: 600 !important; + white-space: nowrap !important; + margin: 0 !important; + line-height: 1 !important; } /* 响应式 */ diff --git a/src/components/InheritorCard/index.tsx b/src/components/InheritorCard/index.tsx index 2c4bafc..b08767e 100644 --- a/src/components/InheritorCard/index.tsx +++ b/src/components/InheritorCard/index.tsx @@ -3,7 +3,7 @@ */ import React from 'react' -import { Card, Avatar, Tag, Space, Typography } from 'antd' +import { Card, Avatar, Tag, Typography } from 'antd' import { UserOutlined, EyeOutlined, TeamOutlined } from '@ant-design/icons' import { Link } from 'react-router-dom' import type { Inheritor } from '@types/index' @@ -50,16 +50,14 @@ const InheritorCard: React.FC = ({ item, hoverable = true })
- - - - {item.followers.toLocaleString()} - - - - {item.viewCount.toLocaleString()} - - +
+ + {item.followers.toLocaleString()} +
+
+ + {item.viewCount.toLocaleString()} +
diff --git a/src/components/NewsCard/index.css b/src/components/NewsCard/index.css index 2c6fd7e..823f7de 100644 --- a/src/components/NewsCard/index.css +++ b/src/components/NewsCard/index.css @@ -3,6 +3,7 @@ .news-card-link { text-decoration: none; display: block; + height: 100%; } .news-card { @@ -10,6 +11,8 @@ overflow: hidden; transition: all 0.3s ease; height: 100%; + display: flex; + flex-direction: column; } .news-card:hover { @@ -54,9 +57,19 @@ padding: 4px 12px; } +/* Ant Design Card Body 样式覆盖 */ +.news-card .ant-card-body { + padding: 20px; + display: flex; + flex-direction: column; + flex: 1; +} + /* 卡片内容 */ .news-card-content { - padding: 4px 0 0 0; + display: flex; + flex-direction: column; + height: 100%; } .news-card-title { @@ -65,6 +78,7 @@ color: #2c2c2c; margin-bottom: 8px; line-height: 1.5; + height: 48px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -77,6 +91,7 @@ color: #666666; margin-bottom: 12px; line-height: 1.5; + height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -89,12 +104,16 @@ color: #666666; margin-bottom: 12px; line-height: 1.6; + height: 45px; } .news-card-meta { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; + min-height: 44px; + display: flex; + align-items: center; } .meta-item { @@ -102,10 +121,12 @@ align-items: center; gap: 6px; font-size: 13px; + white-space: nowrap; } .meta-item .anticon { color: #999999; + flex-shrink: 0; } .news-card-tags { @@ -113,6 +134,7 @@ display: flex; flex-wrap: wrap; gap: 6px; + min-height: 28px; } .news-tag { @@ -126,17 +148,21 @@ align-items: center; padding-top: 12px; border-top: 1px solid #f0f0f0; + margin-top: auto; + min-height: 40px; } -.stat-item { +.news-card-footer .stat-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; + white-space: nowrap; } -.stat-item .anticon { +.news-card-footer .stat-item .anticon { color: #999999; + flex-shrink: 0; } /* 响应式 */ diff --git a/src/components/NewsCard/index.tsx b/src/components/NewsCard/index.tsx index 935fd40..8a239d8 100644 --- a/src/components/NewsCard/index.tsx +++ b/src/components/NewsCard/index.tsx @@ -51,9 +51,7 @@ const NewsCard: React.FC = ({ item, hoverable = true }) => { >

{item.title}

- {item.subtitle && ( -

{item.subtitle}

- )} +

{item.subtitle || '\u00A0'}

{item.summary}