From 4f38505a805d6e5d0812ee65ef3aafdf1ef3c2ef Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 9 Dec 2025 18:54:19 +0800
Subject: [PATCH] =?UTF-8?q?style:=20StockQuoteCard=20=E9=BB=91=E9=87=91?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=20UI=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

颜色配置：
- 背景：纯黑 #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>
---
 .../components/StockQuoteCard/index.tsx       | 90 ++++++++++---------
 1 file changed, 49 insertions(+), 41 deletions(-)

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<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>