tmp2

2026-10-02 13:52:32 +08:00
parent 63ad613fab
commit 1c4cadd2eb
2 changed files with 120 additions and 87 deletions
@@ -82,17 +82,6 @@ page {
  letter-spacing: 1rpx;
 }

-/* 右上角胶囊标签：浅橙底 + 橙字，是参考图里「标签组件」的最小形态 */
-.topbar-tag {
-  padding: 8rpx 20rpx;
-  border-radius: 999rpx;
-  background: var(--brand-soft);
-  color: var(--brand-ink);
-  font-size: 24rpx;
-  font-weight: 600;
-  letter-spacing: 1rpx;
-}
-
 /* ===== ① 头部：大字标题直接落在纸面上 ===== */
 .hero {
  padding: 44rpx 0 0;
@@ -122,40 +111,45 @@ page {
  margin-left: 10rpx;
 }

-/* 信任数据条：三项硬事实并列（认证 / 覆盖 / 响应），替代形容词副标题。
-   数字走暖橙深墨制造可信感，标签走 muted 保持安静 */
-.trust-row {
+/* 场景行：三项核心场景两行排布（场景词 + 补充），纯展示不点击。
+   场景词走暖陶土 --brand-ink 做暖色标签，与标题深墨半句靠色相拉开层级，
+   避免两条深色带叠在一起；补充走 muted 保持安静 */
+.scene-row {
  display: flex;
  align-items: center;
  margin-top: 28rpx;
 }

-.trust-item {
+.scene-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
 }

-.trust-num {
-  font-size: 32rpx;
+.scene-name {
+  font-size: 30rpx;
  font-weight: 700;
+  /* 暖陶土 --brand-ink：与标题深墨半句「让就医更省心」同屏时靠色相拉开层级，
+     避免两段 ink+700 连排成"两条深色带"；比标题的 --brand-strong 低一档分量，
+     标题仍是首屏唯一的亮橙焦点。纸面上 6.8:1，过 AA */
  color: var(--brand-ink);
  letter-spacing: 1rpx;
 }

-.trust-label {
+.scene-desc {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
 }

-/* 竖分隔线：仅装饰，不承载信息 */
-.trust-sep {
+/* 竖分隔线：仅装饰，不承载信息。
+   比 --line 加深一档，保证暖白纸面上仍可见 */
+.scene-sep {
  width: 2rpx;
  height: 44rpx;
-  background: var(--line);
+  background: #E5DACC;
  flex-shrink: 0;
 }

@@ -184,55 +178,49 @@ page {
  margin-right: 6rpx;
 }

-/* ===== ② 陪诊服务：品类介绍卡 ===== */
-/* 介绍卡：整卡走浅橙衬底，是本区块的视觉锚点；宫格保持白卡安静语言。
-   点击进「陪诊指南」页，承担新用户教育 */
+/* ===== ② 陪诊服务：服务宫格 + 品类介绍卡 ===== */
+/* 介绍卡：整卡走浅橙衬底，位于宫格下方，是本区块的尾部视觉锚点；
+   宫格保持白卡安静语言、紧贴标题。
+   纯内容展示卡（不可点），指南入口在区块标题行右侧 */
 .intro-card {
  display: flex;
  flex-direction: column;
  padding: 28rpx 26rpx;
-  margin-bottom: 20rpx;
+  /* 位于宫格下方，改为上间距；比原 20rpx 略大，与宫格拉开层级 */
+  margin-top: 24rpx;
  border-radius: 28rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
-  transition: transform 0.15s ease;
-}
-
-.intro-card:active {
-  transform: scale(0.98);
-}
-
-.intro-title {
-  font-size: 30rpx;
-  font-weight: 700;
-  color: var(--ink);
 }

 /* 介绍正文：26rpx 行高 1.6，两行左右读完「陪诊是什么」 */
 .intro-desc {
-  margin-top: 10rpx;
  font-size: 26rpx;
  line-height: 1.6;
  color: var(--ink-2);
 }

-/* 三步流程：线上约定 → 院内陪同 → 诊后反馈，一行读完服务闭环 */
-.intro-steps {
+/* 信任行：三项可验证事实单行小字，从首屏下沉至此，
+   在用户开始了解服务时补上信任背书 */
+.intro-trust {
  display: flex;
  align-items: center;
-  margin-top: 20rpx;
+  margin-top: 16rpx;
 }

-.intro-step {
+.intro-trust-item {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--brand-ink); /* 浅橙底 6.8:1，过 AA */
+  letter-spacing: 1rpx;
 }

-.intro-step-arrow {
-  margin: 0 14rpx;
-  font-size: 24rpx;
-  color: var(--faint); /* 仅装饰性流程箭头，不承载文字信息 */
+.intro-trust-sep {
+  width: 2rpx;
+  height: 20rpx;
+  background: var(--brand-line);
+  margin: 0 16rpx;
+  flex-shrink: 0;
 }

 /* ===== 通用区块 ===== */
@@ -266,7 +254,26 @@ page {
  letter-spacing: 1rpx;
 }

-/* ===== ③ 陪诊服务 ===== */
+/* 标题行右侧入口（如「服务指南」）：靠 margin-left:auto 右对齐。
+   走 muted 而非暖橙，把橙色焦点留给 hero 标题；24rpx 白底 4.8:1 过 AA */
+.section-link {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.section-link:active {
+  opacity: 0.7;
+}
+
+.section-link-text {
+  font-size: 24rpx;
+  color: var(--muted);
+  letter-spacing: 1rpx;
+}
+
+/* 服务宫格：8 项服务白卡（区块主体，紧贴标题） */
 .assist-card {
  padding: 16rpx 8rpx 20rpx;
  border-radius: 28rpx;
@@ -295,11 +302,11 @@ page {
 }

 /* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。
-   56rpx(28px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度的尺寸。
+   60rpx(30px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度、减少白卡空荡感的尺寸。
   图标直接落在白卡上、不加衬底方块：衬底层级已让给上方主推卡，小宫格保持安静 */
 .assist-icon {
-  width: 56rpx;
-  height: 56rpx;
+  width: 60rpx;
+  height: 60rpx;
  margin-bottom: 20rpx;
  background-repeat: no-repeat;
  background-position: center;
@@ -311,9 +318,10 @@ page {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4=");
 }

-/* 2 半天陪诊：半月形表盘，与 1 形成"全 / 半"对照 */
+/* 2 半天陪诊：整圈表盘 + 右半实心填充，与 1 的"空心全圈"形成"全 / 半"对照，
+   避免原半月形在小尺寸下被误读为字母 D */
 .assist-icon-2 {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiLz48cGF0aCBkPSJNMTIgMTJoNC42Ii8+PC9zdmc+");
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiIGZpbGw9IiNDMjQxMEMiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg==");
 }

 /* 3 代问诊：对话气泡 + 医疗十字 */
@@ -341,9 +349,9 @@ page {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+");
 }

-/* 8 买药套餐：胶囊 */
+/* 8 买药套餐：45° 斜置胶囊 + 中缝，避免原横置胶囊被误读为"链接"图标 */
 .assist-icon-8 {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjUiIHk9IjkiIHdpZHRoPSIxOSIgaGVpZ2h0PSI2IiByeD0iMyIvPjxwYXRoIGQ9Ik0xMiA5djYiLz48L3N2Zz4=");
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0LjIiIHk9IjguMiIgd2lkdGg9IjE1LjYiIGhlaWdodD0iNy42IiByeD0iMy44IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIi8+PHBhdGggZD0iTTkuMyA5LjNsNS40IDUuNCIvPjwvc3ZnPg==");
 }

 /* 宫格项名统一走 28rpx 标题档（与 .quick-name 同级）。
@@ -452,6 +460,14 @@ page {
  margin-top: 6rpx;
 }

+/* 通栏卡右侧箭头：填补右半空白并提示可点 */
+.quick-arrow {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
 /* ===== ⑤ 页脚 ===== */
 .page-footer {
  display: flex;
@@ -479,10 +495,12 @@ page {
  color: var(--brand-strong);
 }

+/* 细竖线分隔：替代原中点字符，避免一行多点 */
 .footer-sep {
-  font-size: 24rpx;
-  color: var(--faint); /* 仅作装饰分隔，不承载信息 */
-  margin: 0 16rpx;
+  width: 2rpx;
+  height: 20rpx;
+  background: var(--faint); /* 仅作装饰分隔，不承载信息 */
+  margin: 0 24rpx;
 }

 .footer-note {