vue bootstarp 左侧导航栏可收缩,移动端适配成滑入画板导航栏布局

左右布局,支持左侧导航栏固定可收缩,鼠标移动可触发伸展,左侧导航栏手风琴模式,支持移动端适配,小屏左侧导航栏会变成从左侧滑出的抽屉。左右两个容器有自己的滚动条,左侧滚动右侧不动,右侧滚动左侧不动。

依赖

    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.2.2",
    "vue": "^2.6.11",
    "vue-router": "^3.1.3",

也可以不用bootstrap-vue

  • 把跟bootstrap-vue有关的组件删除就行。我这里只用bootstrap-vue做了左侧导航栏中的手风琴菜单以及头部菜单。把<b-xxx>的组件删除就行。一样可以运行。

效果如下

aside.gif

github

代码很长,建议直接去github下载demo运行。

<template>
  <div class="d-flex flex-row nly-container">
    <div region="nly-aside" :class="nlyAsideClass">
      <!-- brand -->
      <a href="#" class="nly-container-aside-brand">
        <img
          :src="logo"
          alt="Logo"
          class="nly-container-aside-brand-image"
          style="opacity: .8"
        />
        <span class="nly-container-aside-brand-text">Nejinn Lerity Admin</span>
      </a>

      <!-- Sidebar -->
      <div class="nly-container-aside-sidebar-scrollbar">
        <div class="nly-container-aside-sidebar">
          <div
            class="mt-3 pb-3 mb-3 d-flex nly-container-aside-sidebar-user-panel"
          >
            <div class="nly-container-aside-sidebar-user-panel-image">
              <img
                :src="logo"
                class="nly-container-aside-sidebar-user-panel-image-img"
                alt="userimg"
              />
            </div>
            <div class="nly-container-aside-sidebar-user-panel-info">
              <a
                href="#"
                class="nly-container-aside-sidebar-user-panel-info-block"
                >姚欣</a
              >
            </div>
          </div>

          <!-- Sidebar Menu -->
          <b-nav vertical class="nly-container-aside-sidebar-menu">
            <b-nav
              role="tablist"
              class="nly-container-aside-sidebar-menu-nav nav-pills flex-column"
            >
              <b-nav-item
                active
                link-classes="nly-container-aside-sidebar-menu-nav-item-nav-link"
                class="nly-container-aside-sidebar-menu-nav-item"
              >
                <i
                  class="nly-container-aside-sidebar-menu-nav-item-icon fas fa-th"
                ></i>
                <p class="nly-container-aside-sidebar-menu-nav-item-nav-link-p">
                  仪表盘
                </p>
              </b-nav-item>
              <b-nav-item
                link-classes="nly-container-aside-sidebar-menu-nav-item-open-nav-link"
                class="nly-container-aside-sidebar-menu-nav-item-open"
                v-b-toggle.accordion-1
                active
              >
                <i
                  class="nly-container-aside-sidebar-menu-nav-item-open-icon fas fa-tachometer-alt"
                ></i>
                <p
                  class="nly-container-aside-sidebar-menu-nav-item-open-nav-link-p"
                >
                  我是食物
                  <i
                    class="when-opened nly-container-aside-sidebar-menu-nav-item-open-icon-right fas fa-angle-left"
                  ></i>
                  <i
                    class="when-closed nly-container-aside-sidebar-menu-nav-item-open-icon-right-off fas fa-angle-left"
                  ></i>
                </p>
              </b-nav-item>
              <ul class="nly-container-aside-sidebar-menu-nav">
                <b-collapse
                  id="accordion-1"
                  visible
                  accordion="my-accordion"
                  role="tabpanel"
                  tag="li"
                  class="nly-container-aside-sidebar-menu-nav-item-open"
                >
                  <b-nav-item
                    active
                    link-classes="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link"
                    class="nly-container-aside-sidebar-menu-nav-item-open"
                  >
                    <i
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon fas fa-th"
                    ></i>
                    <p
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p"
                    >
                      我是猕猴桃
                    </p>
                  </b-nav-item>
                  <b-nav-item
                    link-classes="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link"
                    class="nly-container-aside-sidebar-menu-nav-item-open"
                  >
                    <i
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon fas fa-th"
                    ></i>
                    <p
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p"
                    >
                      我是黄金香蕉
                    </p>
                  </b-nav-item>
                </b-collapse>
              </ul>

              <b-nav-item
                link-classes="nly-container-aside-sidebar-menu-nav-item-open-nav-link"
                class="nly-container-aside-sidebar-menu-nav-item-open"
                v-b-toggle.accordion-2
              >
                <i
                  class="nly-container-aside-sidebar-menu-nav-item-open-icon fas fa-tachometer-alt"
                ></i>
                <p
                  class="nly-container-aside-sidebar-menu-nav-item-open-nav-link-p"
                >
                  我是颜色
                  <i
                    class="when-opened nly-container-aside-sidebar-menu-nav-item-open-icon-right fas fa-angle-left"
                  ></i>
                  <i
                    class="when-closed nly-container-aside-sidebar-menu-nav-item-open-icon-right-off fas fa-angle-left"
                  ></i>
                </p>
              </b-nav-item>
              <ul class="nly-container-aside-sidebar-menu-nav">
                <b-collapse
                  id="accordion-2"
                  accordion="my-accordion"
                  role="tabpanel"
                  tag="li"
                  class="nly-container-aside-sidebar-menu-nav-item-open"
                >
                  <b-nav-item
                    link-classes="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link"
                    class="nly-container-aside-sidebar-menu-nav-item-open"
                  >
                    <i
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon fas fa-th"
                    ></i>
                    <p
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p"
                    >
                      我是黄色
                    </p>
                  </b-nav-item>
                  <b-nav-item
                    link-classes="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link"
                    class="nly-container-aside-sidebar-menu-nav-item-open"
                  >
                    <i
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon fas fa-th"
                    ></i>
                    <p
                      class="nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p"
                    >
                      我是绿色
                    </p>
                  </b-nav-item>
                </b-collapse>
              </ul>
            </b-nav>
          </b-nav>

          <!-- /.sidebar-menu -->
        </div>
      </div>
    </div>
    <div class="center flex-fill nly-container-center-scrollbar">
      <div region="nly-container-center" class="nly-container-center">
        <div class="nly-container-center-content">
          <div
            region="nly-container-center-content-header"
            class="nly-container-center-content-header"
          >
            <div>
              <b-navbar toggleable="lg" type="dark">
                <button
                  type="button"
                  aria-label="Toggle navigation"
                  aria-controls="self"
                  aria-expanded="false"
                  class="navbar-toggler nly-container-center-content-main-aside-toggle"
                  @click="changeaside"
                >
                  <span>
                    <b-icon icon="bar-chart" />
                  </span>
                </button>

                <button
                  type="button"
                  aria-label="Toggle navigation"
                  aria-controls="self"
                  aria-expanded="false"
                  class="navbar-toggler nly-container-center-content-main-aside-open-toggle"
                  @click="changeopen"
                >
                  <span>
                    <b-icon icon="bar-chart" />
                  </span>
                </button>

                <b-navbar-brand
                  href="#"
                  class="nly-container-center-content-header-brand m-auto"
                >
                  <img
                    :src="logo"
                    alt="nejinn lerity admin"
                    class="nly-container-center-content-header-brand-img"
                  />
                  <span class="nly-container-center-content-header-brand-text">
                    NLY
                  </span>
                </b-navbar-brand>

                <b-navbar-toggle
                  target="nav-collapse"
                  class="nly-container-center-content-main-aside-open-toggle"
                ></b-navbar-toggle>

                <b-collapse id="nav-collapse" is-nav>
                  <b-navbar-nav>
                    <b-nav-item href="#">Dashboard</b-nav-item>
                    <b-nav-form>
                      <b-form-input
                        size="sm"
                        class="ml-sm-3"
                        placeholder="Search"
                      ></b-form-input>
                      <b-button
                        size="sm"
                        class="my-2 my-sm-0 ml-sm-1"
                        type="submit"
                        >Search</b-button
                      >
                    </b-nav-form>
                  </b-navbar-nav>

                  <!-- Right aligned nav items -->
                  <b-navbar-nav class="ml-auto">
                    <b-nav-item-dropdown text="Lang" right>
                      <b-dropdown-item href="#">EN</b-dropdown-item>
                      <b-dropdown-item href="#">ES</b-dropdown-item>
                      <b-dropdown-item href="#">RU</b-dropdown-item>
                      <b-dropdown-item href="#">FA</b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown
                      right
                      no-caret
                      toggle-class="nly-container-center-content-header-navbar-nav-dropdown-navlink"
                    >
                      <template v-slot:button-content>
                        <b-icon icon="person" />
                      </template>
                      <b-dropdown-item href="#">ES</b-dropdown-item>
                      <b-dropdown-item href="#">RU</b-dropdown-item>
                      <b-dropdown-item href="#">FA</b-dropdown-item>
                    </b-nav-item-dropdown>
                  </b-navbar-nav>
                </b-collapse>
              </b-navbar>
            </div>
          </div>
          <div
            region="nly-container-center-content-main"
            class="center flex-fill flex-column nly-container-center-content-main"
          >
            <b-breadcrumb>
              <div
                class="nly-container-center-content-main-breadcrumb-left mr-auto col-sm-6 "
              >
                <b-icon
                  icon="house-fill"
                  scale="1.25"
                  shift-v="1.25"
                  aria-hidden="true"
                ></b-icon>
                Home
              </div>

              <div
                class="nly-container-center-content-main-breadcrumb-right col-sm-6 justify-content-sm-end align-self-center "
              >
                <b-breadcrumb-item href="#home">
                  <b-icon
                    icon="house-fill"
                    scale="1.25"
                    shift-v="1.25"
                    aria-hidden="true"
                  ></b-icon>
                  Home
                </b-breadcrumb-item>
                <b-breadcrumb-item href="#foo">Foo</b-breadcrumb-item>
                <b-breadcrumb-item href="#bar">Bar</b-breadcrumb-item>
                <b-breadcrumb-item active>Baz</b-breadcrumb-item>
              </div>
            </b-breadcrumb>
          </div>
          <div
            region="nly-container-center-content-foot"
            class="nly-container-center-content-foot"
          >
            南
          </div>
          <div
            class="nly-container-aside-max-open-overlay"
            v-show="overlay"
            @click="changeoverlay"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from "../assets/logo.png";
