From 88f8896a68d20167e9f22ecdad131ab93e9645e9 Mon Sep 17 00:00:00 2001
From: yuchenglong <yclworks@gmail.com>
Date: Fri, 5 Dec 2025 19:19:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96U4=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4=E5=8D=A1=E7=89=87=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E5=B0=BA=E5=AF=B8=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=9B=BA=E5=AE=9Afooter=EF=BC=8C=E6=94=B9?=
 =?UTF-8?q?=E5=96=84=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/U4/u4.css | 60 ++++++++++++++++++++++++++++++---------------
 src/pages/U4/u4.tsx | 23 ++++++++++++-----
 2 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/pages/U4/u4.css b/src/pages/U4/u4.css
index 1c300ae..5b00849 100644
--- a/src/pages/U4/u4.css
+++ b/src/pages/U4/u4.css
@@ -44,26 +44,30 @@
 .u4-card-grid {
   width: 100%;
   display: flex;
-  justify-content: center;
+  flex-wrap: wrap;
+  justify-content: center; /* 居中显示，无论多少项 */
+  gap: 24px 32px;
+  padding-top: 24px;
 }
 
 .u4-card {
-  width: 445px;
-  min-height: 526px;
-  background-image: url("../../assets/u4-card.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-color: transparent;
-  border-radius: 16px;
-  padding: 80px;
+  width: 260px;
+  height: 260px;
+  background: #ffffff; /* 白色卡片背景 */
+  border-radius: 12px;
+  padding: 18px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 30px;
+  gap: 8px;
   cursor: pointer;
   position: relative;
   justify-content: center;
   align-items: center;
+  /* 轻微阴影和边框，提升卡片样式 */
+  box-shadow: 0 6px 18px rgba(11, 42, 82, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
 }
 
 .u4-card:hover {
@@ -84,26 +88,26 @@
 }
 
 .u4-radio {
-  width: 34px;
-  height: 34px;
+  width: 22px;
+  height: 22px;
   display: block;
   object-fit: contain;
   position: absolute;
-  top: 40px;
-  left: 40px;
+  top: 12px;
+  left: 12px;
 }
 
 .u4-card-title {
-  font-size: 34px;
+  font-size: 18px;
   color: rgba(0, 45, 93, 0.95);
   font-weight: 700;
   text-align: center;
   white-space: normal;
   word-break: break-word;
   overflow-wrap: break-word;
-  line-height: 1.4;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  line-height: 1.2;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
 .u4-card-body {
@@ -128,10 +132,26 @@
 
 .u4-detail-text {
   color: rgba(0, 45, 93, 0.95);
-  font-size: 30px;
-  line-height: 39px;
+  font-size: 14px;
+  line-height: 20px;
 }
 
 .u4-confirm-wrapper {
   margin-top: 12px;
 }
+
+/* 固定在底部的 footer，保持 subtitle 和 确认按钮不随上方内容移动 */
+.u4-footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 180px; /* 可根据页面调整 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none; /* 让按钮外的区域不拦截点击 */
+}
+.u4-footer .u4-subtitle,
+.u4-footer .u4-confirm-wrapper {
+  pointer-events: auto; /* 启用子元素交互 */
+}
diff --git a/src/pages/U4/u4.tsx b/src/pages/U4/u4.tsx
index f5ce169..7f04c90 100644
--- a/src/pages/U4/u4.tsx
+++ b/src/pages/U4/u4.tsx
@@ -37,15 +37,20 @@ const U4: React.FC = () => {
       }));
       setTest(items);
     } else {
-      // alert("未获取到可选套餐信息，无需选择套餐");
       navigate("/UI6");
     }
   }, []);
-  const [selectedId, setSelectedId] = React.useState<number | null>(1);
+  const [selectedId, setSelectedId] = React.useState<number | null>(null);
+
+  // 当 test 更新后，如果没有选择项则默认选择第一个
+  React.useEffect(() => {
+    if (test && test.length && selectedId === null) {
+      setSelectedId(test[0].id);
+    }
+  }, [test]);
 
   React.useEffect(() => {
     console.log("选择的项目", selectedId);
-
   }, [selectedId]);
   return (
     <div className="u4-root">
@@ -57,7 +62,9 @@ const U4: React.FC = () => {
           <div
             key={`${t.id}-${t.exam_id}-${index}`}
             className="u4-card"
-            onClick={() => { setSelectedId(t.id); }}
+            onClick={() => {
+              setSelectedId(t.id);
+            }}
           >
             <div className="u4-card-header">
               <img
@@ -72,9 +79,13 @@ const U4: React.FC = () => {
           </div>
         ))}
       </div>
-      <span className="u4-subtitle">请根据自身状态选择合适的项目</span>
+      <div className="u4-footer">
+        <span className="u4-subtitle">请根据自身状态选择合适的项目</span>
 
-      <LongButton text="确认选择" onClick={handleConfirm} />
+        <div className="u4-confirm-wrapper">
+          <LongButton text="确认选择" onClick={handleConfirm} />
+        </div>
+      </div>
     </div>
   );
 };