css 样式初始化+element-ui样式优化+常见样式优化

建立文件夹 common.css( src-assets-style-common.css)
@import url('https://at.alicdn.com/t/font_2595646_76zzktmge22.css');//引入自己某个项目的iconfont图标库
//记得引入scss


body, html {
  margin: 0;
  padding: 0;
  background: rgba(244, 244, 244, 0.98) !important;
  min-width: 1400px;
  width: 100%;
  height: 100%;
  font-size: 16px;

  #app {
    width: 100%;
    height: 100%;
  }
}

/* 改变主题色变量 */
$--color-white: #ffffff !default;
$--color-black: #333333 !default;
$--color-primary: #3377FF !default;
$--color-success: #70C919 !default;
$--color-warning: #F8AB66 !default;
$--color-danger: #F56C6C !default;
$--color-info: #999999 !default;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

.diy-tabs {
  display: flex;

  .item {
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    color: #3377FF;
    position: relative;

    &:before {
      position: absolute;
      content: '';
      width: 28px;
      height: 4px;
      background-color: #3377FF;
      border-radius: 0;
      bottom: 0;
      z-index: 2;
    }
  }
}

.diy-title {
  text-indent: 12px;
  position: relative;

  &:after {
    content: ' ';
    position: absolute;
    height: 100%;
    width: 4px;
    bottom: 0;
    left: 0;
    background-color: #2A5EFF;
    border-radius: 1px;
  }
}

/*
  逐步优化element样式
 */

.diy-top-form {
  .el-form-item {
    margin-bottom: 8px;
  }

  .el-form-item__label {
    padding: 0;
  }
}

.input-number-text-left {
  .el-input__inner {
    text-align: left !important;
  }
}

.no-padding-popover {
  padding: 0 !important;
}

.no-header-dialog {
  .el-dialog__header {
    display: none !important;
  }
}

.no-padding-dialog {
  .el-dialog__body {
    padding: 0 !important;
  }
}

.el-dialog {
  .el-dialog__header {
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: center;

    .el-dialog__title {
      position: relative;
      top: -5px;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 20px;
    box-shadow: 0px -2px 18px 0px rgba(221, 221, 221, 0.5);
  }
}

.el-table {
  thead {
    color: #333 !important;

    tr, th {
      background-color: #F2F6FF !important;
    }
  }

  tbody {
    td {
      .el-button {
        &.el-button--text {
          padding: 0;
        }
      }
    }
  }
}

.diy-drawer-content {
  padding: 20px;
  height: calc(100vh - 66px - 86px);

  &::-webkit-scrollbar { // 滚动条整体样式 高宽分别对应横竖滚动条的尺寸
    width: 6px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { // 滚动条里面小方块
    border-radius: 10px;
    background: #ccc;
  }

  &::-webkit-scrollbar-track { // 滚动条里面轨道
    border-radius: 10px;
  }

  overflow: auto;
}

.diy-drawer-footer {
  height: 86px;
  box-shadow: 0 0 14px 0 rgba(221, 221, 221, 0.5);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30px;
}

.el-drawer__wrapper {
  .el-drawer__header {
    padding: 20px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EBEBEB;

    span {
      text-indent: 12px;
      position: relative;

      &:focus {
        outline: none !important;
      }

      &:after {
        content: ' ';
        position: absolute;
        height: 100%;
        width: 4px;
        bottom: 0;
        left: 0;
        background-color: #3377FF;
        border-radius: 4px;
      }
    }
  }

  .el-drawer__body {
    &::-webkit-scrollbar { // 滚动条整体样式 高宽分别对应横竖滚动条的尺寸
      width: 6px;
      height: 1px;
    }

    &::-webkit-scrollbar-thumb { // 滚动条里面小方块
      border-radius: 10px;
      background: #ccc;
    }

    &::-webkit-scrollbar-track { // 滚动条里面轨道
      border-radius: 10px;
    }

    height: calc(100vh - 58px);
    overflow: auto;
  }
}

.el-divider--horizontal {
  margin: 0;
}

.el-breadcrumb {
  font-size: 12px;
}

.el-menu--popup {
  background-color: #F2F6FF;

  .el-menu-item.is-active {
    background: linear-gradient(90deg, #4A87FF 0%, #86AEFF 100%);
    color: #FFFFFF;
  }
}

.el-menu--inline {
  .el-menu-item {
    background-color: #F2F6FF;
  }
}

.el-tooltip__popper {
  max-width: 50vw;
  max-height: 20vh;
  overflow: hidden;
}

// 自定义滚动条样式
.diy-popover {
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}

.scrollbar-x {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 4px;
  margin-bottom: -6px;

  &::-webkit-scrollbar { // 滚动条整体样式 高宽分别对应横竖滚动条的尺寸
    width: 10px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb { // 滚动条里面小方块
    border-radius: 10px;
    background: #ccc;
  }

  &::-webkit-scrollbar-track { // 滚动条里面轨道
    border-radius: 10px;
  }
}

.scrollbar-y {
  .el-scrollbar {
    height: 100%;

    .el-scrollbar__wrap {
      overflow-x: hidden;
      margin-bottom: 0 !important;
    }

    .el-scrollbar__view {
      height: 100%;
    }
  }
}


$colors: (primary, $--color-primary),
        (white, $--color-white),
        (black, $--color-black),
        (success, $--color-success),
        (warning, $--color-warning),
        (danger, $--color-danger),
        (info, $--color-info);
/* ----------------------------------------------------------------
  Color
----------------------------------------------------------------- */
@each $name, $color in $colors {
  .color-#{$name} {
    color: $color !important;
  }
}

@each $name, $color in $colors {
  .bc-#{$name} {
    background-color: $color !important;
  }
}

/* ----------------------------------------------------------------
  Border
----------------------------------------------------------------- */
@for $i from 0 through 20 {
  .br-#{$i} {
    border-radius: $i + px !important;
  }
}

/* ----------------------------------------------------------------
  Cursor
----------------------------------------------------------------- */
@each $cursor in default, pointer, move, 'not-allowed' {
  .cursor-#{$cursor} {
    cursor: $cursor !important;
  }
}

