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

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

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: #29384d;
    border-right: 1px solid rgb(230, 230, 230);
    height: inherit;
  }
  .el-header {
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    padding: 0 !important;
  }
  .el-main {
    padding: 0 !important;
    overflow: unset !important;
  }
  .el-scrollbar {
    width: 100%;
  }
  .layout-scrollbar {
    @extend .el-scrollbar;
    padding: 15px;
  }
  .layout-container-header-main {
    display: flex;
    flex-direction: column;
  }
}

/* 宽高 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;
  }
}