Initial commit

src/App.css

@@ -0,0 +1,202 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* 全局布局 */
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+}
+
+.app-container {
+  position: relative;
+  width: 1080px;
+  height: 1920px;
+  overflow: hidden;
+}
+
+/* 全局背景层 */
+.global-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1080px;
+  height: 1920px;
+  background: url(./assets/bg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.global-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 927px;
+  height: 84px;
+  margin: 98px 0 0 82px;
+  pointer-events: auto;
+}
+
+.header-logo {
+  width: 248px;
+  height: 84px;
+}
+
+.header-title {
+  width: 442px;
+  height: 53px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 56px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 56px;
+  margin-top: 17px;
+}
+
+.header-time {
+  width: 286px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 31px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 31px;
+  margin: 32px 0 0 724px;
+  pointer-events: auto;
+}
+
+/* 内容区域 */
+.content-area {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.container {
+  margin: 0;
+  padding-top: 10vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: 0.75s;
+}
+
+.logo.tauri:hover {
+  filter: drop-shadow(0 0 2em #24c8db);
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+h1 {
+  text-align: center;
+}
+
+input,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #0f0f0f;
+  background-color: #ffffff;
+  transition: border-color 0.25s;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #396cd8;
+}
+button:active {
+  border-color: #396cd8;
+  background-color: #e8e8e8;
+}
+
+input,
+button {
+  outline: none;
+}
+
+#greet-input {
+  margin-right: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
+
+  a:hover {
+    color: #24c8db;
+  }
+
+  input,
+  button {
+    color: #ffffff;
+    background-color: #0f0f0f98;
+  }
+  button:active {
+    background-color: #0f0f0f69;
+  }
+}

src/App.tsx

@@ -0,0 +1,77 @@
+import { Routes, Route } from "react-router-dom";
+import { useEffect, useState } from "react";
+// import { listen } from "@tauri-apps/api/event";
+import "./App.css";
+import icon from "./assets/icon.png";
+import U1 from "./pages/U1/u1";
+import U2 from "./pages/U2/u2";
+import U3 from "./pages/U3/u3";
+import U4 from "./pages/U4/u4";
+
+import UI6 from "./pages/UI6/UI6";
+import UI7 from "./pages/UI7/UI7";
+
+function App() {
+  const [time, setTime] = useState<string>(() => formatDate(new Date()));
+
+  useEffect(() => {
+    const id = setInterval(() => setTime(formatDate(new Date())), 1000);
+    // let unlisten: (() => void) | null = null;
+    // (async () => {
+    //   try {
+    //     const off = await listen("idcard-error", (e) => {
+    //       console.error("[idcard-error]", e.payload);
+    //     });
+    //     unlisten = off;
+    //   } catch (err) {
+    //     console.error("failed to set idcard-error listener", err);
+    //   }
+    // })();
+    return () => {
+      clearInterval(id);
+      // if (unlisten) unlisten();
+    };
+  }, []);
+
+  return (
+    <div className="app-container">
+      {/* 全局背景层 */}
+      <div className="global-background">
+        {/* 顶部固定区域 - 始终显示 */}
+        <div className="global-header">
+          <img className="header-logo" alt="logo" src={icon} />
+          <span className="header-title">医疗自助服务系统</span>
+        </div>
+        <span className="header-time">{time}</span>
+      </div>
+
+      {/* 路由内容区域 */}
+      <div className="content-area">
+        <Routes>
+          <Route path="/" element={<U1 />} />
+          <Route path="/u2" element={<U2 />} />
+          <Route path="/u3" element={<U3 />} />
+          <Route path="/u4" element={<U4 />} />
+          <Route path="/UI6" element={<UI6 />} />
+          <Route path="/UI7" element={<UI7 />} />
+        </Routes>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+function pad(num: number) {
+  return String(num).padStart(2, "0");
+}
+
+function formatDate(d: Date) {
+  const Y = d.getFullYear();
+  const M = pad(d.getMonth() + 1);
+  const D = pad(d.getDate());
+  const hh = pad(d.getHours());
+  const mm = pad(d.getMinutes());
+  const ss = pad(d.getSeconds());
+  return `${Y}-${M}-${D} ${hh}:${mm}:${ss}`;
+}

src/assets/css/basic.css

@@ -0,0 +1,65 @@
+.basic-root {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 36%;
+  width: 100%;
+  height: 100%;
+}
+
+/* 白色背景块 */
+.basic-white-block {
+  width: 1036px;
+  height: 1414px;
+  background-color: #ffffff;
+  /* 从上到下渐变白色到透明 */
+  background: linear-gradient(to bottom, #ffffff 0%, transparent 80%);
+  border-radius: 20px;
+}
+
+.basic-title {
+  height: 50px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 52px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 91px;
+  margin-bottom: 33px;
+}
+
+.basic-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 50px 0;
+  box-sizing: border-box;
+}
+
+.basic-confirm-section {
+  width: 896px;
+  position: fixed;
+  bottom: 112px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.basic-paragraph {
+  width: 919px;
+  height: auto;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 28px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: center;
+  line-height: 26px;
+  margin: 0 0 53px 0;
+}

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/components/BackButton.css

@@ -0,0 +1,36 @@
+.back-button {
+  position: relative;
+  width: 395px;
+  height: 112px;
+  background: url("../assets/buttons/back-button.png") center center no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.back-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.back-button:active {
+  transform: scale(0.98);
+}
+
+.back-button-text {
+  width: 99px;
+  height: 49px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 51px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 51px;
+}

src/components/BackButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./BackButton.css";
+
+interface BackButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const BackButton: React.FC<BackButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="back-button" onClick={onClick}>
+      <span className="back-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default BackButton;

src/components/ConfirmButton.css

@@ -0,0 +1,37 @@
+.confirm-button {
+  position: relative;
+  width: 395px;
+  height: 112px;
+  background: url("../assets/buttons/confirm-button.png") center center
+    no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.confirm-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.confirm-button:active {
+  transform: scale(0.98);
+}
+
+.confirm-button-text {
+  width: 151px;
+  height: 49px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 51px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 51px;
+}

src/components/ConfirmButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./ConfirmButton.css";
+
+interface ConfirmButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const ConfirmButton: React.FC<ConfirmButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="confirm-button" onClick={onClick}>
+      <span className="confirm-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default ConfirmButton;

src/components/DecorLine.css

@@ -0,0 +1,4 @@
+.decor-line {
+  margin-top: 3%;
+  margin-bottom: 3%;
+}

src/components/DecorLine.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import "./DecorLine.css";
+import decorLineImg from "../assets/redstrip.png";
+
+const DecorLine: React.FC = () => {
+  return (
+    <img className="decor-line" src={decorLineImg} alt="decorative line" />
+  );
+};
+
+export default DecorLine;

src/components/LongButton.css

@@ -0,0 +1,34 @@
+.long-button {
+  position: relative;
+  width: 594px;
+  height: 108px;
+  background: url("../assets/buttons/button.png") center center no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.long-button:hover {
+  transform: translateY(-2px);
+}
+
+.long-button:active {
+  transform: translateY(0);
+}
+
+.long-button-text {
+  height: 48px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 49px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 43px;
+}

src/components/LongButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./LongButton.css";
+
+interface LongButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const LongButton: React.FC<LongButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="long-button" onClick={onClick}>
+      <span className="long-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default LongButton;

src/components/LongButtonLoading.css

@@ -0,0 +1,35 @@
+.long-button-loading {
+  position: relative;
+  width: 594px;
+  height: 108px;
+  background: url("../assets/buttons/button-loading.png") center center
+    no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.long-button-loading:hover {
+  transform: translateY(-2px);
+}
+
+.long-button-loading:active {
+  transform: translateY(0);
+}
+
+.long-button-loading-text {
+  height: 48px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 49px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 43px;
+}

src/components/LongButtonLoading.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./LongButtonLoading.css";
+
+interface LongButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const LongButtonLoading: React.FC<LongButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="long-button-loading" onClick={onClick}>
+      <span className="long-button-loading-text">{text}</span>
+    </div>
+  );
+};
+
+export default LongButtonLoading;

src/components/WaitButton.css

@@ -0,0 +1,36 @@
+.wait-button {
+  position: relative;
+  width: 395px;
+  height: 112px;
+  background: url("../assets/buttons/wait-button.png") center center no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.wait-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.wait-button:active {
+  transform: scale(0.98);
+}
+
+.wait-button-text {
+  width: 151px;
+  height: 49px;
+  overflow-wrap: break-word;
+  color: #e0e0e0;
+  font-size: 51px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 51px;
+}

src/components/WaitButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./WaitButton.css";
+
+interface WaitButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const WaitButton: React.FC<WaitButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="wait-button" onClick={onClick}>
+      <span className="wait-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default WaitButton;

src/main.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HashRouter } from "react-router-dom";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </React.StrictMode>
+);

src/pages/U1/u1.css

@@ -0,0 +1,71 @@
+.u1-root{
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 45%;
+  width: 100%;
+  height: 100%;
+}
+
+.u1-title {
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 88px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  line-height: 114px;
+}
+
+.u1-instruction {
+  width: 374px;
+  height: 33px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 34px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 44px;
+  margin-bottom: 20%;
+}
+.u1-decor-line{
+  margin-top: 3%;
+  margin-bottom: 3%;
+}
+.u1-button-text-wrapper {
+  display: flex;
+  height: 108px;
+  width: 594px;
+  background: url(../../assets/buttons/button.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.u1-button-text {
+  width: 192px;
+  height: 48px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 49px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 49px;
+}
+
+
+.u1-semicircle {
+  position: absolute;
+  left: 27%;
+  transform: translateX(-50%);
+  top: 810px;  
+  width: 578px; 
+  height: 588px;
+  z-index: -1;
+}

src/pages/U1/u1.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./u1.css";
+import { useNavigate } from "react-router-dom";
+// import { invoke } from "@tauri-apps/api/core";
+// import { listen } from "@tauri-apps/api/event";
+import idcard from "../../assets/idcard.png";
+import semicircle from "../../assets/semicircle.png";
+import LongButton from "../../components/LongButton";
+import LongButtonLoading from "../../components/LongButtonLoading";
+import DecorLine from "../../components/DecorLine";
+
+const U1: React.FC = () => {
+  const navigate = useNavigate();
+
+  const [reading, setReading] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  const handleStart = () => {
+    if (reading) return; // 避免重复点击
+    setReading(true);
+    // 启动后端监听
+    // invoke("start_idcard_listen").catch((e) => {
+    //   console.error("start_idcard_listen failed", e);
+    // });
+    // 6 秒超时恢复
+    timerRef.current = window.setTimeout(() => {
+      if (reading) {
+        console.warn("未在 6 秒内读取到身份证信息，恢复初始状态");
+        setReading(false);
+        // invoke("stop_idcard_listen").catch(() => {});
+      }
+    }, 6000);
+  };
+
+  useEffect(() => {
+    if (!reading) return;
+    // let unlisten: (() => void) | null = null;
+    // (async () => {
+    //   try {
+    //     const off = await listen("idcard-data", (e) => {
+    //       const payload: any = e.payload;
+    //       console.log("[idcard-data]", payload);
+    //       // 成功：清理定时器，停止监听，跳转并传递身份证号
+    //       if (timerRef.current) {
+    //         clearTimeout(timerRef.current);
+    //         timerRef.current = null;
+    //       }
+    //       invoke("stop_idcard_listen").catch(() => {});
+    //       setReading(false);
+    //       navigate("/u2", {
+    //         state: { idCardNo: payload?.id_card_no, cardData: payload },
+    //       });
+    //     });
+    //     unlisten = off;
+    //   } catch (err) {
+    //     console.error("listen idcard-data failed", err);
+    //   }
+    // })();
+    return () => {
+      // if (unlisten) unlisten();
+    };
+  }, [reading, navigate]);
+
+  useEffect(() => {
+    return () => {
+      // 页面卸载时清理
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = null;
+      // if (reading) invoke("stop_idcard_listen").catch(() => {});
+    };
+  }, [reading]);
+
+  return (
+    <div className="u1-root">
+      <span className="u1-title">
+        欢迎使用圆和医疗
+        <br />
+        自助签到系统
+      </span>
+      <DecorLine />
+      <img alt="card reader" src={idcard} />
+      <span className="u1-instruction">请放置身份证在读卡区域</span>
+      <img className="u1-semicircle" alt="start button" src={semicircle} />
+      {!reading && <LongButton text="开始签到" onClick={handleStart} />}
+      {reading && <LongButtonLoading text="身份信息读取中..." />}
+    </div>
+  );
+};
+
+export default U1;

src/pages/U2/u2.css

@@ -0,0 +1,131 @@
+.u2-root {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 45%;
+  width: 100%;
+  height: 100%;
+}
+.u2-title {
+  width: 875px;
+  height: 60px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 57px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.u2-info-card {
+  position: relative;
+  margin: 40px auto 0 auto;
+  width: 896px;
+  height: 607px;
+  background: url(../../assets/u2-card.png) 100% no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 40px 48px;
+}
+
+.u2-avatar {
+  max-width: 290px;
+  height: auto;
+  margin-right: 40px;
+}
+
+.u2-details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.u2-detail-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.u2-detail-bar {
+  width: 6px;
+  height: 39px;
+  background: rgba(0, 45, 93, 0.9);
+  border-radius: 3px;
+  margin-right: 20px;
+}
+
+.u2-detail-text {
+  color: rgba(0, 45, 93, 1);
+  font-size: 35px;
+  font-family: NotoSansCJKsc-Regular;
+  line-height: 42px;
+}
+
+.u2-user-details {
+  width: 435px;
+  height: auto;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 35px;
+  font-family: NotoSansCJKsc-Regular;
+  font-weight: normal;
+  text-align: left;
+  line-height: 42px;
+  margin-top: 24px;
+}
+
+.u2-decor-1 {
+  position: absolute;
+  left: 249px;
+  top: 452px;
+  width: 398px;
+  height: 209px;
+}
+
+.u2-decor-2 {
+  position: absolute;
+  left: 381px;
+  top: -47px;
+  width: 124px;
+  height: 260px;
+}
+
+.u2-instruction {
+  margin-top: 24px;
+  margin-bottom: 15%;
+  color: rgba(0, 45, 93, 1);
+  font-size: 24px;
+  text-align: center;
+}
+
+.u2-asterisk {
+  color: red;
+  margin-right: 8px;
+  font-weight: 700;
+  font-size: 24px;
+  vertical-align: baseline;
+}
+
+.u2-confirm-section {
+  width: 896px;
+  margin: 32px auto 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.u2-semicircle {
+  position: absolute;
+  left: 27%;
+  transform: translateX(-50%);
+  top: 810px;
+  width: 578px;
+  height: 588px;
+  z-index: -1;
+}

src/pages/U2/u2.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import "./u2.css";
+import { useNavigate, useLocation } from "react-router-dom";
+import DecorLine from "../../components/DecorLine";
+import avatar from "../../assets/avatar.png";
+import semicircle from "../../assets/semicircle.png";
+import BackButton from "../../components/BackButton";
+import ConfirmButton from "../../components/ConfirmButton";
+const U2: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const idCardNo = (location.state as any)?.idCardNo;
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  const handleConfirm = () => {
+    //判断是否为太平VIP客户
+    const isVIP = true; // 这里可以替换为实际的判断逻辑
+    if (isVIP) {
+      navigate("/u3");
+      return;
+    } else {
+      // 是否套餐待定
+      const isPackageUndecided = false; // 这里可以替换为实际的判断逻辑
+      if (isPackageUndecided) {
+        navigate("/u4");
+      } else {
+        navigate("/u5");
+      }
+    }
+  };
+
+  return (
+    <div className="u2-root">
+      <span className="u2-title">尊敬的张先生/女士，欢迎您的到来：</span>
+      <DecorLine />
+      <div className="u2-info-card">
+        <img className="u2-avatar" src={avatar} alt="avatar" />
+        <div className="u2-details-list">
+          <div className="u2-detail-row">
+            <div className="u2-detail-bar" />
+            <div className="u2-detail-text">姓名：xxx</div>
+          </div>
+
+          <div className="u2-detail-row">
+            <div className="u2-detail-bar" />
+            <div className="u2-detail-text">性别：x</div>
+          </div>
+
+          <div className="u2-detail-row">
+            <div className="u2-detail-bar" />
+            <div className="u2-detail-text">年龄：56岁</div>
+          </div>
+
+          <div className="u2-detail-row">
+            <div className="u2-detail-bar" />
+            <div className="u2-detail-text">
+              证件号：{idCardNo ?? "xxxxxxxxxxxxxx"}
+            </div>
+          </div>
+
+          <div className="u2-detail-row">
+            <div className="u2-detail-bar" />
+            <div className="u2-detail-text">手机号：166xxxxxxxx</div>
+          </div>
+
+          <div className="u2-detail-row">
+            <div className="u2-detail-bar" />
+            <div className="u2-detail-text">婚姻状况：未婚</div>
+          </div>
+        </div>
+      </div>
+      <span className="u2-instruction">
+        <span className="u2-asterisk">*</span> 如信息有误，请联系前台
+      </span>
+      <img className="u2-semicircle" alt="start button" src={semicircle} />
+      <div className="u2-confirm-section">
+        <BackButton text="返回" onClick={handleBack} />
+        <ConfirmButton text="确认" onClick={handleConfirm} />
+      </div>
+    </div>
+  );
+};
+
+export default U2;

src/pages/U3/u3.css

@@ -0,0 +1,65 @@
+.u3-root {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 45%;
+  width: 100%;
+  height: 100%;
+}
+.u3-title {
+  width: 690px;
+  height: 88px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 92px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+}
+.u3-text {
+  width: 628px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 57px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: left;
+  line-height: 80px;
+  text-align: center;
+}
+.u3-instruction {
+  width: 393px;
+  height: 34px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 35px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 46px;
+  margin-bottom: 100px;
+}
+
+.u3-confirm-section {
+  width: 896px;
+  margin: 32px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.u3-qrcode {
+  width: 284px;
+  height: 284px;
+  margin: 40px 0;
+}
+
+.u3-success-img {
+  width: 358px;
+  height: 358px;
+  margin: 110px 0;
+}

src/pages/U3/u3.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import "./u3.css";
+import { useNavigate } from "react-router-dom";
+import DecorLine from "../../components/DecorLine";
+
+import BackButton from "../../components/BackButton";
+import ConfirmButton from "../../components/ConfirmButton";
+import QR from "../../assets/QR.png";
+import success from "../../assets/success.png";
+const U3: React.FC = () => {
+  const navigate = useNavigate();
+  // 是否认证成功
+  const isAuthenticated = false;
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  const handleConfirm = () => {
+    // 是否套餐待定
+    const isPackageUndecided = true;
+    if (isPackageUndecided) {
+      navigate("/u4");
+    } else {
+      navigate("/u5");
+    }
+  };
+
+  return (
+    <div className="u3-root">
+      <span className="u3-title">太平VIP客户认证</span>
+      <DecorLine />
+      {isAuthenticated ? (
+        <>
+          <span className="u3-text">认证成功</span>
+          <img className="u3-success-img" src={success} alt="success" />
+        </>
+      ) : (
+        <>
+          <span className="u3-text">检测到您是太平VIP客户</span>
+          <span className="u3-text">需要完成身份认证后继续</span>
+          {/* 认证二维码 */}
+          <img className="u3-qrcode" src={QR} alt="二维码位置" />
+          <span className="u3-instruction">请使用微信扫码实名认证</span>
+        </>
+      )}
+      <div className="u3-confirm-section">
+        <BackButton text="返回" onClick={handleBack} />
+        <ConfirmButton text="确认" onClick={handleConfirm} />
+      </div>
+    </div>
+  );
+};
+
+export default U3;

src/pages/U4/u4.css

@@ -0,0 +1,122 @@
+.u4-root {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 45%;
+  width: 100%;
+  height: 100%;
+}
+.u4-title {
+  width: 690px;
+  height: 88px;
+  color: rgba(0, 45, 93, 1);
+  font-size: 92px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+}
+.u4-text {
+  width: 628px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 57px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: left;
+  line-height: 80px;
+  text-align: center;
+}
+
+.u4-subtitle {
+  width: 496px;
+  height: 35px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 35px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  margin-top: 5%;
+  margin-bottom: 18%;
+}
+
+.u4-card-grid {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.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;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  cursor: pointer;
+}
+
+.u4-card:hover {
+  transform: translateY(-6px);
+}
+
+.u4-card.selected {
+  box-shadow: 0 10px 26px rgba(11, 42, 82, 0.18);
+  border: 2px solid rgba(214, 30, 54, 0.15);
+}
+
+.u4-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.u4-radio {
+  width: 34px;
+  height: 34px;
+  display: block;
+  object-fit: contain;
+}
+
+.u4-card-title {
+  font-size: 36px;
+  color: rgba(0, 45, 93, 0.95);
+  font-weight: 700;
+}
+
+.u4-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-left: 20px;
+}
+
+.u4-detail-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.u4-detail-bar {
+  width: 6px;
+  height: 39px;
+  background: rgba(0, 45, 93, 0.9);
+  border-radius: 3px;
+}
+
+.u4-detail-text {
+  color: rgba(0, 45, 93, 0.95);
+  font-size: 30px;
+  line-height: 39px;
+}
+
+.u4-confirm-wrapper {
+  margin-top: 12px;
+}

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;

src/pages/UI6/UI6.css

@@ -0,0 +1,78 @@
+.ui6-table-container {
+  width: 754px;
+  max-height: 881px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* 隐藏滚动条但保持滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 和 Edge */
+}
+
+.ui6-table-container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.ui6-table {
+  width: 754px;
+  border-collapse: collapse;
+  background-color: #ffffff;
+}
+
+.ui6-table-header {
+  color: rgba(0, 45, 93, 1);
+  font-size: 32px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  padding: 10px;
+  border: 1px solid rgba(0, 45, 93, 0.2);
+  background-color: rgba(233, 242, 245, 1);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.ui6-table-dept {
+  width: 200px;
+  background-color: #b12651;
+  color: white;
+}
+
+.ui6-table-project {
+  width: 554px;
+  background-color: #053875;
+  color: white;
+}
+
+.ui6-table-row {
+  border-bottom: 2px solid #d3d3d3;
+  border-right: 2px solid #d3d3d3;
+}
+
+.ui6-table-dept-cell {
+  color: black;
+  background-color: #daeef2;
+  font-size: 24px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  padding-left: 20px;
+  border-right: 2px solid #d3d3d3;
+  border-left: 2px solid #d3d3d3;
+}
+
+.ui6-table-project-cell {
+  color: black;
+  font-size: 24px;
+  padding: 0;
+  font-family: NotoSansCJKsc-Regular;
+  text-align: left;
+}
+
+.ui6-project-item {
+  border-bottom: 2px solid #d3d3d3;
+  line-height: 1.5;
+}
+
+.ui6-project-item:last-child {
+  border-bottom: none;
+}

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;

src/pages/UI7/UI7.css

@@ -0,0 +1,100 @@
+.ui7-text-wrapper {
+  height: 623px;
+  width: 975px;
+  border: 2px solid #000;
+  border-radius: 30px;
+  color: #000;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* 隐藏滚动条但保持滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 和 Edge */
+}
+
+.ui7-text-wrapper::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.ui7-text-content {
+  padding: 32px 42px;
+}
+
+.ui7-text-content .paragraph_1 {
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 0;
+}
+
+.ui7-text_4 {
+  width: 393px;
+  height: 35px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 32px;
+  font-family: NotoSansCJKsc-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 46px;
+  margin: 12px 0 22px 0;
+}
+
+.ui7-signature-wrapper {
+  height: 338px;
+  width: 975px;
+  border-radius: 30px;
+  background-color: white;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.ui7-signature-canvas {
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  touch-action: none;
+  /* 优化图像渲染，使用高质量抗锯齿 */
+  image-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translateZ(0);
+  will-change: contents;
+}
+
+.ui7-clear-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 8px 16px;
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  color: #000;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: NotoSansCJKsc-Regular;
+  transition: none;
+}
+
+.ui7-clear-button:hover {
+  color: #000;
+  border: none;
+  outline: none;
+}
+
+.ui7-clear-button:focus {
+  border: none;
+  outline: none;
+}
+
+.ui7-clear-button:active {
+  border: none;
+  outline: none;
+  background-color: transparent;
+}

src/pages/UI7/UI7.tsx

@@ -0,0 +1,284 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./UI7.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";
+import WaitButton from "../../components/WaitButton";
+
+const UI6: React.FC = () => {
+  const navigate = useNavigate();
+  const [countdown, setCountdown] = useState(5);
+  const [showWaitButton, setShowWaitButton] = useState(true);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const dprRef = useRef<number>(1);
+  const lastPointRef = useRef<{ x: number; y: number } | null>(null);
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    } else {
+      setShowWaitButton(false);
+    }
+  }, [countdown]);
+
+  useEffect(() => {
+    const initCanvas = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      const ctx = canvas.getContext("2d", { 
+        willReadFrequently: false,
+        alpha: true 
+      });
+      if (!ctx) return;
+
+      // 获取 canvas 的显示尺寸
+      const rect = canvas.getBoundingClientRect();
+      // 使用更高的缩放倍数（3倍）来提高分辨率
+      const scale = 3;
+      dprRef.current = scale;
+      
+      // 设置 canvas 内部尺寸（高分辨率，3倍）
+      canvas.width = rect.width * scale;
+      canvas.height = rect.height * scale;
+      
+      // 缩放上下文以匹配显示尺寸
+      ctx.scale(scale, scale);
+      
+      // 设置 canvas 的 CSS 尺寸为显示尺寸
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+
+      // 设置绘制样式（启用抗锯齿，优化参数）
+      ctx.strokeStyle = "#000000";
+      ctx.lineWidth = 2;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = "high";
+      ctx.globalCompositeOperation = "source-over";
+    };
+
+    // 延迟初始化以确保 DOM 完全渲染
+    const timer = setTimeout(initCanvas, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const getCoordinates = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+
+    const rect = canvas.getBoundingClientRect();
+    if ("touches" in e) {
+      return {
+        x: e.touches[0].clientX - rect.left,
+        y: e.touches[0].clientY - rect.top,
+      };
+    } else {
+      return {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      };
+    }
+  };
+
+  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const { x, y } = getCoordinates(e);
+    
+    // 记录起始点
+    lastPointRef.current = { x, y };
+    
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    setIsDrawing(true);
+  };
+
+  const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
+    e.preventDefault();
+    if (!isDrawing || !lastPointRef.current) return;
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const { x, y } = getCoordinates(e);
+    const lastPoint = lastPointRef.current;
+
+    // 使用二次贝塞尔曲线平滑绘制
+    const midX = (lastPoint.x + x) / 2;
+    const midY = (lastPoint.y + y) / 2;
+    
+    ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, midX, midY);
+    ctx.stroke();
+    
+    // 更新最后一个点
+    lastPointRef.current = { x, y };
+  };
+
+  const stopDrawing = () => {
+    setIsDrawing(false);
+    lastPointRef.current = null;
+  };
+
+  const clearCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // 清除整个 canvas（使用显示坐标系统）
+    const rect = canvas.getBoundingClientRect();
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    
+    // 重新初始化绘制样式
+    ctx.strokeStyle = "#000000";
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+  };
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  const handleConfirm = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      navigate("/UI7");
+      return;
+    }
+
+    // 下载签名图片
+    canvas.toBlob((blob) => {
+      if (!blob) return;
+
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `签名_${new Date().getTime()}.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, "image/png");
+
+    navigate("/UI7");
+  };
+
+  return (
+    <div className="basic-root">
+      <div className="basic-white-block">
+        <div className="basic-content">
+          <span className="basic-title">体检知情同意书确认</span>
+          <DecorLine />
+
+          <div className="ui7-text-wrapper">
+            <div className="ui7-text-content">
+            <span className="paragraph_1">
+                  尊敬的受检者：
+                  <br />
+                  <br />
+                  欢迎您参加本次健康体检！为保障您的合法权益，现就体检相关事项告知如下，请您认真阅读并确认签署。
+                  <br />
+                  一、体检目的
+                  <br />
+                  <br />
+                  本次健康体检旨在通过常规医学检查，了解您的身体健康状况，发现潜在的疾病风险，供您及医生进行健康指导与干预。
+                  <br />
+                  1.
+                  <br />
+                  体检结果仅供参考，不等同于临床诊断。如发现异常，请及时到相关专科医院进一步检查与治疗。
+                  <br />
+                  2.
+                  <br />
+                  二、体检须知
+                  <br />
+                  3.
+                  <br />
+                  空腹要求：抽血、腹部B超等项目需空腹8小时以上。
+                  <br />
+                  4.
+                  <br />
+                  女性注意事项：经期及妊娠期女性请提前告知医护人员，避免放射类检查（如胸片、CT等）。
+                  <br />
+                  5.
+                  <br />
+                  贵重物品：请妥善保管个人物品，中心不承担遗失责任。
+                  <br />
+                  身体状况告知：如有重大疾病史、药物过敏史、手术史等，请提前告知医护人员。
+                  <br />
+                  体检安全：如在体检过程中出现不适，应立即告知现场医护人员。
+                  <br />
+                  <br />
+                  三、隐私与信息保护
+                  <br />
+                  1.
+                  <br />
+                  体检机构将严格遵守国家相关法律法规，对您的个人信息和体检资料予以保密，未经本人授权，不会向第三方泄露。
+                  <br />
+                  2.
+                  <br />
+                  四、体检风险告知
+                  <br />
+                  3.
+                  <br />
+                  部分检查（如抽血、X射线、CT、宫颈刮片等）可能带来轻微不适或风险。
+                  <br />
+                  体检结果可能存在一定误差，需结合临床进一步判断。
+                  <br />
+                  若因个人隐瞒病史或未遵守体检要求导致结果偏差，责任由受检者自
+                </span>
+            </div>
+
+          </div>
+
+          <span className="ui7-text_4">请阅读后在下方签名确认</span>
+
+          <div className="ui7-signature-wrapper">
+            <canvas
+              ref={canvasRef}
+              className="ui7-signature-canvas"
+              onMouseDown={startDrawing}
+              onMouseMove={draw}
+              onMouseUp={stopDrawing}
+              onMouseLeave={stopDrawing}
+              onTouchStart={startDrawing}
+              onTouchMove={draw}
+              onTouchEnd={stopDrawing}
+            />
+            <button className="ui7-clear-button" onClick={clearCanvas}>
+              清除
+            </button>
+          </div>
+
+          <div className="basic-confirm-section">
+            <BackButton text="返回" onClick={handleBack} />
+            {showWaitButton ? (
+              <WaitButton text={`等待(${countdown})S`} onClick={handleConfirm} />
+            ) : (
+              <ConfirmButton text="提交" onClick={handleConfirm} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UI6;

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />