xJourney/wxapp_escort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tmp2

Browse Source
This commit is contained in:
lik
2026-10-02 13:52:32 +08:00
parent 63ad613fab
commit 1c4cadd2eb
2 changed files with 120 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/index.wxml
+46 -31
View File
@@ -11,30 +11,35 @@
</view>
</view>
<!-- ① 头部：大字标题 + 信任数据条 + 主 CTA。
陪诊是高信任门槛决策，首屏先给可验证的事实（认证 / 覆盖 / 评价），
再给「立即预约」的直达入口；指南降为次级文字链 -->
<!-- ① 头部：大字标题 + 场景行 + 主 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>
<!-- 场景行：三项核心场景两行排布（场景词 + 补充），与下方宫格是「场景概括 vs 全量列表」关系。
场景词对应 GB/T 47801 三类服务对象成因（地域/行动/认知差异），全部 4 字；
补充语统一 7 字「有人…」句式，走叙述层而非承诺层（承诺留给下方 CTA），
动词按就医过程排布且有画面感：当面问（替你问）→ 守身旁（陪你守）→ 办周全（帮你办），
「当面问」强调人真的坐在诊室里替你问（区别于线上代聊），且避开方言词「大夫」与
互联网医疗产品词「问医生」；全部避开「跑腿/代办挂号/问诊」等国标 8.2 红线及易混淆词 -->
<view class="scene-row">
<view class="scene-item">
<text class="scene-name">异地就医</text>
<text class="scene-desc">有人替你当面问</text>
</view>
<view class="trust-sep"></view>
<view class="trust-item">
<text class="trust-num">三甲</text>
<text class="trust-label">熟悉流程</text>
<view class="scene-sep"></view>
<view class="scene-item">
<text class="scene-name">陪同就医</text>
<text class="scene-desc">有人一路守身旁</text>
</view>
<view class="trust-sep"></view>
<view class="trust-item">
<text class="trust-num">24h</text>
<text class="trust-label">在线响应</text>
<view class="scene-sep"></view>
<view class="scene-item">
<text class="scene-name">就医代办</text>
<text class="scene-desc">有人替你办周全</text>
</view>
</view>
<!-- 主行动按钮：通栏胶囊，直达服务列表（下单路径最短化） -->
@@ -44,23 +49,16 @@
</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 class="section-link" bindtap="goToGuide">
<text class="section-link-text">服务指南</text>
<t-icon name="chevron-right" size="24rpx" color="#7A7068" />
</view>
</view>
@@ -74,6 +72,19 @@
</view>
</view>
</view>
<!-- 介绍卡：看完列表后的延伸阅读，纯展示不点击（指南入口在标题行右侧） -->
<view class="intro-card">
<text class="intro-desc">陪诊师全程陪同就医：代办挂号缴费、取药取报告，帮你向医生讲清病情要点，让家人看病不再手忙脚乱。</text>
<!-- 信任行：三项可验证事实单行小字，从首屏下沉至此 -->
<view class="intro-trust">
<text class="intro-trust-item">100% 实名认证陪诊师</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>
<!-- ③ 常用功能：待服务提醒 + 双列入口卡 -->
@@ -100,6 +111,10 @@
<text class="quick-name">{{ item.name }}</text>
<text class="quick-desc">{{ item.desc }}</text>
</view>
<!-- 通栏卡右侧补箭头：填补右半空白并提示可点 -->
<view class="quick-arrow" wx:if="{{ item.full }}">
<t-icon name="chevron-right" size="28rpx" color="#7A7068" />
</view>
</view>
</view>
</view>
@@ -109,9 +124,9 @@
<view class="page-footer">
<view class="footer-links">
<text class="footer-link" bindtap="goToContact">商务合作</text>
<text class="footer-sep">·</text>
<view class="footer-sep"></view>
<text class="footer-link" bindtap="goToContact">陪诊师入驻</text>
<text class="footer-sep">·</text>
<view class="footer-sep"></view>
<text class="footer-link" bindtap="goToContact">陪诊师考证</text>
</view>
<text class="footer-note">WARM ESCORT · 用心陪好每一步</text>
pages/home/index.wxss
+74 -56
View File
@@ -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 {