diff --git a/src/views/Community/components/HeroPanel.js b/src/views/Community/components/HeroPanel.js index 9daad7fd..a466e050 100644 --- a/src/views/Community/components/HeroPanel.js +++ b/src/views/Community/components/HeroPanel.js @@ -74,7 +74,7 @@ const fetchPopularConcepts = async () => { }, body: JSON.stringify({ query: '', - size: 80, // 获取前80个概念 + size: 60, // 获取前60个概念 page: 1, sort_by: 'change_pct' }) @@ -455,8 +455,8 @@ const ConceptFlowAnimation = () => { ); } - // 将 80 个概念均匀分成 5 行(每行 16 个) - const rowCount = 5; + // 将 60 个概念均匀分成 3 行(每行 20 个) + const rowCount = 3; const conceptsPerRow = Math.ceil(concepts.length / rowCount); const rows = []; @@ -466,18 +466,28 @@ const ConceptFlowAnimation = () => { rows.push(concepts.slice(start, end)); } + // 根据涨跌幅计算字体大小(涨跌幅越大,字体越大) + const getFontSize = (changePct) => { + const absChange = Math.abs(changePct); + if (absChange >= 10) return 'md'; // 超大涨跌 + if (absChange >= 7) return 'sm'; // 大涨跌 + if (absChange >= 5) return 'sm'; // 中涨跌 + if (absChange >= 3) return 'xs'; // 小涨跌 + return 'xs'; // 微涨跌 + }; + return ( - + {rows.map((row, rowIndex) => { - // 每行不同的速度:第一行30秒,第二行35秒,依次递增 - const duration = 30 + rowIndex * 5; + // 每行不同的速度:第一行25秒,第二行30秒,第三行35秒 + const duration = 25 + rowIndex * 5; return ( { const icon = changePct > 0 ? '📈' : '📉'; const isHovered = hoveredConcept === `${rowIndex}-${idx}`; + const fontSize = getFontSize(changePct); + const borderWidth = fontSize === 'md' ? '3px' : '2px'; + return ( { setIsPaused(true); setHoveredConcept(`${rowIndex}-${idx}`); @@ -530,9 +543,9 @@ const ConceptFlowAnimation = () => { }} onClick={() => handleConceptClick(concept.name)} _hover={{ - transform: 'scale(1.1)', + transform: 'scale(1.15)', bg: 'whiteAlpha.300', - boxShadow: `0 0 20px ${color}80`, + boxShadow: `0 0 25px ${color}80`, zIndex: 100 }} >