两行标题自适应
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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<HTMLSpanElement | null>(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 = () => {
|
||||
<div className="basic-root">
|
||||
<div className="basic-white-block">
|
||||
<div className="basic-content">
|
||||
<span className="basic-title">
|
||||
|
||||
<span
|
||||
ref={titleRef}
|
||||
className={`ui7-basic-title ${isTitleCompact ? 'compact' : ''}`}
|
||||
>
|
||||
{!isInstructionStep && currentPdfName ? `${currentPdfName}` : "检测项目知情同意书确认"}
|
||||
</span>
|
||||
<DecorLine />
|
||||
|
||||
Reference in New Issue
Block a user