修改界面中，临时提交
This commit is contained in:
+168
-146
@@ -1,92 +1,180 @@
|
||||
const API = require('../../utils/api.js')
|
||||
|
||||
// 陪诊服务的展示配置：价格等以后端返回为准，这里只覆盖展示名。
|
||||
// 图标不走数据，而是按 id 映射到 index.wxss 里内嵌的细线 SVG（.assist-icon-1 ~ .assist-icon-8）
|
||||
// key 为后端 services 的 id，顺序即首页宫格的展示顺序
|
||||
const SERVICE_UI = {
|
||||
1: { name: '全天陪诊' },
|
||||
2: { name: '半天陪诊' },
|
||||
3: { name: '代问诊' },
|
||||
4: { name: '检查预约' },
|
||||
5: { name: '出入院代办' },
|
||||
6: { name: '跑腿服务' },
|
||||
7: { name: '陪诊套餐' },
|
||||
8: { name: '买药套餐' }
|
||||
}
|
||||
|
||||
// 陪诊服务的展示顺序（两行共 8 项）
|
||||
const SERVICE_ORDER = [1, 2, 3, 4, 5, 6, 7, 8]
|
||||
|
||||
// 计入"待服务订单"的订单状态：待确认 / 已确认 / 进行中
|
||||
const PENDING_ORDER_STATUS = ['pending', 'confirmed', 'in_progress']
|
||||
|
||||
// 人工客服电话
|
||||
const SERVICE_PHONE = '18618162956'
|
||||
|
||||
Page({
|
||||
data: {
|
||||
escortServices: [{
|
||||
id: 1,
|
||||
name: '陪诊',
|
||||
icon: 'heart',
|
||||
iconColor: '#E11D48',
|
||||
bgColor: '#FFF1F2'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '代问诊',
|
||||
icon: 'chat-heart',
|
||||
iconColor: '#EA580C',
|
||||
bgColor: '#FFF7ED'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '代办理',
|
||||
icon: 'fact-check',
|
||||
iconColor: '#059669',
|
||||
bgColor: '#ECFDF5'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '其他助诊',
|
||||
icon: 'app',
|
||||
iconColor: '#2563EB',
|
||||
bgColor: '#EFF6FF'
|
||||
}
|
||||
],
|
||||
otherServices: [{
|
||||
id: 1,
|
||||
name: '代探望',
|
||||
icon: 'apple',
|
||||
url: '',
|
||||
type: '',
|
||||
iconColor: '#7C3AED',
|
||||
bgColor: '#F5F3FF'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '企业陪诊',
|
||||
icon: 'city-8',
|
||||
url: '',
|
||||
type: '',
|
||||
iconColor: '#D97706',
|
||||
bgColor: '#FFFBEB'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '陪诊师入驻',
|
||||
icon: 'usergroup',
|
||||
url: '',
|
||||
type: '',
|
||||
iconColor: '#4F46E5',
|
||||
bgColor: '#EEF2FF'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '商务合作',
|
||||
icon: 'command',
|
||||
url: '',
|
||||
type: '',
|
||||
iconColor: '#0D9488',
|
||||
bgColor: '#F0FDFA'
|
||||
},
|
||||
],
|
||||
tools: [{
|
||||
id: 1,
|
||||
escortServices: [], // 陪诊服务（来自后端，最多 8 项）
|
||||
pendingCount: 0, // 待服务订单数，大于 0 时首页顶部展示状态条
|
||||
quickEntries: [{
|
||||
id: 'records',
|
||||
name: '预约记录',
|
||||
icon: 'assignment',
|
||||
url: 'pages/escort/recordlist',
|
||||
type: 'page',
|
||||
iconColor: '#0891B2',
|
||||
bgColor: '#ECFEFF'
|
||||
desc: '查看预约进度与历史',
|
||||
// 日历：与「健康档案」的人形图标形成明显形态差异（原先两个都是"文档+勾"，缩小后难分辨）
|
||||
icon: 'calendar-1',
|
||||
url: '/pages/escort/recordlist'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
id: 'health',
|
||||
name: '健康档案',
|
||||
icon: 'attach',
|
||||
url: '',
|
||||
type: '',
|
||||
iconColor: '#DB2777',
|
||||
bgColor: '#FDF2F8'
|
||||
desc: '管理家人就诊信息',
|
||||
icon: 'user-checked',
|
||||
url: '/pages/health/profilelist'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadServices()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.refreshPendingCount()
|
||||
// 同步自定义 tabBar 选中态（首页为第 0 项）
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 读取后端服务列表，拼装成首页宫格所需的展示数据
|
||||
loadServices() {
|
||||
const app = getApp()
|
||||
// servicesReady 由 app.onLaunch 创建，兜底避免极端情况下取不到
|
||||
const ready = app.globalData.servicesReady || Promise.resolve(app.globalData.services || [])
|
||||
|
||||
ready.then((services) => {
|
||||
const serviceMap = {}
|
||||
;(services || []).forEach((service) => {
|
||||
serviceMap[service.id] = service
|
||||
})
|
||||
|
||||
const escortServices = SERVICE_ORDER
|
||||
.filter((id) => serviceMap[id])
|
||||
.map((id) => {
|
||||
const service = serviceMap[id]
|
||||
const ui = SERVICE_UI[id] || {}
|
||||
return {
|
||||
id,
|
||||
name: ui.name || service.title,
|
||||
// 图标类名：与 index.wxss 中 .assist-icon-{id} 对应
|
||||
iconClass: 'assist-icon-' + id
|
||||
}
|
||||
})
|
||||
|
||||
this.setData({
|
||||
escortServices
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 统计待服务订单：仅在登录信息就绪后请求，未就绪时稍后重试一次
|
||||
refreshPendingCount(retry) {
|
||||
const app = getApp()
|
||||
const user = app.globalData.user
|
||||
|
||||
if (!user || !user._id) {
|
||||
// 首次进入时 App 的登录请求可能还没返回，延迟重试一次即可
|
||||
if (!retry) {
|
||||
setTimeout(() => this.refreshPendingCount(1), 1500)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
API.escort.getMyRecords({
|
||||
userId: user._id,
|
||||
page: 1,
|
||||
pageSize: 50
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return
|
||||
}
|
||||
const records = (res.data && res.data.records) || []
|
||||
const pendingCount = records.filter((record) => PENDING_ORDER_STATUS.indexOf(record.status) > -1).length
|
||||
this.setData({
|
||||
pendingCount
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('获取待服务订单失败', err)
|
||||
})
|
||||
},
|
||||
|
||||
goToAiChat() {
|
||||
wx.switchTab({
|
||||
url: '/pages/ai/aichat'
|
||||
});
|
||||
},
|
||||
|
||||
// 页脚 B 端合作入口仍直接转服务电话
|
||||
goToContact() {
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: SERVICE_PHONE
|
||||
});
|
||||
},
|
||||
|
||||
// 「联系我们」卡片：进入独立联系页，页内再提供拨号/复制/工作时间
|
||||
goToContactPage() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/mine/contact'
|
||||
});
|
||||
},
|
||||
|
||||
// Hero 主按钮：先引导新用户了解服务，服务列表入口在指南页底部
|
||||
goToGuide() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/escort/guide'
|
||||
});
|
||||
},
|
||||
|
||||
// 点击陪诊服务，直达服务详情下单
|
||||
goToServiceDetail(e) {
|
||||
const id = e.currentTarget.dataset.id
|
||||
wx.navigateTo({
|
||||
url: `/pages/escort/itemdetail?id=${id}`
|
||||
})
|
||||
},
|
||||
|
||||
// 常用功能：预约记录、健康档案
|
||||
onQuickEntryTap(e) {
|
||||
const entry = e.currentTarget.dataset.item
|
||||
if (!entry || !entry.url) {
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: entry.url
|
||||
})
|
||||
},
|
||||
|
||||
goToRecords() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/escort/recordlist'
|
||||
})
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '暖橙陪诊', // 转发标题
|
||||
@@ -98,71 +186,5 @@ Page({
|
||||
return {
|
||||
title: '暖橙陪诊',
|
||||
}
|
||||
},
|
||||
|
||||
async onLoad() {},
|
||||
|
||||
goToAiChat() {
|
||||
wx.switchTab({
|
||||
url: '/pages/ai/aichat'
|
||||
});
|
||||
},
|
||||
|
||||
goToContact() {
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: '18618162956'
|
||||
});
|
||||
},
|
||||
|
||||
goToServiceList() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/escort/itemlist'
|
||||
});
|
||||
},
|
||||
|
||||
goToAssistDetail(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
wx.navigateTo({
|
||||
url: `/pages/escort/itemlist?assistId=${id}`
|
||||
});
|
||||
},
|
||||
|
||||
goToOtherServicesDetail(e) {
|
||||
const item = e.currentTarget.dataset.item;
|
||||
if (!item || !item.type || !item.url) {
|
||||
wx.showToast({
|
||||
title: '建设中...',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
switch (item.type) {
|
||||
case 'page':
|
||||
wx.navigateTo({
|
||||
url: '/' + item.url
|
||||
});
|
||||
break;
|
||||
case 'tab':
|
||||
wx.switchTab({
|
||||
url: '/' + item.url
|
||||
});
|
||||
break;
|
||||
case 'website':
|
||||
wx.navigateTo({
|
||||
url: '/pages/home/webview?url=' + encodeURIComponent(item.url)
|
||||
});
|
||||
break;
|
||||
case 'wxapp':
|
||||
wx.navigateToMiniProgram({
|
||||
shortLink: item.url,
|
||||
env: 'release'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
wx.showToast({
|
||||
title: '建设中...',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
+86
-78
@@ -1,110 +1,118 @@
|
||||
<view class="page-bg">
|
||||
<view class="container">
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-logo">
|
||||
<image class="logo-icon" src="/images/home-yellow.png" mode="aspectFit"></image>
|
||||
<text class="logo-text">暖橙陪诊</text>
|
||||
<!-- 顶部品牌行：左侧橙底白色品牌 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>
|
||||
|
||||
<!-- Banner区域 -->
|
||||
<view class="banner-section">
|
||||
<view class="banner-card">
|
||||
<image class="banner-bg" src="/images/banner.jpg" mode="aspectFill"></image>
|
||||
<view class="banner-overlay"></view>
|
||||
<view class="banner-text">
|
||||
<text class="banner-title">专业陪诊</text>
|
||||
<text class="banner-en">让就医更简单，让客户更安心</text>
|
||||
</view>
|
||||
<!-- ① 头部：参考图的大字标题排版。去掉整块色面板，标题直接落在暖白纸面上，
|
||||
靠字号/字重建立重心，视觉更轻、更透气 -->
|
||||
<view class="hero">
|
||||
<view class="hero-title">
|
||||
<!-- 不用逗号断句：靠「暖橙强调 + 深墨正文」的色差自然切分两个短句 -->
|
||||
<text class="hero-title-accent">专业陪诊</text>
|
||||
<text class="hero-title-main">让就医更省心</text>
|
||||
</view>
|
||||
<text class="hero-sub">实名认证陪诊师 · 经验丰富 · 熟悉各大医院流程</text>
|
||||
<!-- 主行动按钮：通栏胶囊。首屏先引导新用户了解服务（陪诊指南），
|
||||
服务列表入口放在指南页底部，转化路径为「指南 → 查看服务」 -->
|
||||
<view class="hero-cta" bindtap="goToGuide">
|
||||
<text class="hero-cta-text">陪诊指南</text>
|
||||
<t-icon name="chevron-right" size="28rpx" color="#FFFFFF" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务卡片 -->
|
||||
<view class="service-cards">
|
||||
<view class="service-card" bindtap="goToAiChat">
|
||||
<view class="card-content">
|
||||
<view class="card-badge">AI</view>
|
||||
<text class="card-title">客服咨询</text>
|
||||
<text class="card-en">Customer Service</text>
|
||||
<!-- ② 客服与联系：两张同款白卡并排，图标统一走浅橙衬底 -->
|
||||
<view class="contact-row">
|
||||
<view class="contact-card" bindtap="goToAiChat">
|
||||
<view class="contact-icon">
|
||||
<!-- 用品牌 AI 图标（气泡内 AI 字），已按调色板着色为 #9A3412 -->
|
||||
<image class="contact-icon-img" src="/images/ai-ink.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="card-icon-wrap">
|
||||
<image class="card-img" src="/images/ai-yellow.png" mode="aspectFit"></image>
|
||||
<view class="contact-info">
|
||||
<text class="contact-name">在线咨询</text>
|
||||
<text class="contact-en">AI 客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-card vip" bindtap="goToContact">
|
||||
<view class="card-content">
|
||||
<view class="card-badge vip-badge">24H</view>
|
||||
<text class="card-title">联系我们</text>
|
||||
<text class="card-en">Contact Us</text>
|
||||
<!-- 联系我们不再是直接拨号，改为进入独立页（页内可拨号/复制/看工作时间） -->
|
||||
<view class="contact-card" bindtap="goToContactPage">
|
||||
<view class="contact-icon">
|
||||
<t-icon name="call" size="32rpx" color="#9A3412" />
|
||||
</view>
|
||||
<view class="card-icon-wrap vip-icon-wrap">
|
||||
<image class="card-img" src="/images/call.png" mode="aspectFit"></image>
|
||||
<view class="contact-info">
|
||||
<text class="contact-name">联系我们</text>
|
||||
<text class="contact-en">人工客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 助诊服务 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<view class="section-title-wrap">
|
||||
<view class="section-accent"></view>
|
||||
<text class="section-title">助诊服务</text>
|
||||
</view>
|
||||
<view class="section-more" bindtap="goToServiceList">
|
||||
<text>全部</text>
|
||||
<t-icon name="chevron-right" size="24rpx" class="more-icon"/>
|
||||
</view>
|
||||
<!-- ③ 陪诊服务：白卡内 4 列两项宫格，浅橙衬底 + 暖橙线图标 -->
|
||||
<view class="section">
|
||||
<view class="section-head">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">陪诊服务</text>
|
||||
</view>
|
||||
<view class="assist-grid">
|
||||
<view class="assist-item" wx:for="{{ escortServices }}" wx:key="id" bindtap="goToAssistDetail" data-id="{{ item.id }}">
|
||||
<view class="assist-icon-circle" style="background: {{ item.bgColor }}; border-color: {{ item.bgColor }};">
|
||||
<t-icon name="{{ item.icon }}" class="assist-icon" size="44rpx" color="{{ item.iconColor }}" />
|
||||
|
||||
<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。
|
||||
不加衬底方块，避免 8 个同色浅橙块平铺 -->
|
||||
<view class="assist-icon {{ item.iconClass }}"></view>
|
||||
<text class="assist-name">{{ item.name }}</text>
|
||||
</view>
|
||||
<text class="assist-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他业务 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<view class="section-title-wrap">
|
||||
<view class="section-accent"></view>
|
||||
<text class="section-title">其他业务</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="assist-grid">
|
||||
<view class="assist-item" wx:for="{{ otherServices }}" wx:key="id" bindtap="goToOtherServicesDetail" data-item="{{ item }}">
|
||||
<view class="assist-icon-circle" style="background: {{ item.bgColor }}; border-color: {{ item.bgColor }};">
|
||||
<t-icon name="{{ item.icon }}" class="assist-icon" size="44rpx" color="{{ item.iconColor }}" />
|
||||
</view>
|
||||
<text class="assist-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<view class="section-title-wrap">
|
||||
<view class="section-accent"></view>
|
||||
<text class="section-title">我的信息</text>
|
||||
</view>
|
||||
<!-- ④ 常用功能：待服务提醒 + 双列入口卡 -->
|
||||
<view class="section">
|
||||
<view class="section-head">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">常用功能</text>
|
||||
</view>
|
||||
<view class="assist-grid">
|
||||
<view class="assist-item" wx:for="{{ tools }}" wx:key="id" bindtap="goToOtherServicesDetail" data-item="{{ item }}">
|
||||
<view class="assist-icon-circle" style="background: {{ item.bgColor }}; border-color: {{ item.bgColor }};">
|
||||
<t-icon name="{{ item.icon }}" class="assist-icon" size="44rpx" color="{{ item.iconColor }}" />
|
||||
|
||||
<!-- 状态条：仅当存在待服务订单时展示 -->
|
||||
<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" wx:for="{{ quickEntries }}" wx:key="id" data-item="{{ item }}" bindtap="onQuickEntryTap">
|
||||
<!-- 两个入口统一走暖橙 + 浅橙衬底，不做色相区分 -->
|
||||
<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>
|
||||
<text class="assist-name">{{ item.name }}</text>
|
||||
</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>
|
||||
</view>
|
||||
+399
-208
@@ -1,233 +1,263 @@
|
||||
/* ===== 首页 · 暖白纸面 × 单一暖橙（按参考图设计语言重做） =====
|
||||
参考图要点：
|
||||
- 暖白纸面 + 纯白圆角卡片 + 米色发丝边，阴影极轻，几乎只靠留白分层
|
||||
- 单一暖橙主色：实心按钮/标识走深一档，浅橙衬底承载图标与标签
|
||||
- 大量圆角方形衬底 + 彩色线图标
|
||||
- 大字号标题直接落在纸面上，不用整块色面板压首屏 */
|
||||
|
||||
page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
/* 暖橙主色阶：strong 是实心块/按钮（白字需 ≥4.5:1、白图标需 ≥3:1），
|
||||
soft 是衬底，ink 是浅衬底上的文字与线图标 */
|
||||
--brand: #F97316; /* 主色：仅装饰性小色块 */
|
||||
--brand-strong: #C2410C; /* 实心按钮 / 选中态：白字 4.69:1，过 AA 正文 */
|
||||
--brand-soft: #FFF4E8; /* 图标衬底、标签底 */
|
||||
--brand-line: #FFE0C2; /* 浅橙衬底的描边 */
|
||||
--brand-ink: #9A3412; /* 浅橙衬底上的文字/图标：6.8:1，过 AA */
|
||||
|
||||
/* 状态色：全页唯一的冷色，只用在「待服务订单」提醒条上。
|
||||
作用是制造唯一焦点——整页暖橙平铺时需要一个"该看这里"的落点 */
|
||||
--status-soft: #ECF7F4;
|
||||
--status-line: #C7E5DF;
|
||||
--status-ink: #0F766E; /* #ECF7F4 上 5.0:1，过 AA 正文 */
|
||||
|
||||
/* 中性：暖灰阶，与暖白纸面同温（冷灰会让白卡边缘发青） */
|
||||
--ink: #2B2521;
|
||||
--ink-2: #4A4038;
|
||||
--muted: #7A7068; /* 白底 4.8:1，过 AA 正文 */
|
||||
--faint: #A79C92; /* 仅用于非文字装饰 */
|
||||
--line: #F0E9E0; /* 米色发丝边 */
|
||||
--paper: #FAF6F0; /* 暖白纸面 */
|
||||
--white: #FFFFFF;
|
||||
|
||||
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.04);
|
||||
--shadow-cta: 0 6rpx 16rpx rgba(194, 65, 12, 0.22);
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
min-height: 100vh;
|
||||
background: #F3F4F6;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 22rpx 22rpx;
|
||||
padding: 0 32rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
/* ===== 顶部品牌行 ===== */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 120rpx 0 24rpx;
|
||||
padding: 120rpx 0 0;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(249, 115, 22, 0.8);
|
||||
margin-left: 14rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* Banner区域 */
|
||||
.banner-section {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.banner-card {
|
||||
position: relative;
|
||||
border-radius: 28rpx;
|
||||
overflow: hidden;
|
||||
height: 320rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(249, 115, 22, 0.8) 0%, rgba(251, 146, 60, 0.5) 50%, rgba(251, 191, 36, 0.15) 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 50rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 6rpx;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 4rpx 16rpx rgba(234, 88, 12, 0.3);
|
||||
}
|
||||
|
||||
.banner-en {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
letter-spacing: 4rpx;
|
||||
margin-top: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 服务卡片 */
|
||||
.service-cards {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.service-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
align-self: flex-start;
|
||||
background: #FEF3C7;
|
||||
color: #D97706;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 14rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: #DBEAFE;
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.card-en {
|
||||
font-size: 20rpx;
|
||||
color: #9CA3AF;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #FEF9C3;
|
||||
/* 品牌印记：实心暖橙圆角方块 + 白色品牌 Logo。
|
||||
Logo 是白色线稿（心形 + 圆点）、透明底，必须压在有色底上才可见，
|
||||
40rpx 是经真机像素验证后仍能辨认轮廓的最小尺寸 */
|
||||
.brand-mark {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--brand-strong);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(194, 65, 12, 0.22);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin-left: 16rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: block;
|
||||
/* 52rpx(26px) 仍在 WCAG"大字"门槛(18pt/24px)之上：
|
||||
深墨 #2B2521 压暖白纸面实测 13:1+，无论字重都稳过 AA */
|
||||
font-size: 52rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
line-height: 1.36;
|
||||
}
|
||||
|
||||
/* 不用逗号断句：靠「暖橙强调 + 深墨正文」的色差切分两个短句。
|
||||
两段合计 11 字 × (52rpx + 2rpx 字距) + 10rpx 间隔 ≈ 604rpx，
|
||||
小于容器内宽 686rpx（750 - 32×2 页边距），不会折行 */
|
||||
.hero-title-accent {
|
||||
color: var(--brand-strong); /* 暖白纸面上 5.0:1，过 AA */
|
||||
}
|
||||
|
||||
.hero-title-main {
|
||||
color: var(--ink);
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
display: block;
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 主行动按钮：通栏胶囊，参考图的主按钮语言 */
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 36rpx;
|
||||
padding: 26rpx;
|
||||
border-radius: 999rpx;
|
||||
background: var(--brand-strong);
|
||||
box-shadow: var(--shadow-cta);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.hero-cta:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.hero-cta-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
letter-spacing: 2rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
/* ===== ② 客服与联系 ===== */
|
||||
.contact-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 26rpx 22rpx;
|
||||
border-radius: 28rpx;
|
||||
background: var(--white);
|
||||
/* 发丝边 + 紧阴影：白卡压在暖白纸面上时，仅靠阴影分不出边界 */
|
||||
border: 2rpx solid var(--line);
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.contact-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;
|
||||
}
|
||||
|
||||
.vip-icon-wrap {
|
||||
background: #DBEAFE;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
/* 通用区块卡片 */
|
||||
.section-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
margin-top: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-accent {
|
||||
width: 6rpx;
|
||||
/* AI 品牌图标是位图（无图标字体可用），按「联系我们」的 32rpx 图标对齐 */
|
||||
.contact-icon-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #F59E0B;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.contact-en {
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
margin-top: 4rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* ===== 通用区块 ===== */
|
||||
.section {
|
||||
margin-top: 56rpx;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
/* 区块标识：单竖条。原「实心橙方块 + 白图标」在页面上已是第三、四个橙色实心块，
|
||||
与顶部品牌印记撞语言，且 26rpx 的白图标过小看不清；改竖条后视觉更轻，
|
||||
把重心让给下方的服务宫格与功能卡。条高与 34rpx 标题齐平，避免细条显单薄 */
|
||||
.section-bar {
|
||||
width: 8rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 14rpx;
|
||||
background: var(--brand-strong);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
margin-left: 16rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
letter-spacing: 2rpx;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
font-weight: 500;
|
||||
/* ===== ③ 陪诊服务 ===== */
|
||||
.assist-card {
|
||||
padding: 16rpx 8rpx 20rpx;
|
||||
border-radius: 28rpx;
|
||||
background: var(--white);
|
||||
border: 2rpx solid var(--line);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.more-icon {
|
||||
margin-left: 4rpx;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
/* 网格 */
|
||||
.assist-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -238,36 +268,197 @@ page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
padding: 26rpx 0;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.assist-item:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.assist-icon-circle {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
/* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。
|
||||
56rpx(28px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度的尺寸。
|
||||
图标直接落在白卡上、不加衬底方块：8 个同色浅橙方块平铺会让整页变得均匀寡淡 */
|
||||
.assist-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 1 全天陪诊：整圈表盘 + 指针 */
|
||||
.assist-icon-1 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
/* 2 半天陪诊：半月形表盘，与 1 形成"全 / 半"对照 */
|
||||
.assist-icon-2 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiLz48cGF0aCBkPSJNMTIgMTJoNC42Ii8+PC9zdmc+");
|
||||
}
|
||||
|
||||
/* 3 代问诊：对话气泡 + 医疗十字 */
|
||||
.assist-icon-3 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
/* 4 检查预约：日历 + 对勾 */
|
||||
.assist-icon-4 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+");
|
||||
}
|
||||
|
||||
/* 5 出入院代办：医院楼 + 地面 + 十字 */
|
||||
.assist-icon-5 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+");
|
||||
}
|
||||
|
||||
/* 6 跑腿服务：包裹箱 */
|
||||
.assist-icon-6 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuNSA4LjJ2Ny42YTEuNiAxLjYgMCAwIDEtLjg0IDEuNDJsLTYuOSAzLjhhMS42IDEuNiAwIDAgMS0xLjUyIDBsLTYuOS0zLjhBMS42IDEuNiAwIDAgMSAzLjUgMTUuOFY4LjJhMS42IDEuNiAwIDAgMSAuODQtMS40Mmw2LjktMy44YTEuNiAxLjYgMCAwIDEgMS41MiAwbDYuOSAzLjhBMS42IDEuNiAwIDAgMSAyMC41IDguMloiLz48cGF0aCBkPSJNMy45IDcuMyAxMiAxMS43bDguMS00LjRNMTIgMTEuN1YyMSIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
/* 7 陪诊套餐：礼盒 */
|
||||
.assist-icon-7 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+");
|
||||
}
|
||||
|
||||
/* 8 买药套餐：胶囊 */
|
||||
.assist-icon-8 {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjUiIHk9IjkiIHdpZHRoPSIxOSIgaGVpZ2h0PSI2IiByeD0iMyIvPjxwYXRoIGQ9Ik0xMiA5djYiLz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
/* 宫格项名统一走 28rpx 标题档（与 .contact-name / .quick-name 同级）。
|
||||
5 字项名「出入院代办」= 140rpx，小于列宽 167rpx，不折行 */
|
||||
.assist-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* ===== ④ 常用功能 ===== */
|
||||
/* 全页唯一的状态色：这是唯一"需要用户行动"的信息，用它把视线钉住 */
|
||||
.order-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 22rpx 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: var(--status-soft);
|
||||
border: 2rpx solid var(--status-line);
|
||||
}
|
||||
|
||||
.order-tip:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.order-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--status-ink);
|
||||
margin-right: 14rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.order-tip-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--status-ink);
|
||||
}
|
||||
|
||||
/* 仅两个入口时，通栏列表右侧大面积留白；改为双列卡片，图标在上、文字在下 */
|
||||
.quick-list {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
background: var(--white);
|
||||
border: 2rpx solid var(--line);
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.quick-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 20rpx;
|
||||
background: var(--brand-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
background: #F9FAFB;
|
||||
border: 2rpx solid #F3F4F6;
|
||||
}
|
||||
|
||||
.assist-icon {
|
||||
color: #4B5563;
|
||||
.quick-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.assist-name {
|
||||
.quick-name {
|
||||
font-size: 28rpx;
|
||||
color: #4B5563;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.footer-space {
|
||||
height: 40rpx;
|
||||
.quick-desc {
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
/* ===== ⑤ 页脚 ===== */
|
||||
.page-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 64rpx;
|
||||
padding-top: 32rpx;
|
||||
border-top: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
/* B 端合作文字链：低调但可读，点击转服务电话 */
|
||||
.footer-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 24rpx;
|
||||
color: var(--muted); /* 暖白底 4.83:1，过 AA 正文 */
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.footer-link:active {
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.footer-sep {
|
||||
font-size: 24rpx;
|
||||
color: var(--faint); /* 仅作装饰分隔，不承载信息 */
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
.footer-note {
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 自定义 tabBar 是 fixed 脱离文档流的，这里补足它的高度，否则页脚会被盖住 */
|
||||
.footer-space {
|
||||
height: calc(140rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
Reference in New Issue
Block a user