82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
|
<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>
|