tmp5

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));
 }