<template>
	<view class="box-foot" :style="[{height:customTabBarHeight + 'px'}]">
		<view class="top-line"></view>
		<view class="btn-box">
			<slot>button</slot>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';

	export default {
		name: "bottom-btn-box",
		data() {
			return {
				tabBarHeight: 0,
			};
		},
		computed: {
			...mapGetters(['customTabBarHeight'])

		},

	}
</script>

<style lang="scss" scoped>
	/* 只限制上下,不限制左右,可以右更多的自定义空间 */
	.box-foot {
		position: fixed;
		bottom: 0;
		/* padding: 14rpx 72rpx 84rpx 42rpx; */
		width: 100%;
		display: flex;
		flex-direction: column;
		z-index: 999;

		.btn-box {
			flex: 1;
			background-color: #fff;
			padding: 9px 0rpx 0rpx 0rpx;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
		}

		/* 线条粗细和颜色 */
		.top-line {
			height: 1px;
			background-color: #DDDDDD;
			width: 100%;
			scaleX: 0.5;
		}
	}
</style>