Initial commit

src/pages/UI6/UI6.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import "./UI6.css";
+import "../../assets/css/basic.css";
+import { useNavigate } from "react-router-dom";
+import BackButton from "../../components/BackButton";
+import ConfirmButton from "../../components/ConfirmButton";
+import DecorLine from "../../components/DecorLine";
+
+const UI6: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  const handleConfirm = () => {
+    navigate("/UI7");
+  };
+  
+  const testData = [
+    {
+      "department": "B超科室",
+      "project": ["甲状腺B超", "腹部B超" , "乳腺B超"]
+    },
+    {
+      "department": "血常规科室",
+      "project": ["血常规", "血型"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图"]
+    },
+    {
+      "department": "心电图科室",
+      "project": ["心电图", "心电图","心电图", "心电图","心电图", "心电图","心电图", "心电图","心电图", "心电图"]
+    }
+  ]
+
+  return (
+    <div className="basic-root">
+      <div className="basic-white-block">
+        <div className="basic-content">
+          <span className="basic-title">体检套餐确认</span>
+          <DecorLine />
+
+          <span className="basic-paragraph">
+              张哈哈女士定制套餐
+              <br />
+              <br />
+              已帮您成功预约2022-02-219:00-9:30的体检，以下是体检套餐详情和价格。
+          </span>
+
+          <div className="ui6-table-container">
+            <table className="ui6-table">
+              <thead>
+                <tr>
+                  <th className="ui6-table-header ui6-table-dept">科室</th>
+                  <th className="ui6-table-header ui6-table-project">检查项目</th>
+                </tr>
+              </thead>
+              <tbody>
+                {testData.map((item, index) => (
+                  <tr key={index} className="ui6-table-row">
+                    <td className="ui6-table-dept-cell">{item.department}</td>
+                    <td className="ui6-table-project-cell">
+                      {item.project.map((project, pIndex) => (
+                        <div key={pIndex} className="ui6-project-item">
+                          <span style={{ paddingLeft: 20 }}>{project}</span>
+                        </div>
+                      ))}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="basic-confirm-section">
+            <BackButton text="返回" onClick={handleBack} />
+            <ConfirmButton text="签名" onClick={handleConfirm} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UI6;