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

	.index-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90%;

		.image-list {
			width: 100%;
			padding-top: 16px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-row-gap: 16px;
			grid-column-gap: 16px;


			.image-item {
				overflow: hidden;
				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: 4px;
						}
					}

					.title {
						width: auto;
						font-size: 16px;
						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 {
	.pc-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;
		}
	}
}