mart-admin/vue-admin-wonderful-next/src/theme/app.scss

/* 初始化样式
------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none !important;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background-color: #f8f8f8;
  font-size: 14px;
}

/* 主布局样式
------------------------------- */
.layout-container {
  width: 100%;
  height: 100%;
  .el-aside {
    background: var(--bg-menuBar);
    box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
    height: inherit;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
  }
  .el-header {
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    padding: 0 !important;
  }
  .el-main {
    padding: 0 !important;
  }
  .el-main-overflow-unset {
    overflow: unset !important;
  }
  .el-main-overflow-auto {
    overflow: auto !important;
  }
  .el-scrollbar {
    width: 100%;
  }
  .layout-aside-width-default {
    width: 240px !important;
    transition: width 0.3s ease;
  }
  .layout-aside-width64 {
    width: 64px !important;
    transition: width 0.3s ease;
  }
  .layout-scrollbar {
    @extend .el-scrollbar;
    padding: 15px;
  }
  .layout-container-header-main {
    display: flex;
    flex-direction: column;
  }
}

/* element plus 全局样式
------------------------------- */
.layout-breadcrumb-seting {
  .el-drawer__header {
    padding: 0 15px !important;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgb(230, 230, 230);
  }
  .el-divider {
    background-color: rgb(230, 230, 230);
  }
}

/* flex 弹性布局
------------------------------- */
.flex {
  display: flex;
}
.flex-auto {
  flex: 1;
}

/* 宽高 100%
------------------------------- */
.w100 {
  width: 100% !important;
}
.h100 {
  height: 100% !important;
}
.vh100 {
  height: 100vh !important;
}
.max100vh {
  max-height: 100vh !important;
}
.min100vh {
  min-height: 100vh !important;
}

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
  .font#{$i} {
    font-size: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 5 through 20 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}