export default {
  data() {
    return {
      nlyAsideClass: "nly-container-aside-max",
      logo,
      overlay: false,
      openMenu: true
    };
  },
  methods: {
    changeopen() {
      if (this.nlyAsideClass == "nly-container-aside-max") {
        this.nlyAsideClass = "nly-container-aside-max-open";
        this.overlay = true;
      } else if (this.nlyAsideClass == "nly-container-aside-mini") {
        this.nlyAsideClass = "nly-container-aside-max-open";
        this.overlay = true;
      } else {
        this.nlyAsideClass = "nly-container-aside-max";
        this.overlay = false;
      }
    },
    changeaside() {
      this.nlyAsideClass =
        this.nlyAsideClass == "nly-container-aside-mini"
          ? "nly-container-aside-max"
          : "nly-container-aside-mini";
    },
    changeoverlay() {
      if (this.overlay == true) {
        this.nlyAsideClass = "nly-container-aside-max";
        this.overlay = false;
      }
    },
    changeMenuStatus() {
      this.openMenu = this.openMenu == true ? false : true;
    }
  },
  watch: {
    // 检测罩层变化
    nlyAsideClass(newvar) {
      if (newvar != "nly-container-aside-max-open") {
        this.overlay = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@basezindex: 10;

// 边侧容器
.nly-container {
  height: 100%;
  width: 100%;
  background-color: #343a40;
}

// 默认大屏边侧栏
.nly-container-aside-max {
  height: 100%;
  width: 16rem;
  background-color: #343a40;
  transition: 0.5s;

  .nly-container-aside-brand:hover {
    color: #ffffff;
    text-decoration: none;
  }
  .nly-container-aside-brand {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.8125rem 0.5rem;
    transition: width 0.3s ease-in-out;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #4e5257;
    position: static;

    .nly-container-aside-brand-image {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
    }

    .nly-container-aside-brand-text {
      font-weight: 300;
      display: inline-block;
      margin-left: 0;
      opacity: 1;
      visibility: visible;
      transition: margin-left 0.3s linear, opacity 0.3s ease,
        visibility 0.3s ease;
    }
  }

  .nly-container-aside-sidebar-scrollbar {
    overflow: auto;
    height: calc(~"100vh - 58px");
  }

  .nly-container-aside-sidebar:hover {
    overflow: auto;
    // margin-right: 0rem;
    // padding-right: 0.5rem;
  }

  .nly-container-aside-sidebar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0.5rem; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.5rem;
  }
  .nly-container-aside-sidebar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4374b1;
  }

  .nly-container-aside-sidebar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #4e525741;
  }

  .nly-container-aside-sidebar {
    height: calc(100% - 0.7rem);
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    // margin-right: 0.5rem;
    padding-top: 0;

    .nly-container-aside-sidebar-user-panel {
      position: relative;
      border-bottom: 1px solid #4e5257;
      .nly-container-aside-sidebar-user-panel-image {
        display: inline-block;
        padding-left: 0.8rem;
        .nly-container-aside-sidebar-user-panel-image-img {
          max-height: 2.1rem;
          border-radius: 50%;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
            0 3px 6px rgba(0, 0, 0, 0.23) !important;
        }
      }
      .nly-container-aside-sidebar-user-panel-info {
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        padding: 5px 5px 5px 10px;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;
        .nly-container-aside-sidebar-user-panel-info-block {
          display: block !important;
          color: rgba(255, 255, 255, 0.8);
        }
        .nly-container-aside-sidebar-user-panel-info-block:hover {
          display: block !important;
          color: #ffffff;
          text-decoration: none;
        }
      }
    }
    .nly-container-aside-sidebar-menu {
      margin-top: 0.5rem !important;
      .nly-container-aside-sidebar-menu-nav {
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-top: 0;
      }

      .nly-container-aside-sidebar-menu-nav-item {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
          .nly-container-aside-sidebar-menu-nav-item-nav-link-p {
            transition: margin-left 0.3s linear, opacity 0.3s ease,
              visibility 0.3s ease;
            display: inline-block;
            margin: 0;
            display: inline-block;
            opacity: 1;
            visibility: visible;
          }
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open.collapsed {
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          .when-opened {
            display: none;
          }
          .when-closed {
            display: block;
          }
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
          .when-closed {
            display: none;
          }
          .when-opened {
            display: block;
          }
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
        }
        .nly-container-aside-sidebar-menu-nav-item-open-icon-right-off {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link.active {
          background-color: rgba(255, 255, 255, 0.9);
          color: #343a40;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon.fas {
          font-size: 1.1rem;
        }
      }
    }
  }
}

// 收起边侧栏
.nly-container-aside-mini {
  height: 100%;
  width: 4.5rem;
  background-color: #343a40;
  transition: 0.5s;

  .nly-container-aside-brand:hover {
    color: #ffffff;
    text-decoration: none;
  }
  .nly-container-aside-brand {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.8125rem 0.5rem;
    transition: width 0.3s ease-in-out;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #4e5257;
    position: static;

    .nly-container-aside-brand-image {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
    }

    .nly-container-aside-brand-text {
      margin-left: -10px;
      opacity: 0;
      visibility: hidden;
      font-weight: 300;
      transition: margin-left 0.3s linear, opacity 0.3s ease,
        visibility 0.3s ease;
    }
  }

  .nly-container-aside-sidebar-scrollbar {
    overflow: auto;
    height: calc(~"100vh - 58px");
  }

  .nly-container-aside-sidebar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0.5rem; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.5rem;
  }
  .nly-container-aside-sidebar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4374b1;
  }

  .nly-container-aside-sidebar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #4e525741;
  }

  .nly-container-aside-sidebar:hover {
    height: calc(100% - 4rem);
    overflow: auto;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
  }
  .nly-container-aside-sidebar {
    height: calc(100% - 0.7rem);
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
    .nly-container-aside-sidebar-user-panel {
      position: relative;
      border-bottom: 1px solid #4e5257;
      .nly-container-aside-sidebar-user-panel-image {
        display: inline-block;
        padding-left: 0.8rem;
        .nly-container-aside-sidebar-user-panel-image-img {
          max-height: 2.1rem;
          border-radius: 50%;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
            0 3px 6px rgba(0, 0, 0, 0.23) !important;
        }
      }
      .nly-container-aside-sidebar-user-panel-info {
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        padding: 5px 5px 5px 10px;
        color: rgba(255, 255, 255, 0.8);
        margin-left: -10px;
        opacity: 0;
        visibility: hidden;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;
        .nly-container-aside-sidebar-user-panel-info-block {
          display: block !important;
          color: rgba(255, 255, 255, 0.8);
        }
        .nly-container-aside-sidebar-user-panel-info-block:hover {
          display: block !important;
          color: #ffffff;
          text-decoration: none;
        }
      }
    }
    .nly-container-aside-sidebar-menu {
      margin-top: 0.5rem !important;
      .nly-container-aside-sidebar-menu-nav {
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-top: 0;
      }

      .nly-container-aside-sidebar-menu-nav-item {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0 0 0 -10px;
          opacity: 0;
          visibility: hidden;
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open.collapsed {
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          .when-opened {
            display: none;
          }
          .when-closed {
            display: block;
          }
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
          .when-closed {
            display: none;
          }
          .when-opened {
            display: block;
          }
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0 0 0 -10px;
          opacity: 0;
          visibility: hidden;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
        }
        .nly-container-aside-sidebar-menu-nav-item-open-icon-right-off {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0 0 0 -10px;
          opacity: 0;
          visibility: hidden;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link.active {
          background-color: rgba(255, 255, 255, 0.9);
          color: #343a40;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon.fas {
          font-size: 1.1rem;
        }
      }
    }
  }
}

