|
|
|
@ -78,9 +78,10 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="goods-list"> |
|
|
|
<view class="menu-box"> |
|
|
|
<view class="menu1"> |
|
|
|
|
|
|
|
<view class="menu-list"> |
|
|
|
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index" :style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777','width':item.checked?'90px':'70px'}"> |
|
|
|
<view style="width: 90px;">{{item.name}}</view> |
|
|
|
<img v-if="item.checked" class="checked-img" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt="" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="goods-member"> |
|
|
|
@ -392,6 +393,22 @@ |
|
|
|
return { |
|
|
|
menuButtonInfo: {}, |
|
|
|
isPintuan:true, |
|
|
|
menuList:[{ |
|
|
|
name:'猜你喜欢', |
|
|
|
checked:true |
|
|
|
},{ |
|
|
|
name:'超值套餐', |
|
|
|
checked:false |
|
|
|
},{ |
|
|
|
name:'清爽解腻', |
|
|
|
checked:false |
|
|
|
},{ |
|
|
|
name:'随心搭配', |
|
|
|
checked:false |
|
|
|
},{ |
|
|
|
name:'风味炸鸡', |
|
|
|
checked:false |
|
|
|
}] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
@ -404,6 +421,15 @@ |
|
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
checkTab(index){ |
|
|
|
for(let i=0;i<this.menuList.length;i++){ |
|
|
|
if(i == index){ |
|
|
|
this.menuList[i].checked = true |
|
|
|
}else{ |
|
|
|
this.menuList[i].checked = false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
openPopup(type,index){ |
|
|
|
if(type == 'car'){ |
|
|
|
this.$refs.carPopup.open('bottom') |
|
|
|
@ -1003,4 +1029,26 @@ |
|
|
|
border-radius: 5px; |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
.menu-list{ |
|
|
|
height: 35px; |
|
|
|
width: 100%; |
|
|
|
overflow-x: scroll; |
|
|
|
display: flex; |
|
|
|
overflow-y: hidden; |
|
|
|
} |
|
|
|
.checked-img{ |
|
|
|
width: 90px; |
|
|
|
height: 10px; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.menu1{ |
|
|
|
width: 90px; |
|
|
|
height: 35px; |
|
|
|
position: relative; |
|
|
|
margin-right: 10px; |
|
|
|
line-height: 35px; |
|
|
|
} |
|
|
|
</style> |
