You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.2 KiB
122 lines
2.2 KiB
1 year ago
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="item" v-for="item,index in menuList">
|
||
|
|
<image :src="currentPage == index ? item.selectedIconPath :item.iconPath" @click="jump(item.pagePath)"></image>
|
||
|
|
<!-- {{index}} -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
currentPage: Number
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
menuList: [{
|
||
|
|
// 首页
|
||
|
|
"pagePath": "/pages/tabbar/home/home",
|
||
|
|
"iconPath": "../../static/img/tabbar/home.png",
|
||
|
|
"selectedIconPath": "../../static/img/tabbar/homeactive.png"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 油站
|
||
|
|
"pagePath": "/pages/tabbar/station/stationList",
|
||
|
|
"iconPath": "../../static/img/tabbar/oil.png",
|
||
|
|
"selectedIconPath": "../../static/img/tabbar/oilactive.png"
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 加油
|
||
|
|
"pagePath": "/pages/tabbar/qrCenter/qrCenter",
|
||
|
|
"iconPath": "../../static/img/tabbar/icon.png",
|
||
|
|
"selectedIconPath": "../../static/img/tabbar/icon.png"
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
// 订单
|
||
|
|
"pagePath": "/pages/tabbar/order/orderList/orderList",
|
||
|
|
"iconPath": "../../static/img/tabbar/order.png",
|
||
|
|
"selectedIconPath": "../../static/img/tabbar/orderactive.png"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 司机
|
||
|
|
"pagePath": "/pages/tabbar/user/user",
|
||
|
|
"iconPath": "../../static/img/tabbar/me.png",
|
||
|
|
"selectedIconPath": "../../static/img/tabbar/meactive.png"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
jump(path) {
|
||
|
|
console.log('path',path)
|
||
|
|
uni.switchTab({
|
||
|
|
url:path
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 120rpx;
|
||
|
|
background: #fff;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
position: relative;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 120rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(2) {
|
||
|
|
image {
|
||
|
|
position: relative;
|
||
|
|
left: -13rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(4) {
|
||
|
|
image {
|
||
|
|
position: relative;
|
||
|
|
right: -13rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(3) {
|
||
|
|
flex: none;
|
||
|
|
width: 110rpx;
|
||
|
|
height: 110rpx;
|
||
|
|
position: relative;
|
||
|
|
transform: translateY(-30%);
|
||
|
|
border-radius: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #fff;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|