// 滑过收起边侧栏
.nly-container-aside-mini:hover {
  height: 100%;
  width: 16rem;
  background-color: #343a40;
  transition: 0.5s;

  .nly-container-aside-brand:hover {
    color: #ffffff;
    text-decoration: none;
  }

  .nly-container-aside-brand {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.8125rem 0.5rem;
    transition: width 0.3s ease-in-out;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #4e5257;
    position: static;

    .nly-container-aside-brand-image {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
    }

    .nly-container-aside-brand-text {
      font-weight: 300;
      display: inline-block;
      margin-left: 0;
      opacity: 1;
      visibility: visible;
      transition: margin-left 0.3s linear, opacity 0.3s ease,
        visibility 0.3s ease;
    }
  }

  .nly-container-aside-sidebar-scrollbar {
    overflow: auto;
    height: calc(~"100vh - 58px");
  }

  .nly-container-aside-sidebar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0.5rem; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.5rem;
  }
  .nly-container-aside-sidebar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4374b1;
  }

  .nly-container-aside-sidebar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #4e525741;
  }

  .nly-container-aside-sidebar:hover {
    height: calc(100% - 4rem);
    overflow: auto;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
  }
  .nly-container-aside-sidebar {
    height: calc(100% - 0.7rem);
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
    .nly-container-aside-sidebar-user-panel {
      position: relative;
      border-bottom: 1px solid #4e5257;
      .nly-container-aside-sidebar-user-panel-image {
        display: inline-block;
        padding-left: 0.8rem;
        .nly-container-aside-sidebar-user-panel-image-img {
          max-height: 2.1rem;
          border-radius: 50%;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
            0 3px 6px rgba(0, 0, 0, 0.23) !important;
        }
      }
      .nly-container-aside-sidebar-user-panel-info {
        display: inline-block;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;

        overflow: hidden;
        white-space: nowrap;
        padding: 5px 5px 5px 10px;
        .nly-container-aside-sidebar-user-panel-info-block {
          display: block !important;
          color: rgba(255, 255, 255, 0.8);
        }
        .nly-container-aside-sidebar-user-panel-info-block:hover {
          display: block !important;
          color: #ffffff;
          text-decoration: none;
        }
      }
    }
    .nly-container-aside-sidebar-menu {
      margin-top: 0.5rem !important;
      .nly-container-aside-sidebar-menu-nav {
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-top: 0;
      }

      .nly-container-aside-sidebar-menu-nav-item {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open.collapsed {
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          .when-opened {
            display: none;
          }
          .when-closed {
            display: block;
          }
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
          .when-closed {
            display: none;
          }
          .when-opened {
            display: block;
          }
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
        }
        .nly-container-aside-sidebar-menu-nav-item-open-icon-right-off {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link.active {
          background-color: rgba(255, 255, 255, 0.9);
          color: #343a40;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon.fas {
          font-size: 1.1rem;
        }
      }
    }
  }
}

