glhcp/pc/assets/css/common.scss

/** S 背景颜色 **/
.bg-primary { background-color: $--color-primary; }

.bg-white { background-color: $--color-white; }

.bg-body { background-color: $--background-color-base; }
/** E 背景颜色 **/


/** S 字体颜色 **/
.primary { color: $--color-primary; }

.black { color: $--color-black; }

.white { color: $--color-white; }

.normal { color: $--color-text-primary; }

.lighter { color: $--color-text-regular; }

.muted { color: $--color-text-secondary; }
/** E 字体颜色 **/


.border-bottom {
	border-bottom: $--border-base;
}
.border-top {
	border-top: $--border-base;
}

.border-left {
	border-left: $--border-base;
}
.border-right {
	border-right: $--border-base;
}

.border {
	border: $--border-base;
}

// 字体字重
@for $i from 100 through 900 {
	@if $i % 100 == 0 {
		.weight-#{$i} {
			font-weight: $i;
		}
	}
}


/** S 字体大小 **/
.xxl { font-size: 18px; }

.xl { font-size: 17px; }

.lg { font-size: 16px; }

.md { font-size: 15px; }

.nr { font-size: 14px; }

.sm { font-size: 13px; }

.xs { font-size: 12px; }

.xxs { font-size: 11px; }

// 字体大小[19-40]
@for $i from 19 through 50 {
	.font-size-#{$i} {
		font-size: $i + px;
	}
}
/** E 字体大小 **/


// 内、外边距[1-60]
@for $i from 0 through 60 {
	// 只要偶数和能被5整除的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 如：m-30
		.m-#{$i} {
			margin: $i + px;
		}
		
		// 如：p-30
		.p-#{$i} {
			padding: $i + px;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			//如： m-l-6
			// 外边距
			.m-#{$short}-#{$i} {
				margin-#{$long}: $i + px;
			}
			
			//如： p-l-30
			// 内边距
			.p-#{$short}-#{$i} {
				padding-#{$long}: $i + px;
			}
		}
	}
}

// 行内块元素
.inline { display: inline-block; }

// 块元素
.block { display: block; }

// 触手
.pointer { cursor: pointer }


/** S 弹性布局 **/
.flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}

.flex-col {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}

// 定义flex等分
@for $i from 0 through 5 {
	.flex-#{$i} {
		flex: $i;
	}
}

.flex-none { flex: none; }

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

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

.col-baseline {	align-items: baseline; }

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

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

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

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

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

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

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

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

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

/** E 弹性布局 **/


/** S 内容排序方式 **/
.text-left { text-align: left; }

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

.text-right { text-align: right; }
/** E 内容排序方式 **/


/** S 文本行数限制 **/
.line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.line-2 { -webkit-line-clamp: 2; }

.line-3 { -webkit-line-clamp: 3; }

.line-4 { -webkit-line-clamp: 4; }

.line-5 { -webkit-line-clamp: 5; }

.line-2, .line-3, .line-4, .line-5 {
    overflow: hidden;
	word-break: break-all;
    text-overflow: ellipsis; 
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}
/** E 文本行数限制 **/



/* 中划线 */
.line-through {
    text-decoration: line-through;
}

.clearfix:after{
	content: ""; 
	display: block; 
	clear: both; 
	visibility: hidden;  
}  

.wrapper1180 {
	width: 1180px;
	margin: 0 auto;
}