From 0c291de182c782b0bb554d4172e4707292fc87b4 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 4 Dec 2025 14:47:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A6=82=E5=BF=B5=E4=B8=AD=E5=BF=83H5?=
 =?UTF-8?q?=E7=AB=AF=E5=8D=A1=E7=89=87=E5=B0=BA=E5=AF=B8=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=80=E5=B1=8F=E5=8F=AF=E6=98=BE=E7=A4=BA=E6=9B=B4?=
 =?UTF-8?q?=E5=A4=9A=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

    - H5端改为两列布局，间距从6改为3
    - 卡片背景高度从180px减小到100px
    - Logo尺寸从120px减小到60px
    - 内容区域padding和间距响应式调整
    - 描述文字H5端显示1行
    - 时间轴按钮尺寸H5端缩小
---
 src/views/Concept/index.js | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

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)"
             >
                 {/* 毛玻璃涨幅数字背景 */}
-                <Box position="relative" height="180px" overflow="hidden">
+                <Box position="relative" height={coverHeight} overflow="hidden">
                     {/* 渐变背景层 */}
                     <Box
                         position="absolute"
@@ -757,8 +762,8 @@ const ConceptCenter = () => {
                         top="50%"
                         left="50%"
                         transform="translate(-50%, -50%)"
-                        width="120px"
-                        height="120px"
+                        width={logoSize}
+                        height={logoSize}
                         opacity={0.15}
                     >
                         <Image
@@ -849,11 +854,11 @@ const ConceptCenter = () => {
                     </Badge>
                 </Box>
 
-                <CardBody p={4}>
-                    <VStack align="start" spacing={2}>
+                <CardBody p={{ base: 3, md: 4 }}>
+                    <VStack align="start" spacing={{ base: 1, md: 2 }}>
                         {/* 概念名称 */}
                         <Heading
-                            size="sm"
+                            size={{ base: 'xs', md: 'sm' }}
                             color="gray.800"
                             noOfLines={1}
                             bgGradient="linear(to-r, purple.600, pink.600)"
@@ -863,15 +868,15 @@ const ConceptCenter = () => {
                             {concept.concept}
                         </Heading>
 
-                        {/* 描述信息 */}
-                        <Text color="gray.600" fontSize="xs" noOfLines={2} minH="32px">
+                        {/* 描述信息 - H5端显示1行 */}
+                        <Text color="gray.600" fontSize="xs" noOfLines={isMobile ? 1 : 2} minH={{ base: '16px', md: '32px' }}>
                             {concept.description || '暂无描述信息'}
                         </Text>
 
                         {concept.stocks && concept.stocks.length > 0 && (
                             <Box
                                 width="100%"
-                                p={3}
+                                p={{ base: 2, md: 3 }}
                                 bg="linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%)"
                                 borderRadius="lg"
                                 cursor="pointer"
@@ -886,7 +891,7 @@ const ConceptCenter = () => {
                             >
                                 <Flex align="center" justify="space-between">
                                     <Box flex={1}>
-                                        <HStack spacing={2} mb={2}>
+                                        <HStack spacing={2} mb={{ base: 1, md: 2 }}>
                                             <Icon as={FaChartLine} boxSize={3} color="purple.500" />
                                             <Text fontSize="xs" color="purple.700" fontWeight="bold">
                                                 热门个股
@@ -942,20 +947,20 @@ const ConceptCenter = () => {
                             </Box>
                         )}
 
-                        <Divider borderColor="purple.100" />
+                        <Divider borderColor="purple.100" my={{ base: 1, md: 0 }} />
 
                         <Flex width="100%" justify="space-between" align="center">
                             {formatAddedDate(concept)}
 
                             <Button
-                                size="sm"
+                                size={{ base: 'xs', md: 'sm' }}
                                 leftIcon={<FaHistory />}
                                 bgGradient="linear(to-r, purple.500, pink.500)"
                                 color="white"
                                 variant="solid"
                                 onClick={(e) => handleViewContent(e, concept.concept, concept.concept_id)}
                                 borderRadius="full"
-                                px={4}
+                                px={{ base: 2, md: 4 }}
                                 fontWeight="medium"
                                 boxShadow="0 4px 12px rgba(139, 92, 246, 0.3)"
                                 _hover={{
@@ -1598,7 +1603,7 @@ const ConceptCenter = () => {
                         )}
 
                         {loading ? (
-                            <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
+                            <SimpleGrid columns={{ base: 2, md: 2, lg: 3 }} spacing={{ base: 3, md: 6 }}>
                                 {[...Array(12)].map((_, i) => (
                                     <SkeletonCard key={i} />
                                 ))}
@@ -1606,7 +1611,7 @@ const ConceptCenter = () => {
                         ) : concepts.length > 0 ? (
                             <>
                                 {viewMode === 'grid' ? (
-                                    <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} className="concept-grid">
+                                    <SimpleGrid columns={{ base: 2, md: 2, lg: 3 }} spacing={{ base: 3, md: 6 }} className="concept-grid">
                                         {concepts.map((concept, index) => (
                                             <Box key={concept.concept_id} className="concept-item" role="group">
                                                 <ConceptCard concept={concept} position={index} />