124 lines
5.4 KiB
Plaintext
124 lines
5.4 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>
|
|
<!-- 信任数据条：三项硬事实并列，替代原先的形容词副标题 -->
|
|
<view class="trust-row">
|
|
<view class="trust-item">
|
|
<text class="trust-num">100%</text>
|
|
<text class="trust-label">实名认证</text>
|
|
</view>
|
|
<view class="trust-sep"></view>
|
|
<view class="trust-item">
|
|
<text class="trust-num">三甲</text>
|
|
<text class="trust-label">熟悉流程</text>
|
|
</view>
|
|
<view class="trust-sep"></view>
|
|
<view class="trust-item">
|
|
<text class="trust-num">24h</text>
|
|
<text class="trust-label">在线响应</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>
|
|
|
|
<view class="intro-card" bindtap="goToGuide">
|
|
<text class="intro-desc">陪诊师全程陪同就医：代办挂号缴费、取药取报告，帮你向医生讲清病情要点，让家人看病不再手忙脚乱。</text>
|
|
<view class="intro-steps">
|
|
<text class="intro-step">线上约定</text>
|
|
<text class="intro-step-arrow">→</text>
|
|
<text class="intro-step">院内陪同</text>
|
|
<text class="intro-step-arrow">→</text>
|
|
<text class="intro-step">诊后反馈</text>
|
|
</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>
|
|
</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>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- ④ 页脚：B 端合作入口（商务合作 / 陪诊师入驻 / 陪诊师考证），
|
|
点击统一转服务电话，与「我的」页页脚同构 -->
|
|
<view class="page-footer">
|
|
<view class="footer-links">
|
|
<text class="footer-link" bindtap="goToContact">商务合作</text>
|
|
<text class="footer-sep">·</text>
|
|
<text class="footer-link" bindtap="goToContact">陪诊师入驻</text>
|
|
<text class="footer-sep">·</text>
|
|
<text class="footer-link" bindtap="goToContact">陪诊师考证</text>
|
|
</view>
|
|
<text class="footer-note">WARM ESCORT · 用心陪好每一步</text>
|
|
</view>
|
|
|
|
<!-- 底部留白 -->
|
|
<view class="footer-space"></view>
|
|
|
|
</view>
|
|
</view> |