diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
index e705b6ed..32e11cbd 100644
--- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
@@ -146,7 +146,7 @@ const HorizontalDynamicNewsEventCard = ({
>
{/* 右上角:关注按钮 */}
-
+
+ {/* Keywords梦幻轮播 - 绝对定位在卡片右侧空白处 */}
+ {event.keywords && event.keywords.length > 0 && (
+ {
+ console.log('Keyword clicked:', keyword);
+ // TODO: 实现关键词筛选功能
+ }}
+ />
+ )}
+
{/* 标题 - 最多两行,hover 显示完整内容 */}
onTitleClick?.(e, event)}
mt={1}
- paddingRight="10px"
+ paddingRight="120px"
>
- {/* 第二行:涨跌幅数据 + Keywords轮播 */}
-
- {/* 左侧:涨跌幅数据 */}
-
-
- {/* 右侧:Keywords轮播(半透明效果) */}
- {event.keywords && event.keywords.length > 0 && (
-
- {
- console.log('Keyword clicked:', keyword);
- // TODO: 实现关键词筛选功能
- }}
- />
-
- )}
-
+ {/* 第二行:涨跌幅数据 */}
+
diff --git a/src/views/Community/components/EventCard/KeywordsCarousel.js b/src/views/Community/components/EventCard/KeywordsCarousel.js
index 1a94b508..5bb46429 100644
--- a/src/views/Community/components/EventCard/KeywordsCarousel.js
+++ b/src/views/Community/components/EventCard/KeywordsCarousel.js
@@ -1,31 +1,31 @@
// src/views/Community/components/EventCard/KeywordsCarousel.js
-// Keywords标签轮播组件
+// Keywords标签梦幻淡入淡出轮播组件
import React, { useState, useEffect } from 'react';
-import { Box, Tag, HStack, useColorModeValue, Tooltip } from '@chakra-ui/react';
+import { Box, Text, useColorModeValue } from '@chakra-ui/react';
import { motion, AnimatePresence } from 'framer-motion';
const MotionBox = motion(Box);
/**
- * Keywords标签轮播组件
+ * Keywords标签梦幻轮播组件(单个显示,淡入淡出)
* @param {Array} keywords - 关键词数组
- * @param {number} displayCount - 显示的标签数量(默认3个)
- * @param {number} interval - 轮播间隔(毫秒,默认3000ms)
+ * @param {number} interval - 轮播间隔(毫秒,默认4000ms)
* @param {Function} onKeywordClick - 关键词点击回调
*/
const KeywordsCarousel = ({
keywords = [],
- displayCount = 3,
- interval = 3000,
+ interval = 4000,
onKeywordClick
}) => {
const [currentIndex, setCurrentIndex] = useState(0);
const [isPaused, setIsPaused] = useState(false);
- // 颜色配置
- const tagBg = useColorModeValue('rgba(66, 153, 225, 0.1)', 'rgba(66, 153, 225, 0.2)');
- const tagColor = useColorModeValue('blue.600', 'blue.300');
- const tagBorder = useColorModeValue('blue.200', 'blue.600');
+ // 颜色配置 - 梦幻渐变效果
+ const textColor = useColorModeValue(
+ 'linear(to-r, purple.400, pink.400, blue.400)',
+ 'linear(to-r, purple.300, pink.300, blue.300)'
+ );
+ const hoverBg = useColorModeValue('rgba(159, 122, 234, 0.1)', 'rgba(159, 122, 234, 0.15)');
// 如果没有keywords,不渲染
if (!keywords || keywords.length === 0) {
@@ -34,98 +34,66 @@ const KeywordsCarousel = ({
// 自动轮播
useEffect(() => {
- if (isPaused || keywords.length <= displayCount) return;
+ if (isPaused || keywords.length <= 1) return;
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % keywords.length);
}, interval);
return () => clearInterval(timer);
- }, [isPaused, keywords.length, displayCount, interval]);
+ }, [isPaused, keywords.length, interval]);
- // 获取当前显示的关键词
- const getVisibleKeywords = () => {
- if (keywords.length <= displayCount) {
- return keywords;
- }
-
- const visible = [];
- for (let i = 0; i < displayCount; i++) {
- const index = (currentIndex + i) % keywords.length;
- visible.push(keywords[index]);
- }
- return visible;
- };
-
- const visibleKeywords = getVisibleKeywords();
+ const currentKeyword = keywords[currentIndex];
return (
setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
- position="relative"
+ pointerEvents="auto"
+ zIndex={1}
>
-
-
- {visibleKeywords.map((keyword, index) => (
-
-
- {
- e.stopPropagation();
- onKeywordClick?.(keyword);
- }}
- >
- #{keyword}
-
-
-
- ))}
-
-
-
- {/* 如果有更多关键词,显示指示器 */}
- {keywords.length > displayCount && (
-
+ {
+ e.stopPropagation();
+ onKeywordClick?.(currentKeyword);
+ }}
+ px={3}
+ py={1.5}
+ borderRadius="full"
+ bg="transparent"
+ _hover={{
+ bg: hoverBg,
+ transform: 'scale(1.05)',
+ }}
+ transition="background 0.3s, transform 0.2s"
>
- +{keywords.length - displayCount}
-
- )}
+
+ {currentKeyword}
+
+
+
);
};