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

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
+7 -7
View File
@@ -1,11 +1,12 @@
// 自定义 tabBar:固定在底部,选中态只换颜色、不换图形。
// 「首页 / 我的」走 TDesign 线性图标字体;「AI客服」用品牌 AI 图标
// (气泡内 AI 字位图):灰色版 ai.png 为未选中态,暖橙版 ai-ink.png 为选中态,
// 与文字颜色同步切换,保持选中可辨
// 三个 tab 统一走 TDesign 线性图标字体:home / chat-bubble / user。
// 「AI客服」曾用位图(气泡内嵌 AI 字:灰色 ai.png、暖橙 ai-ink.png)当图标,
// 其轮廓笔画比图标字体细一档,与另外两个并排时粗细不搭,故弃用。
// 位图文件仍留在 images/ 下未删(app.json 的 tabBar 项也在引用,见 DESIGN.md §5.2)
Component({
data: {
selected: 0, // 当前选中项,由各 tab 页在 onShow 里同步
activeColor: '#C2410C', // 选中:暖橙深一档,白底 4.69:1,过 WCAG AA 正文标准
activeColor: '#B8520A', // 选中:暖橙(色相 25°、保住原亮度),白底 4.94:1,过 WCAG AA 正文标准
inactiveColor: '#7A7068', // 未选中:暖灰,白底 4.83:1,过 WCAG AA 正文标准
list: [{
pagePath: '/pages/home/index',
@@ -14,9 +15,8 @@ Component({
}, {
pagePath: '/pages/ai/aichat',
text: 'AI客服',
// 图片图标:配置了 imgPath 时优先于 icon 渲染
imgPath: '/images/ai.png',
imgActivePath: '/images/ai-ink.png'
// 标准「聊天」图标:线性,与 home / user 同族
icon: 'chat'
}, {
pagePath: '/pages/mine/mine',
text: '我的',
+1 -9
View File
@@ -7,16 +7,8 @@
data-path="{{ item.pagePath }}"
bindtap="onTap"
>
<!-- 配置了 imgPath 的 tab(AI客服)走位图:灰色未选中 / 暖橙选中两态切换;
其余 tab 走 TDesign 线性图标,选中态只换颜色 -->
<image
wx:if="{{ item.imgPath }}"
class="tab-icon-img"
src="{{ selected === index ? item.imgActivePath : item.imgPath }}"
mode="aspectFit"
/>
<!-- 三个 tab 统一走 TDesign 线性图标字体,笔画同族;选中态只换颜色、不换图形 -->
<t-icon
wx:else
name="{{ item.icon }}"
size="44rpx"
color="{{ selected === index ? activeColor : inactiveColor }}"
+2 -7
View File
@@ -20,12 +20,6 @@
align-items: center;
}
/* 位图图标(AI客服):与 t-icon 的 44rpx 视觉尺寸对齐 */
.tab-icon-img {
width: 44rpx;
height: 44rpx;
}
.tab-text {
margin-top: 6rpx;
/* 与全局约束一致:中文正文不小于 24rpx(12px) */
@@ -35,6 +29,7 @@
}
.tab-item.is-active .tab-text {
color: #C2410C;
/* 选中文字:暖橙 --brand-strong 的硬编码(组件读不到 page 级变量),白底 4.94:1,过 AA */
color: #B8520A;
font-weight: 600;
}