From 3ed22668f1c9442d5f2c22209971f8ff30df22eb Mon Sep 17 00:00:00 2001
From: freedakgmail <freedak.gemini@gmail.com>
Date: Mon, 17 Aug 2026 22:04:41 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E5=85=AC=E7=A7=AF=E9=87=91=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E4=B9=9F=E6=94=B9=E4=B8=BA=E5=88=86=E7=BB=84=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/social-insurance/AccountCard.tsx    | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/social-insurance/AccountCard.tsx b/frontend/src/pages/social-insurance/AccountCard.tsx
index 485889d..5554457 100644
--- a/frontend/src/pages/social-insurance/AccountCard.tsx
+++ b/frontend/src/pages/social-insurance/AccountCard.tsx
@@ -330,12 +330,35 @@ export function AccountCard({
                       ))}
                     </div>
                   )}
-                  <div className="grid md:grid-cols-4 gap-3 text-sm">
-                    <div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">账户类型</span><span className="font-medium">{config.accountType === 'SUPPLEMENTARY' ? '补充公积金' : '基本公积金'}</span></div>
-                    <div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金基数下限</span><span className="font-medium">¥{fmt(config.housingBaseMin > 0 ? config.housingBaseMin : config.baseMin)}</span></div>
-                    <div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金基数上限</span><span className="font-medium">¥{fmt(config.housingBaseMax > 0 ? config.housingBaseMax : config.baseMax)}</span></div>
-                    <div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金(企业)</span><span className="font-medium">{config.housingOrg}%</span></div>
-                    <div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金(个人)</span><span className="font-medium">{config.housingEmp}%</span></div>
+                  <div className="space-y-3">
+                    {/* 缴费基数范围 */}
+                    <div className="bg-gray-50 rounded-lg p-3">
+                      <div className="text-xs font-medium text-gray-400 mb-2">缴费基数范围</div>
+                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+                        <div className="flex flex-col">
+                          <span className="text-xs text-gray-400">账户类型</span>
+                          <span className="font-medium">{config.accountType === 'SUPPLEMENTARY' ? '补充公积金' : '基本公积金'}</span>
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-xs text-gray-400">下限</span>
+                          <span className="font-medium">¥{fmt(config.housingBaseMin > 0 ? config.housingBaseMin : config.baseMin)}</span>
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-xs text-gray-400">上限</span>
+                          <span className="font-medium">¥{fmt(config.housingBaseMax > 0 ? config.housingBaseMax : config.baseMax)}</span>
+                        </div>
+                      </div>
+                    </div>
+                    {/* 缴存比例（企业 / 个人） */}
+                    <div className="bg-gray-50 rounded-lg p-3">
+                      <div className="text-xs font-medium text-gray-400 mb-2">缴存比例（企业 / 个人）</div>
+                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+                        <div className="flex flex-col">
+                          <span className="text-xs text-gray-400">公积金</span>
+                          <span className="font-medium">{config.housingOrg}% / {config.housingEmp}%</span>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </>
               ) : (