uniapp 常用基本样式base.css

base.css：

/*每个页面公共css */
.f12{font-size: 24rpx;}
.f13{font-size: 26rpx;}
.f14{font-size: 28rpx;}
.f15{font-size: 30rpx;}
.f16{font-size: 32rpx;}
.f18{font-size: 36rpx;}
.f19{font-size: 38rpx;}
.f20{font-size: 40rpx;}
.f24{font-size: 48rpx;}
.f27{font-size: 54rpx;}
.f29{font-size: 58rpx;}

.fb{font-weight: bold;}

.absolute{position: absolute;}
.relative{position: relative;}

.clo9{color:#999;}
.cloc{color:#ccc;}
.clof{color:#fff;}
.clo95{color: #959595;}
.red{color:#fe3738;}
.blue{color:blue;}
.bgf{background-color: #fff;}
.bgf9{background-color: #f9f9f9;}

.h10{height:20rpx;}
.h46{height:92rpx;}
.h52{height: 104rpx;}
.h60{height: 120rpx;}
.h90{height: 180rpx;}

.lh0{line-height: 0rpx;}
.lh30{line-height: 60rpx;}

/*对齐*/
.center{text-align:center}
.tleft{text-align:left;}
.tright{text-align:right;}

.centerLine{text-decoration: line-through;}

/*宽高比列*/
.w24{width:48rpx;}
.w100{width:100%}
.h100{width:100%}
.wh100{width:100%;height:100%;}
.wh10{width:20rpx;height:20rpx;}
.wh12{width:22rpx;height:22rpx;}
.wh13{width:26rpx;height:26rpx;}
.wh18{width:36rpx;height:36rpx;}
.wh20{width:40rpx;height:40rpx;}
.wh21{width:42rpx;height:42rpx;}
.wh22{width:44rpx;height:44rpx;}
.wh24{width:48rpx;height:48rpx;}
.wh30{width:60rpx;height:60rpx;}
.wh33{width:66rpx;height:66rpx;}
.wh35{width:70rpx;height:70rpx;}
.wh41{width:82rpx;height:82rpx;}
.wh85{width:170rpx;height:170rpx;}
.wh90{width:180rpx;height:180rpx;}

.br4{border-radius: 8rpx;}
.br5{border-radius: 10rpx;}
.br8{border-radius: 16rpx;}
.br12{border-radius: 24rpx;}
.br14{border-radius: 28rpx;}
.br50{border-radius: 50%;}
	
.m2{margin:4rpx;}
.m5{margin:10rpx;}
.m10{margin:20rpx;}
.m20{margin:40rpx;}
.m22{margin:44rpx;}
.ml4{margin-left:8rpx;}
.ml5{margin-left:10rpx;}
.ml8{margin-left:16rpx;}
.ml10{margin-left:20rpx;}
.ml12{margin-left:24rpx;}
.ml15{margin-left:30rpx;}
.ml20{margin-left:40rpx;}
.mt2{margin-top:4rpx;}
.mt5{margin-top:10rpx;}
.mt6{margin-top:12rpx;}
.mt10{margin-top:20rpx;}
.mt12{margin-top:24rpx;}
.mt15{margin-top:30rpx;}
.mt16{margin-top:32rpx;}
.mt20{margin-top:40rpx;}
.mt24{margin-top:48rpx;}
.mt28{margin-top:56rpx;}
.mt30{margin-top:60rpx;}
.mt40{margin-top:80rpx;}
.mt50{margin-top:100rpx;}
.mr5{margin-right:10rpx;}
.mr10{margin-right:20rpx;}
.mr15{margin-right:30rpx;}
.mb5{margin-bottom:10rpx;}
.mb10{margin-bottom:20rpx;}
.mb16{margin-bottom:32rpx;}
.mb20{margin-bottom:40rpx;}

.p5{padding: 10rpx;}
.p10{padding: 20rpx;}
.p12{padding: 24rpx;}
.p15{padding: 30rpx;}
.p20{padding: 40rpx;}
.p22{padding: 44rpx;}
.pr10{padding-right: 20rpx;}
.pr15{padding-right: 30rpx;}
.pl10{padding-left: 20rpx;}
.pl15{padding-left: 30rpx;}
.pl20{padding-left: 40rpx;}
.pt15{padding-top: 30rpx;}
.pt40{padding-top: 80rpx;}
.pb10{padding-bottom:20rpx;}
.pb16{padding-bottom:32rpx;}

.p0_10{padding:0 20rpx;}

/*文本超出加省略:1,2,3行*/
.text_deal,.text_deal_1{overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:1;/*控制行数*/-webkit-box-orient:vertical;word-break:break-all;}
.text_deal_2{overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;/*控制行数*/-webkit-box-orient:vertical;word-break:break-all;}
.text_deal_3{overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:3;/*控制行数*/-webkit-box-orient:vertical;word-break:break-all;}
/*文本超出不换行，自动省略号*/
.text_overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/*设置弹性盒子*/
.flex_box,.flexBox{display:flex}
/*弹性盒子垂直排列*/
.flex_row{display:flex;flex-direction:row;}
.flex_column{display:flex;flex-direction:column;}
/*弹性盒子列居中*/
.align_center,.alignCenter{display:flex;align-items:center;}
/*弹性盒子完全居中，子元素完全居中*/
.flex_center,.flexCenter{display:flex;justify-content:center;align-items:center;}
.flex_between,.flexBetween{display:flex;justify-content:space-between;align-items:center;}
.flex_around{display:flex;justify-content:space-around;align-items:center;}
.flex_center_column{display:flex;justify-content:center;align-items:center;flex-direction:column;}
/*弹性盒子的宽度自适应宽度*/
.flex_05{flex:0.5;}
.flex_1{flex:1;}
.flex_2{flex:2;}
.flex_3{flex:3;}
.flex_4{flex:4;}
.flex_5{flex:5;}

//网格布局
.grid_2{
    display: grid;
    align-items:center;flex-wrap:wrap;
    grid-template-columns: 1fr 1fr;
}
.grid_3{
    display: grid;
    align-items:center;flex-wrap:wrap;
    grid-template-columns: 1fr 1fr 1fr;
}
.grid_4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid_5{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid_gap_10{
    grid-gap: 20rpx 20rpx;
}
.g10{grid-gap: 20rpx;}
.g12{grid-gap: 24rpx;}
.g20{grid-gap: 40rpx;}