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

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