<template>
	<view class="i-tabbar">
		<view class="tabbar">
			<view :class="{current: !tab}" @click="toggle(0)"><text class="i i-icon i-home-fill" />主页</view>
			<view :class="{current: tab}" @click="toggle(1)"><text class="i i-icon i-yonghu" />我的</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"i-tabbar",
		props: ['tab', 'toggle']
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		z-index: 3;
		bottom: 0;
		
		width: 100%;
		height: 10vw;
		border-top: 2px solid #3C9CFF;
		text-align: center;
		line-height: 10vw;
		color: #369;
		font-weight: bold;
		display: flex;
		
		& > view {
			flex: 1;
		}
		
		.i {
			font-size: 140%;
			margin-right: 2vw;
		}
		
		.current {
			background: #3C9CFF;
			color: #fff;
		}
	}
</style>