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

AI和Mine页面的样式改成新样式了。

Browse Source
This commit is contained in:
lik
2026-10-04 19:06:45 +08:00
parent 5844272762
commit 428fb7c52c
21 changed files with 643 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/ai/aichat.wxml
+66 -84
View File
@@ -1,93 +1,82 @@
<view class="chat-container">
<!-- 消息列表区域 -->
<scroll-view
class="message-list {{messages.length > 0 ? 'has-messages' : ''}}"
scroll-y
<scroll-view
class="message-list"
scroll-y
scroll-into-view="{{scrollToMessage}}"
enhanced
show-scrollbar
>
<!-- 欢迎消息 -->
<!-- 欢迎区：空会话时的落点 -->
<view class="welcome-area" wx:if="{{messages.length === 0}}">
<view class="welcome-icon">
<t-icon name="chat" size="80rpx" color="#FF9B33" />
<t-icon name="chat" size="72rpx" color="#9B4508" />
</view>
<text class="welcome-title">AI陪诊助手</text>
<text class="welcome-desc">我是您的智能陪诊助手，可以为您解答陪诊相关问题</text>
<view class="quick-questions">
<view
class="quick-item"
wx:for="{{quickQuestions}}"
<view
class="quick-item"
wx:for="{{quickQuestions}}"
wx:key="index"
bindtap="onQuickQuestionTap"
data-question="{{item}}"
>
<text>{{item}}</text>
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
</view>
</view>
</view>
<!-- 消息气泡 -->
<!-- 消息：头像在上、气泡在下，时间紧跟头像右侧；用户消息整条靠右 -->
<view
class="message-item {{item.type}}"
wx:for="{{messages}}"
wx:key="id"
id="msg-{{item.id}}"
>
<!-- AI消息：头像在上，内容在下 -->
<block wx:if="{{item.type === 'ai'}}">
<image class="avatar ai-avatar" src="/images/home-w.png" mode="aspectFill" />
<view class="message-content">
<view class="message-bubble">
<t-chat-markdown
wx:if="{{item.contentType === 'text' && item.type === 'ai'}}"
class="message-markdown"
content="{{item.content}}"
/>
<text class="message-text" wx:elif="{{item.contentType === 'text'}}">{{item.content}}</text>
<image
wx:if="{{item.contentType === 'image'}}"
class="message-image"
src="{{item.content}}"
mode="widthFix"
bindtap="previewImage"
data-src="{{item.content}}"
/>
</view>
<text class="message-time">{{item.time}}</text>
<view class="message-head">
<!-- AI：品牌标记（暖墨线稿）；底色与用户侧同构，身份只由图形区分 -->
<view wx:if="{{item.type === 'ai'}}" class="avatar">
<image class="avatar-img" src="/images/home-ink.png" mode="aspectFit" />
</view>
</block>
<!-- 用户：人像图标（暖陶土） -->
<view wx:else class="avatar">
<t-icon name="user-1" size="36rpx" color="#9B4508" />
</view>
<text class="message-time">{{item.time}}</text>
</view>
<!-- 用户消息：头像在上，内容在下 -->
<block wx:if="{{item.type === 'user'}}">
<view class="avatar user-avatar">
<t-icon name="user-1" size="40rpx" color="#FFFFFF" />
<view class="message-content">
<view class="message-bubble">
<t-chat-markdown
wx:if="{{item.type === 'ai' && item.contentType === 'text'}}"
class="message-markdown"
content="{{item.content}}"
/>
<text wx:elif="{{item.contentType === 'text'}}" class="message-text">{{item.content}}</text>
<image
wx:if="{{item.contentType === 'image'}}"
class="message-image"
src="{{item.content}}"
mode="widthFix"
bindtap="previewImage"
data-src="{{item.content}}"
/>
</view>
<view class="message-content">
<view class="message-bubble">
<t-chat-markdown
wx:if="{{item.contentType === 'text' && item.type === 'ai'}}"
class="message-markdown"
content="{{item.content}}"
/>
<text class="message-text" wx:elif="{{item.contentType === 'text'}}">{{item.content}}</text>
<image
wx:if="{{item.contentType === 'image'}}"
class="message-image"
src="{{item.content}}"
mode="widthFix"
bindtap="previewImage"
data-src="{{item.content}}"
/>
</view>
<text class="message-time">{{item.time}}</text>
</view>
</block>
<!-- AI 声明：挂在每条 AI 回复的气泡正下方，替掉原来页面底部那行常驻声明
（它太占底部空间）。放在 .message-content 内，与气泡同宽同左边缘 -->
<text wx:if="{{item.type === 'ai'}}" class="message-note">内容由AI生成，仅供参考</text>
</view>
</view>
<!-- AI正在输入提示 -->
<!-- AI 正在输入 -->
<view class="message-item ai" wx:if="{{isTyping}}">
<image class="avatar ai-avatar" src="/images/home-yellow.png" mode="aspectFill" />
<view class="message-head">
<view class="avatar">
<image class="avatar-img" src="/images/home-ink.png" mode="aspectFit" />
</view>
</view>
<view class="message-content">
<view class="message-bubble typing-bubble">
<view class="typing-indicator">
@@ -103,36 +92,29 @@
<view style="height: 40rpx;"></view>
</scroll-view>
<!-- 清空按钮 -->
<view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
<t-icon name="delete" size="28rpx" color="#999999" />
<text class="clear-text">清空聊天</text>
</view>
<!-- 输入区域 -->
<!-- 输入区 -->
<view class="input-area">
<view class="input-wrapper">
<input
class="message-input"
type="text"
value="{{inputValue}}"
placeholder="请输入您的问题..."
placeholder-class="input-placeholder"
confirm-type="send"
bindinput="onInputChange"
bindconfirm="sendMessage"
focus="{{inputFocus}}"
/>
<view class="input-actions">
<view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
<t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#CCCCCC'}}" />
</view>
</view>
<input
class="message-input"
type="text"
value="{{inputValue}}"
placeholder="请输入您的问题..."
placeholder-class="input-placeholder"
confirm-type="send"
bindinput="onInputChange"
bindconfirm="sendMessage"
focus="{{inputFocus}}"
/>
<view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
<t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#6F655C'}}" />
</view>
</view>
<!-- AI声明 -->
<view class="ai-disclaimer">
<text>本服务为AI生成内容，结果仅供参考。</text>
<!-- 清空入口：紧贴输入区下方——拇指最容易够到的位置，操作方便。
低频但破坏性，故做成只描边不填充的暖橙小按钮（圆角与输入框同为 20rpx），
与输入区右侧浅橙底的发送键区分开，不做成裸文字链 -->
<view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
<t-icon name="delete" size="26rpx" color="#9B4508" />
<text class="clear-btn-text">清空聊天</text>
</view>
</view>
pages/ai/aichat.wxss
+170 -124
View File
@@ -1,45 +1,65 @@
/* 配色令牌来自 app.wxss（全站唯一来源），本页不留副本。
整体沿用首页的「暖白纸面 + 白卡 + 浅橙衬底」语言：
AI 气泡走白卡（白面 + 2rpx 发丝边），用户气泡走浅橙衬底，避免实心橙泛滥。 */
.chat-container {
display: flex;
flex-direction: column;
height: 100vh;
box-sizing: border-box;
/* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加 */
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
background-color: #F5F5F5;
position: relative;
/* 页面自身不滚，滚动只交给中间的消息区；
overflow: hidden 是兜底，避免任何子项溢出到视口外变成"看得见滑不到" */
overflow: hidden;
/* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加。
tabBar 实测高度 = 12+12 内距 + 44 图标 + 6 间距 + 24 文字 + 2 边框 = 100rpx(+安全区)。
140 → 120 → 112rpx：按钮下边只剩 12rpx(6px) 空隙，已贴近下限——
再往下（<100rpx）胶囊就会被 tabBar 盖住；这 12rpx 同时是防微信字体放大
把 tabBar 撑高的缓冲，不宜再压 */
padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
background-color: var(--paper);
}
/* 清空按钮 */
/* ===== 清空入口（在输入区下方）===== */
/* 空心描边小按钮：2rpx 暖橙描边、无填充。
清空是低频破坏性动作，用"只描边"与输入区右侧那个浅橙底发送键区分开；
描边在纸面上 4.66:1、文字 6.10:1，均过线。
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形，不再有胶囊
容器是 column，靠 align-self: flex-end 右对齐，不必再套一层行容器 */
.clear-btn {
align-self: flex-end;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6rpx;
padding: 12rpx 24rpx;
background-color: #FFFFFF;
border-top: 1rpx solid #EEEEEE;
gap: 8rpx;
flex-shrink: 0;
/* 上 12 贴住输入区，右 32 对齐页面页边距；下不留边距，底部空气统一交给容器 */
margin: 12rpx 32rpx 0;
padding: 10rpx 26rpx;
border-radius: 20rpx;
border: 2rpx solid var(--brand-strong);
transition: transform 0.15s ease;
}
.clear-btn:active {
opacity: 0.7;
transform: scale(0.96);
}
.clear-text {
font-size: 22rpx;
color: #999999;
.clear-btn-text {
font-size: 24rpx;
font-weight: 500;
color: var(--brand-ink);
letter-spacing: 1rpx;
}
/* 消息列表区域 */
/* ===== 消息列表 ===== */
.message-list {
flex: 1;
/* 关键：flex 子项的自动最小高度是「内容高度」，消息多于一屏后它就不肯收缩，
会把 100vh 的容器撑破、把下方输入区顶出视口（且因容器锁死高度而滑不回来）。
置 0 后它才能正确收缩到剩余空间，并触发 scroll-view 自身滚动 */
min-height: 0;
padding: 20rpx 0;
}
.message-list.has-messages {
padding-top: 20rpx;
}
/* 欢迎区域 */
/* ===== 欢迎区 ===== */
.welcome-area {
display: flex;
flex-direction: column;
@@ -48,30 +68,31 @@
text-align: center;
}
/* 空态图标：浅橙衬底 + 暖陶土图标，替代原橙/绿渐变与彩色辉光 */
.welcome-icon {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
width: 140rpx;
height: 140rpx;
margin-bottom: 32rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 155, 51, 0.3);
border-radius: 40rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
}
.welcome-title {
margin-bottom: 12rpx;
font-size: 40rpx;
font-weight: 600;
color: #333333;
margin-bottom: 16rpx;
font-weight: 700;
color: var(--ink);
}
.welcome-desc {
margin-bottom: 56rpx;
font-size: 28rpx;
color: #999999;
margin-bottom: 60rpx;
line-height: 1.6;
color: var(--muted);
}
.quick-questions {
@@ -81,113 +102,142 @@
gap: 20rpx;
}
/* 常见问题：首页白卡语言 + 右侧 chevron 做点击暗示 */
.quick-item {
background-color: #FFFFFF;
padding: 28rpx 32rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
padding: 28rpx 28rpx 28rpx 32rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 20rpx;
box-shadow: var(--shadow-card);
font-size: 28rpx;
color: #333333;
color: var(--ink-2);
text-align: left;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
transition: transform 0.15s ease;
}
.quick-item:active {
transform: scale(0.98);
background-color: #FFF8F0;
background: var(--brand-soft);
}
/* 消息项 */
/* ===== 消息项 ===== */
/* 头像在上、气泡在下；用户消息整条靠右 */
.message-item {
display: flex;
flex-direction: column;
padding: 16rpx 24rpx;
}
.message-item.ai {
align-items: flex-start;
}
.message-item.user {
align-items: flex-end;
}
/* 头像 */
/* 头像行：头像在左，时间紧跟其右 */
.message-head {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 10rpx;
}
/* 用户侧镜像为「时间 → 头像」：整行仍贴右边缘，于是头像正好落在气泡右边缘上，
与 AI 侧头像对齐气泡左边缘形成对称；时间退到头像左侧，不再顶在最右 */
.message-item.user .message-head {
flex-direction: row-reverse;
}
/* 头像底座：AI 与用户同构——浅橙衬底 + 2rpx 暖橙描边
（浅橙块落在纸面上只有约 1.03:1，必须靠描边托形）。
身份只由图形区分：AI 是品牌标记，用户是人像图标；
左右位置本来就把两者分开了，不必再用"实心橙 vs 浅橙"区分，
否则同一列里两种底板并排出现会读成没做完 */
.avatar {
width: 72rpx;
height: 72rpx;
border-radius: 40%;
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
flex-shrink: 0;
}
.ai-avatar {
background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
margin-bottom: 12rpx;
padding: 16rpx;
width: 46rpx;
height: 46rpx;
/* AI 的品牌标记用暖墨版 home-ink.png：白色版 home-w.png 只能压在实心色块上，
落在浅橙底会看不见。
36rpx 与用户侧的 t-icon 同尺寸（两个图形的笔画都约占画布 95%），视觉齐平 */
.avatar-img {
width: 36rpx;
height: 36rpx;
}
.user-avatar {
background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
margin-bottom: 12rpx;
/* 头像行里的时间：放头像右侧 */
.message-time {
font-size: 22rpx;
color: var(--muted);
}
/* 消息内容 */
/* 头像已移到气泡上方，气泡不再被头像占位挤压，版心随之放宽：
84% → 92%（约 646rpx），仍留一档余量不顶到屏幕边缘 */
.message-content {
display: flex;
flex-direction: column;
max-width: 95%;
min-width: 0;
max-width: 92%;
}
.message-item.user .message-content {
align-items: flex-end;
}
.message-item.ai .message-content {
align-items: flex-start;
}
/* 消息气泡 */
/* ===== 气泡 ===== */
.message-bubble {
padding: 20rpx 24rpx;
border-radius: 16rpx;
border-radius: 20rpx;
word-wrap: break-word;
word-break: break-all;
}
/* AI：白卡（白面 + 发丝边），安静、不与用户消息争色 */
.message-item.ai .message-bubble {
background-color: #FFFFFF;
border-top-left-radius: 4rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-top-left-radius: 6rpx;
}
/* 用户：浅橙衬底 + 暖陶土字，避免一排实心橙（浅橙底 5.96:1，过 AA）。
气泡落在纸面上，浅橙底与纸面明度差仅约 1.03:1，必须靠 2rpx --brand-line 描边托形 */
.message-item.user .message-bubble {
background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
border-top-right-radius: 4rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
border-top-right-radius: 6rpx;
}
/* 气泡正文 28 → 30rpx（15px）：长回答连续阅读时 14px 偏吃力，上调一号。
markdown 与纯文本两条路径同步，避免同一气泡里两种字号 */
.message-text {
font-size: 28rpx;
font-size: 30rpx;
line-height: 1.6;
}
.message-item.ai .message-text {
color: #333333;
color: var(--ink-2);
}
.message-item.user .message-text {
color: #FFFFFF;
color: var(--brand-ink);
}
/* Markdown 渲染区域 */
/* Markdown 渲染区：字号与 .message-text 对齐（30rpx） */
.message-markdown {
width: 100%;
font-size: 28rpx;
color: #333333;
font-size: 30rpx;
line-height: 1.6;
color: var(--ink-2);
}
/* 表格在聊天气泡中的样式覆盖 */
@@ -196,7 +246,7 @@
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1rpx solid #E5E5E5;
border: 2rpx solid var(--line);
border-radius: 8rpx;
}
@@ -223,16 +273,16 @@
}
.message-markdown .t-chat-markdown-table__th {
background-color: #F5F5F5;
background-color: var(--brand-soft);
font-weight: 600;
color: #333333;
color: var(--ink);
}
.message-markdown .t-chat-markdown-table__tr:nth-child(2n) {
background-color: #FAFAFA;
background-color: var(--paper);
}
/* 代码块样式覆盖 */
/* 代码块 */
.message-markdown .t-chat-markdown-codespan,
.message-markdown .t-chat-markdown-code {
font-size: 24rpx;
@@ -241,16 +291,10 @@
.message-image {
max-width: 400rpx;
border-radius: 8rpx;
border-radius: 12rpx;
}
.message-time {
font-size: 20rpx;
color: #999999;
margin-top: 8rpx;
}
/* 正在输入指示器 */
/* ===== 正在输入 ===== */
.typing-bubble {
padding: 24rpx 32rpx;
}
@@ -262,10 +306,10 @@
}
.dot {
width: 16rpx;
height: 16rpx;
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background-color: #CCCCCC;
background-color: var(--brand-ink);
animation: typing 1.4s infinite ease-in-out both;
}
@@ -288,62 +332,64 @@
}
}
/* 输入区域 */
/* ===== 输入区 ===== */
.input-area {
background-color: #FFFFFF;
padding: 20rpx 24rpx;
border-top: 1rpx solid #EEEEEE;
}
.input-wrapper {
display: flex;
align-items: center;
gap: 16rpx;
/* 钉在容器底部，不被消息区挤压 */
flex-shrink: 0;
padding: 16rpx 24rpx;
background: var(--white);
border-top: 2rpx solid var(--line);
}
.message-input {
flex: 1;
height: 72rpx;
background-color: #F5F5F5;
border-radius: 16rpx;
height: 76rpx;
padding: 0 28rpx;
background: var(--paper);
border: 2rpx solid var(--line);
/* 20rpx = 10px：与气泡、常见问题卡、用户徽记的统一圆角档，
比原 999rpx 胶囊更贴合"输入条"的体量（76rpx 高≈38px，10px 圆角约占四分之一） */
border-radius: 20rpx;
font-size: 28rpx;
color: #333333;
color: var(--ink);
}
.input-placeholder {
color: #AAAAAA;
}
.input-actions {
display: flex;
align-items: center;
gap: 16rpx;
color: var(--muted);
}
/* 发送按钮：默认浅橙底 + 描边，有内容时转实心暖橙（全页唯一的实心橙块）。
默认态落在白面输入区上，浅橙底同样靠 --brand-line 描边托形。
圆角由正圆（50%）改为 20rpx，与左侧输入框、上方气泡同档，成对出现 */
.action-btn {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
width: 76rpx;
height: 76rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #F5F5F5;
transition: all 0.2s ease;
border-radius: 20rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
flex-shrink: 0;
transition: all 0.15s ease;
}
.send-btn.active {
background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
background: var(--brand-strong);
border-color: var(--brand-strong);
}
/* AI声明 */
.ai-disclaimer {
padding: 12rpx 24rpx;
text-align: center;
background-color: #F5F5F5;
}
.ai-disclaimer text {
font-size: 22rpx;
color: #CCCCCC;
/* ===== AI 声明注释 ===== */
/* 原为页面底部一行常驻声明，改为挂在每条 AI 回复的气泡正下方：
既省下底部固定高度，又让声明紧贴它要限定的内容。
无背景无边框，靠 muted 小字安静收尾；
24rpx 是中文最小可用字号下限（12px），不能再小 */
.message-note {
margin-top: 8rpx;
font-size: 24rpx;
line-height: 1.5;
color: var(--muted);
}
pages/escort/itemlist.js
+3 -3
View File
@@ -13,13 +13,13 @@
const SERVICE_GROUPS = [{
key: 'accompany',
title: '陪同就医',
note: '老人、异地就医，或不便独自就诊的情况都适合。陪诊师提前确认院区路线与科室位置，就诊当天全程在场。',
note: '不熟悉医院流程、上班脱不开身、不便独自就诊的情况都适合，就诊当天有人全程陪着。',
ids: [1, 2] // 全天陪诊 / 半天陪诊
},
{
key: 'errand',
title: '就医代办',
note: '本人不必到场。排队取号、递送材料、取报告这些跑动的事都可以交给我们，办完的结果原样带回。',
note: '代问诊、预约检查时间、取报告、办手续、开药等跑腿服务都可以代劳，本人不必到场。',
ids: [3, 4, 5, 6] // 代问诊 / 检查预约 / 出入院代办 / 跑腿服务
},
{
@@ -30,7 +30,7 @@ const SERVICE_GROUPS = [{
// 沿革：这里放过「打算长期使用」，因与另外两组的"要办的事"不同轴被改回口语，
// 现在三组标题统一改成 4 字短语，它也就不再是异类
title: '多次使用',
note: '需要多次复诊或长期治疗时，一次买多次，省去反复下单的麻烦，每次按次使用。',
note: '需要多次复诊或长期治疗时，一次买多次，省去反复下单的麻烦。',
ids: [7, 8] // VIP 5次 半天陪诊 / VIP 5次代买药
// 注：条目改单行横排后名称不再被半栏宽度挤压，这两个"VIP 5次 XXX"已恢复原名，
// "买多次"由名称自己交代；组标题与副题仍负责讲清"什么情况选这一组"
pages/escort/itemlist.wxml
+4 -4
View File
@@ -22,12 +22,12 @@
<view class="notice-links">
<view class="notice-link" bindtap="goToGuide">
<text class="notice-link-text">服务指南</text>
<t-icon name="chevron-right" size="26rpx" color="#9A3412" />
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
</view>
<view class="notice-sep"></view>
<view class="notice-link" bindtap="goToAgreement">
<text class="notice-link-text">用户协议</text>
<t-icon name="chevron-right" size="26rpx" color="#9A3412" />
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
</view>
</view>
</view>
@@ -87,13 +87,13 @@
做成一张浅橙收口卡——与首页「常用功能」区块尾部的「联系我们」卡
（.quick-item-full）同源：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影。
首页每个区块都收在暖色卡上，本页原先四张白面一张暖色面都没有，
暖色只剩"线"（竖条 / 按钮环 / 暖陶土字），整页因此比首页轻一档；
暖色只剩"线"（竖条 / 按钮环 / 暖橙字），整页因此比首页轻一档；
这张卡就是补回来的那张"面"，也是页尾唯一的暖色落点 -->
<view class="page-footer">
<text class="footer-text">没有合适的？</text>
<view class="footer-link" bindtap="goToContact">
<text class="footer-link-text">联系人工客服</text>
<t-icon name="chevron-right" size="22rpx" color="#9A3412" />
<t-icon name="chevron-right" size="22rpx" color="#9B4508" />
</view>
</view>
pages/escort/itemlist.wxss
+18 -32
View File
@@ -25,11 +25,11 @@
- 项间虚线挂在 .ledger-row 上、通栏到卡的内边缘；每组最后一行不画
（.ledger-row:last-child）——卡的底边已经替它收了口，留着会叠出
"虚线 + 28rpx + 卡边发丝线"的双线。章线开、卡边收，每章仍是一张闭合的表
- 按钮走"空心胶囊"：3rpx --brand-strong 环 + 满圆角 + 暖陶土字（纸面 6.89:1），
- 按钮走"空心胶囊"：3rpx --brand-strong 环 + 满圆角 + 暖橙字（纸面 6.10:1），
无填充无阴影，按下填 --brand-line。之所以不用填充，是因为按钮挪到价格左边后
与规格签撞了形——签是"浅橙底 + 小圆角"，按钮若也做成"浅橙底 + 圆角"，
同一行就出现两个同形物体，读起来是两个标签，分不清哪个能点。
现在签 = 暖陶土小字、按钮 = 满圆角空心环，一行只剩一个填充物。
现在签 = 暖橙小字、按钮 = 满圆角空心环，一行只剩一个填充物。
字重也从 700 降到 500：可点性改由环承担，字不必再靠粗度喊话
（代价是 500 在部分 Android 上会落回常规，详见 .book-btn 注释）
- 价格按用户要求弱化：--muted + 字重 500（本页对 §2.1「价格数字」的例外，已登记）
@@ -49,25 +49,11 @@
落差只剩一处，且是分工使然：首页「立即预约」是实心 --brand-strong 胶囊（1 个主 CTA），
本页「预约」是 3rpx 空心环（8 个并列动作）——8 个实心橙排一列会撞 §2.1，故不跟 */
page {
--brand-strong: #C2410C; /* 按钮环、区块竖条：纸面上 4.89:1，过 AA 与非文本 3:1 */
--brand-soft: #FFF4E8; /* 浅橙衬底，暖色的第二档；也是规格签的底 */
--brand-line: #FFE0C2; /* 浅橙衬底描边；也是按钮按下时的填充 */
--brand-ink: #9A3412; /* 浅橙衬底/纸面上的文字链：6.8:1，过 AA */
--ink: #2B2521;
--ink-2: #4A4038;
--muted: #6F655C; /* 纸面 5.28:1 / 白卡 5.69:1，过 AA 正文 */
--line: #ECE3D6; /* 米色发丝边：纸面 1.20:1 */
--sep: #E5DACC; /* 分隔线专用：竖分隔线
（比 --line 深一档才看得见） */
--paper: #FAF8F5;
--white: #FFFFFF;
/* 白卡托形阴影：与首页 --shadow-card 同值，全站一套。
用中性暖墨而不是暖橙——DESIGN.md §2.3 把彩色阴影登记给"浅橙块托形"，
白面一律走中性；暖橙阴影会让白卡边缘泛出一圈暖晕，与首页的白卡不是同一种东西 */
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07);
/* 配色令牌已上移到 app.wxss（全站唯一来源，改配色只改那一处），本页不再留副本；
以下两段注释只作沿革留档。
主色：暖橙（色相 25°、明度 38°）。
曾试过右移到琥珀 #A85A00 以避开"锈橙 ≈ 干血"，但为凑白字 AA 压低了明度（40%→33%），
画面变闷、失掉醒目度；故折中定在 #B8520A——微出色相、保住原亮度与饱和 */
background-color: var(--paper);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@@ -297,13 +283,13 @@ page {
color: var(--muted);
}
/* ===== 规格签：暖陶土小字（按用户要求去掉左竖条） =====
/* ===== 规格签：暖橙小字（按用户要求去掉左竖条） =====
沿革：整圈描边 → 4rpx 左竖条 + 浅橙底（色标式）→ 现在只剩字 + 一层极浅的底。
去竖条的原因：页面上已经有一套竖条语言——三个组头的 8×36rpx 实心竖条。
每行再插一道 4rpx 小竖条，全页竖向重音就从 3 处涨到 11 处，与组头抢同一个记号。
签退回纯文字后，每行的竖条只剩组头一处，记号重新变回"章"级。
代价要记住：底仍是 --brand-soft，它落在白卡上只有 1.08:1（纸面上 1.02:1），
实际都看不出来——签现在是"暖陶土字 + 一层几乎不可见的暖底"，
实际都看不出来——签现在是"暖橙字 + 一层几乎不可见的暖底"，
辨识全部由字色承担。这也正是它当初选 --brand-ink（白卡 7.31:1）而不是
--brand-strong 的原因。
若日后想要一个看得见的签形，两条路：
@@ -406,30 +392,30 @@ page {
line-height: 1.7;
}
/* ===== 预约：空心胶囊（鲜橙环 + 暖陶土字） =====
/* ===== 预约：空心胶囊（暖橙环 + 暖橙字） =====
沿革：描边版 → 实心 --brand-strong → 软色块 → 现在这版空心胶囊，第四次调整。
为什么又回到"无填充"：上一版软色块本身没问题，问题是它挪到价格左边之后，
和紧邻的规格签撞了形——签是"浅橙底 + 暖陶土字 + 小圆角"，按钮也是
"浅橙底 + 暖陶土字 + 圆角"，两个同形物体在同一行相距 450rpx，读起来像两个标签。
和紧邻的规格签撞了形——签是"浅橙底 + 暖橙字 + 小圆角"，按钮也是
"浅橙底 + 暖橙字 + 圆角"，两个同形物体在同一行相距 450rpx，读起来像两个标签。
签和按钮的身份不同：签是标签（静态、可无边界），按钮是控件（必须一眼看出能点）。
两者只能靠"形"分开，靠"深浅"分不开。于是这里把按钮做成一行里唯一的"环"：
签 = 浅橙底 + 暖陶土字，无框，也不再有左竖条；
签 = 浅橙底 + 暖橙字，无框，也不再有左竖条；
按钮 = 满圆角空心环，无底。
同时它也不再是行内第二个浅色实心块，一行只剩一个填充物（签），主次不再打架。
为什么是满圆角：圆角 6rpx 是签的语言，12rpx 与签仍在同一族；
28rpx（= 高度 56rpx 的一半）让它成为胶囊，轮廓与签一眼可分。
为什么环 3rpx 而不是 2rpx：按钮是本页唯一的转化入口，56rpx 高度下 2rpx 的环
在真机强光里发虚；3rpx 的 --brand-strong 在纸面上 4.89:1，稳稳过非文本 3:1。
字走 --brand-ink（纸面上 6.89:1），比环的 --brand-strong（4.89:1）再稳一档：
在真机强光里发虚；3rpx 的 --brand-strong 在纸面上 4.66:1，稳稳过非文本 3:1。
字走 --brand-ink（纸面上 6.10:1），比环的 --brand-strong（4.66:1）再稳一档：
环承担"这是动作"的色，字承担"读得清"的对比度。
去掉填充与阴影：原先的暖色紧阴影是为了把 1.02:1 的浅橙底托出形状，
没有底就不需要拖形，8 圈阴影一并撤掉，整页顺带更轻。
按下把胶囊填上 --brand-line：同色阶、可感知（1.19:1→填充可见），
暖陶土字在其上 5.80:1，仍过 AA。不引入新色。
暖橙字在其上 5.14:1，仍过 AA。不引入新色。
注意"淡"仍不能走"提亮填充 + 白字"——白字对 #EA6A2E 只剩约 3.2:1、
对 #F97316 约 2.8:1，都不达 AA。
与 DESIGN.md §3 的禁用态不撞：禁用是 --muted 字 + --sep 描边 + 透明底，
本按钮是暖陶土字 + 鲜橙环，字色与环色两个维度都不同，不会被读成不可点。
本按钮是暖橙字 + 暖橙环，字色与环色两个维度都不同，不会被读成不可点。
真机若觉得环太空、抓力不够，下一顺位是只把 background 换成 --brand-line
（就是现在的按下色），形不动——那是一步就能上的台阶，不必换风格。
字重按用户要求 700 → 500。要记住 500 在中文里不稳定：iOS 的苹方有 Medium(500)，
@@ -479,7 +465,7 @@ page {
同一套做法：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影 + 28rpx 圆角。
为什么页尾要有一张暖色面：首页的节奏是"白卡 … 白卡 … 一张浅橙卡收口"
（陪诊服务收在介绍卡上，常用功能收在联系我们上）。本页原先 4 张白面
一张暖色收口都没有，暖色只剩"线"——竖条、按钮环、暖陶土字，
一张暖色收口都没有，暖色只剩"线"——竖条、按钮环、暖橙字，
整页因此比首页轻一大截；这张卡就是补回来的那一张"面"。
浅橙底与纸面的填充差只有约 1.03:1，但面积够大，大面积暖色自身可辨，
再配 --brand-line 描边就够，与首页那张一样不加阴影 */
pages/home/index.wxml
+1 -1
View File
@@ -116,7 +116,7 @@
<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" />
<t-icon name="{{ item.icon }}" size="34rpx" color="#9B4508" />
</view>
<view class="quick-info">
<text class="quick-name">{{ item.name }}</text>
pages/home/index.wxss
+18 -49
View File
@@ -6,43 +6,12 @@
- 大字号标题直接落在纸面上，不用整块色面板压首屏 */
page {
/* 暖橙主色阶：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 */
/* 状态色：全页唯一的冷色，只用在「待服务订单」提醒条上。
作用是制造唯一焦点——整页暖橙平铺时需要一个"该看这里"的落点 */
/* 配色令牌已上移到 app.wxss（全站唯一来源，改配色只改那一处），本页不再留副本。
这里只剩本页专属的一样：「待服务订单」提醒条的状态色——全页唯一的冷色，
语义由 DESIGN.md §3 管，不随主色走 */
--status-soft: #ECF7F4;
--status-line: #C7E5DF;
--status-ink: #0F766E; /* #ECF7F4 上 5.0:1，过 AA 正文 */
/* 中性：暖灰阶，与暖白纸面同温（冷灰会让白卡边缘发青） */
--ink: #2B2521;
--ink-2: #4A4038;
--muted: #6F655C; /* 纸面(--paper) 5.28:1 / 白卡 5.69:1，过 AA 正文。
原 #7A7068 在白卡上 4.83:1 达标，但落在暖白纸面上只有 4.49:1，压线不过 */
--faint: #A79C92; /* 仅用于非文字装饰 */
--line: #ECE3D6; /* 米色发丝边。原 #F0E9E0 落在纸面上只有 1.12:1，等于"看得见但看不清"，
而白卡与纸面的填充差本身只有 1.08:1——边界全靠这条边，它必须站得住。
压深一档后：纸面 1.20:1 / 白卡 1.27:1 */
--paper: #FAF8F5; /* 暖白纸面。原 #FAF6F0 的 R−B=10，黄度偏重，大面积铺开会被读成
"旧纸/发闷"而不是"暖白干净"（感知亮度受色饱和度影响，
同明度下越黄越显沉）。压到 R−B=5，黄度减半，
明度反而略升（L* 97.0 → 97.7），暖白身份保留 */
--white: #FFFFFF;
/* 紧阴影：偏移与模糊半径不变（仍是"小偏移、小模糊"的锐利档），只提不透明度。
原因：上面的纸面去黄后，白卡与纸面的填充差从 1.08:1 降到 1.06:1，
卡片需要阴影来补回"浮在纸面上"的层级，否则整页更平。
0.04 时阴影几乎不可见，提到 0.07 后边缘压深约等于那道填充差本身 */
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07);
/* 彩色阴影原为 0 6rpx 16rpx/22%：全页只有它与品牌印记两处彩色阴影，且都在首屏，
是首屏显重的主要来源，也与"小偏移、小模糊"的锐利阴影偏好相悖，故收小一档 */
--shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16);
}
.page-bg {
@@ -78,7 +47,7 @@ page {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(194, 65, 12, 0.16);
box-shadow: 0 2rpx 8rpx rgba(184, 82, 10, 0.16);
}
.brand-logo {
@@ -119,7 +88,7 @@ page {
两段合计 11 字 × (48rpx + 2rpx 字距) + 10rpx 间隔 ≈ 560rpx，
小于容器内宽 686rpx（750 - 32×2 页边距），不会折行 */
.hero-title-accent {
color: var(--brand-strong); /* 暖白纸面上 5.0:1，过 AA */
color: var(--brand-strong); /* 暖白纸面上 4.66:1，过 AA（50rpx/700 属大字，3:1 门槛之上） */
}
.hero-title-main {
@@ -128,7 +97,7 @@ page {
}
/* 场景行：三项核心场景两行排布（场景词 + 补充），纯展示不点击。
场景词走暖陶土 --brand-ink 做暖色标签，与标题深墨半句靠色相拉开层级，
场景词走暖橙 --brand-ink 做暖色标签，与标题深墨半句靠色相拉开层级，
避免两条深色带叠在一起；补充走 muted 保持安静。
28 → 40rpx：补充语由 8 字收到 5 字后横向已有空气，纵向再拉开一档 */
.scene-row {
@@ -147,9 +116,9 @@ page {
.scene-name {
font-size: 30rpx;
font-weight: 700;
/* 暖陶土 --brand-ink：与标题深墨半句「让就医更省心」同屏时靠色相拉开层级，
/* 暖橙 --brand-ink：与标题深墨半句「让就医更省心」同屏时靠色相拉开层级，
避免两段 ink+700 连排成"两条深色带"；比标题的 --brand-strong 低一档分量，
标题仍是首屏唯一的亮橙焦点。纸面上 6.8:1，过 AA */
标题仍是首屏唯一的暖色焦点。纸面上 6.10:1，过 AA */
color: var(--brand-ink);
letter-spacing: 1rpx;
}
@@ -231,7 +200,7 @@ page {
.intro-trust-item {
font-size: 24rpx;
font-weight: 700;
color: var(--brand-ink); /* 浅橙底 6.8:1，过 AA */
color: var(--brand-ink); /* 浅橙底 5.96:1，过 AA */
letter-spacing: 1rpx;
}
@@ -344,7 +313,7 @@ page {
transform: scale(0.94);
}
/* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。
/* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #B8520A，base64 内嵌避免引入图标字体。
60rpx(30px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度、减少白卡空荡感的尺寸。
图标直接落在白卡上、不加衬底方块：衬底层级已让给上方主推卡，小宫格保持安静 */
.assist-icon {
@@ -358,43 +327,43 @@ page {
/* 1 全天陪诊：整圈表盘 + 指针 */
.assist-icon-1 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4=");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4=");
}
/* 2 半天陪诊：整圈表盘 + 右半实心填充，与 1 的"空心全圈"形成"全 / 半"对照，
避免原半月形在小尺寸下被误读为字母 D */
.assist-icon-2 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiIGZpbGw9IiNDMjQxMEMiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg==");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiIGZpbGw9IiNCODUyMEEiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg==");
}
/* 3 代问诊：对话气泡 + 医疗十字 */
.assist-icon-3 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg==");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg==");
}
/* 4 检查预约：日历 + 对勾 */
.assist-icon-4 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+");
}
/* 5 出入院代办：医院楼 + 地面 + 十字 */
.assist-icon-5 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+");
}
/* 6 跑腿服务：包裹箱 */
.assist-icon-6 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuNSA4LjJ2Ny42YTEuNiAxLjYgMCAwIDEtLjg0IDEuNDJsLTYuOSAzLjhhMS42IDEuNiAwIDAgMS0xLjUyIDBsLTYuOS0zLjhBMS42IDEuNiAwIDAgMSAzLjUgMTUuOFY4LjJhMS42IDEuNiAwIDAgMSAuODQtMS40Mmw2LjktMy44YTEuNiAxLjYgMCAwIDEgMS41MiAwbDYuOSAzLjhBMS42IDEuNiAwIDAgMSAyMC41IDguMloiLz48cGF0aCBkPSJNMy45IDcuMyAxMiAxMS43bDguMS00LjRNMTIgMTEuN1YyMSIvPjwvc3ZnPg==");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuNSA4LjJ2Ny42YTEuNiAxLjYgMCAwIDEtLjg0IDEuNDJsLTYuOSAzLjhhMS42IDEuNiAwIDAgMS0xLjUyIDBsLTYuOS0zLjhBMS42IDEuNiAwIDAgMSAzLjUgMTUuOFY4LjJhMS42IDEuNiAwIDAgMSAuODQtMS40Mmw2LjktMy44YTEuNiAxLjYgMCAwIDEgMS41MiAwbDYuOSAzLjhBMS42IDEuNiAwIDAgMSAyMC41IDguMloiLz48cGF0aCBkPSJNMy45IDcuMyAxMiAxMS43bDguMS00LjRNMTIgMTEuN1YyMSIvPjwvc3ZnPg==");
}
/* 7 陪诊套餐：礼盒 */
.assist-icon-7 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+");
}
/* 8 买药套餐：45° 斜置胶囊 + 中缝，避免原横置胶囊被误读为"链接"图标 */
.assist-icon-8 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0LjIiIHk9IjguMiIgd2lkdGg9IjE1LjYiIGhlaWdodD0iNy42IiByeD0iMy44IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIi8+PHBhdGggZD0iTTkuMyA5LjNsNS40IDUuNCIvPjwvc3ZnPg==");
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0LjIiIHk9IjguMiIgd2lkdGg9IjE1LjYiIGhlaWdodD0iNy42IiByeD0iMy44IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIi8+PHBhdGggZD0iTTkuMyA5LjNsNS40IDUuNCIvPjwvc3ZnPg==");
}
/* 宫格项名统一走 28rpx 标题档（与 .quick-name 同级）。
pages/mine/mine.js
+4 -1
View File
@@ -3,7 +3,10 @@ const API = require('../../utils/api.js')
Page({
data: {
userInfo: {
avatar: '/images/home-yellow.png',
// 默认头像：暖墨色品牌标记（home-ink #9B4508）。
// home.png 本体是 tabBar 未选中态的灰色 #8A8A8A，故另存一份重上色位图；
// 与 ai-ink.png 同一做法（位图着色走不了 CSS 变量，改色须手改，见 DESIGN.md §7.3）
avatar: '/images/home-ink.png',
name: '用户',
phone: '',
sex: '',
pages/mine/mine.wxml
+9 -4
View File
@@ -24,13 +24,18 @@
<!-- B 端合作入口：从首页移入，避免干扰患者/家属的主流程 -->
<view class="footer-links">
<text class="footer-link" bindtap="onFooterTap">企业/机构合作</text>
<text class="footer-sep">·</text>
<view class="footer-sep"></view>
<text class="footer-link" bindtap="onFooterTap">陪诊师入驻</text>
<text class="footer-sep">·</text>
<view class="footer-sep"></view>
<text class="footer-link" bindtap="onFooterTap">商务合作</text>
</view>
<text class="version">版本号：V 1.1.3</text>
<text class="copyright">© 2026 北京奕华盛科技 版权所有</text>
<!-- 版本与版权合并为一行：两行元信息体量都很小，分行只制造空白；
中间复用 .footer-sep 细竖线，与上方链接行同一分隔语言（不用中点字符） -->
<view class="footer-meta">
<text class="copyright">© 2026 北京奕华盛科技 版权所有</text>
<view class="footer-sep"></view>
<text class="version">版本号：V 1.1.3</text>
</view>
</view>
<comp-profile
pages/mine/mine.wxss
+74 -93
View File
@@ -1,114 +1,58 @@
page {
background-color: #F5F5F5;
/* 配色令牌来自 app.wxss（全站唯一来源），本页不再留副本；
页面底色改用暖白纸面，与首页一致 */
background-color: var(--paper);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.container {
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
/* 给 fixed 的自定义 tabBar 留位，避免底部版权被盖住 */
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
padding: 0 32rpx calc(140rpx + env(safe-area-inset-bottom));
}
/* 头部：头像 + 昵称，直接落在纸面上（与首页 hero 同一语言） */
.header-card {
background: #FFFFFF;
padding: 150rpx 32rpx 48rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 0 40rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
width: 128rpx;
height: 128rpx;
border-radius: 32rpx;
}
.user-name {
margin-top: 24rpx;
font-size: 36rpx;
font-weight: 600;
color: #1A1A1A;
font-weight: 700;
color: var(--ink);
}
/* 菜单组：首页「白卡」语言——白面 + 2rpx 发丝边 + 紧阴影 */
.menu-section + .menu-section {
margin-top: 24rpx;
}
.user-phone {
font-size: 26rpx;
color: #999999;
margin-top: 12rpx;
}
.login-section {
padding: 32rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.login-btn {
background: linear-gradient(135deg, #D4A853 0%, #FF8500 100%);
color: #FFFFFF;
font-size: 30rpx;
font-weight: 600;
padding: 28rpx;
border-radius: 20rpx;
border: none;
line-height: 1.5;
}
.login-btn::after {
border: none;
}
.avatar-btn {
background: #FFFFFF;
color: #D4A853;
font-size: 28rpx;
font-weight: 500;
padding: 24rpx;
border-radius: 20rpx;
border: 1rpx solid #D4A853;
line-height: 1.5;
}
.avatar-btn::after {
border: none;
}
.nickname-input-wrap {
background: #FFFFFF;
border-radius: 20rpx;
padding: 24rpx 32rpx;
}
.nickname-input {
font-size: 28rpx;
color: #1F2937;
}
.menu-section {
padding: 24rpx 22rpx 0rpx 22rpx;
}
.menu-group-header {
font-size: 26rpx;
color: #999999;
padding: 16rpx 0;
margin-bottom: 16rpx;
}
.menu-list {
background: #FFFFFF;
border-radius: 16rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 28rpx;
box-shadow: var(--shadow-card);
overflow: hidden;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
}
.menu-item {
display: flex;
align-items: center;
padding: 32rpx;
border-bottom: 1rpx solid #F5F5F5;
border-bottom: 2rpx solid var(--line);
}
.menu-item:last-child {
@@ -116,62 +60,99 @@ page {
}
.menu-item-hover {
background: #FAFAFA;
background: var(--brand-soft);
}
/* t-icon 未传 color 属性，这里用 CSS 变量着色即可 */
.menu-icon {
color: #D4A853;
margin-right: 24rpx;
color: var(--brand-ink);
}
.menu-text {
flex: 1;
font-size: 30rpx;
color: #1A1A1A;
font-weight: 500;
color: var(--ink);
}
.menu-arrow {
color: #CCCCCC;
flex-shrink: 0;
color: var(--muted);
}
/* 登录按钮：与首页主 CTA 同语言（实心暖橙胶囊 + 白字 + CTA 阴影） */
.login-section {
padding: 32rpx 0;
}
.login-btn {
width: 100%;
padding: 28rpx;
border: none;
border-radius: 999rpx;
background: var(--brand-strong);
box-shadow: var(--shadow-cta);
color: var(--white);
font-size: 30rpx;
font-weight: 700;
letter-spacing: 2rpx;
line-height: 1.4;
}
.login-btn::after {
border: none;
}
/* 页脚：B 端合作文字链 + 版本信息，低调可读 */
.footer-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 60rpx 32rpx;
margin-top: auto;
padding-top: 60rpx;
}
/* B 端合作链接：从首页移入，样式沿用首页页脚的低调文字链 */
.footer-links {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
/* 文字只有 24rpx 高，用 padding 撑热区、等量负外边距抵消，不影响行距 */
.footer-link {
padding: 16rpx 0;
margin: -16rpx 0;
font-size: 24rpx;
color: #999999;
color: var(--muted);
letter-spacing: 1rpx;
}
.footer-link:active {
color: #22A45D;
color: var(--brand-strong);
}
/* 细竖线分隔：替代原中点字符，避免一行多点 */
.footer-sep {
font-size: 24rpx;
color: #D4D4D8;
margin: 0 16rpx;
width: 2rpx;
height: 20rpx;
margin: 0 24rpx;
background: var(--faint);
flex-shrink: 0;
}
/* 版本 + 版权同处一行，复用 .footer-sep 做竖线分隔 */
.footer-meta {
display: flex;
align-items: center;
}
.version {
font-size: 24rpx;
color: #B0B0B0;
margin-bottom: 12rpx;
color: var(--muted);
}
.copyright {
font-size: 22rpx;
color: #B0B0B0;
font-size: 24rpx;
color: var(--muted);
}