更新UI

src/pages/UI8/UI8.css

@@ -96,6 +96,7 @@
   -ms-overflow-style: none;
   /* IE 和 Edge */
   padding: 20px 10px;
+  margin-bottom: 10px;
 }
 
 .ui8-pdf-container::-webkit-scrollbar {
@@ -232,6 +233,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
 .ui8-right-section :last-child {
@@ -239,6 +241,12 @@
   margin-left: 100px;
 }
 
+.ui8-right-section--hidden {
+  opacity: 0;
+  transform: translateX(80px);
+  pointer-events: none;
+}
+
 .ui8-printer-panel {
   width: 100%;
   height: -6px;

src/pages/UI8/UI8.tsx

@@ -4,7 +4,6 @@ import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "./UI8.css";
 import "../../assets/css/basic.css";
 import { useNavigate } from "react-router-dom";
-import BackButton from "../../components/BackButton";
 import ConfirmButton from "../../components/ConfirmButton";
 import ui8A from "../../assets/ui8A.png";
 import ui8B from "../../assets/ui8B.png";
@@ -73,6 +72,8 @@ const UI8: React.FC = () => {
   const [isPrinterDropdownOpen, setIsPrinterDropdownOpen] =
     useState<boolean>(false);
   const printerDropdownRef = useRef<HTMLDivElement | null>(null);
+  const pdfContainerRef = useRef<HTMLDivElement | null>(null);
+  const [isRightSectionHidden, setIsRightSectionHidden] = useState(false);
 
   const getExamId = () => {
     const storedId = localStorage.getItem("selectedExamId");
@@ -264,9 +265,22 @@ const UI8: React.FC = () => {
     setIsPrinterDropdownOpen((prev) => !prev);
   }, [printers.length, printersLoading]);
 
-  const handleBack = useCallback(() => {
+  const handlePdfScroll = useCallback(() => {
-    navigate(-1);
+    const container = pdfContainerRef.current;
-  }, [navigate]);
+    if (!container) return;
+    const shouldHide = container.scrollTop > 20;
+    setIsRightSectionHidden((prev) => {
+      if (prev === shouldHide) return prev;
+      return shouldHide;
+    });
+  }, []);
+
+  useEffect(() => {
+    setIsRightSectionHidden(false);
+    if (pdfContainerRef.current) {
+      pdfContainerRef.current.scrollTop = 0;
+    }
+  }, [pdfFiles]);
 
   // 打印PDF功能
   const handleConfirm = useCallback(async () => {
@@ -396,7 +410,11 @@ const UI8: React.FC = () => {
 
       <div className="basic-white-block">
         <div className="basic-content">
-          <div className="ui8-pdf-container">
+          <div
+            className="ui8-pdf-container"
+            ref={pdfContainerRef}
+            onScroll={handlePdfScroll}
+          >
             <PdfRenderer
               pdfFiles={pdfFiles}
               loading={loading}
@@ -407,15 +425,18 @@ const UI8: React.FC = () => {
             />
           </div>
 
-          <div className="ui8-right-section">
+          <div
+            className={`ui8-right-section${isRightSectionHidden ? " ui8-right-section--hidden" : ""
+              }`}
+          >
             <img src={ui8A} alt="" />
             <img src={ui8B} alt="" />
           </div>
 
-          <div className="basic-confirm-section">
+          <div className="">
-            <BackButton text="返回" onClick={handleBack} />
+            {/* <BackButton text="返回" onClick={handleBack} /> */}
             <ConfirmButton
-              text={isPrinting ? "打印中..." : "打印"}
+              text={isPrinting ? "打印中..." : "打印导诊单"}
               onClick={handleConfirm}
             />
           </div>

src/pages/UI9/UI9.css

@@ -7,8 +7,8 @@
   width: 100%;
   height: 100%;
 }
+
 .ui9-title {
-  width: 690px;
   height: 88px;
   overflow-wrap: break-word;
   color: rgba(0, 45, 93, 1);
@@ -18,6 +18,7 @@
   text-align: left;
   white-space: nowrap;
 }
+
 .ui9-text {
   width: 628px;
   overflow-wrap: break-word;
@@ -29,6 +30,7 @@
   line-height: 80px;
   text-align: center;
 }
+
 .ui9-instruction {
   height: 34px;
   overflow-wrap: break-word;
@@ -65,4 +67,4 @@
   width: 358px;
   height: 358px;
   margin: 110px 0;
-}
+}

src/pages/UI9/UI9.tsx

@@ -45,7 +45,7 @@ const UI9: React.FC = () => {
 
   return (
     <div className="ui9-root">
-      <span className="ui9-title">太平VIP客户认证</span>
+      <span className="ui9-title">微信扫码添加</span>
       <DecorLine />
       {isAuthenticated ? (
         <>