侧边导航栏 通用样式

<ul class="left-nav">
    <li v-for="(link,index) in nav">
      <router-link :to="link.path" exact v-if="index===1">
        <el-popover
          content="入院48小时内"
          trigger="hover">
          <template  slot="reference">
            <span class="title">{{link.meta.title}}
              <span v-if="link.tag&&link.meta.title==='新入院'" class="status-circle right-top-tag green-circle"></span>
              <span v-if="link.tag&&link.meta.title!=='新入院'" class="status-circle right-top-tag red-circle"></span>
            </span>
            <span class="p-num">({{link.num?link.num:0}})</span>
          </template>
        </el-popover>
      </router-link>
      </li>
  </ul>

```css
<style scoped>
  .left-nav {
    width: 98px;
    height: 100%;
    text-align: center;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    /*position: absolute;
    top: 0;
    bottom: 0;*/
    border-right: 1px solid #F2F2F2;
    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.02);
  }

  .left-nav li {
    /* margin-bottom: 35px; */
    height: 8%;
  }

  .left-nav li:first-child {
    margin-top: 55px;
  }

  .left-nav li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #333;
    border-left: 4px solid transparent;
    box-sizing: border-box;
  }

  .left-nav li .title {
    position: relative;
    top: 21%;
  }
  .left-nav .p-num {
    display: inline-block;
    width: 100%;
    position: relative;
    top: 21%;
  }

  .left-nav .right-top-tag {
    right: -8px;
    top: 0;
  }

  .left-nav a:hover{
    color: #2A7BE4;
    border-color: #2A7BE4;
    font-weight: bold;
    background: #F3F5F9;
  }
  .left-nav .nav-menus-active {
    color: #2A7BE4;
    border-color: #2A7BE4;
    font-weight: bold;
    background: #E1E8FA;
  }
</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/f96f173351c548f18a40d5de29849877.png)