diff --git a/src/pages/UI7/UI7.css b/src/pages/UI7/UI7.css index 913f436..eb1fccd 100644 --- a/src/pages/UI7/UI7.css +++ b/src/pages/UI7/UI7.css @@ -22,6 +22,29 @@ padding: 32px 42px; } +.ui7-basic-title { + height: 91px; + display: flex; + align-items: center; + justify-content: center; + overflow-wrap: break-word; + word-break: break-word; + color: rgba(0, 45, 93, 1); + font-size: 52px; + font-family: NotoSansCJKsc-Bold; + font-weight: 700; + text-align: center; + white-space: normal; + line-height: 91px; + overflow: hidden; +} + +.ui7-basic-title.compact { + font-size: 42px; + line-height: 45px; + height: 91px; +} + .ui7-text-content .paragraph_1 { font-family: NotoSansCJKsc-Medium; font-weight: 500; diff --git a/src/pages/UI7/UI7.tsx b/src/pages/UI7/UI7.tsx index 1d76781..1b759fe 100644 --- a/src/pages/UI7/UI7.tsx +++ b/src/pages/UI7/UI7.tsx @@ -103,6 +103,8 @@ const UI7: React.FC = () => { const [currentStep, setCurrentStep] = useState(0); const [hasSignature, setHasSignature] = useState(false); const [currentPdfPageCount, setCurrentPdfPageCount] = useState(0); + const titleRef = useRef(null); + const [isTitleCompact, setIsTitleCompact] = useState(false); const totalRequiredSignatures = pdfInfoList.length + 1; const isInstructionStep = currentStep === 0; @@ -247,6 +249,50 @@ const UI7: React.FC = () => { setHasSignature(false); }, [currentStep]); + // 检测标题文本是否超过一行,如果超过则应用缩小样式 + useEffect(() => { + const checkTitleOverflow = () => { + if (!titleRef.current) return; + + const element = titleRef.current; + + // 先移除 compact 类,以正常大小检测 + element.classList.remove('compact'); + + // 使用 requestAnimationFrame 确保 DOM 已更新 + requestAnimationFrame(() => { + if (!element) return; + + // 获取实际内容高度 + const scrollHeight = element.scrollHeight; + // 单行高度为 91px(line-height) + const singleLineHeight = 91; + + // 如果内容高度超过单行高度,说明换行了 + const needsCompact = scrollHeight > singleLineHeight; + setIsTitleCompact(needsCompact); + + // 如果需要 compact,添加类名 + if (needsCompact) { + element.classList.add('compact'); + } + }); + }; + + // 延迟执行,确保 DOM 已渲染 + const timer = setTimeout(() => { + checkTitleOverflow(); + }, 100); + + // 监听窗口大小变化 + window.addEventListener('resize', checkTitleOverflow); + + return () => { + clearTimeout(timer); + window.removeEventListener('resize', checkTitleOverflow); + }; + }, [currentStep, currentPdfName, isInstructionStep]); + const resetCountdown = useCallback(() => { setCountdown(5); setShowWaitButton(true); @@ -527,8 +573,10 @@ const UI7: React.FC = () => {
- - + {!isInstructionStep && currentPdfName ? `${currentPdfName}` : "检测项目知情同意书确认"}