css 共用样式模板

最新推荐文章于 2021-07-15 06:16:39 发布
笔临
最新推荐文章于 2021-07-15 06:16:39 发布
阅读量716
点赞数
本文链接：https://blog.csdn.net/panhuanqin/article/details/108283745
版权
uni-button:after {
   border:none;
}
.page,uni-page-wrapper,page{
   background: #F7F7F7;
}
.flex{display: flex;}
.flex.space{justify-content: space-between;}
.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;}
.flex.wrap{flex-direction: row;flex-wrap: wrap;}
.flex .col1{width: 100%;}
.flex .col2{width: 50%;}
.flex .col3{width: 33.33%;}
.flex .col4{width: 25%;}
.flex .col5{width:20%;}

.ft12{font-size: 24rpx;}
.ft14{font-size: 28rpx;}
.ft16{font-size: 32rpx;}
.ft18{font-size: 36rpx;}
.ft20{font-size: 40rpx;}
.ft22{font-size: 44rpx;}
.ft24{font-size: 48rpx;}
.ft28{font-size: 56rpx;}
.ft32{font-size: 64rpx;}
.ft36{font-size: 72rpx;}
.ft40{font-size: 80rpx;}
.ft50{font-size: 100rpx;}
.ft80{font-size: 160rpx;}

