diff --git a/custom-tab-bar/index.js b/custom-tab-bar/index.js index 2eb27f7..8034c78 100644 --- a/custom-tab-bar/index.js +++ b/custom-tab-bar/index.js @@ -1,6 +1,7 @@ -// 自定义 tabBar:原生 tabBar 只能放 PNG 位图,三个图标分别是 -// 实心"手托心" / 气泡里塞"AI"字 / 线框人形,风格互相打架。 -// 改用 TDesign 图标字体后,三个 tab 走同一套线性笔触,只靠颜色区分选中态。 +// 自定义 tabBar:固定在底部,选中态只换颜色、不换图形。 +// 「首页 / 我的」走 TDesign 线性图标字体;「AI客服」用品牌 AI 图标 +// (气泡内 AI 字位图):灰色版 ai.png 为未选中态,暖橙版 ai-ink.png 为选中态, +// 与文字颜色同步切换,保持选中可辨 Component({ data: { selected: 0, // 当前选中项,由各 tab 页在 onShow 里同步 @@ -13,7 +14,9 @@ Component({ }, { pagePath: '/pages/ai/aichat', text: 'AI客服', - icon: 'chat' + // 图片图标:配置了 imgPath 时优先于 icon 渲染 + imgPath: '/images/ai.png', + imgActivePath: '/images/ai-ink.png' }, { pagePath: '/pages/mine/mine', text: '我的', diff --git a/custom-tab-bar/index.wxml b/custom-tab-bar/index.wxml index ba2c2c5..96a5fbc 100644 --- a/custom-tab-bar/index.wxml +++ b/custom-tab-bar/index.wxml @@ -7,8 +7,16 @@ data-path="{{ item.pagePath }}" bindtap="onTap" > - + + serviceMap[id]) .map((id) => { @@ -123,12 +136,6 @@ Page({ }) }, - goToAiChat() { - wx.switchTab({ - url: '/pages/ai/aichat' - }); - }, - // 页脚 B 端合作入口仍直接转服务电话 goToContact() { wx.makePhoneCall({ @@ -136,14 +143,15 @@ Page({ }); }, - // 「联系我们」卡片:进入独立联系页,页内再提供拨号/复制/工作时间 - goToContactPage() { + // Hero 主按钮:直达服务列表,缩短「了解 → 下单」路径。 + // 陪诊指南的入口由服务区块的介绍卡承担 + goToBooking() { wx.navigateTo({ - url: '/pages/mine/contact' + url: '/pages/escort/itemlist' }); }, - // Hero 主按钮:先引导新用户了解服务,服务列表入口在指南页底部 + // 次级文字链:新用户想先了解流程时看指南 goToGuide() { wx.navigateTo({ url: '/pages/escort/guide' diff --git a/pages/home/index.wxml b/pages/home/index.wxml index f259261..4dd15e7 100644 --- a/pages/home/index.wxml +++ b/pages/home/index.wxml @@ -11,58 +11,64 @@ - + 专业陪诊 让就医更省心 - 实名认证陪诊师 · 经验丰富 · 熟悉各大医院流程 - - - 陪诊指南 + + + + 100% + 实名认证 + + + + 三甲 + 熟悉流程 + + + + 24h + 在线响应 + + + + + 立即预约 - - - - - - - - - 在线咨询 - AI 客服 - - - - - - - - - 联系我们 - 人工客服 - - - - + 陪诊服务 + + 陪诊师全程陪同就医:代办挂号缴费、取药取报告,帮你向医生讲清病情要点,让家人看病不再手忙脚乱。 + + 线上约定 + → + 院内陪同 + → + 诊后反馈 + + + + 不加衬底方块,避免同色浅橙块平铺 --> {{ item.name }} @@ -70,7 +76,7 @@ - + @@ -85,8 +91,8 @@ - - + + @@ -98,7 +104,7 @@ - diff --git a/pages/home/index.wxss b/pages/home/index.wxss index 8564162..fcb8c61 100644 --- a/pages/home/index.wxss +++ b/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 {