<template>
	<div class="router-bottom">
		<router-link class="home" :class="{active:$route.name=='首页'}" to="/home">
			<img v-if="$route.name!='首页'" src="../assets/images/icon/home.png" />
			<img v-else src="../assets/images/icon/home-s.png">
			<span>首页</span>
		</router-link>
		<a class="service" href="http://192.168.31.52:8080/mall/web/appoint_index">
			<img src="../assets/images/icon/server.png" />
			<span>服务</span>
		</a>
		<a class="user-center" href="http://192.168.31.52:8080/mall/web/owner">
			<img src="../assets/images/icon/my.png" />
			<span>我的</span>
		</a>
	</div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.router-bottom {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    z-index: 1000;
    bottom: 0;
    left: 0;
    .home {
        img {
            width: 0.46rem;
            height: 0.44rem;
        }
    }
    .service {
        img {
            width: 0.45rem;
            height: 0.39rem;
        }
    }
    .user-center {
        img {
            width: 0.36rem;
            height: 0.46rem;
        }
    }
    .active {
        span {
            color: #29b079;
        }
    }
    a {
        list-style: none;
        color: #999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            margin-bottom: 0.09rem;
        }
        span {
            line-height: 1;
            // height: 0.2rem;
            font-size: 0.2rem;
            font-weight: 400;
            display: block;
        }
    }
}
// .router-bottom .router-bottom a .router-bottom a .router-bottom a.active {
//     color: #29b079;
// }
</style>