This commit is contained in:
lik
2026-10-02 15:29:15 +08:00
parent ce8eb85019
commit 3d20984395
2 changed files with 45 additions and 22 deletions
+8 -7
View File
@@ -23,24 +23,25 @@
<!-- 场景行:三项核心场景(场景词 + 补充语),纯展示不点击, <!-- 场景行:三项核心场景(场景词 + 补充语),纯展示不点击,
与下方宫格是「场景概括 vs 全量列表」关系。 与下方宫格是「场景概括 vs 全量列表」关系。
场景词对应 GB/T 47801 三类服务对象成因(地域差异 / 行动不便 / 认知与流程不熟),全部 4 字; 场景词对应 GB/T 47801 三类服务对象成因(地域差异 / 行动不便 / 认知与流程不熟),全部 4 字;
补充语走叙述层而非承诺层(承诺留给下方 CTA 与介绍卡的"我们"), 补充语走叙述层而非承诺层(承诺留给下方 CTA 与介绍卡的"我们")。
按就医过程排布:跑医院问(代问)→ 守着你办手续(陪同)→ 把每件事办周全(代办)。 补充语由 8 字收到 5 字:原三条(替你跑医院问医生 / 一路守着你办手续 / 把每件事办得周全)
三条补充语统一 8 字,三列收尾齐平;"陪同就医"一格内用"守"不用"陪", 在首屏占字过多,收短后三列文字从约 200rpx 降到约 125rpx,
避免与场景词重复;三句主语各异(替你 / 一路守着你 / 把字句),避免同头堆叠 --> 列间空气变大——与下方"拉开 hero 间距"配套,一起把首屏密度降下来。
三条仍统一 5 字、三列收尾齐平,主语仍各异(替你 / 一路守着你 / 把字句),避免同头堆叠 -->
<view class="scene-row"> <view class="scene-row">
<view class="scene-item"> <view class="scene-item">
<text class="scene-name">异地就医</text> <text class="scene-name">异地就医</text>
<text class="scene-desc">替你跑医院问医生</text> <text class="scene-desc">替你跑医院</text>
</view> </view>
<view class="scene-sep"></view> <view class="scene-sep"></view>
<view class="scene-item"> <view class="scene-item">
<text class="scene-name">陪同就医</text> <text class="scene-name">陪同就医</text>
<text class="scene-desc">一路守着你办手续</text> <text class="scene-desc">一路守着你</text>
</view> </view>
<view class="scene-sep"></view> <view class="scene-sep"></view>
<view class="scene-item"> <view class="scene-item">
<text class="scene-name">就医代办</text> <text class="scene-name">就医代办</text>
<text class="scene-desc">把每件事办得周全</text> <text class="scene-desc">把事办周全</text>
</view> </view>
</view> </view>
<!-- 主行动按钮:通栏胶囊,直达服务列表(下单路径最短化) --> <!-- 主行动按钮:通栏胶囊,直达服务列表(下单路径最短化) -->
+37 -15
View File
@@ -31,7 +31,9 @@ page {
--white: #FFFFFF; --white: #FFFFFF;
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.04); --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 { .page-bg {
@@ -67,7 +69,7 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .brand-logo {
@@ -84,24 +86,28 @@ page {
} }
/* ===== ① 头部:大字标题直接落在纸面上 ===== */ /* ===== ① 头部:大字标题直接落在纸面上 ===== */
/* 留白加码:44→56rpx 上、+16rpx 下(下方 .section 自带 56rpx,合计 72rpx 到"陪诊服务")。
topbar 的 120rpx 不能动,那是给微信胶囊/状态栏让位的安全距,不是设计留白 */
.hero { .hero {
padding: 44rpx 0 0; padding: 56rpx 0 16rpx;
} }
.hero-title { .hero-title {
display: block; display: block;
/* 居中:与下方居中的信任条、通栏 CTA 共用一条视觉中轴,首屏呈海报式对称 */ /* 居中:与下方居中的信任条、通栏 CTA 共用一条视觉中轴,首屏呈海报式对称 */
text-align: center; text-align: center;
/* 52rpx(26px) 仍在 WCAG"大字"门槛(18pt/24px)之上: /* 48rpx(24px) 正好落在 WCAG"大字"门槛(18pt/24px)上,橙色半句的 AA 结论不变。
深墨 #2B2521 压暖白纸面实测 13:1+,无论字重都稳过 AA */ 从 52 收到 48:52rpx 与下方 34rpx 区块标题之间是 1.53× 的空断层,
font-size: 52rpx; 且 52rpx 全页只出现这一次,是首屏显重的三个来源之一 */
font-size: 48rpx;
font-weight: 700; font-weight: 700;
letter-spacing: 2rpx; 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 页边距),不会折行 */ 小于容器内宽 686rpx(750 - 32×2 页边距),不会折行 */
.hero-title-accent { .hero-title-accent {
color: var(--brand-strong); /* 暖白纸面上 5.0:1,过 AA */ color: var(--brand-strong); /* 暖白纸面上 5.0:1,过 AA */
@@ -114,11 +120,12 @@ page {
/* 场景行:三项核心场景两行排布(场景词 + 补充),纯展示不点击。 /* 场景行:三项核心场景两行排布(场景词 + 补充),纯展示不点击。
场景词走暖陶土 --brand-ink 做暖色标签,与标题深墨半句靠色相拉开层级, 场景词走暖陶土 --brand-ink 做暖色标签,与标题深墨半句靠色相拉开层级,
避免两条深色带叠在一起;补充走 muted 保持安静 */ 避免两条深色带叠在一起;补充走 muted 保持安静。
28 → 40rpx:补充语由 8 字收到 5 字后横向已有空气,纵向再拉开一档 */
.scene-row { .scene-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 28rpx; margin-top: 40rpx;
} }
.scene-item { .scene-item {
@@ -154,13 +161,15 @@ page {
flex-shrink: 0; flex-shrink: 0;
} }
/* 主行动按钮:通栏胶囊,直达服务列表 */ /* 主行动按钮:通栏胶囊,直达服务列表。
36 → 48rpx 上间距、26 → 30rpx 内边距:让它在松开的首屏里仍然"立得住"——
上一轮已把彩色阴影收到 0 2rpx 8rpx/16%,抓力更依赖自身色块,故用体量补回来 */
.hero-cta { .hero-cta {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 36rpx; margin-top: 48rpx;
padding: 26rpx; padding: 30rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: var(--brand-strong); background: var(--brand-strong);
box-shadow: var(--shadow-cta); box-shadow: var(--shadow-cta);
@@ -430,11 +439,24 @@ page {
/* 通栏卡(联系我们):两列网格 2+1 排布,第三张占满第二行。 /* 通栏卡(联系我们):两列网格 2+1 排布,第三张占满第二行。
必须显式 border-box:全局只有 .container 设了它,否则 width:100% 必须显式 border-box:全局只有 .container 设了它,否则 width:100%
会再叠加自身 padding(24rpx×2) + 描边(2rpx×2),整卡溢出容器 */ 会再叠加自身 padding(24rpx×2) + 描边(2rpx×2),整卡溢出容器。
同时兼作页面尾部的落点:下半区(宫格、功能卡)全是"白卡 + 28rpx 深墨标题"的同一语言,
视线落下去找不到第二处落点,"上重下平"由此而来。
这里借用陪诊服务区块尾部的浅橙介绍卡语言,让每个区块都收在暖色卡上;
浅橙底本身已能与纸面区分,故去掉阴影,与介绍卡保持一致 */
.quick-item-full { .quick-item-full {
width: 100%; width: 100%;
flex: none; flex: none;
box-sizing: border-box; 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 后文字区被压缩, /* 68 → 60rpx:两列卡右侧补了 chevron 后文字区被压缩,
@@ -524,5 +546,5 @@ page {
/* 自定义 tabBar 是 fixed 脱离文档流的,这里补足它的高度,否则页脚会被盖住 */ /* 自定义 tabBar 是 fixed 脱离文档流的,这里补足它的高度,否则页脚会被盖住 */
.footer-space { .footer-space {
height: calc(140rpx + env(safe-area-inset-bottom)); height: calc(100rpx + env(safe-area-inset-bottom));
} }