init
This commit is contained in:
101
src/style/common.styl
Normal file
101
src/style/common.styl
Normal file
@@ -0,0 +1,101 @@
|
||||
@import 'mixin.styl'
|
||||
@import 'iconfont.styl'
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont/iconfont.woff2?t=1631676179964') format('woff2'),
|
||||
url('iconfont/iconfont.woff?t=1631676179964') format('woff'),
|
||||
url('iconfont/iconfont.ttf?t=1631676179964') format('truetype');
|
||||
}
|
||||
[class*=" icon_"],[class^=icon_]
|
||||
font-family: "iconfont" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.site_container
|
||||
_wh(100%, calc(100% - 82px))
|
||||
overflow hidden
|
||||
.left_side
|
||||
_wh(2.72rem, 100%)
|
||||
.right_side
|
||||
_wh(calc(100% - 2.72rem), 100%)
|
||||
|
||||
.filter-table
|
||||
width 100%
|
||||
border-collapse separate
|
||||
border-spacing 0
|
||||
border: 1px#eeeeee
|
||||
text-align center
|
||||
th,td
|
||||
color #323232
|
||||
background-color #ffffff
|
||||
border-right 2px dotted #eeeeee
|
||||
border-bottom 2px dotted #eeeeee
|
||||
// &::first-child, :last-child
|
||||
// border-left 0 dotted #e1e1e1
|
||||
// border-bottom 0 dotted #e1e1e1
|
||||
.filter-table th
|
||||
font-size .24rem
|
||||
line-height .8rem
|
||||
background-color #DFE1E6
|
||||
.filter-table td
|
||||
height 0.3rem
|
||||
line-height .8rem
|
||||
font-size .25rem
|
||||
.filter-table tr:first-child th:first-child
|
||||
border-top-left-radius .1rem
|
||||
.filter-table tr:first-child th:last-child
|
||||
border-top-right-radius .1rem
|
||||
.filter-table tr:last-child td:first-child
|
||||
border-bottom-left-radius .1rem
|
||||
.filter-table tr:last-child td:last-child
|
||||
border-bottom-right-radius .1rem
|
||||
.filter-table th:last-child, .filter-table td:last-child
|
||||
border-right none
|
||||
|
||||
/** 开发者选项 */
|
||||
.right_side_box
|
||||
_wh(10.4rem,calc(100% - 90px - .48rem))
|
||||
margin-top .48rem
|
||||
padding .17rem .4rem
|
||||
background rgba(223,225,230,.2)
|
||||
border-radius .08rem
|
||||
overflow hidden
|
||||
h2
|
||||
_font(.32rem,.45rem,#FA6400,,)
|
||||
margin-bottom .15rem
|
||||
.info_wrapper
|
||||
_wh(100%, calc(100% - .94rem))
|
||||
.ifconfig_info
|
||||
_wh(100%,100%)
|
||||
_font(.24rem,.44rem,#323232,,)
|
||||
white-space pre-line
|
||||
word-break break-all
|
||||
overflow-y auto
|
||||
27
src/style/iconfont.styl
Normal file
27
src/style/iconfont.styl
Normal file
@@ -0,0 +1,27 @@
|
||||
// .delete_icon
|
||||
// &::before
|
||||
// content: '\e632'
|
||||
// .eye_open_icon
|
||||
// &::before
|
||||
// content: '\e60a'
|
||||
// .eye_colse_icon
|
||||
// &::before
|
||||
// content: '\e7b2'
|
||||
// .back_icon
|
||||
// &::before
|
||||
// content: '\e644'
|
||||
.icon_dropdown
|
||||
&::before
|
||||
content: '\e65b'
|
||||
.icon_eyeopen
|
||||
&::before
|
||||
content: '\ee33'
|
||||
.icon_eyeclose
|
||||
&::before
|
||||
content: '\ee34'
|
||||
// .dropdown_icon_2
|
||||
// &::before
|
||||
// content:'\e62b'
|
||||
// .select_icon
|
||||
// &::before
|
||||
// content '\e608'
|
||||
BIN
src/style/iconfont/iconfont.ttf
Normal file
BIN
src/style/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/style/iconfont/iconfont.woff
Normal file
BIN
src/style/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
src/style/iconfont/iconfont.woff2
Normal file
BIN
src/style/iconfont/iconfont.woff2
Normal file
Binary file not shown.
628
src/style/layout.styl
Normal file
628
src/style/layout.styl
Normal file
@@ -0,0 +1,628 @@
|
||||
@import 'mixin.styl'
|
||||
@import 'iconfont.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
|
||||
line-height .3rem
|
||||
.el-date-editor.el-input
|
||||
width calc(100% - .8rem)
|
||||
.el-input
|
||||
font-size .13rem
|
||||
.el-date-editor--daterange.el-input__inner
|
||||
width calc(100% - 0.8rem)
|
||||
padding .03rem .1rem
|
||||
vertical-align top
|
||||
.el-input__inner
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
.el-date-range-picker__header div
|
||||
color #606266
|
||||
.el-date-table td span
|
||||
color #606266
|
||||
.el-date-editor .el-range__icon,.el-date-editor .el-range-separator
|
||||
font-size .14rem
|
||||
line-height .22rem
|
||||
.el-date-editor .el-range__close-icon
|
||||
line-height .22rem
|
||||
font-size .14rem
|
||||
.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-date-picker__header-label
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
.el-date-editor .el-range-input
|
||||
font-size .14rem
|
||||
line-height .22rem
|
||||
.el-date-range-picker__content .el-date-range-picker__header div
|
||||
margin-left: .5rem
|
||||
margin-right: .5rem
|
||||
.el-date-range-picker__header div
|
||||
font-size .16rem
|
||||
.iconfont
|
||||
font-family "iconfont" !important
|
||||
font-size .16rem
|
||||
font-style normal
|
||||
-webkit-font-smoothing antialiased
|
||||
-moz-osx-font-smoothing grayscale
|
||||
[class*="_icon"]
|
||||
background none
|
||||
.button--primary
|
||||
min-width .6rem
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
font-size .15rem
|
||||
color #ffffff
|
||||
background-color #D7592F
|
||||
padding 0 .1rem
|
||||
border-radius 5px
|
||||
.button--defalut
|
||||
color #606266
|
||||
border 1px solid #dcdfe6
|
||||
background-color #fff
|
||||
.button--cancle
|
||||
color #D7592F
|
||||
background-color #fff
|
||||
.top_header
|
||||
position fixed
|
||||
top 0
|
||||
width 100%
|
||||
border-bottom 1px solid #E1E1E1
|
||||
z-index 1000
|
||||
header
|
||||
position relative
|
||||
height .4rem
|
||||
line-height .4rem
|
||||
background-color #D7592F
|
||||
padding 0 .15rem
|
||||
box-sizing border-box
|
||||
.header-title
|
||||
width 3rem
|
||||
font-size .16rem
|
||||
padding-left .1rem
|
||||
overflow hidden
|
||||
.header-title_ex
|
||||
padding-left 0
|
||||
.header-name
|
||||
width auto
|
||||
.top-left
|
||||
text-align center
|
||||
position relative
|
||||
ul
|
||||
width 1.8rem
|
||||
position absolute
|
||||
background #d7592f
|
||||
left 0
|
||||
top .45rem
|
||||
border-radius 2px
|
||||
box-shadow 1px 2px 3px rgba(228,243,244,0.5)
|
||||
overflow hidden
|
||||
li
|
||||
line-height .36rem
|
||||
font-size .15rem
|
||||
border-bottom 1px solid #e1e1e1
|
||||
&:nth-of-type(2)
|
||||
border none
|
||||
text-align center
|
||||
.home-items
|
||||
display flex
|
||||
align-items center
|
||||
padding 0 5%
|
||||
height 100%
|
||||
li
|
||||
float left
|
||||
text-align center
|
||||
width 33.333333%
|
||||
img
|
||||
width 80%
|
||||
height 80%
|
||||
p
|
||||
line-height .34rem
|
||||
color #464646
|
||||
.drift
|
||||
transition height .3s linear
|
||||
.date-box
|
||||
width 2.3rem
|
||||
text-align left
|
||||
overflow hidden
|
||||
.date-box_time
|
||||
position absolute
|
||||
width 2.3rem
|
||||
height .44rem
|
||||
overflow hidden
|
||||
right 0
|
||||
.tabs
|
||||
width 100%
|
||||
font-size .18rem
|
||||
line-height .4rem
|
||||
height .4rem
|
||||
background-color #f5f5f5
|
||||
li
|
||||
float left
|
||||
width 1rem
|
||||
line-height .4rem
|
||||
text-align center
|
||||
a
|
||||
display inline-block
|
||||
line-height .4rem
|
||||
color #323232
|
||||
width 100%
|
||||
.router-link-active
|
||||
border-bottom 1px solid #D7592F
|
||||
.inner-wrap
|
||||
height 100%
|
||||
background-color #F5F5F5
|
||||
.wrap
|
||||
width 8rem
|
||||
padding .9rem .05rem .05rem .05rem
|
||||
.wrap_ex
|
||||
padding-top .44rem
|
||||
.wrap-filter-button
|
||||
width 100%
|
||||
padding .1rem .2rem
|
||||
margin .1rem auto
|
||||
border-radius .1rem
|
||||
background-color #fff
|
||||
.wrap-filter
|
||||
padding-bottom .1rem
|
||||
.filter_item
|
||||
width 50%
|
||||
padding 0 .2rem
|
||||
margin .1rem 0 0 0
|
||||
.filter_input
|
||||
width 100%
|
||||
display flex
|
||||
justify-content space-between
|
||||
.filter-label
|
||||
color #464646
|
||||
width .6rem
|
||||
line-height .3rem
|
||||
height .3rem
|
||||
text-align justify
|
||||
text-align-last justify
|
||||
&::after
|
||||
position absolute
|
||||
top .3rem
|
||||
left 0
|
||||
display inline-block
|
||||
content ''
|
||||
overflow hidden
|
||||
width .5rem
|
||||
height 0
|
||||
.wrap-button
|
||||
margin .1rem auto
|
||||
padding 0 .2rem
|
||||
text-align right
|
||||
.filter-table
|
||||
width 100%
|
||||
margin .2rem 0
|
||||
border-collapse separate
|
||||
border-spacing 0
|
||||
border: 1px#e1e1e1
|
||||
text-align center
|
||||
th,td
|
||||
color #464646
|
||||
background-color #fff
|
||||
border-right 1px solid #e1e1e1
|
||||
border-bottom 1px solid #e1e1e1
|
||||
&::first-child
|
||||
border-left 1px solid #e1e1e1
|
||||
.filter-table th
|
||||
font-size .13rem
|
||||
line-height .3rem
|
||||
padding 0 .01rem
|
||||
background-color #e1e1e1
|
||||
.filter-table td
|
||||
height 0.3rem
|
||||
line-height .18rem
|
||||
font-size .12rem
|
||||
padding .01rem
|
||||
.filter-table tr:first-child th:first-child
|
||||
border-top-left-radius .1rem
|
||||
.filter-table tr:first-child th:last-child
|
||||
border-top-right-radius .1rem
|
||||
.filter-table tr:last-child td:first-child
|
||||
border-bottom-left-radius .1rem
|
||||
.filter-table tr:last-child td:last-child
|
||||
border-bottom-right-radius .1rem
|
||||
.radio__icon
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
width .2rem
|
||||
line-height .2rem
|
||||
height .2rem
|
||||
.radio__icon--square
|
||||
border-radius 3px
|
||||
border 1px solid #e5e5e5
|
||||
background-color #e5e5e5
|
||||
.radio__icon--round
|
||||
border 1px solid #e5e5e5
|
||||
background-color transparent
|
||||
border-radius 100%
|
||||
.radio__icon--disabled
|
||||
border 1px solid #c0c4cc
|
||||
background-color #c0c4cc
|
||||
.icon
|
||||
color #c0c4cc
|
||||
&::before
|
||||
content '\e608'
|
||||
.radio__icon--checked
|
||||
border-color #D7592F
|
||||
background-color #D7592F
|
||||
.icon
|
||||
color #fff
|
||||
&::before
|
||||
content '\e608'
|
||||
.input
|
||||
display inline-block
|
||||
// width calc(100% - .8rem)
|
||||
width 100%
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
font-size .13rem
|
||||
color #606266
|
||||
text-indent .05rem
|
||||
background-color #fff
|
||||
border 1px solid #D1D1D1
|
||||
border-radius 4px
|
||||
.select
|
||||
position relative
|
||||
display inline-block
|
||||
width calc(100% - .8rem)
|
||||
height .3rem
|
||||
font-size .13rem
|
||||
color #606266
|
||||
line-height .3rem
|
||||
background-color #fff
|
||||
border 1px solid #D1D1D1
|
||||
border-radius 4px
|
||||
vertical-align top
|
||||
option
|
||||
line-height .3rem
|
||||
.select-wrap
|
||||
position relative
|
||||
display inline-block
|
||||
width calc(100% - .8rem)
|
||||
vertical-align top
|
||||
.input
|
||||
width 100%
|
||||
.select-option
|
||||
position absolute
|
||||
max-height 3.32rem
|
||||
overflow-y auto
|
||||
top calc(.3rem + 8px)
|
||||
left 0
|
||||
width 100%
|
||||
z-index 100
|
||||
background-color #ffffff
|
||||
border 1px solid #d1d1d1
|
||||
border-radius 4px
|
||||
box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
|
||||
li
|
||||
width 100%
|
||||
line-height .3rem
|
||||
height .3rem
|
||||
overflow hidden
|
||||
font-size .13rem
|
||||
color #606266
|
||||
padding 0 .05rem
|
||||
user-select none
|
||||
&:hover
|
||||
background #f5f5f5
|
||||
.fontRed
|
||||
color #D7592F
|
||||
.dropdown_icon_2
|
||||
position: absolute
|
||||
top .08rem
|
||||
right 0.15rem
|
||||
color #bbb
|
||||
width .14rem
|
||||
font-size .14rem
|
||||
line-height .14rem
|
||||
transition transform .3s
|
||||
.message-box__wrapper
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
z-index 2000
|
||||
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.9rem
|
||||
padding-bottom 10px
|
||||
vertical-align middle
|
||||
background-color #fff
|
||||
border-radius 4px
|
||||
border 1px solid #ebeef5
|
||||
font-size 18px
|
||||
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 10px 15px
|
||||
color #606266
|
||||
font-size 14px
|
||||
.message-box__btns
|
||||
padding 5px 15px 0
|
||||
text-align right
|
||||
.message-box__message p
|
||||
color #303133
|
||||
line-height .3rem
|
||||
border-bottom 1px solid #e1e1e1
|
||||
.message-box__input
|
||||
padding-top 15px
|
||||
color #606266
|
||||
.message-box__input .input-cus
|
||||
border 1px solid #dcdfe6
|
||||
padding-right .2rem
|
||||
.keyValue
|
||||
position relative
|
||||
.close_icon
|
||||
position absolute
|
||||
right .05rem
|
||||
top .075rem
|
||||
color #C0C4CC
|
||||
font-size .14rem
|
||||
&::before
|
||||
content '\e66d'
|
||||
.input-cus-wrap
|
||||
position relative
|
||||
display inline-block
|
||||
.close_icon
|
||||
top .1rem
|
||||
.dropdown_icon
|
||||
position relative
|
||||
display inline-block
|
||||
left .07rem
|
||||
font-size .18rem
|
||||
color #ffffff
|
||||
.login_icon
|
||||
position absolute
|
||||
top .12rem
|
||||
right .1rem
|
||||
color #BBBBBB
|
||||
.back_icon
|
||||
font-size .20rem
|
||||
line-height .44rem
|
||||
.delete_icon_2
|
||||
position absolute
|
||||
top .07rem
|
||||
right .1rem
|
||||
color #BBBBBB
|
||||
.modal_item
|
||||
width 3.5rem
|
||||
margin 0 auto
|
||||
.textarea
|
||||
display inline-block
|
||||
width calc(100% - 0.8rem)
|
||||
line-height 0.3rem
|
||||
border 1px solid #d1d1d1
|
||||
border-radius 4px
|
||||
vertical-align top
|
||||
padding 0 .05rem
|
||||
.input_disabled
|
||||
background-color #e1e1e1
|
||||
.select_icon
|
||||
width .2rem
|
||||
height .2rem
|
||||
line-height .2rem
|
||||
text-align center
|
||||
border-radius 100%
|
||||
overflow hidden
|
||||
.selected_icon
|
||||
background-color #d7592f
|
||||
color #fff
|
||||
.unselect_icon
|
||||
background-color #c0c4cc
|
||||
color #c0c4cc
|
||||
/** 按钮 **/
|
||||
.btn
|
||||
min-width .6rem
|
||||
height .4rem
|
||||
// line-height .3rem
|
||||
font-size .15rem
|
||||
color #ffffff
|
||||
background-color #D7592F
|
||||
padding 0 .1rem
|
||||
border-radius 5px
|
||||
.btn-disabled
|
||||
background-color: $gray
|
||||
/** 提交栏 **/
|
||||
.submit-bar
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
position fixed
|
||||
bottom 0
|
||||
width 100%
|
||||
background-color #fff
|
||||
box-shadow 0 0 20px 0 rgba(160,160,160,0.9)
|
||||
.submit-bt
|
||||
flex 1
|
||||
line-height .4rem
|
||||
margin .15rem 0.3rem
|
||||
.wrap2
|
||||
width 100%
|
||||
padding 0.05rem 0.05rem 0.05rem 0.05rem
|
||||
// no
|
||||
.fxrow
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
|
||||
.fxcol
|
||||
flex: 1
|
||||
overflow hidden
|
||||
// no
|
||||
.fxc
|
||||
display: inline-block;
|
||||
width: calc(100% - 0.8rem);
|
||||
height: 0.3rem;
|
||||
line-height: 0.3rem;
|
||||
font-size: 0.13rem;
|
||||
color: #606266;
|
||||
text-indent: 0.05rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d1d1d1;
|
||||
border-radius: 4px;
|
||||
|
||||
[class^="icon-"]
|
||||
display: inline-block
|
||||
height: inherit
|
||||
.search-input
|
||||
margin-right: .15rem
|
||||
_font(.28rem,.53rem,#929292)
|
||||
background: #ffffff
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
.iliblock
|
||||
flex 1
|
||||
margin-left .2rem
|
||||
position relative
|
||||
.filter-scan
|
||||
display: block
|
||||
_ct()
|
||||
right .15rem
|
||||
_wh(.22rem,.22rem)
|
||||
.icon-scan
|
||||
flex 0 0 .22rem
|
||||
_bis('../images/saoma.png',.22rem)
|
||||
.filter-scan-input
|
||||
padding-right .5rem
|
||||
border-bottom 1px solid #d7d7d7
|
||||
.loading-tips
|
||||
_font(.12rem,.23rem,#929292,,center)
|
||||
margin-bottom .12rem
|
||||
.pagination-wrapper
|
||||
display flex
|
||||
justify-content flex-end
|
||||
align-items center
|
||||
.pagination-wrapper .total
|
||||
color: #464646
|
||||
margin-right 0.5rem
|
||||
.van-pagination__item
|
||||
color #464646
|
||||
.van-pagination__item--active
|
||||
background-color #d7592f
|
||||
color #fff
|
||||
.van-pagination__next, .van-pagination__prev
|
||||
padding: 0 20px
|
||||
// 弹窗 + 选择器
|
||||
.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 420px
|
||||
padding 25px
|
||||
vertical-align middle
|
||||
background-color #fff
|
||||
border-radius 4px
|
||||
border 1px solid #ebeef5
|
||||
font-size 18px
|
||||
box-shadow 0 2px 12px 0 rgb(0 0 0 / 10%)
|
||||
text-align left
|
||||
overflow hidden
|
||||
backface-visibility hidden
|
||||
.mask
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
opacity .2
|
||||
background #000
|
||||
z-index 99
|
||||
.msg_item
|
||||
height 50px
|
||||
line-height 50px
|
||||
.label_item
|
||||
display inline-block
|
||||
width 90px
|
||||
font-size 16px
|
||||
line-height inherit
|
||||
.from_item
|
||||
display inline-block
|
||||
width calc(100% - 100px)
|
||||
line-height inherit
|
||||
.from_item .el-select
|
||||
width 100%
|
||||
.from_item .el-input
|
||||
font-size 14px
|
||||
.from_item .el-input__inner
|
||||
height 50px
|
||||
line-height inherit
|
||||
.el-select-dropdown__item span
|
||||
font-size 14px !important
|
||||
.el-select .el-input .el-select__caret
|
||||
line-height 50px
|
||||
.msg_btns
|
||||
height 35px
|
||||
line-height 35px
|
||||
width 300px
|
||||
margin 25px 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
|
||||
::-webkit-scrollbar
|
||||
width 4px
|
||||
::-webkit-scrollbar-track
|
||||
background-color #fff
|
||||
::-webkit-scrollbar-track-piece
|
||||
background-color #e5e5e5
|
||||
::-webkit-scrollbar-thumb
|
||||
display block
|
||||
width 4px
|
||||
height 10px
|
||||
margin 0 auto
|
||||
cursor pointer
|
||||
border-radius 2px
|
||||
background-color #e1e1e1
|
||||
41
src/style/mixin.styl
Normal file
41
src/style/mixin.styl
Normal file
@@ -0,0 +1,41 @@
|
||||
$red = #e74f1a
|
||||
$green = #6CBE8B
|
||||
$yellow = #E9B451
|
||||
$blue = #6798ef
|
||||
$gray = #c9c9c9
|
||||
$fc1 = #464646
|
||||
|
||||
|
||||
//宽高
|
||||
_wh(w, h)
|
||||
width: w
|
||||
height: h
|
||||
|
||||
//字体大小、行高、颜色
|
||||
_font(size,height,color=$fc1,weight=normal,align=left)
|
||||
font-size: size
|
||||
line-height: height
|
||||
color: color
|
||||
font-weight: weight
|
||||
text-align: align
|
||||
|
||||
//flex 布局和 子元素 对其方式
|
||||
_fj(x=space-between,y=center,z=row)
|
||||
display: flex
|
||||
justify-content: x
|
||||
align-items: y
|
||||
flex-direction: z
|
||||
|
||||
// 背景图片地址和大小
|
||||
_bis(url,w,h=auto,x=center,y=center,c=transparent)
|
||||
background-color: c
|
||||
background-position: x y
|
||||
background-size: w h
|
||||
background-image: url(url)
|
||||
background-repeat: no-repeat
|
||||
|
||||
// 定位上下居中
|
||||
_ct()
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
142
src/style/reset.css
Normal file
142
src/style/reset.css
Normal file
@@ -0,0 +1,142 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video, input, button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
/* font-size: 0.14rem;
|
||||
line-height: inherit;
|
||||
color: #464646;
|
||||
font-weight: normal; */
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
*{
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* body {
|
||||
line-height: 1;
|
||||
} */
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* custom */
|
||||
a,a:link,a:visited,a:active {
|
||||
color: #7e8c8d;
|
||||
text-decoration: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html,body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: #ffffff;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
/* max-width: 1366px; */
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
select, option, textarea {
|
||||
appearance: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div, input, select, textarea, button, ul, li {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.userselect {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mgb40 {
|
||||
margin-bottom: .4rem !important;
|
||||
}
|
||||
|
||||
.mgr5 {
|
||||
margin-right: .05rem !important;
|
||||
}
|
||||
|
||||
.mgt10 {
|
||||
margin-top: .1rem !important;
|
||||
}
|
||||
|
||||
.mgl10 {
|
||||
margin-left: .1rem !important;
|
||||
}
|
||||
Reference in New Issue
Block a user