623 lines
11 KiB
Stylus
623 lines
11 KiB
Stylus
@import 'mixin.styl'
|
|
@import 'iconfont.styl'
|
|
|
|
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6,textarea, button, input, select, figure, figcaption
|
|
padding: 0
|
|
margin: 0
|
|
list-style: none
|
|
font-style: normal
|
|
text-decoration: none
|
|
border: none
|
|
outline: none
|
|
color: $fc1
|
|
font-size .28rem
|
|
font-weight: normal
|
|
font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif
|
|
box-sizing: border-box
|
|
-webkit-tap-highlight-color:transparent
|
|
-webkit-font-smoothing: antialiased
|
|
&:hover
|
|
outline: none
|
|
|
|
input[type="button"], input[type="submit"], input[type="search"], input[type="reset"], textarea, select
|
|
-webkit-appearance: none
|
|
appearance: none
|
|
|
|
html,body
|
|
// min-height: 100vh
|
|
width: 100%
|
|
background-color: #f5f5f5
|
|
|
|
.clear:after
|
|
content: ''
|
|
display: block
|
|
clear: both
|
|
|
|
.clear
|
|
zoom:1
|
|
|
|
.margin
|
|
margin: 0 auto
|
|
|
|
.fl
|
|
float: left
|
|
|
|
.fr
|
|
float: right
|
|
|
|
.text-center
|
|
text-align: center !important
|
|
|
|
.text-right
|
|
text-align: right !important
|
|
|
|
.relative
|
|
position relative
|
|
|
|
.hide
|
|
display: none
|
|
|
|
.show
|
|
display: block
|
|
|
|
.bold
|
|
font-weight: bold
|
|
|
|
.halfwidth
|
|
width 50%
|
|
|
|
.allwidth
|
|
width 100%
|
|
|
|
.spaceween
|
|
justify-content: space-between
|
|
|
|
.ellipsis
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
|
|
.txtjustify
|
|
text-align: justify
|
|
&:after
|
|
content: ''
|
|
display: inline-block
|
|
width: 100%
|
|
|
|
.mgt15
|
|
margin-top: .15rem !important
|
|
|
|
.mgt86
|
|
margin-top 0.96rem !important
|
|
|
|
.mgl20
|
|
margin-left: .2rem !important
|
|
|
|
.mgb110
|
|
margin-bottom: 1.1rem !important
|
|
|
|
.pdt1
|
|
padding-top .1rem !important
|
|
|
|
.cred
|
|
color $red !important
|
|
|
|
.bgred
|
|
background-color: $red !important
|
|
|
|
.bgyellow
|
|
background-color: $yellow !important
|
|
|
|
.bgblue
|
|
background-color: $blue !important
|
|
|
|
.bggreen
|
|
background-color: $green !important
|
|
|
|
.bggray
|
|
background-color: $gray !important
|
|
|
|
.bgwhite
|
|
background-color: #ffffff !important
|
|
|
|
.fxrow
|
|
_fj()
|
|
|
|
.fxcol
|
|
flex: 1
|
|
overflow hidden
|
|
|
|
.visible
|
|
overflow visible
|
|
|
|
[class^="icon-"]
|
|
display: inline-block
|
|
height: inherit
|
|
|
|
.flexstart {
|
|
align-items: flex-start !important;
|
|
}
|
|
.jcflexstart {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.jccenter {
|
|
justify-content: center !important;
|
|
}
|
|
.jcflexend {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.flexwrap {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
.zd-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.zd-col-24 {
|
|
width: 100%;
|
|
}
|
|
.zd-col-23 {
|
|
width: 95.83333%
|
|
}
|
|
.zd-col-22 {
|
|
width: 91.66667%
|
|
}
|
|
.zd-col-21 {
|
|
width: 87.5%
|
|
}
|
|
.zd-col-20 {
|
|
width: 83.33333%
|
|
}
|
|
.zd-col-19 {
|
|
width: 79.16667%
|
|
}
|
|
.zd-col-18 {
|
|
width: 75%
|
|
}
|
|
.zd-col-17 {
|
|
width: 70.83333%
|
|
}
|
|
.zd-col-16 {
|
|
width: 66.66667%
|
|
}
|
|
.zd-col-15 {
|
|
width: 62.5%
|
|
}
|
|
.zd-col-14 {
|
|
width: 58.33333%
|
|
}
|
|
.zd-col-13 {
|
|
width: 54.16667%
|
|
}
|
|
.zd-col-12 {
|
|
width: 50%;
|
|
}
|
|
.zd-col-11 {
|
|
width: 45.83333%
|
|
}
|
|
.zd-col-10 {
|
|
width: 41.66667%
|
|
}
|
|
.zd-col-9 {
|
|
width: 37.5%
|
|
}
|
|
.zd-col-8 {
|
|
width: 33.33333%
|
|
}
|
|
.zd-col-7 {
|
|
width: 29.16667%
|
|
}
|
|
.zd-col-6 {
|
|
width: 25%
|
|
}
|
|
.zd-col-5 {
|
|
width: 20.83333%
|
|
}
|
|
.zd-col-4 {
|
|
width: 16.66667%
|
|
}
|
|
.zd-col-3 {
|
|
width: 12.5%
|
|
}
|
|
.zd-col-2 {
|
|
width: 8.33333%
|
|
}
|
|
.zd-col-1 {
|
|
width: 4.16667%
|
|
}
|
|
|
|
/** 公共样式 **/
|
|
header
|
|
position fixed
|
|
z-index 10
|
|
top 0
|
|
_fj()
|
|
width 100%
|
|
height .86rem
|
|
padding 0 .24rem
|
|
background linear-gradient(90deg, #ff6800, #ff9856)
|
|
span
|
|
_font(.36rem,.86rem,#ffffff,bold,center)
|
|
.content
|
|
position: relative
|
|
padding: 0 0.24rem
|
|
.loading-tips
|
|
_font(.28rem,.53rem,#929292,,center)
|
|
margin-bottom 1.2rem
|
|
/** grid列表 **/
|
|
.grid-wraper
|
|
_fj(,flex-start)
|
|
// max-height 12rem
|
|
// overflow-y: auto
|
|
.left_fixed
|
|
flex 0 0 1.5rem
|
|
.slide
|
|
flex 1
|
|
overflow-x scroll
|
|
.layout-t
|
|
border-collapse separate
|
|
border-spacing 0
|
|
text-align left
|
|
vertical-align middle
|
|
tr
|
|
th,td
|
|
white-space nowrap
|
|
padding 0 .2rem
|
|
border-bottom .1rem solid #f5f5f5
|
|
th
|
|
_font(.26rem,.98rem,#696969,bold)
|
|
height 1.08rem
|
|
background-color #d7d7d7
|
|
td
|
|
_font(.28rem,.98rem,$fc1)
|
|
height 1.08rem
|
|
background-color #ffffff
|
|
a
|
|
text-decoration underline
|
|
color $red
|
|
.layout-t tr.checked
|
|
background-image linear-gradient(to top, #ffcb4b, #ffe8ad)
|
|
.layout-t tr.checked td
|
|
background-color transparent
|
|
color #6c5502
|
|
.grid-wraper::-webkit-scrollbar, .slide::-webkit-scrollbar
|
|
width 0
|
|
height 0
|
|
.left_layout_t
|
|
width 100%
|
|
min-width 1.68rem
|
|
.sin_input
|
|
width 1.6rem
|
|
_font(.28rem,.6rem,#8a8a8a)
|
|
padding 0 .1rem
|
|
border 1px solid #a1a1a1
|
|
border-radius 3px
|
|
.layout-t tr.checked td .sin_input
|
|
color #8a8a8a
|
|
border 1px solid #ffffff
|
|
.slide .layout-t
|
|
min-width 5.34rem
|
|
.click_div
|
|
_font(.28rem,.6rem,#8a8a8a)
|
|
padding 0 .1rem
|
|
border 1px solid #a1a1a1
|
|
border-radius 3px
|
|
cursor pointer
|
|
|
|
/**detail**/
|
|
.detail-title
|
|
_font(.28rem,1,#696969)
|
|
padding-top .25rem
|
|
.detail-text
|
|
_font(.3rem,1.2,#323232)
|
|
padding-top .25rem
|
|
.detail-input-panel
|
|
display flex
|
|
_wh(100%,.78rem)
|
|
_font(.3rem,.78rem,#323232)
|
|
margin-top .25rem
|
|
.detail-input
|
|
flex 9
|
|
height inherit
|
|
line-height inherit
|
|
background #F4F4F4
|
|
text-indent .28rem
|
|
.detail-unit
|
|
flex 1
|
|
display inline-block
|
|
.detail-col-1
|
|
flex 9
|
|
.detail-col-panel
|
|
width 100%
|
|
display flex
|
|
overflow hidden
|
|
.detail-input-col
|
|
flex 3
|
|
_wh(20%,inherit)
|
|
line-height inherit
|
|
background #F4F4F4
|
|
text-indent .28rem
|
|
.detail-unit-col
|
|
flex 0.5
|
|
display inline-block
|
|
.detail-img-panel
|
|
position relative
|
|
margin-top .25rem
|
|
width 3.02rem
|
|
.detail-img
|
|
_wh(3.02rem,auto)
|
|
.detail-img-box
|
|
_wh(3.02rem,3.02rem)
|
|
|
|
/** 按钮 **/
|
|
.btn
|
|
_font(.28rem,.6rem,#fff,,center)
|
|
padding 0 .2rem
|
|
background-color#ff6800
|
|
border-radius: 5px
|
|
cursor pointer
|
|
&:disabled
|
|
background-color: $gray
|
|
.btn-disabled
|
|
background-color: $gray
|
|
.btn-active
|
|
background-color: $red
|
|
.btn-surround
|
|
background-color: #ffffff
|
|
border: 1px solid $red
|
|
color: $red
|
|
.filter-btn
|
|
flex none
|
|
min-width .8rem
|
|
padding 0 .3rem
|
|
.lx-icon
|
|
flex 0 0 .44rem
|
|
_wh(.44rem,.44rem)
|
|
background-color: transparent
|
|
cursor pointer
|
|
.icon-radio
|
|
_bis('./images/close.png',.44rem)
|
|
.icon-radio-active
|
|
_bis('./images/open.png',.44rem)
|
|
|
|
/** 输入框 **/
|
|
.filter-wraper
|
|
width 100%
|
|
background-color #fff
|
|
border-radius 4px
|
|
margin-bottom .15rem
|
|
.bottom-filter
|
|
width 100%
|
|
position fixed
|
|
bottom 1.11rem
|
|
background-color #ffffff
|
|
box-shadow 0 0 15px 0 rgba(160,160,160,0.9)
|
|
.bottom-filter-tip
|
|
_fj(space-between)
|
|
padding 0 .2rem
|
|
border-bottom .02rem solid #f0edf1
|
|
&:last-child
|
|
border-bottom none
|
|
.filed-space
|
|
margin 0 -.24rem
|
|
.filed-pad
|
|
padding 0 .24rem
|
|
.filter-label
|
|
flex none
|
|
width 1.6rem
|
|
_font(.3rem,.9rem,#323232,,justify)
|
|
.filter-unit
|
|
width .5rem
|
|
margin-left .2rem
|
|
_font(.26rem,.6rem,#323232,,right)
|
|
.filter-input
|
|
display block
|
|
width 100%
|
|
min-width 0
|
|
padding 0 .15rem
|
|
_font(.26rem,.9rem,#606266)
|
|
// border .02rem solid #dcdfe6
|
|
border-radius 4px
|
|
background-color #fff
|
|
// box-sizing border-box
|
|
&:disabled
|
|
background-color #dcdfe6
|
|
cursor not-allowed
|
|
.filter-disabled
|
|
background-color #dcdfe6
|
|
.bottom-input
|
|
width 100%
|
|
_font(.28rem,.6rem,#929292,,center)
|
|
background-color: #ececee
|
|
.filter-warn
|
|
display inline-block
|
|
flex 0 0 .3rem
|
|
_wh(.3rem,.3rem)
|
|
border-radius 100%
|
|
vertical-align middle
|
|
.filter-scan
|
|
display: block
|
|
_ct()
|
|
right 0
|
|
_wh(.9rem,.9rem)
|
|
padding .24rem
|
|
.icon-scan
|
|
flex 0 0 .42rem
|
|
_bis('./images/saoma.png',.42rem)
|
|
.filter-scan-input
|
|
// padding-right 1.5rem
|
|
// border-bottom 1px solid #d7d7d7
|
|
.mount-bg
|
|
padding .25rem
|
|
background: #ffffff center bottom / 100% auto no-repeat url(./images/bg4.png)
|
|
.modal-message
|
|
padding .5rem
|
|
font-size .3rem
|
|
line-height 1.5
|
|
color #666
|
|
.tip-h1
|
|
_font(.34rem,.54rem,#323232)
|
|
.tip-h2
|
|
_font(.28rem,.5rem,#464646)
|
|
/** 提交栏 **/
|
|
.submit-bar
|
|
_fj()
|
|
position fixed
|
|
bottom 0
|
|
width 100%
|
|
background-color #fff
|
|
box-shadow 0 0 20px 0 rgba(160,160,160,0.9)
|
|
.submit-button
|
|
flex 1
|
|
line-height .8rem
|
|
margin .15rem
|
|
.submit-button1
|
|
flex 0 0 2.5rem
|
|
line-height 1.1rem
|
|
border-radius 0
|
|
.icon-subarrow
|
|
flex 0 0 .22rem
|
|
_wh(.22rem,.46rem)
|
|
_bis('./images/triangle.png',.22rem)
|
|
.icon_subarrow_gray
|
|
_bis('./images/triangle-gray.png',.22rem)
|
|
.qty_tip
|
|
_font(.26rem,1,#323232)
|
|
vertical-align: middle
|
|
.qty_num
|
|
display inline-block
|
|
_font(.3rem,1,$red)
|
|
vertical-align: middle
|
|
max-width 2.6rem
|
|
overflow hidden
|
|
|
|
// vant toast style
|
|
.van-loading span, .van-toast__text
|
|
color #ffffff !important
|
|
// 显示框bg
|
|
.disabled-bg
|
|
color #929292
|
|
background-color #f5f7fa
|
|
border 1px solid #e4e7ed
|
|
cursor not-allowed
|
|
|
|
.van-toast
|
|
background-color rgba(155,155,155,.88)
|
|
|
|
// 弹窗 + 选择器
|
|
.msg_wrapper
|
|
position fixed
|
|
top 0
|
|
bottom 0
|
|
left 0
|
|
right 0
|
|
text-align center
|
|
z-index 98
|
|
&::after
|
|
content ""
|
|
display inline-block
|
|
height 100%
|
|
width 0
|
|
vertical-align middle
|
|
.msg_box
|
|
position relative
|
|
z-index 100
|
|
display inline-block
|
|
width 90%
|
|
padding .2rem
|
|
vertical-align middle
|
|
background-color #fff
|
|
border-radius 4px
|
|
border 1px solid #ebeef5
|
|
box-shadow 0 2px 12px 0 rgb(0 0 0 / 10%)
|
|
overflow hidden
|
|
backface-visibility hidden
|
|
.input_item
|
|
width 100%
|
|
border-radius 4px
|
|
border 1px solid #DCDFE6
|
|
_font(14px,40px,#606266)
|
|
text-indent 25px
|
|
.mask
|
|
position fixed
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
opacity .2
|
|
background #000
|
|
z-index 99
|
|
.msg_txt
|
|
_font(14px,16px,#606266)
|
|
margin-bottom 0.3rem
|
|
.msg_item
|
|
height 50px
|
|
line-height 50px
|
|
.label_item
|
|
display inline-block
|
|
width 90px
|
|
_font(16px,inherit,#333)
|
|
.from_item
|
|
display inline-block
|
|
width calc(100% - 100px)
|
|
_font(14px,inherit,#606266)
|
|
.from_item .el-select
|
|
width 100%
|
|
.from_item .el-input
|
|
font-size 14px
|
|
.from_item .el-input__inner
|
|
height 40px
|
|
line-height inherit
|
|
border: 1px solid #DCDFE6;
|
|
.from_item .el-select .el-input.is-focus .el-input__inner, .from_item .el-select .el-input__inner:focus
|
|
border-color #e74f1a
|
|
.el-select-dropdown__item span
|
|
font-size 14px !important
|
|
.el-select .el-input .el-select__caret
|
|
line-height 40px
|
|
.msg_btns
|
|
height 35px
|
|
line-height 35px
|
|
width 100%
|
|
max-width 300px
|
|
margin 20px auto 0
|
|
_fj()
|
|
.msg_btn
|
|
width 80px
|
|
height 35px
|
|
line-height 35px
|
|
font-size 14px
|
|
color #fff
|
|
background-color #d7592f
|
|
border-radius 5px
|
|
text-align center
|
|
&:disabled
|
|
background-color $gray
|
|
|
|
/** 选择器 */
|
|
.el-select
|
|
width 100%
|
|
.el-input
|
|
font-size .26rem
|
|
.el-input__inner
|
|
line-height .6rem
|
|
height .6rem
|
|
border 0
|
|
.el-select .el-input .el-select__caret
|
|
line-height .6rem
|
|
.el-radio__label
|
|
font-size: .28rem
|
|
padding-left: .1rem
|
|
vertical-align: top
|
|
.el-radio__inner
|
|
_wh(.28rem,.28rem)
|
|
.el-radio__inner::after
|
|
_wh(.08rem,.08rem)
|
|
.el-radio__input.is-checked .el-radio__inner
|
|
border-color: $red
|
|
background: $red
|
|
.el-radio__input.is-checked+.el-radio__label
|
|
color#323232
|
|
.el-radio__inner:hover
|
|
border-color: $red |