tmp1

pages/home/index.wxss

@@ -100,6 +100,8 @@ page {
 
 .hero-title {
   display: block;
+  /* 居中：与下方居中的信任条、通栏 CTA 共用一条视觉中轴，首屏呈海报式对称 */
+  text-align: center;
   /* 52rpx(26px) 仍在 WCAG"大字"门槛(18pt/24px)之上：
      深墨 #2B2521 压暖白纸面实测 13:1+，无论字重都稳过 AA */
   font-size: 52rpx;
@@ -120,16 +122,44 @@ page {
   margin-left: 10rpx;
 }
 
-.hero-sub {
-  display: block;
-  margin-top: 20rpx;
-  font-size: 24rpx;
-  color: var(--muted);
-  line-height: 1.6;
+/* 信任数据条：三项硬事实并列（认证 / 覆盖 / 响应），替代形容词副标题。
+   数字走暖橙深墨制造可信感，标签走 muted 保持安静 */
+.trust-row {
+  display: flex;
+  align-items: center;
+  margin-top: 28rpx;
+}
+
+.trust-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trust-num {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: var(--brand-ink);
   letter-spacing: 1rpx;
 }
 
-/* 主行动按钮：通栏胶囊，参考图的主按钮语言 */
+.trust-label {
+  margin-top: 6rpx;
+  font-size: 24rpx;
+  color: var(--muted);
+  letter-spacing: 1rpx;
+}
+
+/* 竖分隔线：仅装饰，不承载信息 */
+.trust-sep {
+  width: 2rpx;
+  height: 44rpx;
+  background: var(--line);
+  flex-shrink: 0;
+}
+
+/* 主行动按钮：通栏胶囊，直达服务列表 */
 .hero-cta {
   display: flex;
   align-items: center;
@@ -154,68 +184,55 @@ page {
   margin-right: 6rpx;
 }
 
-/* ===== ② 客服与联系 ===== */
-.contact-row {
+/* ===== ② 陪诊服务：品类介绍卡 ===== */
+/* 介绍卡：整卡走浅橙衬底，是本区块的视觉锚点；宫格保持白卡安静语言。
+   点击进「陪诊指南」页，承担新用户教育 */
+.intro-card {
   display: flex;
-  gap: 20rpx;
-  margin-top: 40rpx;
-}
-
-.contact-card {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 26rpx 22rpx;
+  flex-direction: column;
+  padding: 28rpx 26rpx;
+  margin-bottom: 20rpx;
   border-radius: 28rpx;
-  background: var(--white);
-  /* 发丝边 + 紧阴影：白卡压在暖白纸面上时，仅靠阴影分不出边界 */
-  border: 2rpx solid var(--line);
-  box-shadow: var(--shadow-card);
+  background: var(--brand-soft);
+  border: 2rpx solid var(--brand-line);
   transition: transform 0.15s ease;
 }
 
-.contact-card:active {
+.intro-card:active {
   transform: scale(0.98);
 }
 
-/* 浅橙衬底的圆角方块：与参考图「软衬底 + 彩色线图标」一致 */
-.contact-icon {
-  width: 68rpx;
-  height: 68rpx;
-  border-radius: 20rpx;
-  background: var(--brand-soft);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 16rpx;
-  flex-shrink: 0;
-}
-
-/* AI 品牌图标是位图（无图标字体可用），按「联系我们」的 32rpx 图标对齐 */
-.contact-icon-img {
-  width: 32rpx;
-  height: 32rpx;
-}
-
-.contact-info {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-.contact-name {
-  font-size: 28rpx;
-  font-weight: 600;
+.intro-title {
+  font-size: 30rpx;
+  font-weight: 700;
   color: var(--ink);
 }
 
-.contact-en {
+/* 介绍正文：26rpx 行高 1.6，两行左右读完「陪诊是什么」 */
+.intro-desc {
+  margin-top: 10rpx;
+  font-size: 26rpx;
+  line-height: 1.6;
+  color: var(--ink-2);
+}
+
+/* 三步流程：线上约定 → 院内陪同 → 诊后反馈，一行读完服务闭环 */
+.intro-steps {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.intro-step {
   font-size: 24rpx;
-  color: var(--muted);
-  margin-top: 4rpx;
-  letter-spacing: 1rpx;
+  font-weight: 600;
+  color: var(--brand-ink); /* 浅橙底 6.8:1，过 AA */
+}
+
+.intro-step-arrow {
+  margin: 0 14rpx;
+  font-size: 24rpx;
+  color: var(--faint); /* 仅装饰性流程箭头，不承载文字信息 */
 }
 
 /* ===== 通用区块 ===== */
@@ -263,6 +280,7 @@ page {
   flex-wrap: wrap;
 }
 
+/* 8 项服务：4 列 × 2 行正好排满 */
 .assist-item {
   width: 25%;
   display: flex;
@@ -278,7 +296,7 @@ page {
 
 /* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。
    56rpx(28px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度的尺寸。
-   图标直接落在白卡上、不加衬底方块：8 个同色浅橙方块平铺会让整页变得均匀寡淡 */
+   图标直接落在白卡上、不加衬底方块：衬底层级已让给上方主推卡，小宫格保持安静 */
 .assist-icon {
   width: 56rpx;
   height: 56rpx;
@@ -328,8 +346,8 @@ page {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjUiIHk9IjkiIHdpZHRoPSIxOSIgaGVpZ2h0PSI2IiByeD0iMyIvPjxwYXRoIGQ9Ik0xMiA5djYiLz48L3N2Zz4=");
 }
 
-/* 宫格项名统一走 28rpx 标题档（与 .contact-name / .quick-name 同级）。
-   5 字项名「出入院代办」= 140rpx，小于列宽 167rpx，不折行 */
+/* 宫格项名统一走 28rpx 标题档（与 .quick-name 同级）。
+   4 列布局列宽 ≈ 167rpx，5 字项名「出入院代办」= 140rpx，不折行 */
 .assist-name {
   font-size: 28rpx;
   font-weight: 600;
@@ -368,17 +386,21 @@ page {
   color: var(--status-ink);
 }
 
-/* 仅两个入口时，通栏列表右侧大面积留白；改为双列卡片，图标在上、文字在下 */
+/* 双列卡片 + 图标左、文字右的横排结构；
+   第三张通栏卡靠换行落到第二行 */
 .quick-list {
   display: flex;
+  flex-wrap: wrap;
   gap: 20rpx;
 }
 
+/* 图标左、文字右的横排结构 */
 .quick-item {
   flex: 1;
+  min-width: 0;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-direction: row;
+  align-items: center;
   padding: 24rpx;
   border-radius: 28rpx;
   background: var(--white);
@@ -391,6 +413,15 @@ page {
   transform: scale(0.98);
 }
 
+/* 通栏卡（联系我们）：两列网格 2+1 排布，第三张占满第二行。
+   必须显式 border-box：全局只有 .container 设了它，否则 width:100%
+   会再叠加自身 padding(24rpx×2) + 描边(2rpx×2)，整卡溢出容器 */
+.quick-item-full {
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+}
+
 .quick-icon {
   width: 68rpx;
   height: 68rpx;
@@ -399,12 +430,14 @@ page {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 16rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
 }
 
 .quick-info {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .quick-name {