.h5-index {
	width: 100%;
	padding-top: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.image-list {
		width: 100%;
		padding: 16px 16px 0;
		flex: 1;

		.image-item {
			overflow: hidden;
			margin-bottom: 16px;
			position: relative;

			.image {
				width: 100%;
			}

			// 插槽
			.image-list-content {
				width: 100%;
				padding: 16px 0;
				position: absolute;
				bottom: 0;
				left: 0;
				backdrop-filter: saturate(180%) blur(20px);
				-webkit-backdrop-filter: saturate(180%) blur(20px);
				background-color: rgba(255, 255, 255, 0.72);

				.color {
					margin: 0 16px;
					display: flex;
					border-radius: 4px;
					overflow: hidden;

					.color-item {
						flex: 1;
						height: 16px;
					}
				}

				.title {
					font-size: 12px;
					margin: 0 16px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.date {
						display: inline-block;
						padding: 2px 8px;
						margin-right: 4px;
						color: #ffffff;
						background-color: #603dc1cc;
						border-radius: 4px;
					}

					.today {
						background-color: #603dc1cc;
					}
				}
			}
		}

		.info-text {
			font-size: 12px;
			zoom: 80%;
			text-align: center;
		}
	}

	.load-more-btn {
		margin: 10px 0;
		width: 120px;
		height: 39px;
		line-height: 39px;
		text-align: center;
		font-size: 16px;
		color: #ffffff;
		background-color: #000000CC;
		border-radius: 10px;
		cursor: pointer;
	}

	.is-loading-more-text {
		margin: 10px 0;
		text-align: center;
		font-size: 12px;
		line-height: 39px;
		color: #999999;
	}

	.is-no-more-text {
		margin: 10px 0;
		text-align: center;
		font-size: 12px;
		line-height: 39px;
		color: #999999;
	}
}

html.dark {
	.h5-index {
		.image-list {
			.image-item {
				.image-list-content {
					background-color: rgba(0, 0, 0, 0.52);

					.title {
						.date {
							background-color: #858AE3cc;
						}
					}
				}
			}
		}

		.load-more-btn {
			color: #000;
			background-color: #FFFFFFCC;
		}
	}
}