prevent_drowning_app/components/footer/footer.vue

<template>
	<view>
		
	
	<!-- <view style="height: 150rpx;"></view> -->
	<view class="footbg">
		<view class="com_footer">
			<block v-for="(item,k) in footlist" :key="k">
				<!-- v-if="!item.limit||item.limit&&checkPermi([item.limit])" -->
				<view class="in_item"   @click="gotopage(item)">
					<view class="im_imgs">
						<image class="in_img" :class="item.img" v-if="active == item.module" :src="item.icon_checked" mode="scaleToFill"></image>
						<image class="in_img" :class="item.img" v-else :src="item.icon_nochecked" mode="scaleToFill"></image>
					</view>
					<view class="in_txt" v-if="active == item.module" :style="'color: #'+color_checked">{{item.title}}</view>
					<view class="in_txt" v-else :style="'color: #'+color_nochecked">{{item.title}}</view>
				</view>
			</block>
		</view>
	</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission";
    export default {
		props:[
			'footerindex'
		],
        data () {
            return{
				active :'',
				footlist:[
					// limit:'system:camera:video',
					{module:'home',title:'首页',img:"imga",icon_checked:require('@/static/images/tabbar/home_.png'),icon_nochecked:require('@/static/images/tabbar/home.png')},
					{module:'mine',title:'我的',img:"imga",icon_checked:require('@/static/images/tabbar/mine_.png'),icon_nochecked:require('@/static/images/tabbar/mine.png')},
					],
				color_checked :'2B73FF',
				color_nochecked :'838383',
            }
        },
		mounted() {
			var that = this;
			this.active = this.footerindex;
		},
        methods:{
			checkPermi, checkRole,
            // 跳转底部导航页面
			gotopage(e){
				var that = this;
				let link = e.link, module = e.module, def = e.default, title = e.title;
				if(module == 'home'){
					this.$tab.reLaunch('/pages/index/index')
				}else if(module == 'mine'){
					this.$tab.reLaunch('/pages/mine/index')
				}
			},
			
        }
    }
</script>



<style type="text/css" lang="scss" scoped>
	// background: #E2EDFF;
	.footbg{position: fixed;z-index: 4;bottom: 0;left: 0;right: 0;padding: 20rpx 172rpx 30rpx;display: flex;align-items: center;justify-content: center;}
    .com_footer{ display: flex;box-sizing: border-box;background-color: #fff;box-shadow: 0px 0px 16rpx 4rpx #D2DFF3;height: 100rpx;border-radius: 50rpx;flex: 1;
		.in_item{ display: block;flex: 1;padding: 12rpx 0 0 0;overflow: hidden; }
		.in_txt{ font-size: 20rpx;color: #838383;text-align: center; font-weight: bold;}
	}
	.im_imgs{width: 48rpx;height: 48rpx;display: flex;align-items: center;justify-content: center;margin: 0 auto 2rpx;}
	.in_img{
		&.imga{width: 48rpx;height: 46rpx;}
	}
</style>