kairos_miniapp/pages/expert/index.scss

page {
	background-color: rgba(247, 249, 252, 1);
	padding-bottom: 200rpx;
}

.head {
	height: 400rpx;
	background: linear-gradient(rgba(0, 86, 90, 1), rgba(0, 123, 127, 1));
	color: white;

	.icon {
		width: 120rpx;
		aspect-ratio: 1;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		font-size: 50rpx;
	}

	.t-1 {
		font-weight: 700;
		font-size: 45rpx;
		margin-top: 20rpx;
	}

	.t-2 {
		font-size: 24rpx;
	}
}

.padding {
	padding: 30rpx;

	.c-1 {
		background: linear-gradient(rgba(0, 33, 33, 1), rgba(0, 106, 106, 1));
		padding: 60rpx 30rpx 50rpx;
		color: white;
		border-radius: 30rpx;
		margin-bottom: 30rpx;

		.num {
			font-size: 60rpx;
			font-weight: 700;
		}

		.tip {
			margin-top: 40rpx;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	.btn {
		padding: 50rpx 0;
		background-color: rgba(29, 120, 116, 1);
	}

	.service-card {
		width: 100%;
		background-color: #fff;
		border-radius: 12px;
		padding: 16px;
		box-sizing: border-box;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		margin-top: 30rpx;

		.flex-align {
			display: flex;
			align-items: center;
		}

		.header {
			.icon {
				width: 32px;
				height: 32px;
				background-color: #f0f5f0; // 图标背景色
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 8px;
			}

			.title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}
		}

		.content {
			margin-top: 12px;

			.row {
				display: flex;
				justify-content: space-between;
				margin-top: 6px;

				.label {
					font-size: 14px;
					color: #666;
				}

				.time {
					font-size: 14px;
					font-weight: 600;
					color: #18a74f; // 绿色
				}
			}
		}

		.status {
			display: flex;
			align-items: center;
			margin-top: 12px;

			.dot {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: #18a74f;
				margin-right: 6px;
			}

			.text {
				font-size: 12px;
				color: #18a74f;
			}
		}
	}

	.emergency-card {
		background: rgba(255, 235, 238, 1);
		border-radius: 16rpx;
		padding: 32rpx;
		margin-top: 30rpx;
		gap: 30rpx;
		display: flex;
		align-items: flex-start;
		--color: rgba(198, 40, 40, 1);
		color: var(--color);


		.icon {
			width: 90rpx;
			aspect-ratio: 1;
			background-color: rgba(186, 26, 26, 0.15);
			border-radius: 20rpx;
		}

		.t-1 {
			font-weight: 700;
			font-size: 34rpx;
			margin-bottom: 20rpx;
		}

		.num {
			font-weight: 700;
			font-size: 40rpx;
		}

		.item {
			font-size: 28rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;

			&::before {
				content: "";
				display: block;
				width: 8rpx;
				height: 8rpx;
				background-color: var(--color);
				border-radius: 50%;
			}
		}
	}

	.service {
		background-color: white;
		--color: black;

		.icon {
			background-color: rgba(0, 106, 106, 0.1);
		}
	}

	.express {
		background-color: white;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-top: 30rpx;

		.item {
			gap: 30rpx;
			margin-top: 40rpx;

			.icon {
				width: 100rpx;
				aspect-ratio: 1;
				border-radius: 50%;
				color: white;
				font-weight: 700;
				background: linear-gradient(rgba(29, 120, 116, 1), rgba(46, 139, 139, 1));
			}

			.t-1 {
				font-weight: 700;
			}

			.t-2 {
				font-size: 28rpx;
				color: rgba(69, 70, 78, 1);
			}

			.t-3 {
				font-size: 24rpx;
				color: rgba(69, 70, 78, 1);
			}
		}
	}
}