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.
69 lines
1.1 KiB
69 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; |
|
line-height: 62rpx; |
|
box-sizing: border-box; |
|
padding: 0rpx 20rpx; |
|
font-size: 28rpx; |
|
background: #F6F7F8; |
|
border-radius: 14rpx; |
|
color: #222; |
|
margin-right: 24rpx; |
|
} |
|
.menu-item-active{ |
|
color: #EB5744; |
|
background: #FFEAE7; |
|
} |
|
} |
|
</style>
|
|
|