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:
@@ -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
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user