public.css

*{
    box-sizing: border-box;
}
page,
view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
    box-sizing: border-box;
}
image {
    max-width: 100%;
    display: inline-block;
    position: relative;
    z-index: 0;
}

.over_hidden{
    overflow: hidden;
}
.contant{
    box-sizing: border-box;
    
}
.text_left{
    text-align: left;
}
.text_right{
    text-align: right;
}
.text_center{
    text-align: center;
}
/* 单行文字超出显示省略号 */
.text_overflow{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}
/* 多行文字超出显示省略号 */
.text_2overflow{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.gradient_ff1a2f{
    background: -moz-linear-gradient(left, #ff8057 0%, #ff1a2f 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,#ff8057), color-stop(100%,#ff1a2f));
    background: -webkit-linear-gradient(left, #ff8057 0%,#ff1a2f 100%);
    background: -o-linear-gradient(left, #ff8057 0%,#ff1a2f 100%);
    background: -ms-linear-gradient(left, #ff8057 0%,#ff1a2f 100%);
    background: linear-gradient(to right, #ff8057 0%,#ff1a2f 100%);
}
.gradient_hei{
    background: -moz-linear-gradient(left, #454545 0%, #191919 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,#454545), color-stop(100%,#191919));
    background: -webkit-linear-gradient(left, #454545 0%,#191919 100%);
    background: -o-linear-gradient(left, #454545 0%,#191919 100%);
    background: -ms-linear-gradient(left, #454545 0%,#191919 100%);
    background: linear-gradient(to right, #454545 0%,#191919 100%);
}
.gradient_huang{ 
    background: -moz-linear-gradient(left, #fde2b3 0%, #fed185 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,#fde2b3), color-stop(100%,#fed185));
    background: -webkit-linear-gradient(left, #fde2b3 0%,#fed185 100%);
    background: -o-linear-gradient(left, #fde2b3 0%,#fed185 100%);
    background: -ms-linear-gradient(left, #fde2b3 0%,#fed185 100%);
    background: linear-gradient(to right, #fde2b3 0%,#fed185 100%);
}
.gradient_lan{
        background: -moz-linear-gradient(left, #366cb3 0%, #4690f1 100%);
        background: -webkit-gradient(linear, left, right, color-stop(0%,#366cb3), color-stop(100%,#4690f1));
        background: -webkit-linear-gradient(left, #366cb3 0%,#4690f1 100%);
        background: -o-linear-gradient(left, #366cb3 0%,#4690f1 100%);
        background: -ms-linear-gradient(left, #366cb3 0%,#4690f1 100%);
        background: linear-gradient(to right, #366cb3 0%,#4690f1 100%);
    }
/* 弹性布局 */
.dis_flex{
    display: flex;
}
.dis_sb{
    justify-content: space-between;
}
.dis_center{
    justify-content: center;
}
.dis_around{
    justify-content: space-around;
}
.dis_start{
    justify-content: flex-start;
}
.dis_end{
    justify-content: flex-end ;
}
.align_center{
    align-items: center;
}
.flex_wrap{
    flex-wrap:wrap ;
}
.dis_flex1{
    flex: 1;
}
.flex_nowrap{
    flex-wrap:nowrap;
}
/* 圆角 */
.b_radius50{
    border-radius: 50%;
}
.b_radius20px{
    border-radius: 20rpx;
}
.b_radius44px{
    border-radius: 44rpx;
}
/* 背景色 */
.bg_468ff1{
    background-color: #468ff1;
}
.bg_fc5c2f{
    background-color: #fc5c2f;
}
.bg_white{
    background-color: #FFFFFF;
}
.bg_f0f0f0{
    background-color: #f0f0f0;
}
.bg_999999{
    background-color: #999999;
}
.bg_ff003b{
    background-color: #ff003b;
}
.bg_366CB3{
    background-color: #366CB3;
}


/* 字体大小 */
.font_weight{
    font-weight: bold;
}
.font_s36{
    font-size: 36rpx;
}
.font_s32{
    font-size: 32rpx;
}
.font_s30{
    font-size: 30rpx;
}
.font_s28{
    font-size: 28rpx;
}
.font_s26{
    font-size: 26rpx;
} 
.font_s24{
    font-size: 24rpx;
}
.font_s22{
    font-size: 22rpx;
}
.font_s20{
    font-size: 20rpx;
}
.font_s18{
    font-size: 18rpx;
}
.font_s16{
    font-size: 16rpx;
}
/* 字体颜色 */
.text_ff8057{
    color: #ff8057;
}
.text_366cb3{
    color: #366cb3;
}
.text_fedd02{
    color:#fedd02;
}
.text_666666{
    color:#666666;
}
.text_bb3430{
    color: #bb3430;
}
.text_c1c1c1{
    color:#c1c1c1;
}
.text_333333{
    color:#333333;
}
.text_222222{
    color:#222222;
}
.text_ff1c30{
    color: #ff1c30;
}
.text_ff003b{
    color:#ff003b;
}
.text_bb3430{
    color: #bb3430;
}
.text_999999{
    color:#999999;
}

.text_white{
    color: #FFFFFF;
}
.text_0cba7a{
    color:#0cba7a;
}
.text_179fee{
    color: #179fee;
}

/* 边距 */
.margin0_auto{
    margin: 0 auto;
}
.margin_right30{
    margin-right: 30rpx;
}
.margin_sx20{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.margin_sx30{
    margin-top: 30rpx;
    margin-bottom: 30rpx;
}
.margin_zy30{
    margin-left: 30rpx;
    margin-right: 30rpx;
}
.margin_zy20{
    margin-left: 20rpx;
    margin-right: 20rpx;
}
.margin_zy10{
    margin-left: 10rpx;
    margin-right: 10rpx;
}
.margin_30{
    margin:30rpx;
}
.margin_top30{
    margin-top: 30rpx;
}
.margin_top20{
    margin-top: 20rpx;
}
.margin_top10{
    margin-top: 10rpx;
}
.margin_bottom10{
    margin-bottom: 10rpx;
}
.margin_bottom20{
    margin-bottom: 20rpx;
}
.margin_bottom30{
    margin-bottom: 30rpx;
}
.margin_right20{
    margin-right: 20rpx;
}
.margin_z100{
    margin-left: 100rpx;
}
.margin0{
    margin:0;
}
.padding_top54{
    padding-top: 54rpx;
}
.padding_top20{
    padding-top: 20rpx;
}
.padding_top30{
    padding-top: 30rpx;
}
.padding_zy22{
    padding-left: 22rpx;
    padding-right: 22rpx;
}
.padding_sx30{
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}
.padding_bottom20{
    padding-bottom: 20rpx;
}
.padding_bottom30{
    padding-bottom: 30rpx;
}
.padding_right10{
    padding-right: 10rpx;
}
.padding_sx10{
    padding-top: 10rpx;
    padding-bottom: 10rpx;
}
.padding_sx20{
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}
.padding_zy30{
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.padding_zy62{
    padding-left: 66rpx;
}
.padding_zy20{
    padding-left: 20rpx;
    padding-right: 20rpx;
}
.padding_zy10{
    padding-left: 10rpx;
    padding-right: 10rpx;
}
.padding0{
    padding:0;
}
.padding_20{
    padding: 20rpx;
}
.padding_30{
    padding: 30rpx;
}
.padding_10{
    padding: 10rpx;
}
.padding_l10{
    padding-left: 2rpx;
}
/* 宽高 */
.width_720rpx{
    width:690rpx;
}
.width_15{
    width:15%;
}
.width_20{
    width:20%;
}
.width_70{
    width:70%;
}
.width_50{
    width:50%;
}
.width_60{
    width:60%;
}
.width_40{
    width:40%;
}
.width_30{
    width:30%;
}
.width_100{
    width:100%;
}
.height_100{
    height:100%;
}
/* 边框 */
.border_bottome1e1e1{
    border-bottom:1rpx solid #e1e1e1;
}
.border_tope1e1e1{
    border-top:1rpx solid #e1e1e1;
}
.border_e1e1e1{
    border:1rpx solid #e1e1e1;
}
.border_ff003b{
    border:1rpx solid #ff003b;
}
.border_366cb3{
    border:1rpx solid #366cb3;
}
/* 行高 */
.line_height50{
    line-height: 50rpx;
}
/* 边框阴影 */
.b_shadow{
     box-shadow: 3px 4px 20rpx 1rpx #bfb3b3; 
}

/*  -- flex弹性布局 -- */

.flex {
    display: flex;
}
.flex_inline {
    display:inline-flex;
}
.basis-sxs {
    flex-basis: 10%;
}

.basis-xs {
    flex-basis: 20%;
}

.basis-30 {
    flex-basis: 30%;
}

.basis-sm {
    flex-basis: 40%;
}

.basis-df {
    flex-basis: 50%;
}

.basis-lg {
    flex-basis: 60%;
}

.basis-70 {
    flex-basis: 70%;
}

.basis-xl {
    flex-basis: 80%;
}

.flex-sub {
    flex: 1;
}

.flex-twice {
    flex: 2;
}

.flex-treble {
    flex: 3;
}

.flex-direction {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-stretch {
    align-items: stretch;
}

.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: flex-center;
}

.self-end {
    align-self: flex-end;
}

.self-stretch {
    align-self: stretch;
}

.align-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

/* 定位 */
.display_IB{
    display: inline-block;
}
.position_R{
    position: relative;
}
.position_A{
    position: absolute;
}
.position_F{
    position: fixed;
}
.position_S{
    position: sticky;
}
/* 浮动 */
.fl{
    float: left;
}
.fr{
    float: right;
}
.cl{
    clear: both;
}
/* 船货帮项目主题色 */
.chb_liner{
    background-image: linear-gradient(90deg, 
            #179fee 0%, 
            #47e7ff 100%);
}
.chb_bg_179fee{
    background-color: #179fee;
}
.chb_bg_f8{
    background-color: #f8f8f8;
}
原文地址:https://www.cnblogs.com/lilamisu/p/13832016.html