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,
|
data = mockStockQuoteData,
|
||||||
isLoading = false,
|
isLoading = false,
|
||||||
}) => {
|
}) => {
|
||||||
// 颜色配置
|
// 黑金主题颜色配置
|
||||||
const cardBg = 'white';
|
const cardBg = '#000000';
|
||||||
const borderColor = 'gray.200';
|
const borderColor = '#C9A961';
|
||||||
const labelColor = 'gray.500';
|
const labelColor = '#C9A961';
|
||||||
const valueColor = 'gray.800';
|
const valueColor = '#F4D03F';
|
||||||
const sectionTitleColor = 'gray.600';
|
const sectionTitleColor = '#F4D03F';
|
||||||
|
|
||||||
// 涨跌颜色
|
// 涨跌颜色(红涨绿跌)
|
||||||
const priceColor = data.changePercent >= 0 ? 'green.500' : 'red.500';
|
const upColor = '#F44336'; // 涨 - 红色
|
||||||
const inflowColor = data.mainNetInflow >= 0 ? 'green.500' : 'red.500';
|
const downColor = '#4CAF50'; // 跌 - 绿色
|
||||||
|
const priceColor = data.changePercent >= 0 ? upColor : downColor;
|
||||||
|
const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
@@ -78,25 +80,26 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
{/* 顶部:股票名称 + 更新时间 */}
|
{/* 顶部:股票名称 + 更新时间 */}
|
||||||
<Flex justify="space-between" align="center" mb={4}>
|
<Flex justify="space-between" align="center" mb={4}>
|
||||||
<HStack spacing={3}>
|
<HStack spacing={3}>
|
||||||
<Text fontSize="xl" fontWeight="bold" color={valueColor}>
|
<Text fontSize="24px" fontWeight="bold" color={valueColor}>
|
||||||
{data.name}
|
{data.name}
|
||||||
</Text>
|
</Text>
|
||||||
<Text fontSize="md" color={labelColor}>
|
<Text fontSize="24px" fontWeight="bold" color={labelColor}>
|
||||||
({data.code})
|
({data.code})
|
||||||
</Text>
|
</Text>
|
||||||
{data.indexTags.map((tag) => (
|
{data.indexTags.map((tag) => (
|
||||||
<Badge
|
<Badge
|
||||||
key={tag}
|
key={tag}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
colorScheme="gray"
|
borderColor={borderColor}
|
||||||
fontSize="xs"
|
color={labelColor}
|
||||||
|
fontSize="14px"
|
||||||
px={2}
|
px={2}
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
</HStack>
|
</HStack>
|
||||||
<Text fontSize="sm" color={labelColor}>
|
<Text fontSize="14px" color={labelColor}>
|
||||||
更新时间:{data.updateTime}
|
更新时间:{data.updateTime}
|
||||||
</Text>
|
</Text>
|
||||||
</Flex>
|
</Flex>
|
||||||
@@ -106,28 +109,31 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
{/* 左栏:价格信息 */}
|
{/* 左栏:价格信息 */}
|
||||||
<Box flex="1">
|
<Box flex="1">
|
||||||
<HStack align="baseline" spacing={3} mb={3}>
|
<HStack align="baseline" spacing={3} mb={3}>
|
||||||
<Text fontSize="3xl" fontWeight="bold" color={priceColor}>
|
<Text fontSize="48px" fontWeight="bold" color={priceColor}>
|
||||||
{formatPrice(data.currentPrice)}
|
{formatPrice(data.currentPrice)}
|
||||||
</Text>
|
</Text>
|
||||||
<Badge
|
<Badge
|
||||||
colorScheme={data.changePercent >= 0 ? 'green' : 'red'}
|
bg={data.changePercent >= 0 ? upColor : downColor}
|
||||||
fontSize="md"
|
color="#FFFFFF"
|
||||||
px={2}
|
fontSize="20px"
|
||||||
py={0.5}
|
fontWeight="bold"
|
||||||
|
px={3}
|
||||||
|
py={1}
|
||||||
|
borderRadius="md"
|
||||||
>
|
>
|
||||||
{formatChangePercent(data.changePercent)}
|
{formatChangePercent(data.changePercent)}
|
||||||
</Badge>
|
</Badge>
|
||||||
</HStack>
|
</HStack>
|
||||||
<HStack spacing={6} color={labelColor} fontSize="sm">
|
<HStack spacing={6} fontSize="14px">
|
||||||
<Text>
|
<Text color={labelColor}>
|
||||||
今开:
|
今开:
|
||||||
<Text as="span" color={valueColor} fontWeight="medium">
|
<Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
|
||||||
{formatPrice(data.todayOpen)}
|
{formatPrice(data.todayOpen)}
|
||||||
</Text>
|
</Text>
|
||||||
</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)}
|
{formatPrice(data.yesterdayClose)}
|
||||||
</Text>
|
</Text>
|
||||||
</Text>
|
</Text>
|
||||||
@@ -137,35 +143,35 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
{/* 中栏:关键指标 */}
|
{/* 中栏:关键指标 */}
|
||||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||||
<Text
|
<Text
|
||||||
fontSize="sm"
|
fontSize="14px"
|
||||||
fontWeight="medium"
|
fontWeight="bold"
|
||||||
color={sectionTitleColor}
|
color={sectionTitleColor}
|
||||||
mb={3}
|
mb={3}
|
||||||
>
|
>
|
||||||
关键指标
|
关键指标
|
||||||
</Text>
|
</Text>
|
||||||
<VStack align="stretch" spacing={2} fontSize="sm">
|
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<Text color={labelColor}>市盈率(PE):</Text>
|
<Text color={labelColor}>市盈率(PE):</Text>
|
||||||
<Text color={valueColor} fontWeight="medium">
|
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||||
{data.pe.toFixed(2)}
|
{data.pe.toFixed(2)}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<Text color={labelColor}>市净率(PB):</Text>
|
<Text color={labelColor}>市净率(PB):</Text>
|
||||||
<Text color={valueColor} fontWeight="medium">
|
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||||
{data.pb.toFixed(2)}
|
{data.pb.toFixed(2)}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<Text color={labelColor}>流通市值:</Text>
|
<Text color={labelColor}>流通市值:</Text>
|
||||||
<Text color={valueColor} fontWeight="medium">
|
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||||
{data.marketCap}
|
{data.marketCap}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<Text color={labelColor}>52周波动:</Text>
|
<Text color={labelColor}>52周波动:</Text>
|
||||||
<Text color={valueColor} fontWeight="medium">
|
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
@@ -175,23 +181,23 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
{/* 右栏:主力动态 */}
|
{/* 右栏:主力动态 */}
|
||||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||||
<Text
|
<Text
|
||||||
fontSize="sm"
|
fontSize="14px"
|
||||||
fontWeight="medium"
|
fontWeight="bold"
|
||||||
color={sectionTitleColor}
|
color={sectionTitleColor}
|
||||||
mb={3}
|
mb={3}
|
||||||
>
|
>
|
||||||
主力动态
|
主力动态
|
||||||
</Text>
|
</Text>
|
||||||
<VStack align="stretch" spacing={2} fontSize="sm">
|
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<Text color={labelColor}>主力净流入:</Text>
|
<Text color={labelColor}>主力净流入:</Text>
|
||||||
<Text color={inflowColor} fontWeight="medium">
|
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||||||
{formatNetInflow(data.mainNetInflow)}
|
{formatNetInflow(data.mainNetInflow)}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<Text color={labelColor}>机构持仓:</Text>
|
<Text color={labelColor}>机构持仓:</Text>
|
||||||
<Text color={valueColor} fontWeight="medium">
|
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||||
{data.institutionHolding.toFixed(2)}%
|
{data.institutionHolding.toFixed(2)}%
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
@@ -200,13 +206,15 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
<Progress
|
<Progress
|
||||||
value={data.buyRatio}
|
value={data.buyRatio}
|
||||||
size="sm"
|
size="sm"
|
||||||
colorScheme="green"
|
sx={{
|
||||||
bg="red.400"
|
'& > div': { bg: upColor },
|
||||||
|
}}
|
||||||
|
bg={downColor}
|
||||||
borderRadius="full"
|
borderRadius="full"
|
||||||
/>
|
/>
|
||||||
<HStack justify="space-between" mt={1} fontSize="xs">
|
<HStack justify="space-between" mt={1} fontSize="14px">
|
||||||
<Text color="green.500">买入{data.buyRatio}%</Text>
|
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||||||
<Text color="red.500">卖出{data.sellRatio}%</Text>
|
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
</Box>
|
</Box>
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|||||||
Reference in New Issue
Block a user