公共样式

// 公共颜色
.orangr {
    color: #ff702e;
}

.orange {
    color: #ff702e;
}

.bg-orangr {
    background: #ff702e;
}

// 下划线
.bd-bottom {
    border-bottom: 1px solid #ededed;
}

.bd-gray {
    border-bottom: 1px solid#f5f5f5;
}

.bg-gray1 {
    background: #f4f4f4;
}

.black {
    color: #a2a5a8;
}

.h1 {
    height: 1px;
}

.gray1 {
    color: #797d82;
}

.red {
    color: #c03131;
}

.bg-red {
    background: #b92b2b;
}

// 灰条
.ht {
    border: 1px solid#f4f4f4;
    height: 9px;
    background: #f4f4f4;
}

// 公共样式2D
.lable2D {
    color: #ffffff;
    height: 16px;
    width: 18px;
    background-color: #d4d3d9;
    display: inline-block;
    line-height: 16px;
    margin-left: 7px;
    text-align: center;
}

// 字体省略公共样式 
.ell {
    // display: block;
    // 文本超出省略
    text-overflow: ellipsis; // 隐藏周围其他内容
    white-space: nowrap; // 溢出隐藏
    overflow: hidden;
    width: 250px;
}

// 共同公共样式
// pc常用公共样式
// 透明背景
.op {
    opacity: 0.5;
}

// 自动适应宽
.wa {
    width: calc((100vw - 33px)/3);
}

// 小圆角
.r {
    border-radius: 3px;
}

// 圆
.rr {
    border-radius: 50%;
}

// 去边框
.qb {
    border: none;
    outline: none;
}

// 底部
.b {
    bottom: 0;
}

// 顶部
.t {
    top: 0;
}

// 左浮
.fl {
    float: left;
}

//   右浮
.fr {
    float: right;
} //   清除浮动
.clear:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

//   溢出隐藏
.ovh {
    overflow: hidden;
}

// 溢出自动
.ova {
    overflow: auto;
}

// 移动端常用公共样式
// 字体颜色
.gray1 {
    color: #525252;
}

//灰色的边框
.bd {
    border: 1px solid gray;
}

//100%的高
.h100pc {
    height: 100%;
}

//100%的宽
.w100pc {
    width: 100%;
}

//隐藏元素
.dsn {
    display: none;
}

//字体加粗
.bold {
    font-weight: bold;
}

//字体减粗
.fw400 {
    font-weight: 400;
}

//传统盒子模型
.bzb {
    box-sizing: border-box;
}

//固定定位
.fixed {
    position: fixed;
}

//相对定位
.rel {
    position: relative;
}

//固定定位
.abs {
    position: absolute;
}

//单行文本水平居中
.tac {
    text-align: center;
}

//单行文本水平居右
.tar {
    text-align: right;
}

// 字体颜色设置
//红色
.red {
    color: #ff5f16;
}

//灰色
.gray {
    color: #adadad;
}

//白色
.fff {
    color: #ffffff;
}

//背景颜色
.bg-green {
    background: green;
}

.bg-gray {
    background: gray;
}

.bg-fff {
    background: #ffffff;
}

.bg-black {
    background: #222426;
}

.bg-red {
    background: #f05045;
}

// 高度
.h10 {
    height: 10px;
}

.h20 {
    height: 20px;
}

.h26 {
    height: 26px;
}

.h30 {
    height: 30px;
}

.h40 {
    height: 40px;
}

.h50 {
    height: 50px;
}

.h60 {
    height: 60px;
}

.h70 {
    height: 70px;
}

.h80 {
    height: 80px;
}

.h90 {
    height: 90px;
}

.h100 {
    height: 100px;
}

// 宽
.w10 {
    width: 10px;
}

.w20 {
    width: 20px;
}

.w26 {
    width: 26px;
}

.w30 {
    width: 30px;
}

.w40 {
    width: 40px;
}

.w50 {
    width: 50px;
}

.w60 {
    width: 60px;
}

.w70 {
    width: 70px;
}

