From 602dcf8eeeac79b71d2be68640b9dba97f0da66e Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Tue, 23 Dec 2025 17:45:03 +0800 Subject: [PATCH] =?UTF-8?q?style(Profile):=20=E7=94=A8=E6=88=B7=E4=B8=AD?= =?UTF-8?q?=E5=BF=83=20UI=20=E7=B4=A7=E5=87=91=E5=8C=96=E4=B8=8E=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CommunityFeedCard.js | 26 +++--- .../ForumCenter/components/PredictionCard.js | 87 ++++++++----------- .../Profile/components/ForumCenter/index.js | 11 ++- .../components/MarketOverview.js | 24 +++-- .../components/atoms/GemIndexCard.js | 6 +- .../components/atoms/IndexKLineCard.js | 9 +- src/views/ValueForum/PredictionTopicDetail.js | 3 +- 7 files changed, 83 insertions(+), 83 deletions(-) diff --git a/src/views/Profile/components/ForumCenter/components/CommunityFeedCard.js b/src/views/Profile/components/ForumCenter/components/CommunityFeedCard.js index bae63725..0e9da087 100644 --- a/src/views/Profile/components/ForumCenter/components/CommunityFeedCard.js +++ b/src/views/Profile/components/ForumCenter/components/CommunityFeedCard.js @@ -42,47 +42,49 @@ const CommunityFeedCard = ({ {/* 内容区 */} - - - {/* Tab 切换 */} - + + + {/* Tab 切换 - 更紧凑 */} + {/* 帖子列表 */} - + {currentPosts.map((post) => ( onPostClick?.(post)} > diff --git a/src/views/Profile/components/ForumCenter/components/PredictionCard.js b/src/views/Profile/components/ForumCenter/components/PredictionCard.js index f82f8a22..3e93a992 100644 --- a/src/views/Profile/components/ForumCenter/components/PredictionCard.js +++ b/src/views/Profile/components/ForumCenter/components/PredictionCard.js @@ -35,14 +35,14 @@ const PredictionCard = ({ - {/* 内容区 */} - - + {/* 内容区 - 更紧凑 */} + + {/* 预测问题 - 带渐变背景 */} - {/* 看涨/看跌按钮 */} - + {/* 看涨/看跌按钮 - 更紧凑 */} + + + + + 当前胜率: + {winRate}% + + + 赔率: + {odds} + + diff --git a/src/views/Profile/components/ForumCenter/index.js b/src/views/Profile/components/ForumCenter/index.js index 03861567..1ad70612 100644 --- a/src/views/Profile/components/ForumCenter/index.js +++ b/src/views/Profile/components/ForumCenter/index.js @@ -37,8 +37,15 @@ const ForumCenter = () => { /> - {/* 两列布局：预测卡片 + 社区动态 */} - + {/* 两列布局：预测卡片(2) + 社区动态(3) */} + *:first-of-type': { gridColumn: { md: 'span 2' } }, + '& > *:last-of-type': { gridColumn: { md: 'span 3' } }, + }} + > diff --git a/src/views/Profile/components/MarketDashboard/components/MarketOverview.js b/src/views/Profile/components/MarketDashboard/components/MarketOverview.js index 34b36a9b..7ed39812 100644 --- a/src/views/Profile/components/MarketDashboard/components/MarketOverview.js +++ b/src/views/Profile/components/MarketDashboard/components/MarketOverview.js @@ -1,45 +1,43 @@ -// 市场概况组件 - 顶部横条（与事件中心头部保持一致） -// 布局：市场概况 | 上证指数 | 深证成指 | 创业板指+涨跌分布 +// 市场概况组件 - 三列等宽布局 import React from 'react'; -import { Box, SimpleGrid } from '@chakra-ui/react'; +import { Box, Grid } from '@chakra-ui/react'; import { IndexKLineCard, GemIndexCard, - MarketSummaryCard, } from './atoms'; const MarketOverview = ({ marketStats = {} }) => { return ( - {/* 4列网格布局：市场概况 | 上证指数 | 深证成指 | 创业板指+涨跌 */} - - {/* 市场概况 - 上证/深证/总市值/成交额 */} - - {/* 上证指数 - K线卡片 */} {/* 深证成指 - K线卡片 */} - {/* 创业板指 + 涨跌分布（垂直组合） */} + {/* 创业板指 + 涨跌分布 */} - + ); }; diff --git a/src/views/Profile/components/MarketDashboard/components/atoms/GemIndexCard.js b/src/views/Profile/components/MarketDashboard/components/atoms/GemIndexCard.js index c3f6b3c1..6d8bef4d 100644 --- a/src/views/Profile/components/MarketDashboard/components/atoms/GemIndexCard.js +++ b/src/views/Profile/components/MarketDashboard/components/atoms/GemIndexCard.js @@ -59,6 +59,7 @@ const fetchIndexLatest = async (indexCode) => { * @param {number} riseCount - 上涨家数 * @param {number} fallCount - 下跌家数 * @param {number} flatCount - 平盘家数（可选） + * @param {string} height - 卡片高度（默认 '180px'） */ const GemIndexCard = ({ indexCode = 'sz399006', @@ -66,6 +67,7 @@ const GemIndexCard = ({ riseCount = 0, fallCount = 0, flatCount = 0, + height = '180px', }) => { const [loading, setLoading] = useState(true); const [latestData, setLatestData] = useState(null); @@ -116,7 +118,7 @@ const GemIndexCard = ({ border="1px solid" borderColor={THEME.border} p={3} - h="140px" + h={height} >
@@ -138,7 +140,7 @@ const GemIndexCard = ({ border="1px solid" borderColor={THEME.border} p={3} - h="140px" + h={height} transition="all 0.3s" _hover={{ borderColor: `${accentColor}40`, diff --git a/src/views/Profile/components/MarketDashboard/components/atoms/IndexKLineCard.js b/src/views/Profile/components/MarketDashboard/components/atoms/IndexKLineCard.js index 8566831c..fef1acdc 100644 --- a/src/views/Profile/components/MarketDashboard/components/atoms/IndexKLineCard.js +++ b/src/views/Profile/components/MarketDashboard/components/atoms/IndexKLineCard.js @@ -41,8 +41,9 @@ const fetchIndexKline = async (indexCode) => { * K线指数卡片组件 * @param {string} indexCode - 指数代码（如 'sh000001', 'sz399001'） * @param {string} name - 指数名称（如 '上证指数'） + * @param {string} height - 卡片高度（默认 '180px'） */ -const IndexKLineCard = ({ indexCode, name }) => { +const IndexKLineCard = ({ indexCode, name, height = '180px' }) => { const [chartData, setChartData] = useState(null); const [loading, setLoading] = useState(true); const [latestData, setLatestData] = useState(null); @@ -60,7 +61,7 @@ const IndexKLineCard = ({ indexCode, name }) => { const loadChartData = useCallback(async () => { const data = await fetchIndexKline(apiIndexCode); if (data?.data?.length > 0) { - const recentData = data.data.slice(-30); // 最近30天 + const recentData = data.data.slice(-20); // 最近20天，提高K线清晰度 setChartData({ dates: recentData.map(item => item.time), klineData: recentData.map(item => [item.open, item.close, item.low, item.high]), @@ -214,7 +215,7 @@ const IndexKLineCard = ({ indexCode, name }) => { border="1px solid" borderColor={THEME.border} p={3} - h="140px" + h={height} >
@@ -236,7 +237,7 @@ const IndexKLineCard = ({ indexCode, name }) => { border="1px solid" borderColor={THEME.border} p={3} - h="140px" + h={height} transition="all 0.3s" _hover={{ borderColor: `${accentColor}40`, diff --git a/src/views/ValueForum/PredictionTopicDetail.js b/src/views/ValueForum/PredictionTopicDetail.js index 277a9e7e..1f9751f1 100644 --- a/src/views/ValueForum/PredictionTopicDetail.js +++ b/src/views/ValueForum/PredictionTopicDetail.js @@ -38,6 +38,7 @@ import { motion } from 'framer-motion'; import { forumColors } from '@theme/forumTheme'; import { getTopicDetail, getUserAccount } from '@services/predictionMarketService.api'; import { useAuth } from '@contexts/AuthContext'; +import { LAYOUT_SIZE } from '@/layouts/config/layoutConfig'; import TradeModal from './components/TradeModal'; import PredictionCommentSection from './components/PredictionCommentSection'; import CommentInvestModal from './components/CommentInvestModal'; @@ -222,7 +223,7 @@ const PredictionTopicDetail = () => { }; return ( - + {/* 头部：返回按钮 */}