<template>
	<footer id="footer" class="header borderT middle_before">
		<router-link class="middle_before" v-for="(item,index) in menus" :key="index" :to="item.to" >
			<div class="middle">
				<!--<img :src="item.icon" alt="" />-->
				<i class="iconfont" v-html="item.iconfont"></i>
				<span class=" m-fs24">{{item.name}}</span>
			</div>
		</router-link>
	</footer>
</template>

<script>
	export default {
		data() {
			return {
				menus: [{
					to: '/',
					name: '首页',
					iconfont:'&#xe605;',
					icon: 'static/img/icon_foot_recommend.png',
					icon_active: 'static/img/icon_foot_active_recommend.png'
				}, {
					to: '/category',
					name: '分类',
					iconfont:'&#xe623;',
					icon: 'static/img/icon_foot_category.png',
					icon_active: 'static/img/icon_foot_active_category.png'

				}, {
					to: '/cart',
					name: '购物车',
					iconfont:'&#xe616;',
					icon: 'static/img/icon_foot_car.png',
					icon_active: 'static/img/icon_foot_active_car.png'

				}, {
					to: '/user',
					name: '我的',
					iconfont:'&#xe8f8;',
					icon: 'static/img/icon_foot_my.png',
					icon_active: 'static/img/icon_foot_active_my.png'

				}]
			}
		},
		mouted(){

		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url("../../assets/config.less");
	#footer .router-link-active.router-link-exact-active,
	.active{
		span,i{
			color:@common_cl !important;
		}
		i{
			font-size: 24px !important;
		}

	}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: @m-bottom;
    text-align: center;
    .m-fs(30);
    background: #fff;
    z-index: 999;
    a {
        display: block;
        width: 25%;
        float: left;
        height: @m-bottom;
    }
    img {
    	@L:44;
        display: block;
        .m-w(@L);
        .m-h(@L);
        margin: 5px auto;
    }
    i{
    	display: block;
    	margin: 5px auto;
    	font-size: 22px;
    }
    span {
        display: block;
		color:#000;
    }
}

</style>
