GterForumWeB/src/assets/css/public.scss

// 热门版块标签
.hot-box {
	padding: .34rem 0 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 0.35rem;

	.hot-label {
		border: 0.013333rem solid rgba(215, 215, 215, 1);
		border-radius: 0.16rem;
		font-size: 0.3rem;
		margin: 0 .16rem .24rem 0;
		padding: 0 0.15rem;
		line-height: 0.72rem;
		text-align: center;
		word-break: break-word;

		&.active {
			border: 0.02rem solid #62B1FF;
			color: #62B1FF;
		}
	}
}

//内容层
section {
	padding-top: 0.45rem;
	margin: 0 0.35rem;
}

//帖子内容层
.card-box {
	background-color: #fff;
	padding: 0.4rem;
	border-radius: 0.32rem;
	box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
	margin-bottom: 0.32rem;
	position: relative;

	// 帖子标题
	.top {
		width: 95%;
		max-height: 1.31rem;
		text-align: left;

		.top-label {
			display: inline-block;
			background-color: #000;
			color: #fff;
			height: 0.52rem;
			line-height: 0.52rem;
			font-size: 0.28rem;
			border-radius: 0.16rem;
			padding: 0 0.12rem;
			margin-right: 0.11rem;
		}

		.top-title {
			display: inline;
			font-size: 0.373333rem;
			line-height: 0.65rem;
			color: #000;
		}
	}

	// 帖子内容
	.center {
		padding: 0.3rem 0 0.6rem;

		.center-text {
			font-size: 0.3rem;
			color: #7F7F7F;
			max-height: 1rem;
			line-height: .52rem;
		}

		// 回复可见
		.center-text-visible {
			border-radius: 0.16rem;
			background-color: rgba(242, 242, 242, 0.7);
			padding: 0.28rem;
			text-align: center;
			margin-top: 0.25rem;
			font-size: .32rem;
			color: #aaa;
		}
	}

	// 帖子头像、消息、浏览量
	.bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;



		.bottom-box {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			&:first-of-type {
				margin-right: .2rem;
			}

			.icon-head {
				width: 0.64rem;
				height: 0.64rem;
				border-radius: 0.32rem;
			}

			.bottom-name {
				margin-left: 0.15rem;
				font-size: 0.32rem;
				word-break: break-word;
			}

			.bottom-right {
				display: flex;
				flex-direction: row;
				align-items: center;

				&:last-child {
					margin-left: .4rem;
				}

				div {
					margin-left: 0.1rem;
					font-size: 0.28rem;
				}

				.icon-look {
					width: 0.32rem;
					height: 0.3rem;
				}

				.icon-msg {
					width: 0.32rem;
					height: 0.28rem;
				}
			}
		}
	}
}

// 精华
.rightTop {
	position: absolute;
	top: 0;
	right: 0;

	.rightTop-img {
		width: 1.28rem;
		height: 1.28rem;
		margin-top: -.1rem;
		margin-right: -.1rem;
	}

	// 丝带
	span {
		position: absolute;
		top: 0;
		left: 0;
		transform: rotate(45deg);
		transform-origin: bottom;
		margin-top: 0.05rem;
		margin-left: 0.25rem;
		width: 0.9rem;
		font-size: 0.3rem;
		text-align: center;
		color: #fff;
	}
}



// 广告
.banner-box {
	margin-bottom: 0.32rem;
	width: 100%;
	display: block;
	border-radius: 0.32rem;
}

// 分页
.paging-box {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	margin-bottom: 0.4rem;

	// element组件修改
	.el-pagination {
		padding: 0;
		display: flex;
		align-items: center;

		button {
			&:disabled {
				background-color: transparent;
				opacity: 0.5;
			}
		}

		.btn-next,
		.btn-prev {
			background-color: transparent;

			.el-icon {
				font-size: 0.5rem;
			}
		}
	}

	.el-pager li {
		background-color: transparent;
		font-weight: lighter;
		min-width: 0.48rem;
		height: 0.48rem;
		line-height: 0.48rem;
		border-radius: 0.4rem;

		&.active {
			color: #fff;
			background-color: rgba(98, 177, 255, 1) !important;
		}
	}

}

.paging {
	margin-top: .48rem;

	::v-deep {
		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background: rgba(98, 177, 255, 1);
			border-radius: 50%;
		}

		.el-pagination .btn-next .el-icon,
		.el-pagination .btn-prev .el-icon {
			font-size: .4rem;
		}

		.el-pagination.is-background.el-pagination--small .btn-next,
		.el-pagination.is-background.el-pagination--small .btn-prev,
		.el-pagination.is-background.el-pagination--small .el-pager li {
			border-radius: 50%;

		}
	}
}

.result-empty-box {
	height: 100%;
	width: 100%;
	background: #fff;
	margin: 0 auto;
	border-radius: 0.32rem;

	.result-empty-icon {
		width: 2.04rem;
		height: 2.4rem;
	}
}