You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

68 lines
1.1 KiB

<template>
<view class="second-menu-box acea-row">
<view
class="menu-item"
:class="[item.id === active ? 'menu-item-active':'']"
v-for="(item,index) in menuList"
:key="index"
@click="menuClick(index,item)">{{item.categoryName}}</view>
</view>
</template>
<script>
export default{
props:{
menuList:{
type:Array,
default:[]
},
active:{
type: Number,
default() {
return 0;
}
}
},
data(){
return {
}
},
created() {
// console.log(this.menuList)
},
mounted() {
// console.log(this.menuList)
},
methods:{
menuClick(index,item){
this.$emit('secondMenuClick',item)
},
}
}
</script>
<style scoped lang="less">
.second-menu-box{
width: 100%;
margin-bottom: 40rpx;
padding-top: 34rpx;
background: #fff;
padding-bottom: 20rpx;
.menu-item{
min-width: 76rpx;
height: 62rpx;
box-sizing: border-box;
padding: 6rpx 20rpx;
font-size: 28rpx;
background: #F6F7F8;
border-radius: 14rpx;
color: #222;
margin-right: 24rpx;
}
.menu-item-active{
color: #EB5744;
background: #FFEAE7;
}
}
</style>