You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

80 lines
1.8 KiB

<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>