uniapp ----样式整合(随意自用版)
<style>
@import url("static/css/icons.css");
body {
background-color: #F6F7FB;
}
.content {
margin: 0 20rpx;
clear: both;
}
.container {
width: 100%;
font-size: 28rpx;
}
.placeholderClass {
color: #A6A6A6;
font-size: 28rpx;
}
.wordWarp {
word-wrap: break-word;
word-break: break-all;
}
.masks {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #2F2F2F;
opacity: 0.8;
z-index: 99;
}
.kuangs {
width: 90%;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 100);
position: fixed;
top: 30%;
z-index: 999;
}
.kuangbtn {
width: 316rpx;
height: 92rpx;
line-height: 92rpx;
border-radius: 60rpx 0px 0px 60rpx;
background-color: rgba(246, 247, 251, 100);
color: rgba(47, 47, 47, 100);
font-size: 14px;
text-align: center;
border: 1px solid rgba(47, 47, 47, 100);
}
.kuangbtn1 {
border-radius: 0px 60rpx 60rpx 0px;
background-color: rgba(47, 47, 47, 100);
color: #fff;
}
.topAbu {
top: 88rpx;
}
.guanzhu {
width: 125rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 62rpx;
background-color: rgba(85, 85, 85, 100);
color: rgba(255, 255, 255, 100);
text-align: center;
}
.btnsm {
width: 104rpx;
height: 52rpx;
line-height: 52rpx;
border-radius: 60rpx;
border: 1px solid rgba(47, 47, 47, 100);
}
.boRadius8 {
border-radius: 8rpx;
}
.boRadius120 {
border-radius: 120rpx;
}
.boRadius60 {
border-radius: 60rpx;
}
.boRadiusP50 {
border-radius: 50%;
}
.boxSize {
box-sizing: border-box;
}
.paddingA20 {
padding: 20rpx;
}
.paddingA30 {
padding: 30rpx;
}
.paddingA40 {
padding: 40rpx;
}
.paddT20 {
padding-top: 20rpx;
}
.paddT30 {
padding-top: 30rpx;
}
.paddT40 {
padding-top: 40rpx;
}
.paddT50 {
padding-top: 50rpx;
}
.paddB20 {
padding-bottom: 20rpx;
}
.paddB30 {
padding-bottom: 30rpx;
}
.paddB40 {
padding-bottom: 40rpx;
}
.paddB50 {
padding-bottom: 50rpx;
}
.paddK40 {
padding: 40rpx;
}
.paddK20 {
padding: 20rpx;
}
.paddL10 {
padding-left: 10rpx;
}
.paddL20 {
padding-left: 20rpx;
}
.paddL40 {
padding-left: 40rpx;
}
.paddL60 {
padding-left: 60rpx;
}
.paddL80 {
padding-left: 80rpx;
}
.paddR20 {
padding-right: 20rpx;
}
.paddR40 {
padding-right: 40rpx;
}
.display {
display: flex;
}
.displayWarp {
flex-wrap: wrap;
justify-content: left;
}
.aliJust {
align-items: center;
justify-content: space-between;
}
.justCenter {
justify-content: center;
align-items: center;
}
.arvImg {
width: 180rpx;
height: 180rpx;
}
.img160 {
width: 160rpx;
height: 160rpx;
}
.img145 {
width: 145rpx;
height: 145rpx;
}
.imgz {
width: 100%;
height: 100%;
}
.AdDcenter {
align-items: center;
}
.swiper {
height: 100%;
}
scroll-view ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
.fitnessTitle {
padding: 20rpx 40rpx;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 100);
justify-content: center;
}
.searchFit {
width: 125rpx;
height: 62rpx;
line-height: 62rpx;
border-radius: 60rpx;
background-color: rgba(47, 47, 47, 100);
color: rgba(255, 255, 255, 100);
font-size: 30rpx;
text-align: center;
}
.searTitle {
align-items: center;
justify-content: space-between;
width: 100%;
height: 83rpx;
line-height: 83rpx;
background-color: #F6F7FB;
border-radius: 62rpx;
padding-left: 30rpx;
}
.leftImg {
width: 100%;
height: 250rpx;
border-radius: 8rpx 8rpx 0px 0px;
}
.toppBorder {
border: 1px solid #CCCCCC;
padding: 4rpx;
height: 40rpx;
}
.kuangz {
height: 60rpx;
line-height: 60rpx;
border-radius: 62rpx;
background-color: rgba(255, 255, 255, 100);
color: #2F2F2F;
border: 2rpx solid rgba(47, 47, 47, 100);
justify-content: center;
}
.widP100 {
width: 100%;
}
.widP96 {
width: 96%;
}
.widP90 {
width: 90%;
}
.widP85 {
width: 85%;
}
.widP80 {
width: 80%;
}
.widP70 {
width: 70%;
}
.widP75 {
width: 75%;
}
.widP65 {
width: 65%;
}
.widP60 {
width: 60%;
}
.widP55 {
width: 55%;
}
.widP50 {
width: 50%;
}
.widP47 {
width: 47%;
}
.widP45 {
width: 45%;
}
.widP40 {
width: 40%;
}
.widP30 {
width: 30%;
}
.widP25 {
width: 25%;
}
.widP20 {
width: 20;
}
.bgColorfff {
background-color: #fff;
}
.bgColorF6F7FB {
background-color: #F6F7FB;
}
.marCenter {
margin: 0 auto;
}
.marT6 {
margin-top: 6rpx;
}
.marT10 {
margin-top: 10rpx;
}
.marT15 {
margin-top: 15rpx;
}
.marT20 {
margin-top: 20rpx;
}
.marT30 {
margin-top: 30rpx;
}
.marT40 {
margin-top: 40rpx;
}
.marT60 {
margin-top: 60rpx;
}
.marT80 {
margin-top: 80rpx;
}
.marT100 {
margin-top: 100rpx;
}
.marT140 {
margin-top: 140rpx;
}
.margin10 {
margin: 20rpx 0;
}
.marL20 {
margin-left: 20rpx;
}
.marL40 {
margin-left: 40rpx;
}
.marB20 {
margin-bottom: 20rpx;
}
.marB40 {
margin-bottom: 40rpx;
}
.marR20 {
margin-bottom: 20rpx;
}
.marR40 {
margin-bottom: 40rpx;
}
.marB60 {
margin-bottom: 60rpx;
}
.marB100 {
margin-bottom: 100rpx;
}
.marB140 {
margin-bottom: 140rpx;
}
.marB200 {
margin-bottom: 200rpx;
}
.floatR {
float: right;
}
.iconSize6 {
width: 12rpx;
height: 12rpx;
}
.iconSize10 {
width: 20rpx;
height: 20rpx;
}
.iconSize12 {
width: 25rpx;
height: 25rpx;
}
.iconSize14 {
width: 29rpx;
height: 29rpx;
}
.iconSize16 {
width: 33rpx;
height: 33rpx;
}
.iconSize20 {
width: 40rpx;
height: 40rpx;
}
.iconSize45 {
width: 45rpx;
height: 45rpx;
}
.iconSize24 {
width: 50rpx;
height: 50rpx;
}
.iconSize28 {
width: 56rpx;
height: 56rpx;
}
.iconSize30 {
width: 62rpx;
height: 62rpx;
}
.iconSize40 {
width: 83rpx;
height: 83rpx;
}
.iconSize50 {
width: 104rpx;
height: 104rpx;
}
.iconSize60 {
width: 125rpx;
height: 125rpx;
}
.iconSize26 {
font-size: 54rpx;
}
.fontSize10 {
font-size: 20rpx;
}
.fontSize12 {
font-size: 24rpx;
}
.fontSize14 {
font-size: 28rpx;
}
.fontSize16 {
font-size: 32rpx;
}
.fontSize18 {
font-size: 36rpx;
}
.fontSize20 {
font-size: 40rpx;
}
.fontSize24 {
font-size: 48rpx;
}
.fontSize26 {
font-size: 52rpx;
}
.fontSize28 {
font-size: 56rpx;
}
.fontBold {
font-weight: bold;
}
.FontLeft {
text-align: left;
}
.FontCenter {
text-align: center;
}
.FontRight {
text-align: right;
}
.widHei36 {
width: 75rpx;
height: 75rpx;
border-radius: 50%;
}
.widHei50 {
width: 104rpx;
height: 104rpx;
border-radius: 50%;
}
.widHei70 {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
border: 4px solid rgba(246, 247, 251, 100);
}
.linHeight40 {
line-height: 40rpx;
}
.linHeight60 {
line-height: 60rpx;
}
.linHeight80 {
line-height: 80rpx;
}
.colorColor {
color: #A6A6A6;
}
.colorCor999 {
color: #999999;
}
.colorCor555 {
color: #555555;
}
.colorCor757575 {
color: #757575;
}
.colorCD {
color: #CDCDCD;
}
.colorFF4A4A {
color: #FF4A4A;
}
.fontWei {
font-weight: bold;
}
.slh {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.checkStyle {
width: 41rpx;
height: 41rpx;
margin-right: 20rpx;
}
.orCOdeWh {
width: 480rpx;
height: 480rpx;
}
.btnBig {
width: 90%;
height: 91rpx;
line-height: 91rpx;
border-radius: 62rpx;
background-color: rgba(47, 47, 47, 100);
color: rgba(255, 255, 255, 100);
font-size: 33rpx;
text-align: center;
font-family: Arial;
margin: 104rpx auto;
}
.btnFix {
position: fixed;
bottom: 60rpx;
left: 40rpx;
margin: 0;
}
.kongBtn {
background-color: #fff;
border: 1px solid #101010;
color: #101010;
}
</style>