|
|
@@ -11,10 +11,14 @@
|
|
|
@tap="onTabTap(item)"
|
|
|
>
|
|
|
<view class="tab-icon-wrap">
|
|
|
- <sprite-icon
|
|
|
- :name="current === item.key ? item.activeIcon : item.icon"
|
|
|
- :size="50"
|
|
|
- />
|
|
|
+ <!-- 四个 Tab 均用 iconfont:未选中线框,选中实心 -->
|
|
|
+ <text
|
|
|
+ class="iconfont tab-iconfont"
|
|
|
+ :class="[
|
|
|
+ current === item.key ? item.activeIcon : item.icon,
|
|
|
+ { 'tab-iconfont-active': current === item.key }
|
|
|
+ ]"
|
|
|
+ ></text>
|
|
|
<view class="tab-badge" v-if="item.key === 'cart' && cartCount > 0">
|
|
|
<text class="tab-badge-text">{{ cartCount > 99 ? '99+' : cartCount }}</text>
|
|
|
</view>
|
|
|
@@ -58,10 +62,10 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tabList: [
|
|
|
- { key: 'home', label: '首页', icon: 'icon-home', activeIcon: 'icon-home-active' },
|
|
|
- { key: 'category', label: '分类', icon: 'icon-category', activeIcon: 'icon-category-active' },
|
|
|
- { key: 'cart', label: '购物车', icon: 'icon-cart', activeIcon: 'icon-cart-active' },
|
|
|
- { key: 'order', label: '订单', icon: 'icon-order', activeIcon: 'icon-order-active' }
|
|
|
+ { key: 'home', label: '首页', iconType: 'iconfont', icon: 'iconhome1', activeIcon: 'iconhomefill' },
|
|
|
+ { key: 'category', label: '分类', iconType: 'iconfont', icon: 'iconevaluate', activeIcon: 'iconevaluate_fill' },
|
|
|
+ { key: 'cart', label: '购物车', iconType: 'iconfont', icon: 'iconcart', activeIcon: 'iconcart_fill_light' },
|
|
|
+ { key: 'order', label: '订单', iconType: 'iconfont', icon: 'iconorder', activeIcon: 'iconorder_fill' }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
@@ -159,13 +163,24 @@ export default {
|
|
|
|
|
|
.tab-icon-wrap {
|
|
|
position: relative;
|
|
|
- width: 44upx;
|
|
|
- height: 44upx;
|
|
|
+ /* 相对原 50upx 放大 1/3 */
|
|
|
+ width: 67upx;
|
|
|
+ height: 67upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
+.tab-iconfont {
|
|
|
+ font-size: 59upx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-iconfont-active {
|
|
|
+ color: #ff4757;
|
|
|
+}
|
|
|
+
|
|
|
.tab-badge {
|
|
|
position: absolute;
|
|
|
top: -8upx;
|