/* ----------------------------------------------------------------
  Display
----------------------------------------------------------------- */
@each $display in block, none, inline, inline-block, flex, inline-flex {
  .display-#{$display} {
    display: $display !important;
  }
}

/* ----------------------------------------------------------------
  Flex
----------------------------------------------------------------- */
// 项目的排列方向
@each $direction in row, row-reverse, column, column-reverse {
  .fd-#{$direction} {
    flex-direction: $direction !important;
  }
}

// 项目在主轴上的对齐方式
@each $position in flex-start, flex-end, center, space-between, space-around {
  .jc-#{$position} {
    justify-content: $position !important;
  }
}

// 占比
@for $i from 1 through 11 {
  .flex-#{$i} {
    flex: $i !important;
  }
}

// 轴线排列 换行
@each $nowrap in nowrap, wrap, wrap-reverse {
  .fw-#{$nowrap} {
    flex-wrap: $nowrap !important;
  }
}

// 项目在交叉轴上对齐方式
@each $position in flex-start, flex-end, center, baseline, stretch {
  .ai-#{$position} {
    align-items: $position !important;
  }
}

/* ----------------------------------------------------------------
  Float
----------------------------------------------------------------- */
.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

.float-none {
  float: none !important;
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

.clearfix::after {
  clear: both;
}

/* ----------------------------------------------------------------
  Sizing
----------------------------------------------------------------- */
@for $i from 1 through 20 {
  .width-percent-#{$i * 5} {
    width: 5 * 1% * $i !important;
  }
}

@for $i from 0 through 30 {
  .width-#{$i * 10} {
    width: 10px * $i !important;
  }
}

@for $i from 1 through 20 {
  .height-percent-#{$i * 5} {
    height: 5 * 1% * $i;
  }
}


@for $i from 0 through 20 {
  .height-#{$i * 10} {
    height: 10px * $i !important;
  }
}

@for $i from 1 through 50 {
  .lh-#{$i} {
    line-height: 1px * $i !important;
  }
}

/* ----------------------------------------------------------------
  Spacing
----------------------------------------------------------------- */
@for $i from 0 through 15 {
  .margin-#{$i * 2} {
    margin: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .mt-#{$i * 2} {
    margin-top: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .mb-#{$i * 2} {
    margin-bottom: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .ml-#{$i *2 } {
    margin-left: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .mr-#{$i * 2} {
    margin-right: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .padding-#{$i * 2} {
    padding: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .pt-#{$i * 2 } {
    padding-top: 2 * $i + px !important;
  }
}

@for $i from 0 through 15 {
  .pb-#{$i * 2 } {
    padding-bottom: 2 * $i + px !important;
  }
}

@for $i from 0 through 20 {
  .pl-#{$i * 2 } {
    padding-left: 2 * $i + px !important;
  }
}

@for $i from 0 through 20 {
  .pr-#{$i *2 } {
    padding-right: 2 * $i + px !important;
  }
}

.mr-auto {
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

/* ----------------------------------------------------------------
  Text
----------------------------------------------------------------- */
@each $align in center, left, right, justify {
  .ta-#{$align} {
    text-align: $align !important;
  }
}

@for $i from 6 through 18 {
  .fs-#{$i * 2} {
    font-size: 2 * $i + px !important;
  }
}

.fw-bold {
  font-weight: bold;
}

.fw-bolder {
  font-weight: bolder;
}

.fw-normal {
  font-weight: normal;
}

.text-decoration {
  text-decoration: underline;
}

.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
  Z-index
----------------------------------------------------------------- */
@for $i from 1 through 20 {
  .zi-#{$i} {
    z-index: $i !important;
  }
}

.drawer-class {
  transition: width 0.3s;
}

.com-name {
  font-weight: 500;
  color: #333333;
  font-size: 18px;
  margin-bottom: 20px;
}

.drawer-title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  border-bottom: 1px solid #EBEBEB;

  .drawer-line {
    margin: 21px 10px 0 20px;
    height: 18px;
    width: 3px;
    background: #2F74FF;
    float: left;
    border-radius: 4px;
  }
}

.inner-title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin-top: 40px;
  border-top: 1px solid #EBEBEB;
}

.drawer-foot {
  float: right;
  padding: 20px 0
}

.ellipsis {
  display: inline-block;
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-icon {
  float: right;
  cursor: pointer;
  margin-top: 5px
}

.divide {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0px 6px;
  background-color: #D9D9D9;
}

.total {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20px;
}

.form_Button {
  display: flex;
  flex-direction: row-reverse;
}