diff --git a/pages/home/index.wxml b/pages/home/index.wxml index 538e7f3..375e9b3 100644 --- a/pages/home/index.wxml +++ b/pages/home/index.wxml @@ -23,24 +23,25 @@ + 补充语走叙述层而非承诺层(承诺留给下方 CTA 与介绍卡的"我们")。 + 补充语由 8 字收到 5 字:原三条(替你跑医院问医生 / 一路守着你办手续 / 把每件事办得周全) + 在首屏占字过多,收短后三列文字从约 200rpx 降到约 125rpx, + 列间空气变大——与下方"拉开 hero 间距"配套,一起把首屏密度降下来。 + 三条仍统一 5 字、三列收尾齐平,主语仍各异(替你 / 一路守着你 / 把字句),避免同头堆叠 --> 异地就医 - 替你跑医院问医生 + 替你跑医院 陪同就医 - 一路守着你办手续 + 一路守着你 就医代办 - 把每件事办得周全 + 把事办周全 diff --git a/pages/home/index.wxss b/pages/home/index.wxss index 6a739ef..e9ebe79 100644 --- a/pages/home/index.wxss +++ b/pages/home/index.wxss @@ -31,7 +31,9 @@ page { --white: #FFFFFF; --shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.04); - --shadow-cta: 0 6rpx 16rpx rgba(194, 65, 12, 0.22); + /* 彩色阴影原为 0 6rpx 16rpx/22%:全页只有它与品牌印记两处彩色阴影,且都在首屏, + 是首屏显重的主要来源,也与"小偏移、小模糊"的锐利阴影偏好相悖,故收小一档 */ + --shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16); } .page-bg { @@ -67,7 +69,7 @@ page { display: flex; align-items: center; justify-content: center; - box-shadow: 0 4rpx 12rpx rgba(194, 65, 12, 0.22); + box-shadow: 0 2rpx 8rpx rgba(194, 65, 12, 0.16); } .brand-logo { @@ -84,24 +86,28 @@ page { } /* ===== ① 头部:大字标题直接落在纸面上 ===== */ +/* 留白加码:44→56rpx 上、+16rpx 下(下方 .section 自带 56rpx,合计 72rpx 到"陪诊服务")。 + topbar 的 120rpx 不能动,那是给微信胶囊/状态栏让位的安全距,不是设计留白 */ .hero { - padding: 44rpx 0 0; + padding: 56rpx 0 16rpx; } .hero-title { display: block; /* 居中:与下方居中的信任条、通栏 CTA 共用一条视觉中轴,首屏呈海报式对称 */ text-align: center; - /* 52rpx(26px) 仍在 WCAG"大字"门槛(18pt/24px)之上: - 深墨 #2B2521 压暖白纸面实测 13:1+,无论字重都稳过 AA */ - font-size: 52rpx; + /* 48rpx(24px) 正好落在 WCAG"大字"门槛(18pt/24px)上,橙色半句的 AA 结论不变。 + 从 52 收到 48:52rpx 与下方 34rpx 区块标题之间是 1.53× 的空断层, + 且 52rpx 全页只出现这一次,是首屏显重的三个来源之一 */ + font-size: 48rpx; font-weight: 700; letter-spacing: 2rpx; - line-height: 1.36; + /* 1.36 → 1.45:标题自身也松一口气,配合下方三段 gap 一起降密度 */ + line-height: 1.45; } /* 不用逗号断句:靠「暖橙强调 + 深墨正文」的色差切分两个短句。 - 两段合计 11 字 × (52rpx + 2rpx 字距) + 10rpx 间隔 ≈ 604rpx, + 两段合计 11 字 × (48rpx + 2rpx 字距) + 10rpx 间隔 ≈ 560rpx, 小于容器内宽 686rpx(750 - 32×2 页边距),不会折行 */ .hero-title-accent { color: var(--brand-strong); /* 暖白纸面上 5.0:1,过 AA */ @@ -114,11 +120,12 @@ page { /* 场景行:三项核心场景两行排布(场景词 + 补充),纯展示不点击。 场景词走暖陶土 --brand-ink 做暖色标签,与标题深墨半句靠色相拉开层级, - 避免两条深色带叠在一起;补充走 muted 保持安静 */ + 避免两条深色带叠在一起;补充走 muted 保持安静。 + 28 → 40rpx:补充语由 8 字收到 5 字后横向已有空气,纵向再拉开一档 */ .scene-row { display: flex; align-items: center; - margin-top: 28rpx; + margin-top: 40rpx; } .scene-item { @@ -154,13 +161,15 @@ page { flex-shrink: 0; } -/* 主行动按钮:通栏胶囊,直达服务列表 */ +/* 主行动按钮:通栏胶囊,直达服务列表。 + 36 → 48rpx 上间距、26 → 30rpx 内边距:让它在松开的首屏里仍然"立得住"—— + 上一轮已把彩色阴影收到 0 2rpx 8rpx/16%,抓力更依赖自身色块,故用体量补回来 */ .hero-cta { display: flex; align-items: center; justify-content: center; - margin-top: 36rpx; - padding: 26rpx; + margin-top: 48rpx; + padding: 30rpx; border-radius: 999rpx; background: var(--brand-strong); box-shadow: var(--shadow-cta); @@ -430,11 +439,24 @@ page { /* 通栏卡(联系我们):两列网格 2+1 排布,第三张占满第二行。 必须显式 border-box:全局只有 .container 设了它,否则 width:100% - 会再叠加自身 padding(24rpx×2) + 描边(2rpx×2),整卡溢出容器 */ + 会再叠加自身 padding(24rpx×2) + 描边(2rpx×2),整卡溢出容器。 + 同时兼作页面尾部的落点:下半区(宫格、功能卡)全是"白卡 + 28rpx 深墨标题"的同一语言, + 视线落下去找不到第二处落点,"上重下平"由此而来。 + 这里借用陪诊服务区块尾部的浅橙介绍卡语言,让每个区块都收在暖色卡上; + 浅橙底本身已能与纸面区分,故去掉阴影,与介绍卡保持一致 */ .quick-item-full { width: 100%; flex: none; box-sizing: border-box; + background: var(--brand-soft); + border-color: var(--brand-line); + box-shadow: none; +} + +/* 浅橙衬底上不再叠浅橙衬底(同色叠同色等于没有衬底),让图标直接落在卡面上, + 与陪诊服务宫格"图标不加衬底"的处理一致 */ +.quick-item-full .quick-icon { + background: transparent; } /* 68 → 60rpx:两列卡右侧补了 chevron 后文字区被压缩, @@ -524,5 +546,5 @@ page { /* 自定义 tabBar 是 fixed 脱离文档流的,这里补足它的高度,否则页脚会被盖住 */ .footer-space { - height: calc(140rpx + env(safe-area-inset-bottom)); + height: calc(100rpx + env(safe-area-inset-bottom)); } \ No newline at end of file