<template>
	<view class="container">
		<view class="content">
			<view class="item" :class="active == 1?'active':''" @click="navTo(1,'/pages/index/index')">
				<i class="iconfont" :class="active == 1?'iconxuanzhongshouye':'iconxuanzhongshouye-2'"></i>
				<text class="title">首页</text>
			</view>
			<view class="item" :class="active == 2?'active':''" @click="navTo(2,'/pages/jiaocheng/jiaocheng')">
				<i class="iconfont" :class="active == 2?'iconzixunxuanzhong':'iconzixunweixuanzhong'"></i>
				<text class="title">教程</text>
			</view>
			<view class="item" :class="active == 3?'active':''" @click="navTo(3,'/pages/my/my')">
				<i class="iconfont" :class="active == 3?'iconwodeweixuanzhong-2':'iconwodeweixuanzhong'"></i>
				<text class="title">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {

			};
		},
		methods: {
			navTo(index, url) {
				if (index != this.active) {
					uni.reLaunch({
						url: url
					})
				}
			}
		}
	}
</script>

<style scoped>
	@import url("/static/css/iconfont.css");

	.container {
		width: 100%;
		height: 100rpx;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.content {
		background-color: #fff;
		width: 100vw;
		height: 100rpx;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 20rpx 20rpx #f6f6f6 inset;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 900;
	}

	.content .item {
		flex: auto;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.content .iconfont {
		display: block;
		font-size: 48rpx;
		color: #8a8a8a;
	}

	.content .active .iconfont {
		color: #3387FF;
	}

	.content .title {
		font-size: 24rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		color: #8a8a8a;
	}

	.content .active .title {
		color: #3387FF;
	}
</style>
