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;}