style: StockQuoteCard 黑金主题 UI 调整
颜色配置: - 背景:纯黑 #000000 - 边框/标签:金色 #C9A961 - 主要文字:亮金 #F4D03F - 涨:红色 #F44336(红涨绿跌) - 跌:绿色 #4CAF50 字体大小: - 股票价格:48px bold - 股票名称/代码:24px bold - 涨跌幅 Badge:20px bold - 关键指标数值:16px bold - 标签文字:14px 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -51,16 +51,18 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
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<StockQuoteCardProps> = ({
|
||||
{/* 顶部:股票名称 + 更新时间 */}
|
||||
<Flex justify="space-between" align="center" mb={4}>
|
||||
<HStack spacing={3}>
|
||||
<Text fontSize="xl" fontWeight="bold" color={valueColor}>
|
||||
<Text fontSize="24px" fontWeight="bold" color={valueColor}>
|
||||
{data.name}
|
||||
</Text>
|
||||
<Text fontSize="md" color={labelColor}>
|
||||
<Text fontSize="24px" fontWeight="bold" color={labelColor}>
|
||||
({data.code})
|
||||
</Text>
|
||||
{data.indexTags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
fontSize="xs"
|
||||
borderColor={borderColor}
|
||||
color={labelColor}
|
||||
fontSize="14px"
|
||||
px={2}
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</HStack>
|
||||
<Text fontSize="sm" color={labelColor}>
|
||||
<Text fontSize="14px" color={labelColor}>
|
||||
更新时间:{data.updateTime}
|
||||
</Text>
|
||||
</Flex>
|
||||
@@ -106,28 +109,31 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
{/* 左栏:价格信息 */}
|
||||
<Box flex="1">
|
||||
<HStack align="baseline" spacing={3} mb={3}>
|
||||
<Text fontSize="3xl" fontWeight="bold" color={priceColor}>
|
||||
<Text fontSize="48px" fontWeight="bold" color={priceColor}>
|
||||
{formatPrice(data.currentPrice)}
|
||||
</Text>
|
||||
<Badge
|
||||
colorScheme={data.changePercent >= 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)}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<HStack spacing={6} color={labelColor} fontSize="sm">
|
||||
<Text>
|
||||
<HStack spacing={6} fontSize="14px">
|
||||
<Text color={labelColor}>
|
||||
今开:
|
||||
<Text as="span" color={valueColor} fontWeight="medium">
|
||||
<Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.todayOpen)}
|
||||
</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
<Text color={labelColor}>
|
||||
昨收:
|
||||
<Text as="span" color={valueColor} fontWeight="medium">
|
||||
<Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.yesterdayClose)}
|
||||
</Text>
|
||||
</Text>
|
||||
@@ -137,35 +143,35 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
{/* 中栏:关键指标 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="medium"
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
关键指标
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="sm">
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市盈率(PE):</Text>
|
||||
<Text color={valueColor} fontWeight="medium">
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pe.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市净率(PB):</Text>
|
||||
<Text color={valueColor} fontWeight="medium">
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pb.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>流通市值:</Text>
|
||||
<Text color={valueColor} fontWeight="medium">
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.marketCap}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>52周波动:</Text>
|
||||
<Text color={valueColor} fontWeight="medium">
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||||
</Text>
|
||||
</HStack>
|
||||
@@ -175,23 +181,23 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
{/* 右栏:主力动态 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="medium"
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
主力动态
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="sm">
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>主力净流入:</Text>
|
||||
<Text color={inflowColor} fontWeight="medium">
|
||||
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||||
{formatNetInflow(data.mainNetInflow)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>机构持仓:</Text>
|
||||
<Text color={valueColor} fontWeight="medium">
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.institutionHolding.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
@@ -200,13 +206,15 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
<Progress
|
||||
value={data.buyRatio}
|
||||
size="sm"
|
||||
colorScheme="green"
|
||||
bg="red.400"
|
||||
sx={{
|
||||
'& > div': { bg: upColor },
|
||||
}}
|
||||
bg={downColor}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<HStack justify="space-between" mt={1} fontSize="xs">
|
||||
<Text color="green.500">买入{data.buyRatio}%</Text>
|
||||
<Text color="red.500">卖出{data.sellRatio}%</Text>
|
||||
<HStack justify="space-between" mt={1} fontSize="14px">
|
||||
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||||
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
Reference in New Issue
Block a user