common.less

移动端（PC端）公共样式（less格式）
@ce1: #e1e1e1;
@c99: #999999;
@c9a: #9a9a9a;
@c8a: #8aa2bf;
@8e8: #8e8e8e;
@cff: #ffbd80;
@cfe: #fe8233;
@cfc: #fc7103;

.tac {text-align: center;}
.rel {position: relative;}
.abs {position: absolute;}
.dsn {display: none;}
// 垂直居中
.v-m {
&:after {
display: inline-block;
content: '';
vertical-align: middle;
height: 100%;
}
&>* {
vertical-align: middle;
}
}
// 水平居中（宽度知道的前提下）
.subject{
width: 1000px;
display: block;
margin: auto;
}
.fcc {
display: flex;
justify-content: center;
align-items: center;
}
.fsbc {
display: flex;
justify-content: space-between;
align-items: center;
}
.fsac {
display: flex;
justify-content: space-around;
align-items: center;
}
.ifcc {
display: inline-flex;
justify-content: center;
align-items: center;
}
.fl-wp{
flex-wrap: wrap;
}
.fl-dir-c{
flex-direction: column;
}
.fl-dir-r{
flex-direction: row;
}
// 字体样式设置
.cfff {
color: #fff;
}

.ccc {
color: #ccc;
}
.ce1 {
color: @ce1;
}
.c999 {
color: @c99;
}
.c666 {
color: #666;
}
.c9a {
color: @c9a;
}
.c8a {
color: @c8a;
}
.cff {
color: @cff;
}
.cfe {
color: @cfe;
}
.cfc {
color: @cfc;
}
.ce29 {
color:#e2941a;
}
.cbbc {
color: #bbcea5;
}
.c95c {
color: #95c0ea;
}
.cffb {
color: #ffb978;
}
.cfaa {
color: #faa0b5;
}
.c80d {
color: #80dae6;
}
.blue {
color: #7bafe1;
}
.red{
color: red;
}

// 字体设置
.f8 {
font-size: 8px;
}
.f10 {
font-size: 10px;
}
.f12 {
font-size: 12px;
}
.f16 {
font-size: 16px;
}
.f18 {
font-size: 18px;
}
.f20 {
font-size: 20px;
}
.f25 {
font-size: 25px;
}
.font-we{
font-weight: bold;
}

// margin
.mg-top-5 {
margin-top: 5px;
}
.mg-top-10 {
margin-top: 10px;
}
.mg-top-15 {
margin-top: 15px;
}
.mg-top-20 {
margin-top: 20px;
}
.mg-top-30 {
margin-top: 30px;
}
.mg{
margin: 10px 0;
}
// padding
// 左右
.pd-lr-16 {
padding: 0 16px;
}
.pd-left-16 {
padding-left: 16px;
}
// 边框样式
.brd{
border: 1px solid;
}
// 删除线样式设置
.li-th{
text-decoration: line-through;
}
// 背景色样式设置
.bg-or{
background: orange;
}
.bg-re{
background: red;
}
.bg-bl{
background: blue;
}
.bg-dr{
background: #9B2F34;
}
仅供参考，欢迎补充