分类

pages/goods/list.vue

@@ -13,11 +13,12 @@
 					<template v-if="options.categoryId">
 						<view class="goodsban" v-if="tabbar && tabbar.length > 0">
 							<scroll-view class="typeList" scroll-x="true">
-								<view v-for="(item,index) in tabbar" :key="index" class="bandsImg"
-									@click="onChage(item,1,index)"
-									:style="{display: item.image ? 'inline-block' : 'none','color':item.category_id==isBanrdActive?'#F43B21':'#5A5A5A','border':item.category_id==isBanrdActive?'1rpx solid #F22029':'1rpx solid #E7E7E7'}">
-									<image :src="item.image?item.image.external_url:''" mode="aspectFill"></image>
-									<view class="typeItem">{{item.name}}</view>
+								<view v-for="(item,index) in tabbar" :key="index"
+									:class="[item.image ? 'bandsImg' : 'typeItem2']" @click="onChage(item,1,index)"
+									:style="{'background':item.image?'none':(isBanrdActive==item.category_id?'#FEF6F6':'#F7F8FA'),'color':item.image?(item.category_id==isBanrdActive?'#F43B21':'#5A5A5A'):(item.category_id==isBanrdActive?'#F43B21':'#5A5A5A'),'border':item.image?(item.category_id==isBanrdActive?'1rpx solid #F22029':'1rpx solid #E7E7E7'):'none'}">
+									<image :style="{display: item.image ? 'inline-block' : 'none'}"
+										:src="item.image?item.image.external_url:''" mode="aspectFill"></image>
+									<view :class="[item.image ? 'typeItem' : '']">{{item.name}}</view>
 								</view>
 							</scroll-view>
 						</view>
@@ -1004,6 +1005,20 @@
 		}
 	}
 
+	.typeItem2 {
+		margin-right: 20rpx;
+		display: inline-block;
+		height: 60rpx;
+		border-radius: 82rpx 82rpx 82rpx 82rpx;
+		opacity: 1;
+		padding: 0 20rpx;
+		font-size: 24rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 400;
+		line-height: 60rpx;
+		text-align: center;
+	}
+
 	.goodsban {
 		background-color: #fff;
 		padding: 10rpx 30rpx;