aio-hl-new/src/style/layout.styl

@import 'iconfont.styl';
@import 'mixin.styl'; 
@font-face
  font-family 'iconfont';
  src url('iconfont/iconfont.eot');
  src url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont/iconfont.woff2') format('woff2'),
      url('iconfont/iconfont.woff') format('woff'),
      url('iconfont/iconfont.ttf') format('truetype'),
      url('iconfont/iconfont.svg#iconfont') format('svg');

/**日历*/
[class*=" el-icon-"], [class^=el-icon-]
  color #c0c4cc
.el-date-range-picker__header div
  color #606266
.el-date-table td span
  color #606266
.el-date-editor .el-range__close-icon
  line-height 24px
.el-date-range-picker
  width 5.5rem
.el-date-table td span
  width .2rem
  height .2rem
  line-height .2rem
  font-size .14rem
.el-date-table td div
  height .24rem
.el-date-table td
  padding 0
  height .28rem
.el-date-range-picker__content
  padding .06rem

/**icon*/  
.iconfont
  font-family "iconfont" !important
  font-size .16rem
  font-style normal
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
.close_icon
  width .3rem
  height .3rem
  position absolute
  right 0
  top .05rem
  color #C0C4CC
  font-size .2rem
  line-height .3rem
  text-align center
.select_icon
  width .2rem
  height .2rem
  line-height .2rem
  text-align center
  border-radius 100%
  overflow hidden
.select_square_icon
  border-radius 3px
.selected_icon
  background-color #1989fa
  color #fff
.unselect_icon
  background-color #c0c4cc
.radio_icon
  display inline-block
  width .16rem
  height .16rem
  border-radius 100%
  color #fff
  vertical-align middle
.radio_selected_icon
  border .05rem solid #1989fa
  background-color #fff
.radio_unselect_icon
  border 1px solid #1989fa
  background-color #fff
.button
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #909399;
  border: 1px solid #909399;
  color: #ffffff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 4px;
.button--primary
  background-color #67c23a
  border-color #67c23a
.button--defalut
  color #fff
  border 1px solid #c9c9c9
  background-color #c9c9c9

/**header*/
.container
  _wh(100%, 100vh)
header
  height 45px
  padding 0 15px
  border-bottom 1px solid rgb(255, 208, 75)
  box-shadow 0 1px 2px rgba(255, 208, 75, 0.5)
  _fj()
.header-tip
  line-height 32px
  font-size 16px
  color #fff

/**nav*/
.tabs
  width 100%
  height 34px
  margin-bottom 10px
  li
    float left
    line-height 32px
    text-align center
    a
      display inline-block
      color #fff
      width 100%
      font-size 14px
      padding 0 20px
    .router-link-active
      border-bottom 1px solid #15347b
      box-shadow 0 2px 0 rgba(228, 243, 244, 0.5)

/**content*/
.wrap
  width 100%
  height calc(100% - 46px)
  padding 15px
.wrap-filter-buttons
  width 100%
  margin-bottom 15px
.wrap-filters
  display flex
  justify-content space-between
  width 100%
  height 40px
.wrap-buttons
  width 100%
  height 100%
  margin 10px 0
  text-align right
.filter_item
  width 49%
  display flex
  justify-content space-between
.filter_label
  _font(14px, 40px, #fff,,)
  width 70px
.filter_input
  position relative
  width calc(100% - 70px)
  height 40px
  line-height 40px
.filter-input
  _wh(100%, 40px)
  _font(14px, 34px, #606266,,)
  padding 3px 10px
  border-radius 4px
.grid_wraper
  _wh(100%, calc(100% - 95px))
  overflow-y auto
.filter-table
  width 100%
  text-align center
  th
    position: sticky;
    top -1px
    z-index 1
    color #606266
    background-color #8B90A6
  th,td
    line-height 18px
    font-size 12px
    padding 5px
    color #fff
  td
    border 1px solid #8B90A6
    &:first-child
      border-left 0
    &:last-child
      border-right 0
.input
  width 1.8rem
  height .3rem
  line-height .3rem
  font-size .13rem
  color #606266
  text-indent .05rem
.message-box__wrapper
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  text-align center
  background rgba(0,0,0,.5)
.message-box__wrapper::after
  content ""
  display inline-block
  height 100%
  width 0
  vertical-align middle
  z-index 100
.message-box
  display inline-block
  width 4.2rem
  padding-bottom .1rem
  vertical-align middle
  background-color #fff
  border-radius 4px
  border 1px solid #ebeef5
  font-size .18rem
  box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
  text-align left
  overflow hidden
  backface-visibility hidden
.message-box__content
  position relative
  padding .1rem .15rem
  color #606266
  font-size .14rem
.message-box__btns
  padding .05rem .15rem 0
  text-align right
.message-box__message p
  color #303133
  line-height .3rem
.message-box__input
    padding .15rem 0
    margin-top .1rem
    line-height .3rem
    color #606266
    border-top 1px solid #e1e1e1
    border-bottom 1px solid #e1e1e1
.message-box__input .input-cus
  border 1px solid #dcdfe6
  padding-right .2rem
.keyValue
  position relative 
input::-webkit-input-placeholder
  color #C0C4CC
.input-cus-wrap
  position relative
  display inline-block
.radio_dot_icon
  width 5px
.modal-radios
  width 90%
  margin .15rem auto 0
.modal-radio
  display inline-block
  line-height .16rem
  color #606266
  font-size .13rem
.el-range-editor.el-input__inner
  width 100%
// .el-select-dropdown__item
//   height .26rem !important
//   line-height .26rem !important
//   font-size .16rem !important
// .el-input__inner
//   height .3rem
//   line-height .3rem