css

button::after{
    border:none;
}

.over-hide{
    overflow: hidden;
}

.flex{display: flex;}
.flex.spaceb{justify-content: space-between;}
.flex.spacea{justify-content: space-around;}
.flex.center{justify-content: center;}
.flex.alcenter{align-items: center;}
.flex.alend{align-items:flex-end}
.flex.start{justify-content: flex-start;}
.flex.end{justify-content: flex-end;}
.wrap{flex-direction: row;flex-wrap: wrap;}
.flex-c-c{display:flex;flex-direction: column;align-items: center;}
.col1{width: 100%;}
.col2{width: 50%;}
.col3{width: 33.33%;}
.col4{width: 25%;}
.col5{width:20%;}


.ft12{font-size: 24rpx;}
.ft13{font-size: 26rpx;}
.ft14{font-size: 28rpx;}
.ft15{font-size: 30rpx;}
.ft16{font-size: 32rpx;}
.ft17{font-size: 34rpx;}
.ft18{font-size: 36rpx;}
.ft20{font-size: 40rpx;}
.ft22{font-size: 44rpx;}
.ft24{font-size: 48rpx;}
.ft26{font-size: 52rpx;}
.ft27{font-size: 54rpx;}
.ft28{font-size: 56rpx;}
.ft32{font-size: 64rpx;}
.ft36{font-size: 72rpx;}
.ft40{font-size: 80rpx;}
.ft50{font-size: 100rpx;}
.ft60{font-size: 120rpx;}
.ft80{font-size: 160rpx;}

/*字体加粗*/
.ftw400{font-weight: 400;}
.ftw500{font-weight: 500;}
.ftw600{font-weight: 600;}

.ft-italic{font-style: italic;}

