shell/pages/index/home.vue

<template>
	<view class="content">
		
	    <index :iStatusBarHeight="iStatusBarHeight"></index>
		<view class="bTabBox">
			<view class="btabLine">
				<image class="btabLineImg" src="/static/img/index1.png" mode=""></image>
				<view class="btabLineTxt">首页</view>
			</view>
			<view class="btabLine">
				<image class="btabLineImg2" src="/static/img/vin.png" mode=""></image>
			</view>
			<view class="btabLine">
				<image class="btabLineImg" src="/static/img/user2.png" mode=""></image>
				<view class="btabLineTxt">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import index from './index.vue'
	export default {
		components: {
		 index
			
		},
		data() {
			return {
				iStatusBarHeight:'',
			}
		},
		onLoad() {
		  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		onShow() {
		
		},
		methods: {
		
			
		},
		onShareAppMessage(){
				   
		}
	}
</script>

<style scoped>
.bTabBox{
	width: 100vw;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
	display: flex;
	justify-content: space-around;
}
.btabLineImg{
	width: 42rpx;height: 42rpx;
}
.btabLineTxt{
	font-weight: 400;
	font-size: 22rpx;
	color: #1A1A1A;
	
}
.btabLine{
	padding-top: 21rpx;
}
.btabLineImg2{
	width: 140rpx;height: 140rpx;
	margin-top: -70rpx;
}
</style>