@import '~@/assets/style/public.scss';

$theme-color: #EFF4F8;

$border-color: #d8dfea;
// 默认主题
.layout-main {
  &.classic {
    height: 100vh;
    width: 100vw;
    background-color: $theme-color;
    background-image: url('/static/image/bg/2.jpg');
    background-size: cover;
    background-position: center;
    .el-card {
      box-shadow: none;
      &:hover {
        // box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
        box-shadow: none;
      }
    }
    .dd-container-full {
      position: absolute;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      border-top: 1px solid $border-color;
      border-left: 1px solid $border-color;
      border-right: 1px solid $border-color;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      &:hover {
        // box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
        box-shadow: none;
      }
      .dd-container-full__header {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        padding: 18px 20px;
        border-bottom: 1px solid $border-color;
        box-sizing: border-box;
      }
      .dd-container-full__body {
        position: absolute;
        padding: 20px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: auto;
      }
      .dd-container-full__footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        padding: 18px 20px;
        border-top: 1px solid $border-color;
        box-sizing: border-box;
      }
    }
    // [布局] 顶栏
    .el-header {
      padding: 0px;
      // logo区域
      .logo-group {
        transition: width .3s;
        float: left;
        text-align: center;
        img {
          height: 60px;
        }
      }
      // 折叠侧边栏切换按钮
      .toggle-aside-btn {
        float: left;
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        cursor: pointer;
        i {
          font-size: 20px;
          color: $color-text-normal;
          margin-top: 4px;
          &:hover {
            color: $color-primary;
          }
        }
      }
      // [菜单] 顶栏
      .el-menu {
        float: left;
        border-bottom: none;
        background-color: transparent;
        .el-menu-item {
          border-bottom: none;
          border-top: 2px solid transparent;
          &:hover {
            background-color: transparent;
          }
          &.is-active {
            border-bottom: none;
            border-top: 2px solid $color-primary;
            background-color: transparent;
          }
        }
      }
      // 顶栏右侧的按钮
      .dd-header-right {
        float: right;
        height: 60px;
        display: flex;
        align-items: center;
        .btn-text {
          color: $color-text-normal;
        }
        .el-dropdown {
          user-select: none;
          cursor: pointer;
        }
      }
    }
    // [布局] 顶栏下面
    .el-container {
      // 侧边栏
      .el-aside {
        transition: width .3s;
        overflow: inherit;
        // 空菜单
        .dd-side-menu-empty {
          background-color: rgba(#000, .03);
          margin: $margin;
          margin-top: 0px;
          border-radius: 4px;
          line-height: 100px;
          text-align: center;
          color: $color-text-sub;
        }
        // [菜单] 正常状态
        .el-menu {
          background-color: transparent;
          border-right: none;
          .el-submenu__title {
            &:hover {
              background-color: rgba(#000, .05);
            }
          }
        }
        // [菜单] 折叠状态
        .el-menu--collapse {
          background-color: transparent;
          .el-submenu__title {
            text-align: center;
          }
        }
      }
      .el-main {
        padding: 0px;
        position: relative;
        overflow: hidden;
      }
    }
  }
}