diff --git a/src/components/StockChangeIndicators.js b/src/components/StockChangeIndicators.js index 714afbac..0d0ecbc4 100644 --- a/src/components/StockChangeIndicators.js +++ b/src/components/StockChangeIndicators.js @@ -21,6 +21,7 @@ const StockChangeIndicators = ({ }) => { const isLarge = size === 'large'; const isComfortable = size === 'comfortable'; + const isDefault = size === 'default'; // 根据涨跌幅获取数字颜色(统一颜色,不分级) const getNumberColor = (value) => { @@ -89,42 +90,50 @@ const StockChangeIndicators = ({ borderWidth={isLarge ? "2px" : "1px"} borderColor={borderColor} borderRadius="md" - px={isLarge ? 4 : (isComfortable ? 3 : 2)} - py={isLarge ? 3 : (isComfortable ? 2 : 1)} + px={isLarge ? 4 : (isDefault ? 2 : (isComfortable ? 3 : 2))} + py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))} display="flex" - flexDirection={isLarge ? "column" : "row"} - alignItems={isLarge ? "flex-start" : "center"} - gap={isLarge ? 2 : 1} - maxW={isLarge ? "200px" : "none"} + flexDirection={(isLarge || isDefault) ? "column" : "row"} + alignItems={(isLarge || isDefault) ? "flex-start" : "center"} + gap={(isLarge || isDefault) ? (isLarge ? 2 : 1) : 1} + maxW={isLarge ? "200px" : (isDefault ? "120px" : "none")} > - {/* Large 模式:标签单独一行 */} - {isLarge && ( - + {/* Large 和 Default 模式:标签单独一行 */} + {(isLarge || isDefault) && ( + {label.trim()} )} {/* 数值 + 图标 */} - + {/* 三角形图标 */} {value !== 0 && ( value > 0 ? ( - + ) : ( - + ) )} {/* 数字 */} - {/* Default 模式:标签和数字在同一行 */} - {!isLarge && ( + {/* Comfortable 模式:标签和数字在同一行 */} + {!isLarge && !isDefault && ( {label} @@ -142,7 +151,7 @@ const StockChangeIndicators = ({ } return ( - + {renderIndicator('平均涨幅', avgChange)} {renderIndicator('最大涨幅', maxChange)} {renderIndicator('周涨幅', weekChange)}