.doc {
  &-nav {
    position: absolute;
    top: $doc-header-height;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: $white;
    width: 290px;
    height: 100vh;
    border-right: 1px solid #eee;
    overflow: auto;
    padding-left: 35px;
    &.fixed {
      position: fixed;
      top: 0;
    }
    ol {
      &.introduce {
        padding-left: 5px;
        li {
          cursor: pointer;
          &:hover {
            color: $doc-default-color;
          }
        }
      }
      li {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        color: $doc-default-nav-color;
        font-weight: bold;
        position: relative;

        &.active {
          &::before {
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            width: 22px;
            margin-top: -5px;
            height: 10px;
            transform: rotate(90deg);
            background: url(https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png)
              no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      > ul {
        li {
          padding-left: 29px;
          cursor: pointer;

          &:hover {
            a {
              color: $doc-default-color;
            }
          }
          a {
            &.router-link-active,
            &.active {
              color: $doc-default-color !important;
            }

            &:link,
            &:visited {
              color: $title-color;
            }

            &:hover {
              color: $doc-default-color;
              &:visited {
                color: $doc-default-color;
              }
            }

            height: 100%;
            b {
              font-weight: normal;
              font-size: 12px;
            }
          }
        }
      }
    }
    .selected {
      color: #fa2c19 !important;
      li {
        color: #fa2c19 !important;
      }
    }
  }
}
