epmet-resi-rizhao/assets/scss/c/mx.scss

/*---------------------------------------------------------------
 |                           公共函数                            |
 ---------------------------------------------------------------*/
@import "./conf";

// 页面主体定宽居中 body center
@mixin bct1 {
	width: 672rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
}

@mixin bct2 {
	width: 672rpx;
	margin-right: auto;
	margin-left: auto;
}

// 字体大小
@mixin fs1 {
	font-size: 10px;
}
@mixin fs2 {
	font-size: 12px;
}
@mixin fs3 {
	font-size: 14px;
}
@mixin fs4 {
	font-size: 16px;
}
@mixin fs5 {
	font-size: 20px;
}
@mixin fs6 {
	font-size: 24px;
}
@mixin fs7 {
	font-size: 32px;
}
@mixin fs8 {
	font-size: 40px;
}
@mixin fs9 {
	font-size: 48px;
}

// 统一的圆角
@mixin bdrs {
	border-radius: 2rpx;
}

// 统一的阴影
@mixin bs1 {
	box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
}
@mixin bs2 {
	box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.16);
}
@mixin bs3 {
	box-shadow: 0 6rpx 18rpx 0 rgba(0, 0, 0, 0.22);
}

// 清除容器自身浮动
@mixin cs {
	&::after {
		display: block;
		visibility: hidden;
		clear: both;
		overflow: hidden;
		height: 0;
		content: "";
	}
}

// 不换行显示省略号
@mixin toe {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-wrap: normal;
}

// 强制文本换行 多行
@mixin toeM($num) {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	-webkit-line-clamp: $num;
	-webkit-box-orient: vertical;
}

// 强制文本换行
@mixin wwb {
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
}

// 强制文本换行 多行
@mixin ico_right($w, $line: 1px, $color: #fff) {
	$width: $w * 0.6;

	&::before {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: $width;
		height: $width * 0.6;
		border-left: $line solid $color;
		border-bottom: $line solid $color;
		transform: rotate(-45deg) translateX($width * 0.15) translateY(-$width * 0.1);
	}
}

// 强制文本换行 多行
@mixin ico_error($w, $line: 1px, $color: #fff) {
	$width: $w * 0.6;

	&::before,
	&::after {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: $width;
		height: $line;
		background-color: $color;
	}

	&::before {
		transform: rotate(-45deg);
	}

	&::after {
		transform: rotate(45deg);
	}
}

// 无法选择文字
@mixin usn {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

// 绝对定位居中
@mixin hub {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

//遮蔽盒子
@mixin shield {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8rpx);
}

// 文章页，适配
@mixin article {
	@include fs2;
	line-height: 40rpx;
	color: $fc2;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: 14px !important;
		color: $c1 !important;
		line-height: 30px !important;

		a,
		li,
		ol,
		p,
		pre,
		span,
		ul {
			color: $c1 !important;
		}
	}

	a,
	li,
	ol,
	p,
	pre,
	span,
	ul {
		font-size: 12px !important;
		color: $fc2 !important;
		line-height: 20px !important;
	}

	img {
		display: block;
		margin-bottom: 10rpx;
		max-width: 100%;
	}
}