<template>
|
<view>
|
<view class="zw" :style="{ backgroundColor: color }"></view>
|
<view class="tabbar">
|
<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
|
<image :class="index === 1 ? 'item-img1 big' : 'item-img1'" :src="item.iconPath" v-if="current == index"></image>
|
<image :class="index === 1 ? 'item-img1 big' : 'item-img1'" :src="item.icon" v-else></image>
|
<view class="tabbar-item-y" v-if="index === 1"></view>
|
<text :style="current == index ? 'color: #111111;' : ''" v-if="index !== 1">{{item.text}}</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "tarbar",
|
props: {
|
current: String,
|
color: String
|
},
|
data() {
|
return {
|
list: [
|
{
|
text: '首页',
|
icon: '/static/common/nav_home@2x.png',
|
iconPath: '/static/common/nav_home_sel@2x.png',
|
path: "/pages/index/index"
|
},
|
{
|
text: '回收',
|
icon: '/static/common/nav_yuyue@2x.png',
|
iconPath: '/static/common/nav_yuyue@2x.png',
|
path: "/packagesMine/reservation/reservation"
|
},
|
{
|
text: '我的',
|
icon: '/static/common/nav_wode@2x.png',
|
iconPath: '/static/common/nav_wode_sel@2x.png',
|
path: '/pages/mine/mine'
|
}
|
]
|
}
|
},
|
methods: {
|
tabbarChange(path) {
|
if (path === '/packagesMine/reservation/reservation') {
|
uni.navigateTo({
|
url: path
|
});
|
} else {
|
uni.switchTab({
|
url: path
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tabbarActive {
|
color: #79D5AD !important;
|
}
|
|
.top {
|
margin-top: 50rpx !important;
|
}
|
|
.zw {
|
width: 100%;
|
height: calc(118rpx + env(safe-area-inset-bottom));
|
background-color: #F7F7F7;
|
}
|
|
.tabbar-item-y {
|
position: absolute;
|
top: -22rpx;
|
left: 50%;
|
width: 118rpx;
|
height: 118rpx;
|
border-radius: 50%;
|
transform: translate(-50%, 0);
|
background-color: #ffffff;
|
box-shadow: inset 0px 2px 0px 0px #EEEEEE;
|
}
|
|
.tabbar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
width: 100%;
|
height: 118rpx;
|
background-color: #ffffff;
|
box-shadow: inset 0rpx 2rpx 0rpx 0rpx #EEEEEE;
|
z-index: 1111;
|
padding: 0 0 env(safe-area-inset-bottom) 0;
|
}
|
|
.tabbar-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
position: relative;
|
}
|
|
.tabbar-item .big {
|
width: 110rpx;
|
height: 110rpx;
|
position: absolute;
|
top: -20rpx;
|
left: 50%;
|
z-index: 1111;
|
transform: translate(-50%, 0);
|
}
|
|
|
|
.tabbar-item text {
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
|
/* 选中后 */
|
.item-img {
|
width: 104rpx;
|
height: 104rpx;
|
border-radius: 50%;
|
box-shadow: 0rpx 0rpx 10rpx 10rpx #EEEFF0;
|
}
|
|
/* 选中前 */
|
.item-img1 {
|
width: 44rpx;
|
height: 44rpx;
|
margin-top: 8rpx;
|
}
|
</style>
|
