82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<template>
|
|
<!-- 肯德基底部导航 -->
|
|
<view class="Restaurant-Nav">
|
|
<view class="KDJ-Restaurant-Nav">
|
|
<template v-for="(item,index) in Brand()['tabBar']['list']">
|
|
<view class="KDJ-Restaurant-Nav-Item" :key="index" @tap="SETNAVINDEX(index)">
|
|
<image v-show="Getnavindex == index" class="img" :src="item['selectedIconPath']" mode=""></image>
|
|
<image v-show="Getnavindex != index" class="img" :src="item['iconPath']" mode=""></image>
|
|
<view class="title"
|
|
:style="{color:Getnavindex == index?
|
|
Brand()['tabBar']['selectedColor']:
|
|
Brand()['tabBar']['color']}">
|
|
{{item['title']}}</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 获取配置文件
|
|
import config from '@/static/js/config.js';
|
|
// 点餐混入
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
|
export default {
|
|
name: "restaurant-nav",
|
|
mixins: [restaurantmixins],
|
|
data() {
|
|
return {
|
|
// 设备类型
|
|
height: 120,
|
|
};
|
|
},
|
|
|
|
watch: {},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
Brand(){
|
|
return config[`Brand_${this['BrandInfor']['brand_id']}`]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.Restaurant-Nav {
|
|
width: 100%;
|
|
height: calc(120rpx + constant(safe-area-inset-bottom));
|
|
height: calc(120rpx + env(safe-area-inset-bottom));
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.KDJ-Restaurant-Nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
&-Item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
flex: 1;
|
|
|
|
.title {
|
|
margin-top: 10rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.img {
|
|
width: 43rpx;
|
|
height: 43rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|