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}