// 移动端边侧栏
.nly-container-aside-max-open {
  height: 100%;
  width: 16rem;
  background-color: #343a40;
  transition: 0.5s;

  .nly-container-aside-brand:hover {
    color: #ffffff;
    text-decoration: none;
  }
  .nly-container-aside-brand {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.8125rem 0.5rem;
    transition: width 0.3s ease-in-out;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #4e5257;
    position: static;

    .nly-container-aside-brand-image {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
    }

    .nly-container-aside-brand-text {
      font-weight: 300;
      display: inline-block;
      margin-left: 0;
      opacity: 1;
      visibility: visible;
      transition: margin-left 0.3s linear, opacity 0.3s ease,
        visibility 0.3s ease;
    }
  }

  .nly-container-aside-sidebar-scrollbar {
    overflow: auto;
    height: calc(~"100vh - 58px");
  }

  .nly-container-aside-sidebar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0.5rem; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.5rem;
  }
  .nly-container-aside-sidebar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4374b1;
  }

  .nly-container-aside-sidebar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #4e525741;
  }
  .nly-container-aside-sidebar:hover {
    height: calc(100% - 4rem);
    overflow: auto;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;
  }
  .nly-container-aside-sidebar {
    height: calc(100% - 0.7rem);
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0;

    .nly-container-aside-sidebar-user-panel {
      position: relative;
      border-bottom: 1px solid #4e5257;
      .nly-container-aside-sidebar-user-panel-image {
        display: inline-block;
        padding-left: 0.8rem;
        .nly-container-aside-sidebar-user-panel-image-img {
          max-height: 2.1rem;
          border-radius: 50%;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
            0 3px 6px rgba(0, 0, 0, 0.23) !important;
        }
      }
      .nly-container-aside-sidebar-user-panel-info {
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        padding: 5px 5px 5px 10px;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;
        .nly-container-aside-sidebar-user-panel-info-block {
          display: block !important;
          color: rgba(255, 255, 255, 0.8);
        }
        .nly-container-aside-sidebar-user-panel-info-block:hover {
          display: block !important;
          color: #ffffff;
          text-decoration: none;
        }
      }
    }
    .nly-container-aside-sidebar-menu {
      margin-top: 0.5rem !important;
      .nly-container-aside-sidebar-menu-nav {
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-top: 0;
      }

      .nly-container-aside-sidebar-menu-nav-item {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open.collapsed {
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          .when-opened {
            display: none;
          }
          .when-closed {
            display: block;
          }
        }
      }

      .nly-container-aside-sidebar-menu-nav-item-open {
        margin-bottom: 0;
        width: 100%;
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
          .when-closed {
            display: none;
          }
          .when-opened {
            display: block;
          }
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-link.active {
          background-color: #007bff;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon.fas {
          font-size: 1.1rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-icon-right {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
        }
        .nly-container-aside-sidebar-menu-nav-item-open-icon-right-off {
          transition: -webkit-transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s;
          transition: transform ease-in-out 0.3s,
            -webkit-transform ease-in-out 0.3s;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          font-weight: 900;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link {
          position: relative;
          display: block;
          padding: 0.5rem 1rem;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0.2rem;
          color: #ffffff;
          border-radius: 0.25rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link-p {
          transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
          display: inline-block;
          margin: 0;
          display: inline-block;
          opacity: 1;
          visibility: visible;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:hover,
        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link:focus {
          text-decoration: none;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-link.active {
          background-color: rgba(255, 255, 255, 0.9);
          color: #343a40;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon {
          font-size: 1.2rem;
          margin-right: 0.2rem;
          text-align: center;
          width: 1.6rem;
        }

        .nly-container-aside-sidebar-menu-nav-item-open-nav-item-icon.fas {
          font-size: 1.1rem;
        }
      }
    }
  }
}

// 边侧栏头片

.nly-container-center-scrollbar {
  overflow: auto;
  height: calc(~"100vh - 1px");
}

.nly-container-center::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0.5rem; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0.5rem;
}
.nly-container-center::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #a1a1a1a6;
}

.nly-container-center::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ffffff;
}
.nly-container-center {
  background-color: cornsilk;
  overflow: auto;
  height: 100%;
}

.nly-container-center-content {
  height: 100%;
  width: 100%;
  background-color: wheat;
}

.nly-container-center-content-header {
  height: auto;
  background-color: #6f42c1;
}

.nly-container-center-content-header-icon {
  background-color: transparent;
  color: #ffff;
  display: none;
}
.nly-container-center-content-header-brand {
  position: initial;
  display: none;
  .nly-container-center-content-header-brand-img {
    float: left;
    line-height: 0.8;
    margin-left: 0.8rem;
    margin-right: 0.5rem;
    margin-top: -3px;
    max-height: 33px;
    width: auto;
    border-radius: 50%;
    background-color: #ffffff00;

    .nly-container-center-content-header-brand-text {
      font-weight: 300;
      display: inline-block;
      margin-left: 0;
      opacity: 1;
      visibility: visible;
      transition: margin-left 0.3s linear, opacity 0.3s ease,
        visibility 0.3s ease;
    }
  }
}

.nly-container-center-content-main {
  background-color: #ffff;
  height: calc(~"100vh - 7.125rem");
  min-height: 380px;
}

.nly-container-center-content-main-breadcrumb-left {
  font-size: 1.3rem;
  color: rgb(105, 104, 104);
}

.nly-container-center-content-main-breadcrumb-right {
  display: flex;
}

.nly-container-center-content-main-card {
  margin: 0.5rem;
}

.nly-container-center-content-main-aside-toggle {
  display: block !important;
  border: 0;
  color: #fff !important;
}

.nly-container-center-content-main-aside-open-toggle {
  border: 0;
}

.nly-container-center-content-foot {
  height: 3.5625rem;
  background-color: violet;
}

.nly-container-aside-max-open-overlay {
  background-color: rgba(0, 0, 0, 0.226);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 14;
}

@media (max-width: 576px) {
  .nly-container-aside-max {
    height: 100%;
    width: 16rem;
    background-color: #343a40;
    left: -20rem;
    position: absolute;
    transition: 0.8s;
    z-index: @basezindex + 5;
  }

  .nly-container-aside-max
    > .nly-container-aside-brand
    > .nly-container-aside-brand-text {
    font-size: smaller;
    font-weight: 300;
    display: inline-block;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
  }

  .nly-container-aside-max
    > .nly-container-aside-sidebar
    > .nly-container-aside-sidebar-user-panel
    > .nly-container-aside-sidebar-user-panel-info
    > .nly-container-aside-sidebar-user-panel-info-block {
    font-size: smaller;
    display: block !important;
    color: rgba(255, 255, 255, 0.8);
  }

  .nly-container-aside-max-open {
    height: 100%;
    width: 16rem;
    left: 0rem;
    background-color: #343a40;
    position: absolute;
    z-index: @basezindex + 10;
    transition: 0.8s;
  }

  .nly-container-aside-max-open
    > .nly-container-aside-brand
    > .nly-container-aside-brand-text {
    font-size: smaller;
    font-weight: 300;
    display: inline-block;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
  }

  .nly-container-aside-max-open
    > .nly-container-aside-sidebar
    > .nly-container-aside-sidebar-user-panel
    > .nly-container-aside-sidebar-user-panel-info
    > .nly-container-aside-sidebar-user-panel-info-block {
    font-size: smaller;
    display: block !important;
    color: rgba(255, 255, 255, 0.8);
  }

  .nly-container-center-content-main-aside-toggle {
    display: none !important;
  }
  .nly-container-aside-mini {
    height: 100%;
    width: 4.5rem;
    background-color: #343a40;
    transition: 0.5s;
    left: -10rem;
    position: absolute;
  }

  .nly-container-center-content-header-icon {
    background-color: transparent;
    display: block;
  }
  .nly-container-center-content-header-brand {
    position: initial;
    display: block;
    .nly-container-center-content-header-brand-img {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;

      .nly-container-center-content-header-brand-text {
        font-weight: 300;
        display: inline-block;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;
      }
    }
  }

  .nly-container-aside-max-open-overlay {
    background-color: rgba(0, 0, 0, 0.226);
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 14;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .nly-container-aside-max {
    height: 100%;
    width: 16rem;
    background-color: #343a40;
    left: -20rem;
    position: absolute;
    transition: 0.8s;
    z-index: @basezindex + 5;
  }

  .nly-container-aside-max
    > .nly-container-aside-brand
    > .nly-container-aside-brand-text {
    font-size: smaller;
    font-weight: 300;
    display: inline-block;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
  }

  .nly-container-aside-max
    > .nly-container-aside-sidebar
    > .nly-container-aside-sidebar-user-panel
    > .nly-container-aside-sidebar-user-panel-info
    > .nly-container-aside-sidebar-user-panel-info-block {
    font-size: smaller;
    display: block !important;
    color: rgba(255, 255, 255, 0.8);
  }

  .nly-container-aside-max-open {
    height: 100%;
    width: 16rem;
    left: 0rem;
    background-color: #343a40;
    position: absolute;
    z-index: @basezindex + 10;
    transition: 0.8s;
  }
  .nly-container-aside-max-open
    > .nly-container-aside-brand
    > .nly-container-aside-brand-text {
    font-size: smaller;
    font-weight: 300;
    display: inline-block;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
  }

  .nly-container-aside-max-open
    > .nly-container-aside-sidebar
    > .nly-container-aside-sidebar-user-panel
    > .nly-container-aside-sidebar-user-panel-info
    > .nly-container-aside-sidebar-user-panel-info-block {
    font-size: smaller;
    display: block !important;
    color: rgba(255, 255, 255, 0.8);
  }

  .nly-container-center-content-main-aside-toggle {
    display: none !important;
  }
  .nly-container-aside-mini {
    height: 100%;
    width: 4.5rem;
    background-color: #343a40;
    transition: 0.5s;
    left: -10rem;
    position: absolute;
  }

  .nly-container-center-content-header-icon {
    background-color: transparent;
    display: block;
  }

  .nly-container-center-content-header-brand {
    position: initial;
    display: block;
    .nly-container-center-content-header-brand-img {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;

      .nly-container-center-content-header-brand-text {
        font-weight: 300;
        display: inline-block;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;
      }
    }
  }

  .nly-container-aside-max-open-overlay {
    background-color: rgba(0, 0, 0, 0.226);
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 14;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .nly-container-aside-max {
    height: 100%;
    width: 16rem;
    background-color: #343a40;
    left: -20rem;
    position: absolute;
    transition: 0.8s;
    z-index: @basezindex + 5;
  }
  .nly-container-aside-max
    > .nly-container-aside-brand
    > .nly-container-aside-brand-text {
    font-size: smaller;
    font-weight: 300;
    display: inline-block;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
  }

  .nly-container-aside-max
    > .nly-container-aside-sidebar
    > .nly-container-aside-sidebar-user-panel
    > .nly-container-aside-sidebar-user-panel-info
    > .nly-container-aside-sidebar-user-panel-info-block {
    font-size: smaller;
    display: block !important;
    color: rgba(255, 255, 255, 0.8);
  }

  .nly-container-aside-max-open {
    height: 100%;
    width: 16rem;
    left: 0rem;
    background-color: #343a40;
    position: absolute;
    z-index: @basezindex + 10;
    transition: 0.8s;
  }

  .nly-container-aside-max-open
    > .nly-container-aside-brand
    > .nly-container-aside-brand-text {
    font-size: smaller;
    font-weight: 300;
    display: inline-block;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
  }

  .nly-container-aside-max-open
    > .nly-container-aside-sidebar
    > .nly-container-aside-sidebar-user-panel
    > .nly-container-aside-sidebar-user-panel-info
    > .nly-container-aside-sidebar-user-panel-info-block {
    font-size: smaller;
    display: block !important;
    color: rgba(255, 255, 255, 0.8);
  }

  .nly-container-center-content-main-aside-toggle {
    display: none !important;
  }
  .nly-container-aside-mini {
    height: 100%;
    width: 4.5rem;
    background-color: #343a40;
    transition: 0.5s;
    left: -10rem;
    position: absolute;
  }

  .nly-container-center-content-header-icon {
    background-color: transparent;
    display: block;
  }

  .nly-container-center-content-header-brand {
    position: initial;
    display: block;
    .nly-container-center-content-header-brand-img {
      float: left;
      line-height: 0.8;
      margin-left: 0.8rem;
      margin-right: 0.5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50%;
      background-color: #ffffff00;

      .nly-container-center-content-header-brand-text {
        font-weight: 300;
        display: inline-block;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
        transition: margin-left 0.3s linear, opacity 0.3s ease,
          visibility 0.3s ease;
      }
    }
  }
  .nly-container-aside-max-open-overlay {
    background-color: rgba(0, 0, 0, 0.226);
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 14;
  }
}

@media (min-width: 993px) and (max-width: 1199px) {
}

@media (min-width: 1200px) {
}
</style>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容