<template>
  <div class="nav">
      <ul>
          <li class="active"  @click="toRecordPath">
             <router-link to="#">
               <span class="iconfont">&#xe6e5;</span>
               <span>记录</span>
             </router-link>
          </li>
        <li @click="toMonitorPath">
          <router-link to="">
            <span class="iconfont">&#xe6f4;</span>
            <span>监控</span>
          </router-link>
        </li>
        <!-- <li> 
            <router-link to="/doctorAdvice">
              <span class="iconfont">&#xe6f3;</span>
              <span>医嘱</span>
            </router-link>
        </li> -->
        <li>
            <router-link to="/my">
              <span class="iconfont">&#xe715;</span>
              <span>我的</span>
            </router-link>
        </li>
      </ul>
  </div>

</template>


<script>
export default {
  name: "FooterNav",
  methods:{
    toMonitorPath:function () {
      this.$router.push({ path: "/monitorPage"})
    },
    toRecordPath:function () {
      this.$router.push({ path: "/waitingRoom"})
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss"  scoped>
.nav {
  background: $white-bg;
  padding: 0.3rem 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  ul {
    @include box-sizing;
    @include display-flex;
    @include align-items-center;
    @include justify-content-end;
    @include text-align;
    li {
      @include flex;
      a {
        @include display-flex;
        @include text-align;
        @include justify-content-center;
        @include align-items-center;
        span {
          color: $font-color;
          font-size: 0.28rem;
          display: block;
          margin: 0 0.22rem 0 0;
          &.iconfont {
            font-size: 0.44rem;
          }
        }
        }
        &.active {
          span {
            color: $main-color;
          }
        }
    }
  }
}
</style>

