qa-prevention-xgf-app/styles/home_style.scss

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #0037ff;
	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #0037ff;
		top: 0;
		z-index: 9999;
	}
}
.wui_banner {
	height: 507upx;
	position: relative;
	overflow: hidden;
	.wui-bar {
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: flex-end;
		z-index: 9999;
		position: absolute;
		width: 100%;
		.search-form {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 100upx;
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			font-size: 24upx;
			color: #333333;
			display: flex;
			align-items: center;
			margin: 0 30upx;
			padding: 0 30upx;
			.cuIcon-search {
				color: rgba(255, 255, 255, 0.5);
				margin-right: 16upx;
				font-size: 28upx;
			}
			input {
				color: rgba(255, 255, 255, 0.5);
				flex: 1;
				padding-right: 30upx;
				height: 64upx;
				line-height: 64upx;
				font-size: 26upx;
				background-color: transparent;
				.phcolor {
					color: rgba(255, 255, 255, 0.5);
				}
			}
		}
		.icon-ui {
			color: #fff;
			font-size: 42upx;
			margin-right: 22upx;
		}
	}
	.banner_img {
		z-index: 1;
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.home-apps {
	position: relative;
	top: -180upx;
	background-color: #fff;
	padding: 30upx 20upx;
	border-radius: 40upx;
	margin: 0 30upx;
	display: flex;
	flex-wrap: wrap;
	.home-apps-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-grow: 0;
		width: 25%;
		.text {
			margin: 10upx 0;
			font-size: 28upx;
			text-align: center;
			width: 140upx;
		}
		.home-apps-item-img {
			width: 136upx;
			height: 136upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.home-message {
	position: relative;
	top: -160upx;
	height: 120upx;
	background-color: #fff;
	border-radius: 40upx;
	margin: 0 30upx;
	padding: 0 30upx;
	display: flex;
	align-items: center;
	.home-title {
		width: 54px;
		height: 54px;
		margin-right: 10upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.home-content {
		font-size: 28upx;
		flex: 1;
	}
	.home-more {
		color: #ccc;
		font-size: 26upx;
	}
}
.home-letters {
	position: relative;
	top: -140upx;
	background-color: #fff;
	border-radius: 40upx;
	margin: 0 30upx;
	padding: 30upx;

	.letters-title {
		width: 80px;
		height: 21px;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.letters-content {
		.letters-item {
			border-bottom: 1upx solid #e5e5e5;
			padding: 20upx 0;
			&:last-child {
				border: none;
			}
			.lable {
				font-size: 30upx;
				white-space: nowrap;
			}
			.font {
				font-size: 28upx;
				color: #666;
			}
			.letters-title {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				width: 100%;
				.color-red {
					color: #e50d0d;
					font-weight: 700;
				}
				.color-org {
					color: #ff5806;
					font-weight: 700;
				}
				.color-nomal {
					color: #e5a60d;
					font-weight: 700;
				}
			}
			.letters-sub-title {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				width: 100%;
				font-size: 30upx;
				margin: 10upx 0;
			}
			.letters-date {
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 30upx;
			}
		}
	}
}
.home-line {
	position: relative;
	top: -70upx;
	text-align: center;
	color: #ccc;
}

.sub_grid {
	display: flex;
	flex-wrap: wrap;
	.grid_z {
		z-index: 999;
	}
	.grid_item {
		width: calc(47% - 4upx);
		display: block;
		padding: 30upx 0;
		color: #fff;
		margin-left: 2%;
		margin-top: 2%;
		text-align: center;
		background-image: linear-gradient(
			to bottom right,
			rgba(0, 138, 255, 1),
			rgba(91, 74, 255, 1)
		);
		border: 1upx solid #2084d9;
		position: relative;
		.grid_text {
			display: flex;
			padding-left: 30upx;
			.grid_tut {
				width: 85%;
			}
		}
	}
}

.message_list {
	padding: 30upx;
	.message_item {
		position: relative;
		.message_flex {
			width: calc(100% - 30upx);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.fontstyle {
				font-size: 32upx;
				line-height: 60upx;
			}
			.font0 {
				font-size: 30upx;
				color: #666;
				flex-basis: 72upx;
			}
			.message_time {
				font-size: 26upx;
				color: #666;
				line-height: 60upx;
			}
		}
	}
}
.message_item.arrow:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	margin: auto;
	width: 30upx;
	height: 30upx;
	color: #b4b4b4;
	content: "\e6a3";
	text-align: center;
	font-size: 34upx;
	font-family: cuIcon;
	line-height: 30upx;
}