LSQZrzyAPP/css/module.css

/**
 * 创建者：王成
 * 创建日期：2022年5月28日
 * 描述：专题首页样式 单独摘出 屏幕适配
 */

/* 顶部统计信息容器样式 */
.cr-panel-count {
	width: 100%;
	height: 90px;
	display: flex;
	flex-direction: row;
}

/* 统计容器所有子节点容器样式 */
.cr-panel-count>* {
	position: relative;
	flex: 1;
	background-color: rgb(36, 63, 109);
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 5px;
}

/* 统计容器最后一个子元素容器样式 */
.cr-panel-count>*:last-child {
	margin-left: 0px;
	margin-right: 5px;
}

/* 统计容器第一个子元素容器样式 */
.cr-panel-count>*:first-child {
	margin-left: 5px;
	margin-right: 0px;
}

/* 统计值动画变量 */
:root {
	--left--from: 10px;
	--left--to: 10px;
}

/* 统计值动画 */
@keyframes www {
	0% {
		left: var(--left--from);
	}

	100% {
		left: var(--left--to);
	}
}

/* 统计数值的样式 */
.cr-panel-count>*>*:nth-child(2) {
	color: rgb(234, 191, 43);
	font-family: "UnidreamLED", sans-serif;
	font-size: 24px;
	position: absolute;
	width: 100px;
	text-align: center;
	bottom: 24px;
	-webkit-animation: www 2s linear infinite alternate;
}

/* 统计标题的样式 */
.cr-panel-count>*>*:nth-child(1) {
	color: rgb(142, 230, 254);
	font-family: "TTTGB-Medium", sans-serif;
	font-size: 16px;
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 50px;
	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
}

/* 统计图片的样式 */
.cr-panel-count>*>*:nth-child(3) {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	width: calc(100% - 20px);
	height: 24px;
	content: url(../img/back/count_bottom_back.png);
}

/* 底部菜单容器 */
.cr-land-menu-panel {
	position: relative;
	flex: 1;
	background-image: url(../img/land/ico_land_expropriate_home.png);
	background-size: 100% 100%;
	margin: 10px;

}

/* 底部菜单通用样式 */
.cr-land-menu {
	position: absolute;
	width: 80px;
	height: 80px;
}

/* 菜单内图片样式 */
.cr-land-menu>img {
	width: 80px;
	height: 80px;
}

/* 菜单内文字样式 */
.cr-land-menu>div {
	position: absolute;
	color: rgb(142, 230, 254);
	font-family: "TTTGB-Medium", sans-serif;
	font-size: 16px;
	width: 100%;
	bottom: 40px;
	text-align: center;
	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
	-webkit-animation: rotate 2s infinite;
}

/* 跳动动画 */
@keyframes rotate {

	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-20px);
	}

	60% {
		-webkit-transform: translateY(-10px);
	}
}

/* 第一个菜单位置 */
.cr-land-menu-a {
	top: 15%;
	left: 10%;
}

/* 第二个菜单位置 */
.cr-land-menu-b {
	right: 20%;
	bottom: 10%;
}

/* 第三个菜单位置 */
.cr-land-menu-c {
	right: 5%;
	top: 90px;
}

/* 页面宽度小于600 */
@media screen and (max-width: 600px) {

	/* 统计标题的样式 */
	.cr-panel-count>*>*:nth-child(1) {
		font-size: 14px;
	}

	/* 统计数值的样式 */
	.cr-panel-count>*>*:nth-child(2) {
		font-size: 16px;
	}

	/* 菜单内文字样式 */
	.cr-land-menu>div {
		font-size: 14px;
	}
}