From 4a5e18a90d09e7e49ed4bb4efd4764a1dd52f8d6 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 15 Dec 2025 15:58:03 +0800
Subject: [PATCH] =?UTF-8?q?style(HotEvents):=20=E4=BC=98=E5=8C=96=E7=83=AD?=
 =?UTF-8?q?=E7=82=B9=E4=BA=8B=E4=BB=B6=E5=8D=A1=E7=89=87=20UI=20=E5=92=8C?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 触控板滑动优化：添加 swipeToSlide 等配置，滑动更流畅
- 布局调整：涨幅标签从标题移到底部，去掉作者显示
- 重要度徽章优化：长方形圆角样式，S/A红色系、B/C橙色系

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/HotEvents/HotEvents.css        | 59 +++++++++++--------
 .../components/HotEvents/HotEvents.js         | 22 ++++---
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/views/Community/components/HotEvents/HotEvents.css b/src/views/Community/components/HotEvents/HotEvents.css
index 5a1bf7c3..89d8e07b 100644
--- a/src/views/Community/components/HotEvents/HotEvents.css
+++ b/src/views/Community/components/HotEvents/HotEvents.css
@@ -121,13 +121,38 @@
     display: block;
 }
 
+/* 重要度徽章 - 长方形圆角 */
 .importance-badge {
     position: absolute;
     top: 8px;
     left: 8px;
+    padding: 3px 10px;
+    border-radius: 10px;
     font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 4px;
+    font-weight: 600;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+}
+
+/* S级 - 深红 */
+.importance-s {
+    background: #c0392b;
+}
+
+/* A级 - 浅红 */
+.importance-a {
+    background: #e74c3c;
+}
+
+/* B级 - 深橙 */
+.importance-b {
+    background: #d35400;
+}
+
+/* C级 - 浅橙 */
+.importance-c {
+    background: #f39c12;
 }
 
 /* Card content */
@@ -144,26 +169,18 @@
     word-break: break-word;
 }
 
-/* 标题文字 - inline显示，可以换行 */
+/* 标题文字 */
 .event-title {
     cursor: pointer;
 }
 
-/* 标签紧跟标题后面 */
-.event-tag {
-    display: inline;
-    margin-left: 4px;
-    white-space: nowrap;
-    vertical-align: baseline;
-}
-
+/* 涨幅标签 - 底部显示 */
 .event-tag .ant-tag {
-    font-size: 11px;
-    padding: 0 6px;
-    height: 18px;
-    line-height: 18px;
-    transform: scale(0.9);
-    vertical-align: middle;
+    font-size: 12px;
+    padding: 0 8px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0;
 }
 
 /* 详情描述 - 三行省略 */
@@ -184,18 +201,12 @@
 .event-footer {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     font-size: 12px;
     color: #8c8c8c;
     margin-top: 8px;
 }
 
-.creator {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 60%;
-}
-
 /* 时间样式 - 年月日高亮 */
 .time {
     white-space: nowrap;
diff --git a/src/views/Community/components/HotEvents/HotEvents.js b/src/views/Community/components/HotEvents/HotEvents.js
index 74d2c740..1915da27 100644
--- a/src/views/Community/components/HotEvents/HotEvents.js
+++ b/src/views/Community/components/HotEvents/HotEvents.js
@@ -90,6 +90,13 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
         prevArrow: <CustomArrow direction="left" />,
         nextArrow: <CustomArrow direction="right" />,
         autoplay: false,
+        // 触控板/触摸优化
+        swipeToSlide: true,      // 允许滑动到任意位置
+        touchThreshold: 10,      // 滑动灵敏度
+        swipe: true,             // 启用滑动
+        draggable: true,         // PC 端拖拽支持
+        useCSS: true,            // CSS 动画更流畅
+        cssEase: 'ease-out',     // 滑动缓动效果
         beforeChange: (_current, next) => {
             // 计算实际页码（考虑无限循环）
             const actualPage = next % totalPages;
@@ -145,11 +152,9 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
                                             }}
                                         />
                                         {event.importance && (
-                                            <Badge
-                                                className="importance-badge"
-                                                color={getImportanceColor(event.importance)}
-                                                text={`${event.importance}级`}
-                                            />
+                                            <span className={`importance-badge importance-${event.importance.toLowerCase()}`}>
+                                                {event.importance}级
+                                            </span>
                                         )}
                                     </div>
                                 }
@@ -167,9 +172,6 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
                                             </span>
                                         </Tooltip>
                                     )}
-                                    <span className="event-tag">
-                                        {renderPriceChange(event.related_avg_chg)}
-                                    </span>
                                 </div>
 
                                 {isMobile ? (
@@ -185,7 +187,9 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
                                 )}
 
                                 <div className="event-footer">
-                                    <span className="creator">{event.creator?.username || 'Anonymous'}</span>
+                                    <span className="event-tag">
+                                        {renderPriceChange(event.related_avg_chg)}
+                                    </span>
                                     <span className="time">
                                         <span className="time-date">{dayjs(event.created_at).format('YYYY-MM-DD')}</span>
                                         {' '}