109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="bottab">
|
||
<view
|
||
@click="selectTab(0)"
|
||
class="tab-item">
|
||
<image :src="currentIndex == 0 ? tab0.iconActive : tab0.icon" class="tab-icon"/>
|
||
<text>{{ tab0.name }}</text>
|
||
</view>
|
||
<view
|
||
@click="selectTab(1)"
|
||
class="tab-item">
|
||
<image :src="currentIndex == 1 ? tab1.iconActive : tab1.icon" class="tab-icon"/>
|
||
<text>{{ tab1.name }}</text>
|
||
</view>
|
||
<view
|
||
@click="selectTab(2)"
|
||
class="tab-item">
|
||
<image :src="currentIndex == 2 ? tab2.iconActive : tab2.icon" class="tab-icon"/>
|
||
<text>{{ tab2.name }}</text>
|
||
</view>
|
||
<view
|
||
@click="selectTab(3)"
|
||
class="tab-item">
|
||
<image :src="currentIndex == 3 ? tab3.iconActive : tab3.icon" class="tab-icon"/>
|
||
<text>{{ tab3.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'BottomTab',
|
||
// 高亮以父级为准（代码里 handleTabChange、弹窗进通知等），不能只用本组件 data
|
||
props: {
|
||
currentIndex: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
tab0: {
|
||
name: this.$i18n.t('device'),
|
||
icon: 'https://api.ccttiot.com/smartmeter/img/static/ujoLaGPGo31xZ8d9WTgp',
|
||
iconActive: 'https://api.ccttiot.com/smartmeter/img/static/uxFjJZXPEL2EDWGObImv'
|
||
},
|
||
tab1: {
|
||
name: this.$i18n.t('room'),
|
||
icon: 'https://api.ccttiot.com/smartmeter/img/static/uYaQcfSiyw3pZ43PI3ak',
|
||
iconActive: 'https://api.ccttiot.com/smartmeter/img/static/uieivZ9H1t0GLwd9zojL'
|
||
},
|
||
tab2: {
|
||
name: this.$i18n.t('notification'),
|
||
icon: 'https://api.ccttiot.com/smartmeter/img/static/uxTX9qz1LfqS4A4gI9qY',
|
||
iconActive: 'https://api.ccttiot.com/smartmeter/img/static/uTKa1oUyvKZs4MMzDYle'
|
||
},
|
||
tab3: {
|
||
name: this.$i18n.t('control'),
|
||
icon: 'https://api.ccttiot.com/smartmeter/img/static/uiVqWrW6dJCzn6tWMtTn',
|
||
iconActive: 'https://api.ccttiot.com/smartmeter/img/static/u9tPDLHBpA7r9m72PrR2'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
selectTab(index) {
|
||
this.$emit('tab-change', index);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabactive {
|
||
color: #000 !important;
|
||
}
|
||
.bottab {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
width: 750rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
z-index: 999;
|
||
pointer-events: auto;
|
||
view {
|
||
text-align: center;
|
||
width: 60rpx;
|
||
color: #ccc;
|
||
font-size: 26rpx;
|
||
cursor: pointer;
|
||
pointer-events: auto;
|
||
width: 100%;
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: block;
|
||
margin: auto;
|
||
}
|
||
}
|
||
}
|
||
</style> |