Răsfoiți Sursa

style(mobile): 首页标题与介绍文案两侧留白并收小字号

用户真机确认「不遮了」,但反馈观感差:中间文字太大、两侧贴边。

- .welcome-section 加两侧留白 padding: 0 28px(连 main 的 8px,视觉约 36px),
  标题与介绍文案都不再贴屏幕边
- .heading 22px → 20px(clamp 同步收为 clamp(17px, 5.2vw, 20px),保持恒定单行)
- .desc 14px → 13px:留白后可用宽度变窄,字号同步收以避免多折一行

排版验算(360px 宽):可用 288px;标题 13 字 × 20px = 260px → 单行,两侧各余 14px;
介绍文案 61 字在 14px 与 13px 下都是 3 行 → 调小字号没有增加高度。

验证:npm run build 通过;排版用脚本实算。⚠️ 未在真机确认观感。

Co-Authored-By: Claude Code <noreply@anthropic.com>
gongtianxiao 2 zile în urmă
părinte
comite
f1951af631
2 a modificat fișierele cu 32 adăugiri și 3 ștergeri
  1. 24 0
      harness/progress.md
  2. 8 3
      src/components/BusinessAssistantMobile.vue

+ 24 - 0
harness/progress.md

@@ -2227,3 +2227,27 @@
     那样剩余高度是**浏览器算出来的**,与字体/内核无关,数学上不会再遮
 - **下一步最佳动作**:用户真机确认;若仍遮则做「输入框占位」
 
+## Session 056
+
+- **日期**:2026-09-18
+- **本轮背景**:用户在真机确认「不遮了」,但反馈**观感太丑**:中间文字太大、两侧贴边
+- **已完成**(`BusinessAssistantMobile.vue` 首页):
+  - `.welcome-section` 新增**两侧留白 `padding: 0 28px`**(连 `.mobile-main` 的 8px,
+    视觉留白约 36px)—— 标题与介绍文案都不再贴屏幕边
+  - `.heading` 字号 **22px → 20px**(`clamp` 同步收为 `clamp(17px, 5.2vw, 20px)`)
+  - `.desc` 字号 **14px → 13px**:加留白后可用宽度变窄,字号同步收一点以**避免多折一行**
+- **排版验算**(360px 宽手机,脚本实算):
+  - 可用宽度 288px(360 − main 16 − 留白 56)
+  - 标题 13 字 × 20px = **260px → 单行**,两侧各富余 ~14px
+  - 介绍文案 61 字:@14px 与 @13px **都是 3 行** → 字号调小没有增加高度 ✓
+- **运行过的验证**:`npm run build` 通过;排版用脚本实算(非目测)
+- **已记录证据**:本文件 Session 056
+- **更新过的文件或工件**:`src/components/BusinessAssistantMobile.vue`、本文件
+- **已知风险或未解决问题**:
+  - ⚠️ **未在真机确认**:需用户在夸克 / vivo 上再看一眼观感
+  - ⚠️ 那个「思考过程文字超出屏幕」仍未处理(见技术债第 7 条:靠 JS 测量决定换行,
+    字体一变就判错)
+- **注**:本轮发现上一轮的压缩改动(顶栏 52px、logo 96×65、标题 clamp 等)**已在
+  `9ccf536` 提交**里;本次是**在其基础上**继续调字号与留白
+- **下一步最佳动作**:用户真机看观感;如仍不满可继续微调数值
+

+ 8 - 3
src/components/BusinessAssistantMobile.vue

@@ -1790,6 +1790,10 @@ const confirmDeleteSession = () => {
   align-items: center;
   gap: 6px;
   margin: 0;
+  /* 两侧留白:标题与介绍文案都不贴屏幕边(原先几乎顶满,观感很挤) */
+  padding: 0 28px;
+  box-sizing: border-box;
+  width: 100%;
   text-align: center;
 }
 
@@ -1808,8 +1812,8 @@ const confirmDeleteSession = () => {
   color: #141b2b;
   /* 先给老内核一个固定值(窄屏也放得下),再用 clamp 让更窄的屏继续收一点。
      目的:这行字**恒定单行**不换行 */
-  font-size: 22px;
-  font-size: clamp(18px, 5.6vw, 22px);
+  font-size: 20px;
+  font-size: clamp(17px, 5.2vw, 20px);
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: -0.64px;
@@ -1820,7 +1824,8 @@ const confirmDeleteSession = () => {
 .desc {
   margin: 0;
   color: #464555;
-  font-size: 14px;
+  /* 加了两侧留白后可用宽度变窄,字号同步收一点,避免这段介绍多折一行 */
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.5;
 }