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
	}