diff --git a/src/views/Company/components/StockQuoteCard/index.tsx b/src/views/Company/components/StockQuoteCard/index.tsx index 7d85a4b2..aa00053d 100644 --- a/src/views/Company/components/StockQuoteCard/index.tsx +++ b/src/views/Company/components/StockQuoteCard/index.tsx @@ -51,16 +51,18 @@ const StockQuoteCard: React.FC = ({ data = mockStockQuoteData, isLoading = false, }) => { - // 颜色配置 - const cardBg = 'white'; - const borderColor = 'gray.200'; - const labelColor = 'gray.500'; - const valueColor = 'gray.800'; - const sectionTitleColor = 'gray.600'; + // 黑金主题颜色配置 + const cardBg = '#000000'; + const borderColor = '#C9A961'; + const labelColor = '#C9A961'; + const valueColor = '#F4D03F'; + const sectionTitleColor = '#F4D03F'; - // 涨跌颜色 - const priceColor = data.changePercent >= 0 ? 'green.500' : 'red.500'; - const inflowColor = data.mainNetInflow >= 0 ? 'green.500' : 'red.500'; + // 涨跌颜色(红涨绿跌) + const upColor = '#F44336'; // 涨 - 红色 + const downColor = '#4CAF50'; // 跌 - 绿色 + const priceColor = data.changePercent >= 0 ? upColor : downColor; + const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor; if (isLoading) { return ( @@ -78,25 +80,26 @@ const StockQuoteCard: React.FC = ({ {/* 顶部:股票名称 + 更新时间 */} - + {data.name} - + ({data.code}) {data.indexTags.map((tag) => ( {tag} ))} - + 更新时间:{data.updateTime} @@ -106,28 +109,31 @@ const StockQuoteCard: React.FC = ({ {/* 左栏:价格信息 */} - + {formatPrice(data.currentPrice)} = 0 ? 'green' : 'red'} - fontSize="md" - px={2} - py={0.5} + bg={data.changePercent >= 0 ? upColor : downColor} + color="#FFFFFF" + fontSize="20px" + fontWeight="bold" + px={3} + py={1} + borderRadius="md" > {formatChangePercent(data.changePercent)} - - + + 今开: - + {formatPrice(data.todayOpen)} - + 昨收: - + {formatPrice(data.yesterdayClose)} @@ -137,35 +143,35 @@ const StockQuoteCard: React.FC = ({ {/* 中栏:关键指标 */} 关键指标 - + 市盈率(PE): - + {data.pe.toFixed(2)} 市净率(PB): - + {data.pb.toFixed(2)} 流通市值: - + {data.marketCap} 52周波动: - + {formatPrice(data.week52Low)}-{formatPrice(data.week52High)} @@ -175,23 +181,23 @@ const StockQuoteCard: React.FC = ({ {/* 右栏:主力动态 */} 主力动态 - + 主力净流入: - + {formatNetInflow(data.mainNetInflow)} 机构持仓: - + {data.institutionHolding.toFixed(2)}% @@ -200,13 +206,15 @@ const StockQuoteCard: React.FC = ({ div': { bg: upColor }, + }} + bg={downColor} borderRadius="full" /> - - 买入{data.buyRatio}% - 卖出{data.sellRatio}% + + 买入{data.buyRatio}% + 卖出{data.sellRatio}%