diff --git a/src/constants/importanceLevels.js b/src/constants/importanceLevels.js
index f53d1e40..e84b959f 100644
--- a/src/constants/importanceLevels.js
+++ b/src/constants/importanceLevels.js
@@ -24,6 +24,7 @@ export const IMPORTANCE_LEVELS = {
icon: WarningIcon,
label: '极高',
stampText: '极', // 印章文字
+ stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体
dotBg: 'red.800',
description: '重大事件,市场影响深远',
antdColor: '#cf1322',
@@ -39,6 +40,7 @@ export const IMPORTANCE_LEVELS = {
icon: WarningTwoIcon,
label: '高',
stampText: '高', // 印章文字
+ stampFont: "'STXingkai', 'FangSong', 'STFangsong', cursive", // 行楷/草书
dotBg: 'red.600',
description: '重要事件,影响较大',
antdColor: '#ff4d4f',
@@ -54,6 +56,7 @@ export const IMPORTANCE_LEVELS = {
icon: InfoIcon,
label: '中',
stampText: '中', // 印章文字
+ stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体
dotBg: 'red.500',
description: '普通事件,有一定影响',
antdColor: '#ff7875',
@@ -64,11 +67,12 @@ export const IMPORTANCE_LEVELS = {
bgColor: 'red.50',
borderColor: 'red.100',
colorScheme: 'red',
- badgeBg: '#6b7280', // 圆形徽章背景色 - 灰色
+ badgeBg: '#10b981', // 圆形徽章背景色 - 青绿色(替代灰色)
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: CheckCircleIcon,
label: '低',
stampText: '低', // 印章文字
+ stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体
dotBg: 'red.400',
description: '参考事件,影响有限',
antdColor: '#ffa39e',
diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
index 6ef496f9..8a0ca736 100644
--- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
@@ -15,7 +15,7 @@ import {
import { getImportanceConfig } from '../../../../constants/importanceLevels';
// 导入子组件
-import ImportanceBadge from './ImportanceBadge';
+import ImportanceStamp from './ImportanceStamp';
import EventTimeline from './EventTimeline';
import EventFollowButton from './EventFollowButton';
import StockChangeIndicators from '../../../../components/StockChangeIndicators';
@@ -57,6 +57,40 @@ const HorizontalDynamicNewsEventCard = ({
const selectedBorderColor = useColorModeValue('blue.500', 'blue.400');
const linkColor = useColorModeValue('blue.600', 'blue.400');
+ /**
+ * 根据平均涨幅计算背景色(分级策略)- 使用毛玻璃效果
+ * @param {number} avgChange - 平均涨跌幅
+ * @returns {string} Chakra UI 颜色值
+ */
+ const getChangeBasedBgColor = (avgChange) => {
+ const numChange = Number(avgChange);
+
+ // 如果没有涨跌幅数据,使用半透明背景
+ if (avgChange == null || isNaN(numChange)) {
+ return useColorModeValue('rgba(255, 255, 255, 0.8)', 'rgba(26, 32, 44, 0.8)');
+ }
+
+ // 根据涨跌幅分级返回半透明背景色(毛玻璃效果)
+ const absChange = Math.abs(numChange);
+ if (numChange > 0) {
+ // 涨:红色系半透明
+ if (absChange >= 9) return useColorModeValue('rgba(254, 202, 202, 0.9)', 'rgba(127, 29, 29, 0.9)');
+ if (absChange >= 7) return useColorModeValue('rgba(254, 202, 202, 0.8)', 'rgba(153, 27, 27, 0.8)');
+ if (absChange >= 5) return useColorModeValue('rgba(254, 226, 226, 0.8)', 'rgba(185, 28, 28, 0.8)');
+ if (absChange >= 3) return useColorModeValue('rgba(254, 226, 226, 0.7)', 'rgba(220, 38, 38, 0.7)');
+ return useColorModeValue('rgba(254, 242, 242, 0.7)', 'rgba(239, 68, 68, 0.7)');
+ } else if (numChange < 0) {
+ // 跌:绿色系半透明
+ if (absChange >= 9) return useColorModeValue('rgba(187, 247, 208, 0.9)', 'rgba(20, 83, 45, 0.9)');
+ if (absChange >= 7) return useColorModeValue('rgba(187, 247, 208, 0.8)', 'rgba(22, 101, 52, 0.8)');
+ if (absChange >= 5) return useColorModeValue('rgba(209, 250, 229, 0.8)', 'rgba(21, 128, 61, 0.8)');
+ if (absChange >= 3) return useColorModeValue('rgba(209, 250, 229, 0.7)', 'rgba(22, 163, 74, 0.7)');
+ return useColorModeValue('rgba(240, 253, 244, 0.7)', 'rgba(34, 197, 94, 0.7)');
+ }
+
+ return useColorModeValue('rgba(255, 255, 255, 0.8)', 'rgba(26, 32, 44, 0.8)');
+ };
+
return (
{/* 左侧时间轴 */}
@@ -67,88 +101,93 @@ const HorizontalDynamicNewsEventCard = ({
minHeight="60px"
/>
- {/* 右侧事件卡片 */}
- onEventClick?.(event)}
- >
-
- {/* 左上角:重要性标签 */}
-
+ {/* 右侧事件卡片容器(带印章) */}
+
+ {/* 右上角:重要性印章(放在卡片外层) */}
+
+
+
- {/* 右上角:关注按钮 */}
-
- onToggleFollow?.(event.id)}
- size="xs"
- showCount={false}
- />
-
+ {/* 事件卡片 */}
+ onEventClick?.(event)}
+ >
+
+ {/* 右上角:关注按钮 */}
+
+ onToggleFollow?.(event.id)}
+ size="xs"
+ showCount={false}
+ />
+
-
- {/* 标题 - 最多两行,hover 显示完整内容 */}
-
- onTitleClick?.(e, event)}
- mt={1}
- paddingRight="10px"
+
+ {/* 标题 - 最多两行,hover 显示完整内容 */}
+
- onTitleClick?.(e, event)}
+ mt={1}
+ paddingRight="10px"
>
- {event.title}
-
-
-
+
+ {event.title}
+
+
+
- {/* 第二行:涨跌幅数据 */}
-
-
-
-
+ {/* 第二行:涨跌幅数据 */}
+
+
+
+
+
);
};
diff --git a/src/views/Community/components/EventCard/ImportanceStamp.js b/src/views/Community/components/EventCard/ImportanceStamp.js
index 2a2f6e5a..f7df9caf 100644
--- a/src/views/Community/components/EventCard/ImportanceStamp.js
+++ b/src/views/Community/components/EventCard/ImportanceStamp.js
@@ -13,13 +13,23 @@ import { getImportanceConfig } from '../../../../constants/importanceLevels';
* 重要性印章组件(模拟盖章效果)
* @param {Object} props
* @param {string} props.importance - 重要性等级 (S/A/B/C)
+ * @param {string} props.size - 印章尺寸 ('sm' | 'md' | 'lg')
*/
-const ImportanceStamp = ({ importance }) => {
+const ImportanceStamp = ({ importance, size = 'md' }) => {
const config = getImportanceConfig(importance);
// 印章颜色
const stampColor = useColorModeValue(config.badgeBg, config.badgeBg);
+ // 尺寸配置
+ const sizeConfig = {
+ sm: { outer: '40px', inner: '34px', fontSize: 'md', borderOuter: '2px', borderInner: '1.5px' },
+ md: { outer: '50px', inner: '42px', fontSize: 'xl', borderOuter: '3px', borderInner: '2px' },
+ lg: { outer: '60px', inner: '52px', fontSize: '2xl', borderOuter: '4px', borderInner: '2.5px' },
+ };
+
+ const currentSize = sizeConfig[size];
+
return (
{
{/* 外层圆形边框(双圈) */}
{/* 内层圆形边框 */}
{/* 印章文字 */}
{config.stampText}