✨ feat(financial-dashboard): 优化财务仪表盘UI设计

- 重构页面布局为1920*1080分辨率适配的固定布局
- 添加背景层设计，包含主背景图和半透明遮罩层
- 实现头部装饰区域，包含左右装饰元素和标题区域
- 优化数据模块样式，使用统一的卡片背景图片和布局
- 改进"变动幅度"按钮样式，使用圆形背景图片和垂直文字布局
- 提取图片资源URL为常量，统一管理Figma设计资源
- 添加文本阴影和渐变效果，增强视觉层次感和现代感
- 优化模块内边距和间距，提升整体布局一致性

src/client/home/pages/FinancialDashboard/FinancialDashboard.tsx

@@ -7,6 +7,18 @@ import { DebtRatioMetrics } from './components/DebtRatioMetrics';
 import { VariationModal } from './components/VariationModal';
 import { dashClient } from '../../../api';
 
+// 图片资源常量 - 这些URL来自Figma设计
+const imgProperty1 = "https://www.figma.com/api/mcp/asset/ad3f1fa8-0cec-4ff9-a24b-f3dea29b0925";
+const imgEllipse4119 = "https://www.figma.com/api/mcp/asset/fcf74522-1000-42fd-8999-d2f9337c522e";
+const img6 = "https://www.figma.com/api/mcp/asset/816963c1-ec66-4f4f-9e3c-8c00047d33dd";
+const img7 = "https://www.figma.com/api/mcp/asset/22bc7622-a7da-401d-9451-5cf73bd1532c";
+const img8 = "https://www.figma.com/api/mcp/asset/4a995039-f8b4-4442-9960-d25cd2d1958f";
+const img9 = "https://www.figma.com/api/mcp/asset/9a551809-608f-48bc-889b-7c0c5823b923";
+const img10 = "https://www.figma.com/api/mcp/asset/ded89b08-063f-4157-9180-3f5db085cd63";
+const img11 = "https://www.figma.com/api/mcp/asset/67c8f7ae-1bee-4847-b616-fa67f0b69404";
+const img12 = "https://www.figma.com/api/mcp/asset/bd7171cc-ccf5-448f-b785-68a5378281d6";
+const img13 = "https://www.figma.com/api/mcp/asset/fab64b95-af76-4ae2-9f5c-6448dca5dd51";
+
 interface FinancialData {
   code: number;
   msg: string;
@@ -109,47 +121,232 @@ export function FinancialDashboard() {
   const financialRow = financialData.rows[0];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white p-6">
-      {/* 页面标题 */}
-      <div className="text-center mb-8">
-        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-200 to-white bg-clip-text text-transparent">
-          战略部署
-        </h1>
+    <div className="relative w-[1920px] h-[1080px] overflow-hidden">
+      {/* 背景层 */}
+      <div className="absolute inset-0 pointer-events-none">
+        <img
+          alt="背景"
+          className="absolute max-w-none object-cover size-full"
+          src={imgProperty1}
+        />
+        <div className="absolute bg-[rgba(33,33,33,0.6)] inset-0" />
       </div>
 
-      {/* 四个数据模块网格布局 */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-7xl mx-auto">
-        {/* 资产负债率模块 */}
-        <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6">
-          <AssetMetrics data={financialRow.assetTotalNet} />
+      {/* 头部装饰 */}
+      <div className="absolute h-[74px] left-0 top-px w-[1920px]">
+        {/* 左侧装饰 */}
+        <div className="absolute bottom-[13.48%] left-0 right-[65.73%] top-[-1.32%]">
+          <img alt="装饰左" className="absolute h-[64.5px] left-0 top-0 w-[663px]" src={img6} />
+          <img alt="装饰线条" className="absolute h-[8px] left-[124.5px] top-[27px] w-[301px]" src={img7} />
+          <img alt="装饰细节" className="absolute h-0 left-0 top-[22px] w-[162px]" src={img8} />
+          <img alt="装饰底部" className="absolute h-[22.5px] left-0 top-[42px] w-[661px]" src={img9} />
+        </div>
+
+        {/* 右侧装饰 */}
+        <div className="absolute flex h-[65px] items-center justify-center left-[calc(50%+638px)] top-[calc(50%+-5.48px)] translate-x-[-50%] translate-y-[-50%] w-[658px]">
+          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+            <div className="h-[65px] relative w-[658px]">
+              <img alt="装饰右" className="absolute h-[64.5px] left-0 top-0 w-[663px]" src={img6} />
+              <img alt="装饰线条右" className="absolute h-[8px] left-[124.5px] top-[27px] w-[301px]" src={img7} />
+              <img alt="装饰细节右" className="absolute h-0 left-0 top-[22px] w-[162px]" src={img8} />
+              <img alt="装饰底部右" className="absolute h-[22.5px] left-0 top-[42px] w-[661px]" src={img9} />
+            </div>
+          </div>
         </div>
 
-        {/* 利润总额与净利润模块 */}
-        <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6">
-          <ProfitMetrics data={financialRow.profitTotalNet} />
+        {/* 标题区域 */}
+        <div className="absolute h-[74px] left-[calc(50%+4px)] top-[calc(50%+-502px)] translate-x-[-50%] translate-y-[-50%] w-[690px]">
+          <div className="absolute bottom-[-12.16%] left-[9.13%] right-[9.13%] top-full">
+            <img alt="发光边" className="absolute inset-[-22.22%_-0.35%]" src={img10} />
+          </div>
+          <div className="absolute bottom-0 left-[0.14%] right-0 top-0">
+            <img alt="标题背景" className="absolute inset-[-10.81%_-3.48%_-16.22%_-3.48%]" src={img11} />
+          </div>
+          <p className="[text-shadow:0px_0px_20px_#041441] absolute bg-clip-text bg-gradient-to-t font-['HarmonyOS_Sans_SC:Regular',sans-serif] from-[#cbced1] inset-[27.03%_36.23%_29.73%_35.94%] leading-[32px] not-italic text-[36px] text-center to-[#ffffff] to-[37.5%] tracking-[3px]" style={{ WebkitTextFillColor: "transparent" }}>
+            战 略 部 署
+          </p>
+          <div className="absolute bottom-0 left-[18.55%] right-[18.26%] top-full">
+            <img alt="顶部导航" className="absolute bottom-[-2px] left-0 right-0 top-[-2px]" src={img12} />
+          </div>
         </div>
+      </div>
 
-        {/* 收入模块 */}
-        <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6">
-          <IncomeMetrics data={financialRow.incomeStatement} />
+      {/* 四个数据模块网格布局 - 严格按照1920*1080分辨率 */}
+      <div className="absolute content-stretch flex gap-[20px] items-center left-1/2 top-[79.5px] translate-x-[-50%]">
+        {/* 左侧列 */}
+        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[934.496px]">
+          {/* 资产负债率模块 */}
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full">
+            <div className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]">
+              <img alt="模块底部" className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" src={img13} />
+            </div>
+            <div className="absolute content-stretch flex flex-col gap-[20px] h-[388px] items-start left-[41.4px] top-[79px] w-[847.191px]">
+              <div className="content-stretch flex items-start justify-between relative shrink-0 w-[847px]">
+                <div className="content-stretch flex gap-[20px] items-center relative shrink-0 w-[93px]">
+                  <div className="content-stretch flex gap-[10px] h-[26px] items-center relative shrink-0">
+                    <div className="flex items-center justify-center relative shrink-0">
+                      <div className="flex-none rotate-[180deg]">
+                        {/* 这里应该放置柱形元素组件 */}
+                      </div>
+                    </div>
+                    <div className="flex flex-col font-['PingFang_SC:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-white w-[83px]">
+                      <p className="leading-[25.2px] whitespace-pre-wrap">资产总额</p>
+                    </div>
+                  </div>
+                  <div className="content-stretch flex gap-[20px] h-[26px] items-center relative shrink-0">
+                    <div className="flex items-center justify-center relative shrink-0">
+                      <div className="flex-none rotate-[180deg]">
+                        {/* 这里应该放置柱形元素组件 */}
+                      </div>
+                    </div>
+                    <div className="flex flex-col font-['PingFang_SC:Regular',sans-serif] h-[26px] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-white w-[80px]">
+                      <p className="leading-[25.2px] whitespace-pre-wrap">资产净额</p>
+                    </div>
+                  </div>
+                </div>
+                <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)]">
+                  *数据截止至2025年9月
+                </p>
+              </div>
+              <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)]">
+                单位：亿元
+              </p>
+              {/* 这里应该放置图表组件 */}
+              <AssetMetrics data={financialRow.assetTotalNet} />
+            </div>
+          </div>
+
+          {/* 收入模块 */}
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full">
+            <div className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]">
+              <img alt="模块底部" className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" src={img13} />
+            </div>
+            <div className="absolute content-stretch flex flex-col gap-[10px] h-[399.296px] items-start left-[calc(50%+-0.25px)] top-[calc(50%+17.65px)] translate-x-[-50%] translate-y-[-50%] w-[847.001px]">
+              <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
+                <div className="content-stretch flex gap-[20px] items-end relative shrink-0">
+                  <div className="flex items-center justify-center relative shrink-0">
+                    <div className="flex-none rotate-[180deg]">
+                      {/* 这里应该放置柱形元素组件 */}
+                    </div>
+                  </div>
+                  <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[18px] text-white">
+                    收入
+                  </p>
+                </div>
+                <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)] w-[156px] whitespace-pre-wrap">
+                  *数据截止至2025年9月
+                </p>
+              </div>
+              <p className="font-['PingFang_SC:Regular',sans-serif] h-[26px] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)] w-full whitespace-pre-wrap">
+                单位：亿元
+              </p>
+              {/* 这里应该放置图表组件 */}
+              <IncomeMetrics data={financialRow.incomeStatement} />
+            </div>
+          </div>
         </div>
 
