Initial commit

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;