jiaju/component/tab.vue

82 lines
2.1 KiB
Vue
Raw Normal View History

2022-03-10 02:39:19 +00:00
<template>
<view class="tabBottom">
<navigator url="/pages/index/index" class="con" hover-class="none" open-type="reLaunch">
<image class="img" v-if="stateTab=='index'" src="../static/homea.png" mode=""></image>
<image class="img" v-else src="../static/home.png" mode=""></image>
<view class="text">
首页
</view>
</navigator>
<navigator url="/pages/classify/classify" class="con" hover-class="none" open-type="reLaunch">
<image class="img" v-if="stateTab=='classify'" src="../static/fla.png" mode=""></image>
<image class="img" v-else src="../static/fl.png" mode=""></image>
<view class="text">
分类
</view>
</navigator>
<navigator class="con" hover-class="none" url="/pages/personalCenter/personalCenter" open-type="reLaunch">
<image class="img" v-if="stateTab=='center'" src="../static/may.png" mode=""></image>
<image class="img" v-else src="../static/my.png" mode=""></image>
<view class="text" :class="stateTab=='center'?'on':''">
我的
</view>
</navigator>
</view>
</template>
<script>
export default {
props:{
stateTab:String
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.tab{
}
.tabBottom{
width: 100%;
position: fixed;
bottom: 0px;
left: 0px;
height: 130rpx;
background-color: #FFFFFF;
padding: 0 105rpx;
box-sizing: border-box;
padding-top: 35rpx;
display: flex;
justify-content: space-between;
}
.tabBottom .con{
padding: 0 30rpx;
}
.tabBottom .img{
width: 40rpx;
height: 40rpx;
display: block;
margin: auto;
}
.tabBottom .text{
text-align: center;
color: #8c8c9b;
margin-top: 15rpx;
font-size: 24rpx
}
.tabBottom .on{
color:#d33333;
}
</style>