Просмотр исходного кода

💄 style(financial-dashboard): adjust layout and component sizes

- update container width from 934.496px to 1880px for main content area
- increase column width from 457.248px to 930px for left and right columns
- add shrink-0 and w-full classes to all financial metrics components for consistent sizing
- update comment to reflect two-row two-column grid layout
- ensure all metrics components properly utilize available space with full width styling
yourname 2 месяцев назад
Родитель
Сommit
1c7f0af78d

+ 4 - 4
src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx

@@ -134,11 +134,11 @@ export default function FinancialDashboard() {
         </div>
       </div>
 
-      {/* 四个数据模块容器 - 两列布局 */}
+      {/* 四个数据模块容器 - 两行两网格布局 */}
       <div className="absolute content-stretch flex gap-[20px] items-center left-1/2 top-[79.5px] translate-x-[-50%]">
-        <div className="content-stretch flex gap-[20px] items-start relative shrink-0 w-[934.496px]">
+        <div className="content-stretch flex gap-[20px] items-start relative shrink-0 w-[1880px]">
           {/* 左侧列 */}
-          <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[457.248px]">
+          <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[930px]">
             {/* 资产负债率模块 */}
             <AssetMetrics />
 
@@ -147,7 +147,7 @@ export default function FinancialDashboard() {
           </div>
 
           {/* 右侧列 */}
-          <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[457.248px]">
+          <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[930px]">
             {/* 利润总额与净利润模块 */}
             <ProfitMetrics />
 

+ 1 - 1
src/client/home/pages/FinancialDashboard/components/AssetMetrics.tsx

@@ -22,7 +22,7 @@ const calculateHeight = (value: number) => {
 
 export function AssetMetrics({ className }: AssetMetricsProps) {
   return (
-    <div className={`h-[480px] overflow-clip relative ${className || ''}`}>
+    <div className={`h-[480px] overflow-clip relative shrink-0 w-full ${className || ''}`}>
       {/* 底部容器 - 使用BaseContainer作为背景 */}
       <BaseContainer className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" />
 

+ 1 - 1
src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx

@@ -22,7 +22,7 @@ const calculateHeight = (value: number) => {
 
 export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
   return (
-    <div className={`h-[480px] overflow-clip relative ${className || ''}`}>
+    <div className={`h-[480px] overflow-clip relative shrink-0 w-full ${className || ''}`}>
       {/* 底部容器 - 使用BaseContainer作为背景 */}
       <BaseContainer className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" />
         {/* 表格区域 */}

+ 1 - 1
src/client/home/pages/FinancialDashboard/components/IncomeMetrics.tsx

@@ -22,7 +22,7 @@ const calculateHeight = (value: number) => {
 
 export function IncomeMetrics({ className }: IncomeMetricsProps) {
   return (
-    <div className={`h-[480px] overflow-clip relative ${className || ''}`}>
+    <div className={`h-[480px] overflow-clip relative shrink-0 w-full ${className || ''}`}>
       {/* 底部容器 - 使用BaseContainer作为背景 */}
       <BaseContainer className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" />
         {/* 表格区域 */}

+ 1 - 1
src/client/home/pages/FinancialDashboard/components/ProfitMetrics.tsx

@@ -27,7 +27,7 @@ const calculateHeight = (value: number) => {
 
 export function ProfitMetrics({ className }: ProfitMetricsProps) {
   return (
-    <div className={`h-[480px] overflow-clip relative ${className || ''}`}>
+    <div className={`h-[480px] overflow-clip relative shrink-0 w-full ${className || ''}`}>
       {/* 底部容器 - 使用BaseContainer作为背景 */}
       <BaseContainer className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" />
         {/* 表格区域 */}