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

486 lines
9.8 KiB
Stylus
Raw Normal View History

2023-04-03 11:14:32 +08:00
@import 'iconfont.styl';
2023-05-19 13:51:43 +08:00
@import 'mixin.styl';
2023-04-03 11:14:32 +08:00
@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%
2023-06-25 16:58:18 +08:00
display block
.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
2023-04-03 11:14:32 +08:00
/**icon*/
.iconfont
font-family "iconfont" !important
font-size .16rem
font-style normal
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
.close_icon
2023-04-07 17:41:38 +08:00
width .3rem
height .3rem
2023-04-03 11:14:32 +08:00
position absolute
2023-04-07 17:41:38 +08:00
right 0
top .05rem
2023-04-03 11:14:32 +08:00
color #C0C4CC
2023-04-07 17:41:38 +08:00
font-size .2rem
line-height .3rem
text-align center
2023-04-03 11:14:32 +08:00
.select_icon
width 18px
height 18px
line-height 18px
font-size 16px
2023-04-03 11:14:32 +08:00
text-align center
border-radius 100%
background-color #c0c4cc
color #c0c4cc
2023-04-03 11:14:32 +08:00
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
2023-05-19 13:51:43 +08:00
.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;
2023-04-03 11:14:32 +08:00
.button--primary
2023-05-26 19:12:08 +08:00
background-color #409EFF
border-color #409EFF
2023-04-03 11:14:32 +08:00
.button--defalut
2023-04-10 11:16:58 +08:00
color #fff
border 1px solid #c9c9c9
background-color #c9c9c9
2023-04-03 11:14:32 +08:00
/**header*/
2023-05-19 13:51:43 +08:00
.container
_wh(100%, 100vh)
2023-04-03 11:14:32 +08:00
header
2023-05-19 13:51:43 +08:00
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()
2023-04-03 11:14:32 +08:00
.header-tip
2023-05-19 13:51:43 +08:00
line-height 32px
font-size 16px
2023-04-10 11:16:58 +08:00
color #fff
2023-04-03 11:14:32 +08:00
/**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)
2023-04-03 11:14:32 +08:00
/**content*/
.order-wraper
2023-04-03 11:14:32 +08:00
width 100%
height 100%
2023-05-19 13:51:43 +08:00
.wrap-filter-buttons
display flex
justify-content space-between
align-items center
2023-04-03 11:14:32 +08:00
width 100%
height 30px
2023-05-19 13:51:43 +08:00
margin-bottom 15px
.wrap-filters
display flex
justify-content flex-start
align-items center
width 60%
height 30px
2023-05-19 13:51:43 +08:00
.wrap-buttons
width 40%
2023-05-19 13:51:43 +08:00
height 100%
display flex
justify-content flex-end
align-items center
.button+.button
margin-left 5px
2023-05-19 13:51:43 +08:00
.filter_item
width calc(50% - 10px)
2023-05-19 13:51:43 +08:00
display flex
justify-content space-between
align-items center
+.filter_item
margin-left 10px
2023-05-19 13:51:43 +08:00
.filter_label
_font(12px, 30px, #fff,,)
width 50px
.filter-input-wrap
2023-05-19 13:51:43 +08:00
position relative
width calc(100% - 55px)
height 30px
line-height 30px
display flex
justify-content center
align-items center
2023-05-19 13:51:43 +08:00
.filter-input
2023-06-26 14:26:07 +08:00
_wh(100%, 30px)
_font(12px, 30px, #606266,,)
padding 0 10px
2023-05-19 13:51:43 +08:00
border-radius 4px
background-color #fff
2023-05-19 13:51:43 +08:00
.grid_wraper
_wh(100%, calc(100% - 45px))
2023-05-19 13:51:43 +08:00
overflow-y auto
2023-04-03 11:14:32 +08:00
.filter-table
width 100%
text-align center
2023-06-08 14:55:52 +08:00
user-select none
2023-05-19 13:51:43 +08:00
th
position: sticky;
top -1px
z-index 1
color #606266
padding 5px 0
2023-05-28 14:42:55 +08:00
font-weight bold
background-color #8B90A6
2023-04-03 11:14:32 +08:00
th,td
2023-06-05 13:17:08 +08:00
line-height 15px
2023-05-19 13:51:43 +08:00
font-size 12px
2023-04-07 18:28:08 +08:00
color #fff
2023-06-05 13:17:08 +08:00
word-break break-all
2023-06-25 16:58:18 +08:00
border-right 1px solid #8B90A6
border-bottom 1px solid #8B90A6
box-sizing border-box
&:first-child
border-left 1px solid #8B90A6
2023-05-19 13:51:43 +08:00
td
padding 5px
2023-04-03 11:14:32 +08:00
.input
width 1.8rem
height .3rem
line-height .3rem
font-size .13rem
color #606266
text-indent .05rem
2023-06-25 16:58:18 +08:00
.slide_new
width: 100%
height: 100%
overflow-y: auto
.zd_wrapper
height calc(100% - 95px)
overflow hidden
.grid_wraper
table-layout fixed
width auto
min-width 100%
height 100%
th
position sticky
top -1px
z-index 49
&:first-child
position sticky
left -1px
z-index 51
th,td
overflow hidden
white-space nowrap
text-overflow ellipsis
2023-06-26 14:26:07 +08:00
padding 8px 10px
2023-06-25 16:58:18 +08:00
td
&:first-child
position sticky
left -1px
z-index 50
2023-06-26 14:26:07 +08:00
background-color #090b3c
2023-06-25 16:58:18 +08:00
2023-04-03 11:14:32 +08:00
.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
2023-04-07 18:28:08 +08:00
font-size .13rem
2023-05-19 13:51:43 +08:00
.el-range-editor.el-input__inner
width 100%
.el-icon-arrow-up
vertical-align top
.form_wraper
width 100%
.form
width 100%
.form_item
2023-06-12 16:47:41 +08:00
width 100%
.form_item+.form_item
2023-06-12 16:47:41 +08:00
margin-top: 20px
.form_item__label
width: 74px;
text-align: left;
vertical-align: middle;
float: left;
font-size: 14px;
color: #606266;
2023-06-12 16:47:41 +08:00
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;
2023-06-12 16:47:41 +08:00
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;
2023-06-12 16:47:41 +08:00
font-size: 17px;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
2023-05-26 19:12:08 +08:00
width: 100%;
2023-06-25 16:58:18 +08:00
//
.search-confirm-wrap
margin 0 auto
border-radius 5px
padding-bottom 15px
.search-wrap
width 100%
padding 0 10px
_fj(flex-start)
flex-wrap wrap
.search-item
_fj()
width 32%
margin-top 10px
&:nth-child(3n+2)
margin-left 2%
margin-right 2%
.button+.button
margin-left 5px
.search-label
_wh(60px, 30px)
_font(12px, 30px,#fff,,)
.filter_input_wraper
width calc(100% - 60px)
height 30px
.search-item_2
_fj(flex-end)
width 64%
margin-top 10px
margin-left 4%
.button+.button
margin-left 5px
.flexend
justify-content flex-end
//
2023-05-26 19:12:08 +08:00
.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
2023-06-08 14:55:52 +08:00
td
color: $red
2023-06-26 14:26:07 +08:00
.zd_wrapper .grid_wraper td:first-child
background-color #ff6b00
2023-05-26 19:12:08 +08:00
.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
2023-06-08 14:55:52 +08:00
td
color: #008f8f
2023-06-26 14:26:07 +08:00
.zd_wrapper .grid_wraper td:first-child
background-color #00c0a5
2023-05-26 19:12:08 +08:00
.overall_blue
background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)