epmet-oper-gov/src/assets/scss/c/function.scss

@import "./config.scss";

/*---------------------------------------------------------------
 |                           公共函数                            |
 ---------------------------------------------------------------*/
// 字体大小
@mixin ff1 {
	font-family: "Gotham", "Helvetica Neue", "Hiragino Sans GB", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", Arial,
		sans-serif;
}
@mixin ff2 {
	font-family: "Open Sans", "PingFang SC", Arial, "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB",
		"WenQuanYi Micro Hei", Arial, sans-serif;
}
@mixin ff3 {
	font-family: Tahoma, Verdana, sans-serif, "simsun", "微软雅黑";
}
// 统一的圆角
@mixin bdrs {
	border-radius: 15px;
}
// 统一的阴影
@mixin bs1 {
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
@mixin bs2 {
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
}
@mixin bs3 {
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
}
@mixin bs4 {
	box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
}
// 定宽居中
@mixin bd_center {
	width: $w1;
	margin-right: auto;
	margin-left: auto;
}
// 清除容器自身浮动
@mixin cs {
	&::after {
		display: block;
		visibility: hidden;
		clear: both;
		overflow: hidden;
		height: 0;
		content: "";
	}
}
// 已知高度的容器在页面中水平垂直居中
@mixin centre {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
// 已知高度的容器在页面中水平垂直居中
@mixin hub {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
// 未知高度容器在页面居中,父元素必须相对定位
@mixin hub2($sel, $w, $h) {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;

	#{$sel} {
		position: absolute;
		top: -50%;
		left: -50%;
		display: block;
	}
}
// 不换行显示省略号
@mixin toe {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-wrap: normal;
}

// 强制文本换行 多行
@mixin toeM($num) {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: $num;
	-webkit-box-orient: vertical;
}
// 图片居中
@mixin img_hub {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;

	img {
		position: absolute;
		top: -50%;
		left: -50%;
		display: block;

		&.hidden {
			position: static;
			visibility: hidden;
		}
	}
}
//遮蔽盒子
@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.1);
}
//居中
@mixin absolute_center {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
// 白色的一闪而过的光芒，展示那种光滑靓丽
@mixin flicker {
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		display: block;
		top: -50px;
		left: -50px;
		width: 1000px;
		height: 1px;
		box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.3);
		background-color: rgba(255, 255, 255, 0.18);
	}

	&:hover {
		&::before {
			transform: rotate(-90deg) translatey(100px);
			transition: all 3s;
		}
	}
}

// 加载组件
.z-loading {
	display: block;
	text-align: center;
	padding: 50px 0;

	.fa-spinner {
		font-size: 50px;
		color: $fc3;
	}
}

//遮蔽盒子
.u-shield {
	@include shield;
}

//清除浮动
.f-cb {
	float: none;
	clear: both;
	height: 0;
}

//清除自身
.f-cs {
	@include cs;
}

.f-hide {
	display: none !important;
}

.f-hide2 {
	display: none;
}

.f-fl {
	float: left;
}

.f-fr {
	float: right;
}

.f-ww {
	@include bd_center;
}

.f-pl-10 {
	padding-left: 10px;
}
//党员积分排行榜
@mixin img123 {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: absolute;
	display: block;
	z-index: 10;
}
@mixin shuzi_123 {
	position: absolute;
	font-size: 16px;
	color: white;
	display: block;
	z-index: 10;
	margin-top: 75px;
}
@mixin img_small12 {
	width: 67.15px;
	height: 67.15px;
	position: absolute;
	display: block;
	top: 4px;
	border-radius: 100%;
}
@mixin img_123 {
	background-color: #ffffff;
	border-radius: 50%;
	position: relative;
	display: block;
	box-shadow: 1px 1px 5px 2px #cecece;
}
@mixin list_12 {
	text-align: left;
	color: #b9b9b9;
	font-size: 12px;
}
@mixin name_123 {
	position: absolute;
	width: 50px;
	font-size: 16px;
	color: black;
	display: block;
	z-index: 10;
	margin-top: 60px;
}
@mixin jifen {
	position: absolute;
	width: 40px;
	font-size: 16px;
	color: black;
	display: block;
	z-index: 10;
	margin-top: 40px;
}
@mixin list {
	list-style-type: none;
	position: absolute;
	padding: 0px;
}

@mixin scrollBar {
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 8px;
        box-shadow: inset 0 0 5px #aaa;
        background: #aaa;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px #aaa;
        border-radius: 8px;
        background: #eee;
    }
}