<template>
  <div>
    <div class="nav">
      <router-link to="/">
        <img src="../assets/bottom_nav_icon.png" />
        <img src="../assets/bottom_nav_icon_on.png" class="blue" />医疗服务
      </router-link>
      <router-link to="Hospital">
        <img src="../assets/bottom_nav_icon1.png" />
        <img src="../assets/bottom_nav_icon1_on.png" class="blue" />走进医院
      </router-link>
      <!--router-link to="Message">
        <img src="../assets/bottom_nav_icon2.png" />
        <img src="../assets/bottom_nav_icon2_on.png" class="blue" />消息中心
      </router-link-->
      <router-link to="Member">
        <img src="../assets/bottom_nav_icon3.png" />
        <img src="../assets/bottom_nav_icon3_on.png" class="blue" />个人中心
      </router-link>
    </div>
    <div class="di_nav"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'nav',
    };
  },
  props: {
    msg: String
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nav {
  position: fixed;
  bottom: 0px;
  height: 100px;
  left: 0px;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.16);
   z-index: 10;
  a {
    color: #333;
    text-decoration: none;
    width: 40%;
    text-align: center;
    font-size:20px;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img {
      width: 42px;
      height: auto;
      margin-bottom: 2px;
    }
    img.blue {
      display: none;
    }
  }
  .router-link-exact-active {
    color: #129bff;
  img{ display: none;}
  img.blue {
      display: block;
    }
  }
}

.di_nav {
  height: 100px;
}
</style>
