Initial commit

src/pages/U4/u4.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import "./u4.css";
+import { useNavigate } from "react-router-dom";
+import DecorLine from "../../components/DecorLine";
+import LongButton from "../../components/LongButton";
+import radio0 from "../../assets/radio-0.png";
+import radio1 from "../../assets/radio-1.png";
+interface testType {
+  id: number;
+  title: string;
+  desc: string;
+  taboo: string;
+}
+
+const U4: React.FC = () => {
+  const navigate = useNavigate();
+  const [test, setTest] = React.useState<testType[]>([]);
+  const handleConfirm = () => {
+    navigate("/u5");
+  };
+  React.useEffect(() => {
+    setTest([
+      {
+        id: 1,
+        title: "乳腺 B 超",
+        desc: "适合 40 岁",
+        taboo: "无特别限制",
+      },
+      {
+        id: 2,
+        title: "乳腺钼靶",
+        desc: "适合40岁以上",
+        taboo: "孕期、哺乳期",
+      },
+    ]);
+  }, []);
+  const [selectedId, setSelectedId] = React.useState<number | null>(1);
+
+  React.useEffect(() => {
+    console.log("选择的项目", selectedId);
+  }, [selectedId]);
+  return (
+    <div className="u4-root">
+      <span className="u4-title">请确认体检选项</span>
+      <DecorLine />
+
+      <div className="u4-card-grid">
+        {test.map((t) => (
+          <div
+            key={t.id}
+            className="u4-card"
+            onClick={() => setSelectedId(t.id)}
+          >
+            <div className="u4-card-header">
+              <img
+                className={
+                  "u4-radio " + (selectedId === t.id ? "selected" : "")
+                }
+                src={selectedId === t.id ? radio1 : radio0}
+                alt={selectedId === t.id ? "已选" : "未选"}
+              />
+              <div className="u4-card-title">{t.title}</div>
+            </div>
+
+            <div className="u4-card-body">
+              <div className="u4-detail-row">
+                <div className="u4-detail-bar" />
+                <div className="u4-detail-text">{t.desc}</div>
+              </div>
+              <div className="u4-detail-row">
+                <div className="u4-detail-bar" />
+                <div className="u4-detail-text">禁忌：{t.taboo}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <span className="u4-subtitle">请根据自身状态选择合适的项目</span>
+
+      <LongButton text="确认选择" onClick={handleConfirm} />
+    </div>
+  );
+};
+
+export default U4;