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
.el-input__inner
  height 30px
  line-height 30px
.el-range-editor.el-input__inner
  padding 0 5px
.el-date-editor .el-range__icon
  font-size 12px
  line-height 30px
.el-date-editor .el-range-input
  font-size 12px
.el-date-editor .el-range-separator
  line-height 30px
  font-size 12px
// 选择器
.el-select
  width 100%
.el-input
  line-height 30px
  font-size 12px
.el-input__icon
  line-height 30px
.el-select-dropdown__item
  line-height 30px
  font-size 12px
  height 30px
  span
    font-size 12px

/**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 #008f8f
  border-color #008f8f
.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*/
.order-wraper
  width 100%
  height 100%
.wrap-filter-buttons
  display flex
  justify-content space-between
  align-items center
  width 100%
  height 30px
  margin-bottom 15px
.wrap-filters
  display flex
  justify-content flex-start
  align-items center
  width 60%
  height 30px
.wrap-buttons
  width 40%
  height 100%
  text-align right
.filter_item
  width calc(50% - 10px)
  display flex
  justify-content space-between
  align-items center
  +.filter_item
    margin-left 10px
.filter_label
  _font(12px, 30px, #fff,,)
  width 50px
.filter-input-wrap
  position relative
  width calc(100% - 55px)
  height 30px
  line-height 30px
  display flex
  justify-content center
  align-items center
.filter-input
  _wh(100%, 29px)
  _font(12px, 30px, #606266,,)
  padding 0 10px
  border-radius 4px
  background-color #fff
.grid_wraper
  _wh(100%, calc(100% - 45px))
  overflow-y auto
.filter-table
  width 100%
  text-align center
  border 1px solid #8B90A6
  th
    position: sticky;
    top -1px
    z-index 1
    color #606266
    border-left 1px solid #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