Files
aio-hl-new/src/style/layout.styl
2023-06-12 16:47:41 +08:00

410 lines
8.4 KiB
Stylus

@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 18px
height 18px
line-height 18px
font-size 16px
text-align center
border-radius 100%
background-color #c0c4cc
color #c0c4cc
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 #409EFF
border-color #409EFF
.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%
display flex
justify-content flex-end
align-items center
.button+.button
margin-left 5px
.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
user-select none
th
position: sticky;
top -1px
z-index 1
color #606266
border 1px solid #8B90A6
padding 5px 0
font-weight bold
background-color #8B90A6
th,td
line-height 15px
font-size 12px
color #fff
word-break break-all
td
border 1px solid #8B90A6
padding 5px
.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-icon-arrow-up
vertical-align top
.form_wraper
width 100%
.form
width 100%
.form_item
width 100%
.form_item+.form_item
margin-top: 20px
.form_item__label
width: 74px;
text-align: left;
vertical-align: middle;
float: left;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
box-sizing: border-box;
i
color $red2
.form_item__content
width: calc(100% - 74px)
margin-left: 74px;
line-height: 40px;
position: relative;
font-size: 14px;
.form_item__input
width 100%
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid $gray1;
box-sizing: border-box;
color: #696969;
display: inline-block;
font-size: 17px;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
.overall_orange
background linear-gradient(#ff7a31 0%,#ff6b00 20%,#ff5200 100%)
.body-container
border-color $orange !important
.tabs li a
border-color #ffbb31 !important
.tabs li .router-link-active
background linear-gradient(#f5e24a 0%,#ffbb31 100%) !important
.button--primary
background-color #fff
border-color $red
color $red
.button--defalut
color: #fff;
border-color #c9c9c9
background-color: #c9c9c9;
.selected_icon
background-color: #fff;
color: $red
td
color: $red
.overall_lightgreen
background linear-gradient(#00d9a1 0%,#00c0a5 30%,#115fae 100%)
.body-container
border-color $lightgreen !important
.tabs li a
border-color #008f8f !important
.tabs li .router-link-active
background linear-gradient(#b7e15d 0%,#008f8f 100%) !important
.button--primary
background-color #008f8f
border-color #008f8f
color #fff
.button--defalut
color: #fff;
border-color #c9c9c9;
background-color: #c9c9c9;
.selected_icon
background-color: #fff;
color: #008f8f
td
color: #008f8f
.overall_blue
background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)