129 lines
3.1 KiB
Vue
129 lines
3.1 KiB
Vue
<template>
|
|
<view class="foot-bar pad-zy20 border-box flex">
|
|
<view class="item flex" v-for="(item,index) in footBarList" :key="index" @tap="chooseFootTab(index)">
|
|
<view class="icon">
|
|
<image :src="index==current?item.cur:item.icon" mode="widthFix":style="{width:[37,38,42,36][index]+'rpx',height:[38,37,37,36][index]+'rpx'}"></image>
|
|
</view>
|
|
<view class="txt font24" :style="{color:index==current?'#1c2588':'#666666'}">{{item.title}}</view>
|
|
</view>
|
|
<view class="customer-service radius100 border-box flex">
|
|
<view class="icon radius100 flex">
|
|
<image src="/static/tabbar/wechat.png" mode="widthFix" style="width: 45rpx;height: 38rpx;"></image>
|
|
<button class="contact-btn" open-type="contact"></button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:'foot-tab',
|
|
props:{
|
|
// 当前选中项
|
|
current:{
|
|
type:String,
|
|
default:'0'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
footBarList:[
|
|
{title:'首页',icon:'/static/tabbar/tabbar-01.png',cur:'/static/tabbar/tabbar-1.png'},
|
|
{title:'线路',icon:'/static/tabbar/tabbar-02.png',cur:'/static/tabbar/tabbar-2.png'},
|
|
{title:'GPS',icon:'/static/tabbar/tabbar-03.png',cur:'/static/tabbar/tabbar-3.png'},
|
|
{title:'货物',icon:'/static/tabbar/tabbar-04.png',cur:'/static/tabbar/tabbar-4.png'}
|
|
], //底部列表
|
|
};
|
|
},
|
|
mounted() {
|
|
// 获取当前页面路径
|
|
this.$toolAll.tools.obtainPagePath();
|
|
},
|
|
methods:{
|
|
// 跳转tabbar
|
|
chooseFootTab(index){
|
|
// 已授权
|
|
switch (index){
|
|
case 0:
|
|
uni.reLaunch({url:'/pages/index/index'})
|
|
break;
|
|
case 1:
|
|
uni.reLaunch({url:'/pages/line/line'})
|
|
break;
|
|
case 2:
|
|
uni.reLaunch({url:'/pages/gps/gps'})
|
|
break;
|
|
case 3:
|
|
uni.reLaunch({url:'/pages/cargo/cargo'})
|
|
break;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 导航 */
|
|
.foot-bar{
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 98rpx;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 -3rpx 8rpx rgba(226,226,226,.76);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
}
|
|
.foot-bar .item{
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 25%;
|
|
}
|
|
.foot-bar .item>.icon{
|
|
height: 38rpx;
|
|
}
|
|
.foot-bar .item>.txt{
|
|
width: 100%;
|
|
margin-top: 6rpx;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
transform: scale(.92);
|
|
}
|
|
/* 客服 */
|
|
.customer-service{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
background-color: rgba(53,28,136,.17);
|
|
animation: scale_name 1s linear alternate infinite;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
bottom: 130rpx;
|
|
right: 16rpx;
|
|
z-index: 999;
|
|
}
|
|
.customer-service .icon{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background-image: linear-gradient(to top,#1c2588,#4450d5);
|
|
position: relative;
|
|
}
|
|
.customer-service .icon>.contact-btn{
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
@keyframes scale_name{
|
|
from{transform: scale(1);}
|
|
to{transform: scale(1.2);}
|
|
}
|
|
</style>
|