优化U4页面样式，调整卡片布局和尺寸，增加底部固定footer，改善用户交互体验

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;
+  width: 260px;
-  min-height: 526px;
+  height: 260px;
-  background-image: url("../../assets/u4-card.png");
+  background: #ffffff; /* 白色卡片背景 */
-  background-repeat: no-repeat;
+  border-radius: 12px;
-  background-size: 100% 100%;
+  padding: 18px;
-  background-color: transparent;
-  border-radius: 16px;
-  padding: 80px;
   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;
+  width: 22px;
-  height: 34px;
+  height: 22px;
   display: block;
   object-fit: contain;
   position: absolute;
-  top: 40px;
+  top: 12px;
-  left: 40px;
+  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;
+  line-height: 1.2;
-  margin-top: 8px;
+  margin-top: 4px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .u4-card-body {
@@ -128,10 +132,26 @@
 
 .u4-detail-text {
   color: rgba(0, 45, 93, 0.95);
-  font-size: 30px;
+  font-size: 14px;
-  line-height: 39px;
+  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; /* 启用子元素交互 */
+}

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>
   );
 };