-        {/* 资产负债率（百分比）模块 */}
-        <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6">
-          <DebtRatioMetrics data={financialRow.assetLiabilityRatio} />
+        {/* 右侧列 */}
+        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[934.496px]">
+          {/* 利润总额与净利润模块 */}
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full">
+            <div className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]">
+              <img alt="模块底部" className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" src={img13} />
+            </div>
+            <div className="absolute content-stretch flex flex-col gap-[20px] h-[388px] items-start left-[41.4px] top-[79px] w-[847.191px]">
+              <div className="content-stretch flex items-start justify-between relative shrink-0 w-[847px]">
+                <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
+                  <div className="content-stretch flex gap-[10px] h-[26px] items-center relative shrink-0">
+                    <div className="flex items-center justify-center relative shrink-0">
+                      <div className="flex-none rotate-[180deg]">
+                        {/* 这里应该放置柱形元素组件 */}
+                      </div>
+                    </div>
+                    <div className="flex flex-col font-['PingFang_SC:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-white w-[83px]">
+                      <p className="leading-[25.2px] whitespace-pre-wrap">利润总额</p>
+                    </div>
+                  </div>
+                  <div className="content-stretch flex gap-[20px] h-[26px] items-center relative shrink-0">
+                    <div className="flex items-center justify-center relative shrink-0">
+                      <div className="flex-none rotate-[180deg]">
+                        {/* 这里应该放置柱形元素组件 */}
+                      </div>
+                    </div>
+                    <div className="flex flex-col font-['PingFang_SC:Regular',sans-serif] h-[26px] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-white w-[80px]">
+                      <p className="leading-[25.2px] whitespace-pre-wrap">净利润</p>
+                    </div>
+                  </div>
+                </div>
+                <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)]">
+                  *数据截止至2025年9月
+                </p>
+              </div>
+              <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)]">
+                单位：亿元
+              </p>
+              {/* 这里应该放置图表组件 */}
+              <ProfitMetrics data={financialRow.profitTotalNet} />
+            </div>
+          </div>
+
+          {/* 资产负债率（百分比）模块 */}
+          <div className="h-[480px] overflow-clip relative shrink-0 w-full">
+            <div className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]">
+              <img alt="模块底部" className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" src={img13} />
+            </div>
+            <div className="absolute content-stretch flex flex-col gap-[10px] h-[399.296px] items-start left-[calc(50%+-0.25px)] top-[calc(50%+17.65px)] translate-x-[-50%] translate-y-[-50%] w-[847.001px]">
+              <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
+                <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
+                  <div className="bg-[#297ad8] box-border content-stretch flex flex-col items-center justify-end pb-0 pt-[74px] px-0 relative shrink-0 size-[14px]">
+                    <div className="bg-[#46bdbd] content-stretch flex h-[7px] items-start justify-center relative shrink-0 w-full">
+                      <div className="border-[0.1px] border-solid border-white box-border content-stretch flex flex-[1_0_0] items-center justify-center min-h-px min-w-px relative shrink-0">
+                        <div className="bg-white border-[0.1px] border-solid border-white flex-[1_0_0] h-[2px] min-h-px min-w-px shrink-0" />
+                      </div>
+                    </div>
+                  </div>
+                  <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[18px] text-white">
+                    资产负债率
+                  </p>
+                </div>
+                <p className="font-['PingFang_SC:Regular',sans-serif] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)] w-[156px] whitespace-pre-wrap">
+                  *数据截止至2025年9月
+                </p>
+              </div>
+              <p className="font-['PingFang_SC:Regular',sans-serif] h-[26px] leading-[25.2px] not-italic relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)] w-full whitespace-pre-wrap">
+                单位：%
+              </p>
+              {/* 这里应该放置图表组件 */}
+              <DebtRatioMetrics data={financialRow.assetLiabilityRatio} />
+            </div>
+          </div>
         </div>
       </div>
 
       {/* 右下角浮动按钮 */}
-      <button
-        onClick={handleOpenModal}
-        className="fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all duration-300 z-50"
-      >
-        <div className="text-center">
-          <div className="text-sm font-medium">变动</div>
-          <div className="text-sm font-medium">幅度</div>
+      <div className="absolute left-[1765px] top-[923px]">
+        <div className="absolute flex items-center justify-center left-[1765px] size-[108px] top-[923px]">
+          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+            <div className="relative size-[108px]">
+              <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
+                <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
+                  <div className="relative size-full">
+                    <div className="absolute inset-[-1.25%]">
+                      <img alt="按钮背景" className="block max-w-none size-full" src={imgEllipse4119} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </button>
+        <button
+          onClick={handleOpenModal}
+          className="absolute font-['PingFang_SC:Medium',sans-serif] h-[51px] leading-[normal] left-[1818.5px] not-italic text-[20px] text-center text-white top-[952px] tracking-[0.6349px] translate-x-[-50%] w-[55px] whitespace-pre-wrap bg-transparent border-none cursor-pointer"
+        >
+          <p className="mb-0">变动</p>
+          <p>幅度</p>
+        </button>
+      </div>
 
       {/* 变动幅度弹窗 */}
       <VariationModal isOpen={isModalOpen} onClose={handleCloseModal} />