优化UI81页面文本样式,增加行间距和列表格式,提升可读性

This commit is contained in:
yuchenglong
2025-12-03 18:14:35 +08:00
parent e3804268f5
commit 25b822260b
2 changed files with 42 additions and 18 deletions

View File

@@ -111,12 +111,10 @@
font-size: 28px;
font-family: NotoSansCJKsc-Medium;
font-weight: 500;
text-align: center;
line-height: 26px;
margin: 0 0 53px 0;
text-align: left;
/* 增加行高,避免文字过于紧凑 */
line-height: 40px;
margin: 0 0 36px 0;
}
.ui81-paragraph h4 {
@@ -124,8 +122,8 @@
font-family: NotoSansCJKsc-Bold;
font-weight: 700;
text-align: left;
line-height: 40px;
margin-bottom: 60px;
line-height: 44px;
margin-bottom: 24px;
}
.ui81-paragraph p {
@@ -133,6 +131,17 @@
font-family: NotoSansCJKsc-Medium;
font-weight: 500;
text-align: left;
line-height: 60px;
line-height: 44px;
margin-bottom: 20px;
}
}
/* 列表样式:增加行间距和项间距 */
.ui81-list {
padding-left: 28px;
margin: 0 0 36px 0;
}
.ui81-list li {
margin-bottom: 14px;
line-height: 40px;
font-size: 28px;
}

View File

@@ -24,17 +24,32 @@ const UI81: React.FC = () => {
<DecorLine />
<span className="ui81-paragraph">
<h4> {localStorage.getItem("name")} /</h4>
<p>1.(需空腹:腹部超声CT/MR)</p>
<p>2.怀CT</p>
<p>3.()</p>
<p>4.</p>
<p>5.</p>
<p>6.B1楼前台的工作人员</p>
<p>7.</p>
<h4>
{localStorage.getItem("name")}
/
</h4>
<ol className="ui81-list">
<li>
CT/MR
</li>
<li>
怀CT
</li>
<li>
</li>
<li>
</li>
<li></li>
<li> B1 </li>
<li>
</li>
</ol>
</span>
<div className="ui81-confirm-section">
<ConfirmButton text="我知道了" onClick={handleConfirm} />
</div>