refactor(UI): 首页 tab 与自主填报入口图标改用 uview 矢量图标

e192296 把纯白透明底图片图标垫了深色底块反衬,解决了「白底上看不见」,
但本质是靠底色绕开图源问题,选中态也就只能靠加深底色表达。

改用 u-icon 矢量图标后可直接着色:
- 首页 tab:未选中灰色 #6b7280,选中白色;图标按语义取
  order / clock / checkmark-circle
- 自主填报入口:未选中浅绿底 + 绿色图标,选中深绿底 + 白色图标;
  store/visit 取 home-fill / car-fill

顺带删掉两处为图片补正尺寸的样式(.tab-icon-wrap 白圆底、
.type-icon/.type-icon-store 的宽高补正),矢量图标不需要。

图标名已对照 uview 图标库校验(u-icon 会自动补 uicon- 前缀)。
This commit is contained in:
2026-10-12 18:22:25 +08:00
parent 40fed38f83
commit 945cf9c104
2 changed files with 22 additions and 54 deletions
+9 -21
View File
@@ -26,8 +26,8 @@
@tap="form.type = item.value"
>
<view :class="['type-icon-wrap', form.type === item.value ? 'type-icon-wrap-active' : '']">
<image :class="['type-icon', item.value === 'store' ? 'type-icon-store' : '']"
:src="item.icon" mode="aspectFit"/>
<u-icon :name="item.icon" size="30"
:color="form.type === item.value ? '#ffffff' : '#2fc6a7'"/>
</view>
<view class="type-body">
<view class="type-title">{{ item.title }}</view>
@@ -49,8 +49,8 @@
<script>
// 顶部插画:暂无独立设计稿资源,沿用首页自主填报入口所用的同色系插图
const HERO_AVATAR = 'https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9c6c98843c2e30247355d86ea47552aa.png'
const ICON_STORE = 'https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/0fd31838127cd57b1c1db44f2c749353.png'
const ICON_VISIT = 'https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260127/f5fbb2e4be31bcc830156f174e7931b8.png'
const ICON_STORE = 'home-fill'
const ICON_VISIT = 'car-fill'
export default {
data() {
@@ -220,37 +220,25 @@ export default {
background: #f1fbf8;
}
/* 图标本身是纯白图形 + 透明底,直接放浅色卡片上会看不见,
所以垫一层彩色圆角底块反衬;选中后加深,兼作选中态提示。
底色取偏深的绿,保证白色图形有足够对比度。 */
/* 图标已改用 uview 矢量图标,可随选中态着色,不再依赖「白图垫深底」。
这里保留圆角底块作为视觉容器:未选中浅绿底 + 绿色图标,
选中转深绿底 + 白色图标,选中态更醒目。 */
.type-icon-wrap {
flex-shrink: 0;
width: 112rpx;
height: 100rpx;
border-radius: 24rpx;
background: linear-gradient(135deg, #2fc6a7, #1aa88c);
background: #e6f9f4;
display: flex;
align-items: center;
justify-content: center;
}
.type-icon-wrap-active {
background: linear-gradient(135deg, #16a085, #0e7a66);
background: linear-gradient(135deg, #2fc6a7, #16a085);
box-shadow: 0 8rpx 20rpx rgba(47, 198, 167, 0.32);
}
.type-icon {
width: 62rpx;
height: 62rpx;
}
/* 两张图源的内容占比差得多(visit 约占画布 88%×88%,store 只占 75%×50%),
同尺寸渲染会让驻店图标明显偏小,这里按可见图形补正。 */
.type-icon-store {
width: 92rpx;
height: 92rpx;
}
.type-body {
flex: 1;
}
+13 -33
View File
@@ -53,17 +53,8 @@
<view v-for="tab in tabs" :key="tab" :class="['tab', activeTab === tab ? 'active' : '']"
@tap="activeTab = tab">
<view class="tab-main">
<view class="tab-icon-wrap">
<image v-if="tab === '新任务'" class="tab-icon"
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9c6c98843c2e30247355d86ea47552aa.png"
mode="aspectFit"/>
<image v-if="tab === '待执行'" class="tab-icon"
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260127/f5fbb2e4be31bcc830156f174e7931b8.png"
mode="aspectFit"/>
<image v-if="tab === '已完成'" class="tab-icon"
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/eebe6469eb153413dc881f513063f821.png"
mode="aspectFit"/>
</view>
<u-icon :name="tabIcon(tab)" size="15"
:color="activeTab === tab ? '#ffffff' : '#6b7280'"/>
<text class="tab-text">{{ tab }}</text>
</view>
<view v-if="tab === '待执行' && pendingCount" class="tab-badge">{{ pendingCount }}</view>
@@ -299,6 +290,12 @@ export default {
}
},
methods: {
// tab 图标:新任务=任务清单、待执行=时钟、已完成=对勾
tabIcon(tab) {
if (tab === '新任务') return 'order'
if (tab === '待执行') return 'clock'
return 'checkmark-circle'
},
async refreshPageData() {
const res = await getLocationAction().catch(() => {
uni.showToast({
@@ -748,29 +745,12 @@ export default {
line-height: 1;
}
/* tab 图标是纯白图形 + 透明底,而 tab 底图接近纯白,
未激活时白图标贴白底看不清,所以垫一层浅绿圆底反衬。
激活态下 .tab-main 自己已填 #2fc6a7,两层绿会透出一圈色差边,
所以激活时改成完全透明,白图标直接坐在药丸底上。 */
.tab-icon-wrap {
flex-shrink: 0;
width: 34rpx;
height: 34rpx;
border-radius: 999rpx;
background: #2fc6a7;
display: flex;
align-items: center;
justify-content: center;
}
.tab.active .tab-icon-wrap {
background: none;
box-shadow: none;
}
/* 三个 tab 原先用纯白 PNG 图标,而 tab 底图接近纯白(平均亮度 250/255),
未激活时白图标贴白底完全看不清;且原图语义也不对(「新任务」是 NEW 徽章、
「待执行」是时钟)。改用 uview 矢量图标,可随激活态着色,无底色依赖。 */
.tab-icon {
width: 24rpx;
height: 24rpx;
width: 28rpx;
height: 28rpx;
}
.tab.active .tab-main {