diff --git a/src/views/Concept/index.js b/src/views/Concept/index.js index cfcb9464..6432fb22 100644 --- a/src/views/Concept/index.js +++ b/src/views/Concept/index.js @@ -78,6 +78,7 @@ import { MenuList, MenuItem, Collapse, + useBreakpointValue, } from '@chakra-ui/react'; import { SearchIcon, ViewIcon, CalendarIcon, ExternalLinkIcon, StarIcon, ChevronDownIcon, InfoIcon, CloseIcon, ChevronRightIcon } from '@chakra-ui/icons'; import { FaThLarge, FaList, FaTags, FaChartLine, FaRobot, FaTable, FaHistory, FaBrain, FaLightbulb, FaRocket, FaShieldAlt, FaCalendarAlt, FaArrowUp, FaArrowDown, FaNewspaper, FaFileAlt, FaExpand, FaCompress, FaClock, FaLock } from 'react-icons/fa'; @@ -672,6 +673,10 @@ const ConceptCenter = () => { const changePercent = concept.price_info?.avg_change_pct; const changeColor = getChangeColor(changePercent); const hasChange = changePercent !== null && changePercent !== undefined; + // H5 端使用更紧凑的尺寸 + const isMobile = useBreakpointValue({ base: true, md: false }); + const coverHeight = useBreakpointValue({ base: '100px', md: '180px' }); + const logoSize = useBreakpointValue({ base: '60px', md: '120px' }); // 生成随机涨幅数字背景 const generateNumbersBackground = () => { @@ -705,7 +710,7 @@ const ConceptCenter = () => { boxShadow="0 4px 12px rgba(0, 0, 0, 0.1)" > {/* 毛玻璃涨幅数字背景 */} - + {/* 渐变背景层 */} { top="50%" left="50%" transform="translate(-50%, -50%)" - width="120px" - height="120px" + width={logoSize} + height={logoSize} opacity={0.15} > { - - + + {/* 概念名称 */} { {concept.concept} - {/* 描述信息 */} - + {/* 描述信息 - H5端显示1行 */} + {concept.description || '暂无描述信息'} {concept.stocks && concept.stocks.length > 0 && ( { > - + 热门个股 @@ -942,20 +947,20 @@ const ConceptCenter = () => { )} - + {formatAddedDate(concept)}