.w80 {
    width: 80px;
}

.w90 {
    width: 90px;
}

.w100 {
    width: 100px;
}

.w160 {
    width: 160px;
}

// 行高
.lh15 {
    line-height: 1.5;
}

.lh10 {
    line-height: 10px;
}

.lh20 {
    line-height: 20px;
}

.lh29 {
    line-height: 29px;
}

.lh30 {
    line-height: 30px;
}

.lh40 {
    line-height: 40px;
}

.lh50 {
    line-height: 50px;
}

.lh60 {
    line-height: 60px;
}

.lh70 {
    line-height: 70px;
}

.lh80 {
    line-height: 80px;
}

.lh90 {
    line-height: 90px;
}

.f26 {
    font-size: 26px;
}

// (12) 字体大小
@0px: 0px; // margin-left
.font(@n, @i: 6) when (@i =< @n) {
    .f@{i} {
        font-size: @i+@0px;
    }
    .font(@n, (@i + 2)); // +2得到的结果是1,3,5,7
    // .mg-l(@n, (@i + 2));
}

.font(36);
// (13) margin-left
@0px: 0px; // margin-left
.mg-l(@n, @i: 1) when (@i =< @n) {
    .mg-l-@{i} {
        margin-left: @i+@0px;
    }
    .mg-l(@n, (@i + 1)); // +2得到的结果是1,3,5,7
    // .mg-l(@n, (@i + 2));
}

.mg-l(50);
// (13) margin-right
@0px: 0px; // margin-right
.mg-r(@n, @i: 1) when (@i =< @n) {
    .mg-r-@{i} {
        margin-right: @i+@0px;
    }
    .mg-r(@n, (@i + 1)); // +2得到的结果是1,3,5,7
    // .mg-r(@n, (@i + 2));
}

.mg-r(50);
// (14) margin-top
.mg-t(@n, @i: 1) when (@i =< @n) {
    .mg-t-@{i} {
        margin-top: @i+@0px;
    }
    .mg-t(@n, (@i + 1));
}

.mg-t(60);
// 内边距-右
.pd-l(@n, @i: 1) when (@i =< @n) {
    .pd-l-@{i} {
        padding-left: @i+@0px;
    }
    .pd-l(@n, (@i + 1));
}

.pd-l(40);
//内边距-上
.pd-t(@n, @i: 1) when (@i =< @n) {
    .pd-t-@{i} {
        padding-top: @i+@0px;
    }
    .pd-t(@n, (@i + 1));
}

.pd-t(40);
//内边距-右
.pd-r(@n, @i: 1) when (@i =< @n) {
    .pd-r-@{i} {
        padding-right: @i+@0px;
    }
    .pd-r(@n, (@i + 1));
}

.pd-r(40);
//内边距-下
.pd-b(@n, @i: 1) when (@i =< @n) {
    .pd-b-@{i} {
        padding-bottom: @i+@0px;
    }
    .pd-b(@n, (@i + 1));
}

.pd-b(50);
// flex相关
// 所有元素水平居中,垂直居中
.fcc {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 行内所有元素居中
.ifcc {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

// 垂直居中,两端对齐
.flex-sb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

// 垂直居中,分散对齐
.flex-sa {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

// 剩余空间分配
.fg1 {
    flex-grow: 1;
}

.fg2 {
    flex-grow: 2;
}

// 纵向排列
// 所有元素垂直居中
.fdcc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

// 单个组合模式:
// 进入弹性布局模式:
.flex {
    display: flex;
}

// 默认情况下就是这个垂直靠左
.fdc {
    display: flex;
    flex-direction: column;
}

// 原点
.jc-start {
    justify-content: flex-start;
}

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

// 水平居中
.jc-center {
    justify-content: center;
}

// 两端对齐
.jc-sb {
    justify-content: space-between;
}

// 水平分散
.jc-sa {
    justify-content: space-around;
}

// 垂直居中
.ai-center {
    align-items: center;
}


/* //单行溢出省略号 */
.ohen {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* 多行溢出隐藏 */
.owen {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}