样式

main.js中引入:

require('@/styles/common.styl')

common.styl:

/* width */
.w50
  width 50%

.w85
  width 85%

.wid-85
  width 85% !important
  max-width 400px !important

/* margin*/
.mb-12
  margin-bottom 12px

.mb-15
  margin-bottom 15px

.mb-20
  margin-bottom 20px

.mb-30
  margin-bottom 30px

.mb-50
  margin-bottom 50px

.mt-10
  margin-top 10px

.mt-12
  margin-top 12px

.mt-15
  margin-top 15px

.mt-20
  margin-top 20px

.mt-30
  margin-top 30px

.mt-50
  margin-top 50px

.mr-5
  margin-right 5px

.mr-10
  margin-right 10px

.mr-15
  margin-right 15px

/* padding */
.pt-10
  padding-top 10px

.pt-20
  padding-top 20px

.pt-30
  padding-top 30px

.pt-50
  padding-top 50px

.pb-10
  padding-bottom 10px

.pb-20
  padding-bottom 20px

.pb-30
  padding-bottom 30px

.pb-50
  padding-bottom 50px

/* text-align */
.tc
  text-align center

/* flex */
.flex
  display flex

// 水平居中
.flex-hc
  display flex
  justify-content center

// 子元素垂直居中
.flex-vc
  display flex
  align-items center

// 子元素水平垂直居中
.flex-center
  display flex
  align-items center
  justify-content center

// 子元素两端对齐
.flex-space-between
  display flex
  align-items center
  justify-content space-between


.pb-title
  padding-bottom 10px
  margin-bottom 20px
  font-size 18px
  line-height 1.5
  color $text-color-dark
  font-weight 600
  text-align left
  border-bottom 1px solid $text-color-dark

.pb-title--middle
  margin 10px 0
  font-size 16px
  line-height 1.5
  color $text-color-dark
  font-weight normal
  position relative

  &:before
    content ''
    display inline-block
    vertical-align text-top
    width 3px
    height 16px
    margin-right 10px
    background $page-des-color

.form-item--nowrap
  white-space nowrap


/* 页面容器 pages */
.pages-wrapper
  margin $page-content-margin
  height 100%
  width 'calc(100% - %s*2)' % $page-content-margin

// 标题描述
.descriptions-title
  position relative
  margin-bottom: 20px
  padding-left 10px
  color: $text-color-dark
  font-weight: 600
  font-size: 16px
  line-height: 1.5
  &:before
    display block
    position absolute
    left 0
    top 0
    bottom 0
    content ''
    width 4px
    height 100%
    border-radius 2px
    background-color $page-des-color

/* 必填样式 */
.required
  &:before
    content '*'
    margin-right: 4px
    color $text-color-required

/* el-card */
.el-card__header
  color $text-color-dark
  font-weight 500
  font-size 16px

.query-form
.base-form
.el-form-item__content
    .el-select
    .el-input
    .el-autocomplete
    .el-date-editor
    .el-cascader
      width 100%