diff --git a/src/views/Community/components/HeroPanel.js b/src/views/Community/components/HeroPanel.js
index 4f87893d..b9b7345e 100644
--- a/src/views/Community/components/HeroPanel.js
+++ b/src/views/Community/components/HeroPanel.js
@@ -192,115 +192,186 @@ const CompactIndexCard = ({ indexCode, indexName }) => {
};
/**
- * 概念漂浮动画 - 稀疏美观版
+ * 流动式热门概念组件 - HeroUI 风格
+ * 特点：
+ * 1. 三行横向滚动，每行方向不同
+ * 2. 卡片式设计，带渐变边框
+ * 3. 悬停时暂停滚动，放大效果
+ * 4. 流光动画效果
*/
-const ConceptFloat = () => {
+const FlowingConcepts = () => {
const [concepts, setConcepts] = useState([]);
const [loading, setLoading] = useState(true);
const [hoveredIdx, setHoveredIdx] = useState(null);
- const containerRef = useRef(null);
+ const [isPaused, setIsPaused] = useState(false);
useEffect(() => {
const load = async () => {
const data = await fetchPopularConcepts();
- // 只取前12个，更稀疏
- setConcepts(data.slice(0, 12));
+ setConcepts(data.slice(0, 30)); // 取30个概念
setLoading(false);
};
load();
}, []);
const getColor = (pct) => {
- if (pct > 5) return '#ff1744';
- if (pct > 2) return '#ff5252';
- if (pct > 0) return '#ff8a80';
- if (pct === 0) return '#FFD700';
- if (pct > -2) return '#69f0ae';
- if (pct > -5) return '#00e676';
- return '#00c853';
+ if (pct > 5) return { bg: 'rgba(255,23,68,0.15)', border: '#ff1744', text: '#ff1744', glow: 'rgba(255,23,68,0.4)' };
+ if (pct > 2) return { bg: 'rgba(255,82,82,0.12)', border: '#ff5252', text: '#ff5252', glow: 'rgba(255,82,82,0.3)' };
+ if (pct > 0) return { bg: 'rgba(255,138,128,0.1)', border: '#ff8a80', text: '#ff8a80', glow: 'rgba(255,138,128,0.25)' };
+ if (pct === 0) return { bg: 'rgba(255,215,0,0.1)', border: '#FFD700', text: '#FFD700', glow: 'rgba(255,215,0,0.25)' };
+ if (pct > -2) return { bg: 'rgba(105,240,174,0.1)', border: '#69f0ae', text: '#69f0ae', glow: 'rgba(105,240,174,0.25)' };
+ if (pct > -5) return { bg: 'rgba(0,230,118,0.12)', border: '#00e676', text: '#00e676', glow: 'rgba(0,230,118,0.3)' };
+ return { bg: 'rgba(0,200,83,0.15)', border: '#00c853', text: '#00c853', glow: 'rgba(0,200,83,0.4)' };
};
const handleClick = (name) => {
window.open(`https://valuefrontier.cn/htmls/${name}.html`, '_blank');
};
- if (loading) return ;
+ if (loading) {
+ return (
+
+
+
+ 加载热门概念...
+
+
+ );
+ }
- // 预设12个位置，均匀分布且不重叠
- const positions = [
- { x: 15, y: 20 }, { x: 50, y: 15 }, { x: 85, y: 25 },
- { x: 25, y: 50 }, { x: 60, y: 45 }, { x: 80, y: 55 },
- { x: 10, y: 75 }, { x: 40, y: 80 }, { x: 70, y: 75 },
- { x: 20, y: 35 }, { x: 55, y: 65 }, { x: 90, y: 40 },
- ];
+ // 将概念分成三行
+ const row1 = concepts.slice(0, 10);
+ const row2 = concepts.slice(10, 20);
+ const row3 = concepts.slice(20, 30);
+
+ // 渲染单个概念卡片
+ const renderConceptCard = (concept, globalIdx) => {
+ const colors = getColor(concept.change_pct);
+ const isActive = hoveredIdx === globalIdx;
+
+ return (
+ handleClick(concept.name)}
+ onMouseEnter={() => {
+ setHoveredIdx(globalIdx);
+ setIsPaused(true);
+ }}
+ onMouseLeave={() => {
+ setHoveredIdx(null);
+ setIsPaused(false);
+ }}
+ position="relative"
+ overflow="hidden"
+ _before={isActive ? {
+ content: '""',
+ position: 'absolute',
+ top: 0,
+ left: '-100%',
+ width: '200%',
+ height: '100%',
+ background: `linear-gradient(90deg, transparent, ${colors.glow}, transparent)`,
+ animation: 'shimmer 1.5s infinite',
+ } : {}}
+ >
+
+
+ {concept.name}
+
+
+ {concept.change_pct > 0 ? '+' : ''}{concept.change_pct.toFixed(2)}%
+
+
+
+ );
+ };
+
+ // 渲染滚动行
+ const renderScrollRow = (items, direction, startIdx, duration) => {
+ const animationName = direction === 'left' ? 'scrollLeft' : 'scrollRight';
+
+ return (
+
+
+ {/* 复制两份实现无缝滚动 */}
+ {[...items, ...items].map((concept, idx) =>
+ renderConceptCard(concept, startIdx + (idx % items.length))
+ )}
+
+
+ );
+ };
return (
-
- {/* 概念标签 */}
- {concepts.map((concept, idx) => {
- const pos = positions[idx] || { x: 50, y: 50 };
- const color = getColor(concept.change_pct);
- const isActive = hoveredIdx === idx;
- const size = 11 + (idx % 3) * 2; // 11-15px
-
- return (
- setHoveredIdx(idx)}
- onMouseLeave={() => setHoveredIdx(null)}
- onClick={() => handleClick(concept.name)}
- animation={`floatSlow ${5 + (idx % 3)}s ease-in-out infinite ${idx * 0.3}s`}
- >
-
- {concept.name}
-
-
- {/* 悬停提示 */}
- {isActive && (
-
-
- {concept.change_pct > 0 ? '+' : ''}{concept.change_pct.toFixed(2)}%
-
-
- )}
-
- );
- })}
+
+
+ {renderScrollRow(row1, 'left', 0, 35)}
+ {renderScrollRow(row2, 'right', 10, 40)}
+ {renderScrollRow(row3, 'left', 20, 32)}
+
);
};
@@ -556,35 +627,69 @@ const HeroPanel = () => {
- {/* 右侧：热门概念 */}
+ {/* 右侧：热门概念 - 流动式设计 */}
- {/* 标题 */}
-
-
-
- 热门概念
-
-
- 点击查看
-
-
+
+
+
+
+
+
+ 热门概念
+
+
+ 实时涨跌排行
+
+
+
+
+
+ 点击查看详情
+
+
-
-
+ {/* 流动式概念展示 */}
+
+