145 lines
7.0 KiB
Plaintext
145 lines
7.0 KiB
Plaintext
<view class="page-bg">
|
||
<view class="container">
|
||
|
||
<!-- 顶部品牌行：左侧橙底白色品牌 Logo（心形线稿）+ 品牌名 -->
|
||
<view class="topbar">
|
||
<view class="brand">
|
||
<view class="brand-mark">
|
||
<image class="brand-logo" src="/images/home-w.png" mode="aspectFit" />
|
||
</view>
|
||
<text class="brand-name">暖橙陪诊</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ① 头部：大字标题 + 场景行 + 主 CTA。
|
||
场景行用三个核心使用场景让用户快速对号入座（尤其异地子女），纯展示不点击；
|
||
信任数据下沉到陪诊服务区块的介绍卡，在用户开始了解服务时再补上 -->
|
||
<view class="hero">
|
||
<view class="hero-title">
|
||
<!-- 不用逗号断句：靠「暖橙强调 + 深墨正文」的色差自然切分两个短句 -->
|
||
<text class="hero-title-accent">专业陪诊</text>
|
||
<text class="hero-title-main">让就医更省心</text>
|
||
</view>
|
||
<!-- 场景行：三项核心场景（场景词 + 补充语），纯展示不点击，
|
||
与下方宫格是「场景概括 vs 全量列表」关系。
|
||
场景词对应 GB/T 47801 三类服务对象成因（地域差异 / 行动不便 / 认知与流程不熟），全部 4 字；
|
||
补充语走叙述层而非承诺层（承诺留给下方 CTA 与介绍卡的"我们"）。
|
||
补充语由 8 字收到 5 字：原三条（替你跑医院问医生 / 一路守着你办手续 / 把每件事办得周全）
|
||
在首屏占字过多，收短后三列文字从约 200rpx 降到约 125rpx，
|
||
列间空气变大——与下方"拉开 hero 间距"配套，一起把首屏密度降下来。
|
||
三条仍统一 5 字、三列收尾齐平，主语仍各异（替你 / 一路守着你 / 把字句），避免同头堆叠 -->
|
||
<view class="scene-row">
|
||
<view class="scene-item">
|
||
<text class="scene-name">异地就医</text>
|
||
<text class="scene-desc">替你跑医院</text>
|
||
</view>
|
||
<view class="scene-sep"></view>
|
||
<view class="scene-item">
|
||
<text class="scene-name">陪同就医</text>
|
||
<text class="scene-desc">一路守着你</text>
|
||
</view>
|
||
<view class="scene-sep"></view>
|
||
<view class="scene-item">
|
||
<text class="scene-name">就医代办</text>
|
||
<text class="scene-desc">把事办周全</text>
|
||
</view>
|
||
</view>
|
||
<!-- 主行动按钮：通栏胶囊，直达服务列表（下单路径最短化） -->
|
||
<view class="hero-cta" bindtap="goToBooking">
|
||
<text class="hero-cta-text">立即预约</text>
|
||
<t-icon name="chevron-right" size="28rpx" color="#FFFFFF" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ② 陪诊服务：宫格紧贴标题，保证「标题 → 可点服务」路径最短；
|
||
介绍卡承接品类教育职责，下移为区块尾部锚点（浅橙衬底） -->
|
||
<view class="section">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">陪诊服务</text>
|
||
<!-- 指南入口放标题行右侧：进区块即见，不必滚过宫格 -->
|
||
<view class="section-link" bindtap="goToGuide">
|
||
<text class="section-link-text">服务指南</text>
|
||
<t-icon name="chevron-right" size="24rpx" color="#6F655C" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="assist-card">
|
||
<view class="assist-grid">
|
||
<view class="assist-item" wx:for="{{ escortServices }}" wx:key="id" data-id="{{ item.id }}" bindtap="goToServiceDetail">
|
||
<!-- 细线图标：图形由 index.wxss 内嵌 SVG 提供，类名后缀是服务 id。
|
||
不加衬底方块，避免同色浅橙块平铺 -->
|
||
<view class="assist-icon {{ item.iconClass }}"></view>
|
||
<text class="assist-name">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 介绍卡：纯展示不可点，一句定位 + 信任行（服务清单交给上方宫格，不重复；
|
||
指南入口在区块标题行右侧）。
|
||
"桥"对应国标 7.1.4「协助医患沟通、就诊信息的记录和转达」，是承诺层 -->
|
||
<view class="intro-card">
|
||
<text class="intro-desc">做你和医生之间，最省心的那座桥。</text>
|
||
<!-- 信任行：三项信任背书单行小字，从首屏下沉至此。
|
||
"专业"是定性描述，故不称"可验证事实" -->
|
||
<view class="intro-trust">
|
||
<text class="intro-trust-item">实名专业陪诊师</text>
|
||
<view class="intro-trust-sep"></view>
|
||
<text class="intro-trust-item">熟悉医院流程</text>
|
||
<view class="intro-trust-sep"></view>
|
||
<text class="intro-trust-item">一对一服务</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ③ 常用功能：待服务提醒 + 双列入口卡 -->
|
||
<view class="section">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">常用功能</text>
|
||
</view>
|
||
|
||
<!-- 状态条：仅当存在待服务订单时展示 -->
|
||
<view class="order-tip" wx:if="{{ pendingCount > 0 }}" bindtap="goToRecords">
|
||
<view class="order-dot"></view>
|
||
<text class="order-tip-text">您有 {{ pendingCount }} 个待服务订单</text>
|
||
<t-icon name="chevron-right" size="26rpx" color="#0F766E" />
|
||
</view>
|
||
|
||
<view class="quick-list">
|
||
<view class="quick-item {{ item.full ? 'quick-item-full' : '' }}" wx:for="{{ quickEntries }}" wx:key="id" data-item="{{ item }}" bindtap="onQuickEntryTap">
|
||
<!-- 入口统一走暖橙 + 浅橙衬底，不做色相区分；带 full 标记的卡通栏排布 -->
|
||
<view class="quick-icon">
|
||
<t-icon name="{{ item.icon }}" size="34rpx" color="#9A3412" />
|
||
</view>
|
||
<view class="quick-info">
|
||
<text class="quick-name">{{ item.name }}</text>
|
||
<text class="quick-desc">{{ item.desc }}</text>
|
||
</view>
|
||
<!-- 每张卡都补右侧箭头：两列卡不再是"无暗示的整卡可点"，
|
||
通栏卡同时填补右半空白 -->
|
||
<view class="quick-arrow">
|
||
<t-icon name="chevron-right" size="28rpx" color="#6F655C" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ④ 页脚：B 端合作入口（商务合作 / 陪诊师入驻 / 陪诊师考证），
|
||
点击统一转服务电话，与「我的」页页脚同构 -->
|
||
<view class="page-footer">
|
||
<view class="footer-links">
|
||
<text class="footer-link" bindtap="goToContact">商务合作</text>
|
||
<view class="footer-sep"></view>
|
||
<text class="footer-link" bindtap="goToContact">陪诊师入驻</text>
|
||
<view class="footer-sep"></view>
|
||
<text class="footer-link" bindtap="goToContact">陪诊师考证</text>
|
||
</view>
|
||
<text class="footer-note">WARM ESCORT · 用心陪好每一步</text>
|
||
</view>
|
||
|
||
<!-- 底部留白 -->
|
||
<view class="footer-space"></view>
|
||
|
||
</view>
|
||
</view> |