/*utils 工具*/
/* 颜色 */
.bg-red {
	background-color: $color-red !important;
}

.bg-purple {
	background-color: $color-purple !important;
}

.bg-orange {
	background-color: $color-orange !important;
}

.bg-blue {
	background-color: $color-blue !important;
}

.color-red {
	color: $color-red !important;
}

.color-purple {
	color: $color-purple !important;
}

.color-orange {
	color: $color-orange !important;
}

.color-blue {
	color: $color-blue !important;
}

.text-black {
	color: #000;
}

.text-dark {
	color: #333;
}

.text-deep {
	color: #555;
}

.text-weak {
	color: #b3b3b3;
}

.text-white {
	color: #fff;
}

/*字体*/
.f10 {
	font-size: 10px;
}

.f12 {
	font-size: 12px;
}

.f14 {
	font-size: 14px;
}

.f15 {
	font-size: 15px;
}

.f17 {
	font-size: 17px;
}

.f20 {
	font-size: 20px;
}

.f24 {
	font-size: 24px;
}

/* 文字对齐*/
.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right;
}

/*浮动与清除浮动*/
.fl {
	float: left;
}

.fr {
	float: right;
}

/*#ifdef H5*/
.fix {
	zoom: 1;
}

.fix:after {
	display: table;
	content: '';
	clear: both;
}
/*#endif*/

/*显示*/
.dn {
	display: none;
}

.di {
	display: inline;
}

.db {
	display: block;
}

.dib {
	display: inline-block;
}

.dt {
	display: table;
}
/*#ifdef H5*/
div.dib {
	display: inline;
	zoom: 1;
}
/*#endif*/

.vm {
	vertical-align: middle;
}

.vib {
	display: inline-block;
	vertical-align: middle;
}

/*定位*/
.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}

/*盒子模型*/
@each $typeKey, $type in $spaceTypes {
	@each $sizeKey, $size in $spaceSizes {
		// margin-top:10rpx
		@each $directionKey, $direction in $spaceDirections {
			.#{$typeKey}#{$directionKey}#{$sizeKey} {
				#{$type}-#{$direction}: $size;
			}
		}

		// margin: 10rpx 0;
		.#{$typeKey}x#{$sizeKey} {
			#{$type}-left: $size;
			#{$type}-right: $size;
		}
		.#{$typeKey}y#{$sizeKey} {
			#{$type}-top: $size;
			#{$type}-bottom: $size;
		}

		// margin: 10rpx ;
		.#{$typeKey}a#{$sizeKey} {
			#{$type}: $size;
		}
	}
}
/*按钮禁用*/
.disabled {
	outline: 0 none;
	cursor: default !important;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-pointer-events: none;
	pointer-events: none;
}

/**
 * 
 * 自定义class工具
 * 
*/

.pad {
	padding: 0 30upx;
}
// 格式化页面
.page_box {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-x: hidden;
	background: #ffffff;
}
.scroll-box {
	flex: 1;
	height: 100%;
	position: relative;
}
.content_box {
	flex: 1;
	overflow-y: auto;
}
/*单行文本溢出省略号*/
.one-t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
	overflow: hidden;
	text-overflow: ellipsis;
	 word-break:break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}

/* ==================
          flex布局(colorui里面也有相关基础样式)
 ==================== */
/* x水平排列*/
.x-f {
	display: flex;
	align-items: center;
}
/*x两端且水平居中*/
.x-bc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/*x平分且水平居中*/
.x-ac {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
/*x水平靠上对齐*/
.x-start {
	display: flex;
	align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
	display: flex;
	align-items: flex-end;
}
/*上下左右居中*/
.x-c {
	display: flex;
	justify-content: center;
	align-items: center;
}
/*y竖直靠左*/
.y-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
/*y竖直居中*/
.y-f {
	display: flex;
	flex-direction: column;
	align-items: center;
}
// y竖直两端
.y-b {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}