.text-over{ overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.text-over2{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.text-over3{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.text-center{text-align: center;}
.text-right{text-align: right;}
.text-line{text-decoration:line-through;}
.text-line-down{text-decoration: underline;}

.lh16{line-height: 32rpx;}
.lh18{line-height: 36rpx;}
.lh20{line-height: 40rpx;}
.lh22{line-height: 44rpx;}
.lh24{line-height: 48rpx;}
.lh26{line-height: 52rpx;}
.lh28{line-height: 56rpx;}
.lh30{line-height: 60rpx;}
.lh32{line-height: 64rpx;}
.lh36{line-height: 72rpx;}
.lh40{line-height: 80rpx;}

.cl-w{color:#FFFFFF;}
.cl-w9{color:rgba(255,255,255,0.9)}
.cl-w8{color:rgba(255,255,255,0.8)}
.cl-main{color:#2E2F33;}
.cl-default{color:#000000;}
.cl-info2{color:#5C5E66;}
.cl-info{color:#666666;}
.cl-placeholder{color:#CCCCCC;}
.cl-light{color:#E4E6ED;}
.cl-notice{color:#AEB2C1;}
.cl-price{color:#FF3D3D;}
.cl-text1{color: #37B7A6;}
.cl-text2{color: #898989;}
.cl-h{color: #FFDC04;}
.cl-yellow{color:#FFE5AD;}
.cl-green{color:#00C657;}
.cl-manage{color:#5E40FF;}
.cl-orange{color:#FF6600}
.cl-blue{color:#1890FF}
.cl-red{color:#ff0000;}
.cl-hui{color:#999999;}
.cl-fen{color:#FD6DA2;}
.cl-g{color: #34b965;}
.cl-h{color: #c40c24;}
.cl-j{color: #f4d8b0;}

.bg-w{background: #FFFFFF;}
.bg-default{background: #F7F7F7;}
.bg-manage{background: #5E40FF;}
.bg-fen{background:#FD6DA2;}
.bg-lan{background: #100D20}
.bg-green{background: #37B7A6;}
.bg-h{background: #c40c24;}
.mt2{margin-top: 4rpx;}
.mt4{margin-top: 8rpx;}
.mt5{margin-top: 10rpx;}
.mt6{margin-top: 12rpx;}
.mt7{margin-top: 15rpx;}
.mt8{margin-top: 16rpx;}
.mt10{margin-top: 20rpx;}
.mt12{margin-top: 24rpx;}
.mt14{margin-top: 28rpx;}
.mt15{margin-top: 30rpx;}
.mt16{margin-top: 32rpx;}
.mt18{margin-top: 36rpx;}
.mt20{margin-top: 40rpx;}
.mt24{margin-top: 48rpx;}
.mt25{margin-top: 50rpx;}
.mt30{margin-top: 60rpx;}
.mt32{margin-top: 64rpx;}
.mt40{margin-top: 80rpx;}
.mt50{margin-top: 100rpx;}
.mt60{margin-top: 120rpx;}

.mb4{margin-bottom: 8rpx;}
.mb5{margin-bottom: 10rpx;}
.mb7{margin-bottom: 15rpx;}
.mb10{margin-bottom: 20rpx;}
.mb15{margin-bottom: 30rpx;}
.mb16{margin-bottom: 32rpx;}
.mb20{margin-bottom: 40rpx;}
.mb24{margin-bottom: 48rpx;}
.mb25{margin-bottom: 50rpx;}
.mb30{margin-bottom: 60rpx;}
.mb35{margin-bottom: 70rpx;}
.ml3{margin-left: 6rpx;}
.ml4{margin-left: 8rpx;}
.ml5{margin-left: 10rpx;}
.ml7{margin-left: 15rpx;}
.ml10{margin-left: 20rpx;}
.ml15{margin-left: 30rpx;}
.ml20{margin-left: 40rpx;}
.ml25{margin-left: 50rpx;}
.ml30{margin-left: 60rpx;}
.ml40{margin-left: 80rpx;}
.ml50{margin-left: 100rpx;}
.ml60{margin-left: 120rpx;}

.mr5{margin-right: 10rpx;}
.mr7{margin-right: 15rpx;}
.mr10{margin-right: 20rpx;}
.mr15{margin-right: 30rpx;}
.mr20{margin-right: 40rpx;}
.mr25{margin-right: 50rpx;}
.mr30{margin-right: 60rpx;}
.mr60{margin-right: 120rpx;}

/**一般PADDING需要用到的值,其他的不通用的单独设置**/
.pt5{padding-top: 10rpx;}
.pt10{padding-top: 20rpx;}
.pt12{padding-top: 24rpx;}
.pt15{padding-top: 30rpx;}
.pt16{padding-top: 32rpx;}
.pt18{padding-top: 36rpx;}
.pt20{padding-top: 40rpx;}
.pt24{padding-top: 48rpx;}
.pt30{padding-top: 60rpx;}
.pt32{padding-top: 64rpx;}
.pt40{padding-top: 80rpx;}
.pt60{padding-top: 120rpx;}
.pt80{padding-top: 160rpx;}

.pb5{padding-bottom: 10rpx;}
.pb10{padding-bottom: 20rpx;}
.pb12{padding-bottom: 24rpx;}
.pb15{padding-bottom: 30rpx;}
.pb16{padding-bottom: 32rpx;}
.pb20{padding-bottom: 40rpx;}
.pb24{padding-bottom: 48rpx;}
.pb30{padding-bottom: 60rpx;}
.pb32{padding-bottom: 64rpx;}

.pd5{padding: 10rpx;}
.pd10{padding: 20rpx;}
.pd15{padding:30rpx;}
.pd20{padding: 40rpx;}
.pd24{padding: 48rpx;}
.pd30{padding: 60rpx;}
.pd32{padding: 64rpx;}

.plr5{padding:0rpx 10rpx;}
.plr10{padding:0rpx 20rpx;}
.plr15{padding:0rpx 30rpx;}
.plr20{padding:0rpx 40rpx;}
.plr30{padding: 0rpx 60rpx;}
.plr35{padding: 0rpx 70rpx;}
.plr40{padding: 0rpx 80rpx;}
 
 .plt5{padding:10rpx 0rpx;}
 .plt10{padding:20rpx 0rpx;}
 .plt15{padding:30rpx 0rpx;}
 .plt20{padding:40rpx 0rpx;}
 .plt30{padding: 60rpx 0rpx;}
 .plt40{padding: 80rpx 0rpx;}
 
.pr5{padding-right: 10rpx;}
.pr10{padding-right: 20rpx;}
.pr15{padding-right: 30rpx;}
.pr20{padding-right: 40rpx;}
.pr30{padding-right: 60rpx;}

.pl5{padding-left: 10rpx;}
.pl10{padding-left: 20rpx;}
.pl15{padding-left: 30rpx;}
.pl20{padding-left: 40rpx;}
.pl30{padding-left: 60rpx;}

.pd2_10{
    padding: 4rpx 20rpx;
}
.pd5_10{
    padding: 10rpx 20rpx;
}
.pd7_15{
    padding: 14rpx 30rpx;
}
.pd10_15{
    padding: 20rpx 30rpx;
}
.pd12_10{
    padding: 24rpx 20rpx;
}
.pd20_15{
    padding: 40rpx 30rpx;
}
.pd16_15{
    padding: 32rpx 30rpx;
}
.pd16_20{
    padding: 32rpx 40rpx;
}
.pd24_15{
    padding: 48rpx 30rpx;
}
.pd24_20{
    padding: 48rpx 40rpx;
}
.pd16_30{
    padding: 32rpx 60rpx;
}
/* 圆角 */
.border-rad10{
    border-radius:10rpx;
}
.border-rad20{
    border-radius:20rpx;
}
/*缩小*/
.scale6{transform: scale(.6);}
.scale8{transform: scale(.8);}

/*透明度*/
.op3{opacity: .3;}
.op5{opacity: .5;}
.op8{opacity: .8;}
.op9{opacity: .9;}

.picker-view{
    height: 400rpx;
}
.picker-view .item{
    line-height: 100rpx;
    font-size: 32rpx;
    color:#333333;
}

.box{
    width:100%;
    background:#FFFFFF;
    box-shadow:0rpx 8rpx 40rpx 0rpx rgba(0,0,0,0.04);
    border-radius:32rpx;
}
.box.noshadow{
    box-shadow:none;
}

.bd-line{
    height: 2rpx;
    width: 100%;
    background: #E4E6ED;
}
.bd-bottom{
    border-bottom: 2rpx solid rgba(230, 230, 230, 0.8);
}
.bd-left{
    border-left: 2rpx solid rgba(230, 230, 230, 0.8);
}
.border-bottom{
    border-bottom: 1px solid #e1e1e1;
}



.form-footer-h{
    height: 140rpx;
    height: calc(140rpx + constant(safe-area-inset-bottom));
    height: calc(140rpx + env(safe-area-inset-bottom));
}
.form-footer{
    width: 100%;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    background: #FFFFFF;
    box-shadow:0rpx -4rpx 16rpx 0rpx rgba(0,0,0,0.04);
}
.form-footer-main{
    width: 100%;
    height: 100rpx;
}
.form-footer-item{
    padding: 0;
    margin: 0;
    background: #FFFFFF;
    line-height: 1;
    color:#AEB2C1;
}

.btn-big,.btn-manage,.btn-mid,.btn-manage-mid,.btn-small,.btn-mini,.btn-manage-small,.btn-manage-mini{
    width: 100%;
    height: 88rpx;
    border-radius:50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    transition: all 0.4s;
}
.btn-big.dis,.btn-manage.dis,.btn-mid.dis,.btn-manage-mid.dis,.btn-small.dis,.btn-mini.dis,.btn-manage-small.dis,.btn-manage-mini.dis{
    background:#F0F1F5;
    color:#AEB2C1;
}

.btn-manage,.btn-manage-mid,.btn-manage-small,.btn-manage-mini{
    background:#5E40FF;
    color:#FFFFFF;
}
.btn-mid,.btn-manage-mid{
    width: 300rpx;
    height: 80rpx;
    border-radius:40rpx;
    font-size: 28rpx;
}
.btn-manage.plan,.btn-manage-mid.plan,.btn-manage-small.plan,.btn-manage-mini.plan{
    border:2rpx solid #5E40FF;
    background: #FFFFFF;
    color:#5E40FF;
}
.btn-big.plan,.btn-mid.plan,.btn-small.plan,.btn-mini.plan{
    border:2rpx solid #E4E6ED;
    background: #FFFFFF;
    color:#353535;
}
.btn-small,.btn-mini,.btn-manage-small,.btn-manage-mini{
    width: 176rpx;
    font-size: 28rpx;
    height: 64rpx;
    border-radius: 32rpx;
}
.btn-mini,.btn-manage-mini{
    width: 120rpx;
}

 

上一篇:CSS总结4


下一篇:head.css