|
/* 间距 */
|
.mt-5{
|
margin-top: 5px;
|
}
|
.mt-10{
|
margin-top: 10px;
|
}
|
.mt-15{
|
margin-top: 15px;
|
}
|
.mt-20{
|
margin-top: 20px;
|
}
|
.mt-30{
|
margin-top: 30px;
|
}
|
|
.ml-5{
|
margin-left: 5px;
|
}
|
.ml-10{
|
margin-left: 10px;
|
}
|
.ml-15{
|
margin-left: 15px;
|
}
|
.ml-20{
|
margin-left: 20px;
|
}
|
|
.mr-0{
|
margin-right: 0;
|
}
|
.mr-5{
|
margin-right: 5px;
|
}
|
.mr-10{
|
margin-right: 10px;
|
}
|
.mr-15{
|
margin-right: 15px;
|
}
|
.mr-20{
|
margin-right: 20px;
|
}
|
|
.mb-0{
|
margin-bottom: 0!important;
|
}
|
.mb-5{
|
margin-bottom: 5px;
|
}
|
.mb-10{
|
margin-bottom: 10px;
|
}
|
.mb-20{
|
margin-bottom: 20px;
|
}
|
.mb-30{
|
margin-bottom: 30px;
|
}
|
|
/* 字体 */
|
.font-10{
|
font-size: 10px;
|
}
|
.font-12{
|
font-size: 12px;
|
}
|
.font-13{
|
font-size: 13px;
|
}
|
.font-14{
|
font-size: 14px;
|
}
|
.font-15{
|
font-size: 15px;
|
}
|
.font-16{
|
font-size: 16px;
|
}
|
.font-17{
|
font-size: 17px;
|
}
|
.font-18{
|
font-size: 18px;
|
}
|
.font-20{
|
font-size: 20px;
|
}
|
.font-24{
|
font-size: 24px;
|
}
|
|
/* 颜色 */
|
.blue{
|
color: #518EFF;
|
}
|
.white{
|
color: #FFFFFF;
|
}
|
.gray{
|
color: #a5abaf;
|
}
|
.light-gray{
|
color: #a7a7a7;
|
}
|
.dark-gray{
|
color: #3a3f3f;
|
}
|
.red{
|
color:#DE5A5A;
|
}
|
.green{
|
color:#1FB713;
|
}
|
.purple{
|
color: #5A73DE;
|
}
|
.blueness{
|
color: #58C4C0;
|
}
|
.orange{
|
color: #E89D44;
|
}
|
.yellow{
|
color: #E6E15F;
|
}
|
.font-dark{
|
color: #111111;
|
}
|
.font-bold{
|
font-weight: 700;
|
}
|
|
/* 布局 */
|
.flex{
|
display: flex;
|
}
|
.flex-1{
|
flex: 1;
|
}
|
.flex-v{
|
flex-direction: column;
|
}
|
.flex-wrap{
|
flex-wrap: wrap;
|
}
|
.align-left{
|
align-items: baseline;
|
}
|
.align-center{
|
align-items: center;
|
}
|
.justify-between{
|
justify-content: space-between;
|
}
|
.justify-center{
|
justify-content: center;
|
}
|
.justify-start{
|
justify-content: flex-start;
|
}
|
.justify-end{
|
justify-content: flex-end;
|
}
|
.justify-around{
|
justify-content: space-around;
|
}
|
.block{
|
display: block;
|
}
|
.placeholder{
|
color: #999999;
|
}
|
.left{
|
text-align: left;
|
}
|
.center{
|
text-align: center;
|
}
|
.right{
|
text-align: right;
|
}
|
|
/* 默认蓝色按钮 */
|
.blue-btn{
|
background: #518EFF;
|
border: 0;
|
color: #FFFFFF;
|
font-size: 16px;
|
line-height: 42px;
|
}
|
.red-btn{
|
background: #DE5A5A;
|
border: 0;
|
color: #FFFFFF;
|
font-size: 16px;
|
line-height: 42px;
|
}
|
/* 蓝色边框白底按钮 */
|
.white-btn{
|
background: #FFFFFF;
|
border: 1px solid #518EFF;
|
color: #518EFF;
|
font-size: 16px;
|
line-height: 42px;
|
}
|
/* 蓝色圆形加减按钮 */
|
.blue-btn-circle{
|
height: 24px;
|
width: 24px;
|
line-height: 24px;
|
box-sizing: border-box;
|
font-size: 14px!important;
|
border-radius: 50%!important;
|
background: #518EFF;
|
border-radius: 4px;
|
color: #FFFFFF;
|
}
|
.blue-outline-btn-circle{
|
height: 24px;
|
width: 24px;
|
line-height: 22px;
|
box-sizing: border-box;
|
font-size: 12px!important;
|
border-radius: 50%;
|
border: 2px solid #518EFF;
|
color: #518EFF;
|
}
|
.small-btn{
|
width: 90px;
|
line-height: 30px;
|
font-size: 14px;
|
border-radius: 20px;
|
text-align: center;
|
}
|
|
/* 固定底部 */
|
.sticky-footer{
|
position: fixed;
|
bottom: 15px;
|
left: 10px;
|
right: 10px;
|
}
|
|
/* 输入框 */
|
.input-group-row{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 48px;
|
border-bottom: 1px solid #EDEAF4;
|
font-size: 14px;
|
}
|
.input-group-row .label{
|
padding-right: 10px;
|
}
|
.input-group-row .label .require{
|
color: #d20808;
|
padding-left: 4px;
|
}
|
.input-group-row input{
|
flex: 1;
|
font-size: 14px;
|
text-align: right;
|
}
|
.input-group-row .right-text{
|
flex: 1;
|
text-align: right;
|
}
|
.input-group-row .right-text .radio{
|
transform: scale(0.65);
|
margin-left: 10px;
|
}
|
.input-group-row .right-text .iconfont{
|
vertical-align: middle;
|
margin-left: 4px;
|
}
|
.input-group-row .right-text .tag{
|
background: #F2f2f2;
|
color: #333;
|
padding: 4px 8px;
|
margin-left: 8px;
|
border-radius: 2px;
|
font-size: 14px;
|
}
|
