From 1c4cadd2eba6c134c797d26d6b0213025953f2ff Mon Sep 17 00:00:00 2001 From: lik Date: Fri, 2 Oct 2026 13:52:32 +0800 Subject: [PATCH] tmp2 --- pages/home/index.wxml | 77 +++++++++++++++---------- pages/home/index.wxss | 130 ++++++++++++++++++++++++------------------ 2 files changed, 120 insertions(+), 87 deletions(-) diff --git a/pages/home/index.wxml b/pages/home/index.wxml index 4dd15e7..60a91c8 100644 --- a/pages/home/index.wxml +++ b/pages/home/index.wxml @@ -11,30 +11,35 @@ - + 专业陪诊 让就医更省心 - - - - 100% - 实名认证 + + + + 异地就医 + 有人替你当面问 - - - 三甲 - 熟悉流程 + + + 陪同就医 + 有人一路守身旁 - - - 24h - 在线响应 + + + 就医代办 + 有人替你办周全 @@ -44,23 +49,16 @@ - + 陪诊服务 - - - - 陪诊师全程陪同就医：代办挂号缴费、取药取报告，帮你向医生讲清病情要点，让家人看病不再手忙脚乱。 - - 线上约定 - → - 院内陪同 - → - 诊后反馈 + + + 服务指南 + @@ -74,6 +72,19 @@ + + + + 陪诊师全程陪同就医：代办挂号缴费、取药取报告，帮你向医生讲清病情要点，让家人看病不再手忙脚乱。 + + + 100% 实名认证陪诊师 + + 熟悉医院流程 + + 一对一服务 + + @@ -100,6 +111,10 @@ {{ item.name }} {{ item.desc }} + + + + @@ -109,9 +124,9 @@ 商务合作 - · + 陪诊师入驻 - · + 陪诊师考证 WARM ESCORT · 用心陪好每一步 diff --git a/pages/home/index.wxss b/pages/home/index.wxss index fcb8c61..1f6f1ef 100644 --- a/pages/home/index.wxss +++ b/pages/home/index.wxss @@ -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 {