From aa1a93c65bf0f966e2beaf3e439b1b382a9cf429 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 15:19:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E8=A6=81=E6=80=A7=E5=BE=BD?=
 =?UTF-8?q?=E7=AB=A0=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=EF=BC=88=E5=9C=86?=
 =?UTF-8?q?=E5=BD=A2=E8=AE=BE=E8=AE=A1=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/importanceLevels.js             | 12 ++++--
 .../HorizontalDynamicNewsEventCard.js         | 41 +++++++++----------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/constants/importanceLevels.js b/src/constants/importanceLevels.js
index 3e3ffd6f..13f2f606 100644
--- a/src/constants/importanceLevels.js
+++ b/src/constants/importanceLevels.js
@@ -19,7 +19,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.200',
         colorScheme: 'red',
-        badgeBg: 'red.800', // 角标边框和文字颜色 - 极深红色
+        badgeBg: '#dc2626', // 圆形徽章背景色 - 红色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: WarningIcon,
         label: '极高',
         dotBg: 'red.800',
@@ -32,7 +33,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.200',
         colorScheme: 'red',
-        badgeBg: 'red.600', // 角标边框和文字颜色 - 深红色
+        badgeBg: '#ea580c', // 圆形徽章背景色 - 橙色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: WarningTwoIcon,
         label: '高',
         dotBg: 'red.600',
@@ -45,7 +47,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.100',
         colorScheme: 'red',
-        badgeBg: 'red.500', // 角标边框和文字颜色 - 中红色
+        badgeBg: '#2563eb', // 圆形徽章背景色 - 蓝色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: InfoIcon,
         label: '中',
         dotBg: 'red.500',
@@ -58,7 +61,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.100',
         colorScheme: 'red',
-        badgeBg: 'red.400', // 角标边框和文字颜色 - 浅红色
+        badgeBg: '#6b7280', // 圆形徽章背景色 - 灰色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: CheckCircleIcon,
         label: '低',
         dotBg: 'red.400',
diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
index aaf10035..92af5a7e 100644
--- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
@@ -89,8 +89,8 @@ const HorizontalDynamicNewsEventCard = ({
                 cursor="pointer"
                 onClick={() => onEventClick?.(event)}
             >
-                <CardBody p={3}>
-                    {/* 左上角：重要性矩形角标（镂空边框样式） */}
+                <CardBody p={3} pb={2}>
+                    {/* 左上角：重要性横向徽章 */}
                     <Popover trigger="hover" placement="right" isLazy>
                         <PopoverTrigger>
                             <Box
@@ -98,21 +98,18 @@ const HorizontalDynamicNewsEventCard = ({
                                 top={0}
                                 left={0}
                                 zIndex={1}
-                                bg="transparent"
-                                color={importance.badgeBg}
-                                borderWidth="2px"
-                                borderColor={importance.badgeBg}
-                                fontSize="11px"
+                                bg={importance.badgeBg}
+                                color={importance.badgeColor || 'white'}
+                                fontSize="7px"
                                 fontWeight="bold"
-                                px={1.5}
-                                py={0.5}
-                                minW="auto"
+                                w="30px"
+                                h="15px"
+                                borderRadius="xl"
                                 display="flex"
                                 alignItems="center"
                                 justifyContent="center"
-                                lineHeight="1"
-                                borderBottomRightRadius="md"
                                 cursor="help"
+                                boxShadow="sm"
                             >
                                 {importance.label}
                             </Box>
@@ -126,22 +123,21 @@ const HorizontalDynamicNewsEventCard = ({
                                             重要性等级说明
                                         </Text>
                                         {getAllImportanceLevels().map(item => (
-                                            <HStack key={item.level} spacing={2} align="flex-start">
+                                            <HStack key={item.level} spacing={2} align="center">
                                                 <Box
-                                                    w="20px"
-                                                    h="20px"
-                                                    borderWidth="2px"
-                                                    borderColor={item.badgeBg}
-                                                    color={item.badgeBg}
+                                                    w="30px"
+                                                    h="15px"
+                                                    bg={item.badgeBg}
+                                                    color={item.badgeColor || 'white'}
                                                     fontSize="9px"
                                                     fontWeight="bold"
                                                     display="flex"
                                                     alignItems="center"
                                                     justifyContent="center"
-                                                    borderRadius="sm"
+                                                    borderRadius="lg"
                                                     flexShrink={0}
                                                 >
-                                                    {item.level}
+                                                    {item.label}
                                                 </Box>
                                                 <Text fontSize="xs" flex={1}>
                                                     <Text as="span" fontWeight="bold">
@@ -168,8 +164,8 @@ const HorizontalDynamicNewsEventCard = ({
                         />
                     </Box>
 
-                    <VStack align="stretch" spacing={2}>
-                        {/* 标题 - 最多两行，添加上边距避免与角标重叠 */}
+                    <VStack align="stretch" spacing={1.5}>
+                        {/* 标题 - 最多两行，添加左右边距避免与横向徽章和关注按钮重叠 */}
                         <Box
                             cursor="pointer"
                             onClick={(e) => onTitleClick?.(e, event)}
@@ -193,6 +189,7 @@ const HorizontalDynamicNewsEventCard = ({
                             avgChange={event.related_avg_chg}
                             maxChange={event.related_max_chg}
                             weekChange={event.related_week_chg}
+                            size="comfortable"
                         />
                     </VStack>
                 </CardBody>