<html xmlns:th="http://www.thymeleaf.org">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<head>
<style>
.footer-navbar {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	height: 4.5rem;
}

.footer-navbar-brand {
	text-align: center;
	color: #838793 !important;
	padding-top: 0rem;
	padding-bottom: 0rem;
}

.selected-footer-navbar-brand {
	color: #d22018 !important;
}

.footer-navbar-brand span {
	font-size: 1rem;
}

.footer-navbar-brand .fa {
	display: block;
	font-size: 2rem;
}
</style>
</head>
<body>
	<div id="footer" v-cloak>
		<nav class="navbar fixed-bottom bg-light footer-navbar" v-show="showFooterFlag">
			<a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/'}"><i class="fa fa-home" aria-hidden="true"></i> <span>首页</span> </a> 
			<a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/receive-order')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/receive-order'}"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span>接单</span></a> 
			<a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/audit-order')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/audit-order'}"><i class="fa fa-hourglass" aria-hidden="true"></i><span>审核</span></a> 
			<a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/my-home-page')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/my-home-page'}"><i class="fa fa-user" aria-hidden="true"></i><span>我的</span></a>
		</nav>
	</div>
	<script type="text/javascript">
		var footerVM = new Vue({
			el : '#footer',
			data : {
				currentPathName : '',
				showFooterFlag : true
			},
			computed : {},
			created : function() {
				this.currentPathName = window.location.pathname;
			},
			methods : {
				goTo : function(url) {
					window.location.href = url;
				}
			}
		});
	</script>
</body>
</html>
