<template>
	<div class="bottom">
		<li :class="{'nav-tab-active':home===0}" @click="toIndex(0)">
			<view class="img">
				<u-icon :name="home===0?'/static/icon-01-on.png':'/static/icon-01.png'"
					size="24"></u-icon>
			</view>
			<p>首页</p>
		</li>
		<li :class="{'nav-tab-active':home===2}" @click="toIndex(2)">
			<view class="scan">
				<u-icon name="/static/icon-02.png" size="50"></u-icon>
			</view>
			<view class="p1">发布</view>
		</li>
		<li :class="{'nav-tab-active':home===3}" @click="toIndex(3)">
			<view class="img">
				<u-icon :name="home===3?'/static/icon-03-on.png':'/static/icon-03.png'"
					size="24"></u-icon>
			</view>
			<p>我的</p>
		</li>
	</div>
</template>
<script>
	export default {
		components: {},
		data() {
			return {

			}
		},
		props: ['home'],
		methods: {
			toIndex(index) {
				this.$emit('toIndex', index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		border-top: 1px solid #eee;
		padding: 10px 0;
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 44px;
		z-index: 999999
	}

	.bottom li {
		list-style: none;
		width: 33.3%;
		text-align: center;
		float: left;
		position: relative;
	}

	.bottom li .img {
		display: flex;
		justify-content: center;
		margin: 0 auto;
	}
	.bottom li .scan {
		width: 112rpx;
		height: 112rpx;
		position: absolute;
		left: 50%;
		margin-left: -56rpx;
		top: -60rpx;
		z-index: 2;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom li p {
		overflow: hidden;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		color: #999999;
	}
	.bottom li .p1 {
		overflow: hidden;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		color: #999999;
		margin-top: 25px;
	}
	.bottom li.nav-tab-active p{
		color: #00c6a9;
	}
	.bottom li.nav-tab-active .p1{
		color: #00c6a9;
	}
	.bottom .foot_btn {
		width: 48px;
		padding: 5px 0;
		text-align: center;
		height: 24px;
		line-height: 24px;
		font-size: 24px;
		margin: 7px auto 0;
		border-radius: 2px
	}
</style>