578 lines
11 KiB
Stylus
578 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
|
|
height: auto
|
|
width: 100%
|
|
background-color: #F5F5F5
|
|
outline: 0
|
|
padding: 0
|
|
margin: 0
|
|
border: 0
|
|
|
|
html
|
|
background-color: #fff
|
|
|
|
.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
|
|
|
|
.pointer
|
|
cursor pointer
|
|
|
|
.halfwidth
|
|
width 50%
|
|
|
|
.allwidth
|
|
width 100%
|
|
|
|
.spaceween
|
|
justify-content: space-between
|
|
|
|
.ellipsis
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
|
|
.txtjustify
|
|
display inline-block
|
|
width 100%
|
|
text-align: justify
|
|
&:after
|
|
content: ''
|
|
display: inline-block
|
|
_wh(100%, 0)
|
|
overflow hidden
|
|
|
|
|
|
.mgt15
|
|
margin-top: .15rem !important
|
|
.mgl5
|
|
margin-left: .05rem !important
|
|
.mgl20
|
|
margin-left: .2rem !important
|
|
.mgt86
|
|
margin-top .86rem !important
|
|
.mgt186
|
|
margin-top 1.86rem !important
|
|
.mgt196
|
|
margin-top 1.96rem !important
|
|
.mgb110
|
|
margin-bottom: 1.1rem !important
|
|
.mgb70
|
|
margin-bottom: .8rem !important
|
|
.mgb186
|
|
margin-bottom: 1.86rem !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
|
|
|
|
/** 公共样式 **/
|
|
header
|
|
position fixed
|
|
top 0
|
|
_fj()
|
|
_wh(100%, .86rem)
|
|
padding 0 .24rem
|
|
background: $red
|
|
z-index 100
|
|
span
|
|
_font(.36rem,.86rem,#ffffff,bold,center)
|
|
.content
|
|
position: relative
|
|
padding: 0 0.24rem
|
|
z-index 99
|
|
.content-scroll
|
|
height calc(100% - 2.2rem)
|
|
overflow-y scroll
|
|
.login-bg
|
|
background: #ffffff center bottom / 100% auto no-repeat url(./images/bg.png)
|
|
.loading-tips
|
|
_font(.28rem,.53rem,#929292,,center)
|
|
height .53rem
|
|
overflow hidden
|
|
/** grid列表 **/
|
|
.grid-wraper
|
|
_fj(,flex-start)
|
|
// height calc(100% - 2.49rem)
|
|
// 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 td
|
|
background-color $red
|
|
color #fff
|
|
a
|
|
color #fff
|
|
.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
|
|
min-width 7rem
|
|
|
|
/**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
|
|
max-width 2rem
|
|
_font(.28rem,.8rem,#fff,,center)
|
|
padding 0 .2rem
|
|
// background-color $red
|
|
border-radius 5px
|
|
border .01rem solid $red
|
|
background-color #fff
|
|
color $red
|
|
cursor pointer
|
|
user-select none
|
|
&:disabled
|
|
background-color: $gray
|
|
border .01rem solid $gray
|
|
color #fff
|
|
.btn-disabled
|
|
background-color $gray
|
|
border .01rem solid $gray
|
|
color #fff
|
|
.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%
|
|
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 .1rem 0 0 0
|
|
// border-bottom .01rem solid #f0edf1
|
|
&:last-child
|
|
border-bottom none
|
|
.filed-space
|
|
margin 0 -.24rem
|
|
.filed-pad
|
|
padding 0 .24rem
|
|
.filter-label
|
|
flex none
|
|
width 1.4rem
|
|
_font(.3rem,.9rem,#323232,,justify)
|
|
.filter-unit
|
|
width .5rem
|
|
margin-left .2rem
|
|
_font(.26rem,.6rem,#323232)
|
|
.filter-input
|
|
display block
|
|
width 100%
|
|
min-width 0
|
|
padding 0 .15rem
|
|
_font(.3rem,.9rem,#606266)
|
|
border .02rem solid #dcdfe6
|
|
border-radius 4px
|
|
background-color #fff
|
|
// box-sizing border-box
|
|
&:disabled
|
|
color #929292
|
|
background-color #f5f7fa
|
|
border .02rem solid #e4e7ed
|
|
cursor not-allowed
|
|
.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(flex-start)
|
|
flex-wrap wrap
|
|
position fixed
|
|
top .86rem
|
|
width 100%
|
|
background-color #fff
|
|
box-shadow 0 .01rem .04rem 0 rgba(160,160,160,0.9)
|
|
z-index 100
|
|
padding .1rem .1rem 0 .1rem
|
|
.submit-bar1
|
|
padding-right .6rem
|
|
transition all .3s ease-in-out
|
|
overflow hidden
|
|
.submit-button
|
|
flex 1
|
|
line-height .8rem
|
|
padding 0 .01rem
|
|
margin 0 .1rem .1rem 0 // 间隙为.1rem
|
|
width calc((100% - .3rem) / 4) // 这里的.3rem = (分布个数4-1)*间隙.1rem, 可以根据实际的分布个数和间隙区调整
|
|
min-width calc((100% - .3rem) / 4) // 加入这两个后每个item的宽度就生效了
|
|
max-width calc((100% - .3rem) / 4) // 加入这两个后每个item的宽度就生效了
|
|
&:nth-child(4n) // 去除第3n个的margin-right
|
|
margin-right 0
|
|
.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
|
|
// 计算重量栏
|
|
.calc_value_wraper
|
|
position fixed
|
|
bottom 0
|
|
width 100%
|
|
padding 0 .24rem .1rem .24rem
|
|
background-color #fff
|
|
box-shadow 0 -.01rem .04rem 0 rgba(160,160,160,0.9)
|
|
z-index 100
|
|
.filter-label, .filter-input
|
|
line-height .68rem
|
|
// 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 100
|
|
&::after
|
|
content ""
|
|
display inline-block
|
|
height 100%
|
|
width 0
|
|
vertical-align middle
|
|
.msg_box
|
|
display inline-block
|
|
width 90%
|
|
max-width 420px
|
|
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 .7
|
|
background #000
|
|
z-index 101
|
|
.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
|
|
.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%
|
|
.rel_select .el-select
|
|
width calc(100% - .7rem)
|
|
.el-input
|
|
font-size .3rem
|
|
.el-select .el-input__inner
|
|
padding-right .9rem
|
|
.el-input__inner
|
|
line-height .9rem
|
|
height .9rem
|
|
.el-input__suffix
|
|
right .1rem
|
|
// .rel_select .el-select .el-input__inner
|
|
// padding-right .9rem
|
|
// .rel_select .el-input__suffix
|
|
// right .6rem
|
|
.el-select .el-input .el-select__caret
|
|
line-height .9rem
|
|
font-size .4rem
|
|
.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
|
|
// vant日历组件
|
|
.van-button__text
|
|
color #fff |