.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-w{color:#FFFFFF;}
.text-main{color:#333333;}
.text-default{color:#000000;}
.text-info{color:#666666;}
.text-placeholder{color:#CCCCCC;}
.text-notice{color:#999999;}
.text-price{color:#FF6D00;}
.text-load-more{color:#ADAEB3;}
.text-theme{color:#FF6D00}
.text-sign{color:#FF4F4E;}
.text-yellow{color:#FF9B20;}
.text-plus{color:#F2D591;}

.bg-w{background: #FFFFFF;}
.bg-default{background: #F7F7F7;}
.bg-main{background: #FF6D00;}
.bg-yellow{background: #FFB70E;}
.bg-info{background: #F0F0F0;}
.bg-invite{background: #C79A2F;}


/*TAG*/
.tag{padding: 4rpx 10rpx; border-radius: 16rpx; display: inline-flex;}
.tag-hot{background: #FFEAE5;color:#FF3300;font-size: 24rpx;}
.tag-new{background: #E7F9F4;color:#14C993;font-size: 24rpx;}
.tag-info{background: #F0F0F0;color:#333333;font-size: 24rpx;}
.tag-tj{background: #FCE7F3;color:#E3108A;font-size: 24rpx;}
.tag-hot image,.tag-new image,.tag-tj image{width: 24rpx;height: 24rpx;}

.tag-type{width:160rpx;height:64rpx;border-radius:8rpx;line-height: 64rpx;text-align: center;}
.tag-sf{padding: 0 16rpx; height: 40rpx; border-radius: 20rpx; color:#FFFFFF;}
.tag-zk{
   height: 28rpx;
   color:#FFFFFF;
   background: #FF6D00;
   padding: 0 4rpx;
   line-height: 28rpx;
   display: inline-block;
   position: relative;
}
.tag-zk:before{
   content: '';
   position: absolute;
   left: -12rpx;
   width: 0;
   height: 0;
   border-bottom: 14rpx solid transparent;
   border-top: 14rpx solid transparent;
   border-right: 14rpx solid #FF6D00;
}

.tag-top{
   padding: 6rpx 10rpx;
   border-radius: 4rpx;
   background: #FF6D00;
   color:#FFFFFF;
   font-size: 24rpx;
}
.tag-new-ad{
   padding: 6rpx 10rpx;
   border-radius: 4rpx;
   background: #FFFFFF;
   color:#FF6D00;
   border:2rpx solid #FF6D00;
   font-size: 24rpx;
}

.mt10{margin-top: 10rpx;}
.mt15{margin-top: 15rpx;}
.mt20{margin-top: 20rpx;}
.mt30{margin-top: 30rpx;}
.mt40{margin-top: 40rpx;}
.mt50{margin-top: 50rpx;}
.mt60{margin-top: 60rpx;}
.mt80{margin-top: 80rpx;}
.mt240{margin-top: 240rpx;}

.mb10{margin-bottom: 10rpx;}
.mb15{margin-bottom: 15rpx;}
.mb20{margin-bottom: 20rpx;}
.mb30{margin-bottom: 30rpx;}
.mb40{margin-bottom: 40rpx;}
.mb50{margin-bottom: 50rpx;}
.mb60{margin-bottom: 60rpx;}

.ml10{margin-left: 10rpx;}
.ml15{margin-left: 15rpx;}
.ml20{margin-left: 20rpx;}
.ml30{margin-left: 30rpx;}
.ml40{margin-left: 40rpx;}
.ml50{margin-left: 50rpx;}
.ml60{margin-left: 60rpx;}

.mr10{margin-right: 10rpx;}
.mr15{margin-right: 15rpx;}
.mr20{margin-right: 20rpx;}
.mr30{margin-right: 30rpx;}
.mr40{margin-right: 40rpx;}
.mr50{margin-right: 50rpx;}
.mr60{margin-right: 60rpx;}

/**一般PADDING需要用到的值,其他的不通用的单独设置**/
.pt10{padding-top: 10rpx;}
.pt20{padding-top: 20rpx;}
.pt30{padding-top: 30rpx;}
.pt40{padding-top: 40rpx;}
.pt60{padding-top: 60rpx;}
.pt90{padding-top: 90rpx;}
.pt100{padding-top:100rpx;}
.pt120{padding-top:120rpx;}
.pt160{padding-top:160rpx;}

.pd20{padding: 20rpx;}
.pd30{padding:30rpx;}
.pd40{padding: 40rpx;}

.plr30{padding:0rpx 30rpx;}
.plr40{padding:0rpx 40rpx;}
.plr60{padding: 0rpx 60rpx;}

.pr30{padding-right: 30rpx;}

.pl20{padding-left: 20rpx;}
.pl30{padding-left: 30rpx;}
.pl50{padding-left: 50rpx;}

.pb20{padding-bottom: 20rpx;}
.pb30{padding-bottom: 30rpx;}
.pb40{padding-bottom: 40rpx;}
/*圆角通用的设置*/
.bdr8{border-radius: 8rpx;}
.bdr16{border-radius: 16rpx;}
.bdr32{border-radius: 32rpx;}

/*投影设置*/

.box-shadow{
   box-shadow:0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
}
.box-shadow-top{
   box-shadow:0rpx -4rpx 12rpx 0rpx rgba(0,0,0,0.04);
}
.box-shadow-bottom{
   box-shadow:0rpx 4px 8rpx 0rpx rgba(0,0,0,0.06);
}

/*缩小*/
.scale6{
   transform: scale(.6);
}
.scale8{
   transform: scale(.8);
}

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

/*按钮*/
.btn-rec-qiang{
   width:64rpx;
   height:64rpx;
   box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
   border-radius:32rpx;
   line-height: 64rpx;
}
.btn-gz{
   width:128rpx;
   height:64rpx;
   border-radius:8rpx;
   border:2rpx solid #FF6D00;
}
.btn-qxgz{
   width:152rpx;
   height:64rpx;
   border-radius:8rpx;
   border:2rpx solid #CCCCCC;
}

.btn-dis{
   width:100%;
   height:96rpx;
   background:#CCCCCC;
   box-shadow:0rpx 8rpx 32rpx 0rpx rgba(204,204,204,0.3);
   border-radius:48rpx;
}

.btn-main{
   width:100%;
   height:96rpx;
   background:#FF6D00;
   box-shadow:0rpx 8rpx 32rpx 0rpx  rgba(255,109,0,0.3);
   border-radius:48rpx;
}

.btn-mini-main,.btn-mini-main-dis{
   width:120rpx;
   height:64rpx;
   background:#FF6D00;
   box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
   border-radius:32rpx;
   text-align: center;
   line-height: 64rpx;
   font-size: 28rpx;
   font-weight: 600;
   color:#FFFFFF;
}
.btn-mini-main-dis{
   background:#CCCCCC;
   box-shadow:0rpx 8rpx 16rpx 0rpx rgba(204,204,204,0.3);
}

.btn-small-empty{
   background: #FFFFFF;
   border:2rpx solid #CCCCCC;
   font-size: 28rpx;
   font-weight: 600;
   color:#333333;
   line-height: 76rpx;
   width: 208rpx;
   height: 80rpx;
   text-align: center;
   border-radius: 40rpx;
}
.btn-small{
   background: #FF6D00;
   font-size: 28rpx;
   font-weight: 600;
   color:#FFFFFF;
   line-height: 80rpx;
   width: 208rpx;
   height: 80rpx;
   text-align: center;
   box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
   border-radius: 40rpx;
}


.btn-mid-empty{
   background: #FFFFFF;
   border:2rpx solid #CCCCCC;
   font-size: 36rpx;
   font-weight: 600;
   color:#333333;
   line-height: 92rpx;
   width: 330rpx;
   height: 96rpx;
   text-align: center;
   border-radius: 48rpx;
}
.btn-mid{
   background: #FF6D00;
   font-size: 36rpx;
   font-weight: 600;
   color:#FFFFFF;
   line-height: 96rpx;
   width: 330rpx;
   height: 96rpx;
   text-align: center;
   box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
   border-radius: 48rpx;
}

/*商家LOGO*/
.unio2o-store-logo{
   width:60rpx;
   height:60rpx;
   box-shadow:0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
   border-radius:8rpx;
}
/*用户头像*/
.face60{
   width: 120rpx;
   height: 120rpx;
   border-radius: 60rpx;
}
.face50{
   width: 100rpx;
   height: 100rpx;
   border-radius: 50rpx;
}
.face80{
   width: 160rpx;
   height: 160rpx;
   border-radius: 80rpx;
}
.face30{
   width: 60rpx;
   height: 60rpx;
   border-radius: 30rpx;
}
.face40{
   width: 80rpx;
   height: 80rpx;
   border-radius: 40rpx;
}
/*产品等相关尺寸的设置*/
.wh120{
   width: 240rpx;
   height: 240rpx;
}
.wh100{
   width: 200rpx;
   height: 200rpx;
}
.wh80{
   width: 160rpx;
   height: 160rpx;
}

.w50{
   width: 100rpx;
}

.wh120 image{
   width: 100%;
   height: 240rpx;
}
.ws120{
   width: calc(100% - 240rpx);
}
.ws100{
   width: calc(100% - 200rpx);
}
.w80{
   width: 160rpx;
}
.ws80{
   width: calc(100% - 160rpx);
}


.wh20{
   width: 40rpx;
   height: 40rpx;
}
.wh24{
   width: 48rpx;
   height: 48rpx;
}
.wh30{
   width: 60rpx;
   height: 60rpx;
}
.wh40{
   width: 80rpx;
   height: 80rpx;
}

.unio2o-load-more .loading{
   display: inline-block;
   animation:rotating 0.8s linear infinite
}

.bdlt{
   border-left: 2rpx solid #E6E6E6;
}

/*高于底部的SCROLL*/
.unio2o-nav-body{
   position: relative;
   z-index: 2; 
}
.unio2o-nav{
   height: 100rpx;
   white-space: nowrap; display: flex;
}
.unio2o-nav .item{
   display: inline-block;
   margin-right: 60rpx;
   height: 100rpx;
   font-size: 32rpx;
   position: relative;
   color:#333333;
}
.unio2o-nav .item.on{
   color:#000000;
   font-weight: 600;
   font-size: 36rpx;
}
.unio2o-nav .item.on .bg-main{
   position: absolute;
   bottom: 10rpx;
   width:40rpx;
   height:8rpx;
   border-radius:4rpx;
   left: calc(50% - 20rpx);
}

.line{
   width: 100%;
   height: 2rpx;
   background: #E6E6E6;
}




.unio2o-page-has-bg{
   position: relative;
}
.unio2o-page-has-bg .unio2o-main{
   position: relative;
   z-index: 2;
}
.unio2o-page-has-bg .unio2o-jb-bg{
   height:320rpx;
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   background:linear-gradient(360deg,rgba(245, 246, 247, 1) 0%,rgba(255,109,0,1) 100%)
}

.qrcode-img.big{
   width: 320rpx;
   height: 320rpx;
}
.qrcode-img{
   width: 240rpx;
   height: 240rpx;
}

.opacity5{
   opacity: .5;
}

.opacity2{
   opacity: .2;
}
.opacity8{
   opacity: .8;
}

.empty-img{
   width: 240rpx;
   height: 240rpx;
}

.over-hidden{
   overflow: hidden;
}