Huanyuyuehui/components/customTab.vue

117 lines
2.6 KiB
Vue
Raw Normal View History

2024-03-21 17:52:58 +08:00
<template>
<view>
<view v-if="newData.status && newData.status.status" style="height: 100rpx;"></view>
<view class="foot" v-if="newData.status && newData.status.status">
<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
<view class="foot-item" v-for="(item,index) in newData.menuList" :key="index"
@click="goRouter(item)">
<block v-if="item.link == activeRouter">
<image :src="item.imgList[0]"></image>
<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
</view>
</block>
<block v-else>
<image :src="item.imgList[1]"></image>
<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
</block>
</view>
</view>
</view>
</view>
</template>
<script>
2024-03-21 18:05:36 +08:00
2024-03-21 17:52:58 +08:00
export default{
props: {
newData: {
type: Object,
default: {},
},
activeRouter: {
type: String,
default: '',
}
},
data(){
return {
}
},
mounted() {
},
methods:{
goRouter(item) {
var pages = getCurrentPages();
var page = (pages[pages.length - 1]).$page.fullPath;
if (item.link == page) return
uni.switchTab({
url: item.link,
fail(err) {
uni.redirectTo({
url: item.link
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
.page-footer {
position: fixed;
bottom: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
box-sizing: border-box;
border-top: 1px solid #F3F3F3;
background-color: #fff;
box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
&.filter{
filter: blur(2rpx);
}
.foot-item {
display: flex;
width: max-content;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
.count-num {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 40rpx;
height: 40rpx;
top: 0rpx;
right: -15rpx;
color: #fff;
font-size: 20rpx;
background-color: #FD502F;
border-radius: 50%;
padding: 4rpx;
}
}
.foot-item image {
height: 50rpx;
width: 50rpx;
text-align: center;
margin: 0 auto;
}
.foot-item .txt {
font-size: 24rpx;
}
}
</style>