hldy_app_mini/pages/NursingNew/component/nurse/bigindex.css

.super-card {
	display: flex;
	width: 100%;

	.super-card-container {
		background-blend-mode: screen;
		isolation: isolate;
		overflow: hidden;
		margin-left: 10rpx;
		width: 1450rpx;
		border-left: 0;
		position: relative;
		border-radius: 30rpx;
		overflow: hidden;
		border: 3rpx dashed #dde1e6;
	}

	.super-card-right {
		border-right: 1rpx solid transparent;
		border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
	}

	.super-card-time {
		display: flex;
		justify-content: center;
		align-items: center;

		height: 50rpx;
		width: 289.3rpx;
		border-bottom: 1rpx solid transparent;
		border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
		/* font-weight: 700; */
		z-index: -1;
		font-size: 20rpx;
		color: #A9ACB1;
		background-color: #EDF3FD;
	}

	.super-card-time-und {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 290rpx;
		flex-direction: column;

		border-right: 1rpx solid transparent;
		border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;

		.title-time-img {
			width: 65rpx;
			height: 65rpx;
			margin-top: -5rpx;
		}

		.title-time-font-rel {
			font-size: 34rpx;
			font-weight: 800;
			/* margin-bottom: 5rpx; */
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: black;
		}

		.title-time-font-tags {
			font-size: 24rpx;
			font-weight: 600;
			/* margin-bottom: 5rpx; */
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #999;
		}

		.title-time-items {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.right-box-items-button {
				width: 35rpx;
				height: 35rpx;
				margin: 0 5rpx;
			}
		}
	}

	.super-card-time-card {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 234rpx;
		width: 100%;
		transition: all 0.8s;
		border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
		flex-direction: column;
		position: relative;

	}
}

.right-container {
	width: calc(100% - 260rpx);
	height: 100vh;
	transition: opacity 1s ease;
	position: relative;
	margin-left: -50rpx;

	.joystick {
		position: absolute;
		bottom: 200rpx;
		left: 20rpx;
		width: 300rpx;
		height: 300rpx;
		z-index: 9999;
	}

	.outer-circle {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: rgba(127, 127, 127, 0.1);
		position: relative;
	}

	.inner-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: rgba(127, 127, 127, 0.3);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.doctorsay-container-view {
		width: 100%;
		height: 1350rpx;
		display: flex;
		margin-top: 62rpx;

		.doctorsay-container-container {
			width: 100%;
			overflow: hidden;
		}
	}
}

.title-time-blue {
	/* 你的定位与尺寸保持不变 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 96%;
	height: 96%;
	z-index: 10;

	.blue-img {
		width: 100%;
		height: 100%;
	}
}


.time-button-orange-spe {
	transition: all 1s;
	position: absolute;
	width: 280rpx;
	height: 100rpx;
	padding: 0 20rpx;
	border-radius: 20rpx;
	border-top-right-radius: 0rpx;
	border: 2rpx solid #e8e9eb;
	background-color: #fff;
	color: #545569;
	bottom: -100rpx;
	left: -130rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;

}

.time-button-orange {
	transition: all 1s;
	position: absolute;
	width: 280rpx;
	height: 100rpx;
	border-radius: 20rpx;
	padding: 0 20rpx;
	border: 2rpx solid #e8e9eb;
	border-bottom-right-radius: 0rpx;
	background-color: #fff;
	top: -90rpx;
	left: -130rpx;
	color: #545569;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;

}

.title-time {
	display: flex;
	width: 100%;
	position: relative;
	height: 100%;
	padding: 25rpx;

	.card-time {
		position: absolute;
		bottom: 25rpx;
		left: 20rpx;
		font-size: 28rpx;
	}

	.card-time-red {
		position: absolute;
		bottom: 25rpx;
		left: 20rpx;
		font-size: 28rpx;
		color: #E33B3B;
	}

	.card-time-blue {
		position: absolute;
		bottom: 25rpx;
		left: 20rpx;
		font-size: 28rpx;
		color: #4690FF;
	}

	.title-time-time {
		font-size: 32rpx;
		margin: 0 auto;
		font-weight: 600;
	}

	.title-time-button {
		position: absolute;
		top: -6rpx;
		right: -4rpx;
		width: 55rpx;
		height: 40rpx;
	}

	.title-time-font {
		position: absolute;
		top: 0rpx;
		right: 4rpx;
		font-size: 20rpx;
		color: #1083f8;
	}
}

.title-time-border {
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.title-time-border-big {
	transform: scale(1.3);
	transform-origin: top;
	border-top: 0rpx solid #fff;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 226rpx;
	width: 100%;
	border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
	flex-direction: column;
	position: relative;
}

.title-time-border-big-top {
	transform: scale(1.3);
	transform-origin: top;
	border-top: 0rpx solid #fff;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 226rpx;
	width: 100%;
	border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
	flex-direction: column;
	position: relative;
}

.title-time-border-future {

	border: 2rpx solid #e5e6e6;
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	background-color: #F7F8F9;
	flex-direction: column;

}

.title-time-border-hisOk {

	border: 2rpx solid #D4E4FE;
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	background-color: #F6F9FF;
	flex-direction: column;
}

.title-time-border-current {

	border: 3rpx dashed #4690FF;
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	background-color: #F6F9FF;
	flex-direction: column;
}

.title-time-border-hisFaild {

	border: 2rpx dashed #FFE2E2;
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	background-color: #FFF8F8;
	flex-direction: column;
}

@keyframes shakesmall {
	0% {
		transform: rotate(-2deg);
	}

	25% {
		transform: rotate(2deg);
	}

	50% {
		transform: rotate(-2deg);
	}

	75% {
		transform: rotate(2deg);
	}

	100% {
		transform: rotate(-2deg);
	}
}

.boom-father {
	position: absolute;
	top: 110rpx;
	left: -17rpx;
	width: 60rpx;
	height: 1170rpx;
	margin-top: 0rpx;
	overflow: hidden;
	z-index: 999;
}

.boom {
	height: 3000rpx;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 0;

	.boom-son {
		height: 234rpx;
		width: 60rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 10;
		font-size: 1rpx;
		color: #A9ACB1;

		.boom-text {
			width: 30rpx;
			height: 50rpx;
			/* border: 2rpx dashed #A9ACB1; */
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1;
			background-color: #eff0f4;
		}
	}

	.boom-son-target {
		height: 250rpx;
		width: 60rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 10;
		font-weight: 700;
		font-size: 25rpx;
		color: #A9ACB1;
		background: linear-gradient(to bottom, #ff8a00, #eceaff);
	}
}


.left-top {
	border-top-left-radius: 0 !important;
}

.right-top {
	border-top-right-radius: 0 !important;
}

.left-bottom {
	border-bottom-left-radius: 0 !important
}

.right-bottom {
	border-bottom-right-radius: 0 !important;
}

.xian-bian {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	border-right: 1rpx solid transparent;
	border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
}

.pulic-time {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #99C9FD;
	font-size: 35rpx;
	font-weight: 600;
}

.right-order {
	position: fixed;
	right: 20rpx;
	top: 62rpx;
	height: 1220rpx;
	width: 454rpx;
	background-color: #fff;
	border-radius: 30rpx;

	.order-title {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;

		.order-month {
			margin-left: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
			width: 80rpx;
		}

		.order-day {
			width: 300rpx;
			height: 100rpx;

			.days-father {
				display: flex;
				align-items: center;

				.days {
					height: 100rpx;
					min-width: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #BBBABA;
				}

				.targetdays {
					height: 50rpx;
					min-width: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #fff;
					border-radius: 50%;
					background-color: #4690FF;
				}
			}
		}
	}

	.order-history {
		width: 100%;
		height: 450rpx;
		margin-top: 5rpx;
		position: relative;

		.history-spe {
			min-width: 86%;
			height: 100%;
			margin-left: 14%;
			background-color: #F7F8F9;
			border-radius: 25rpx;
			padding-top: 10rpx;
			padding-left: 20rpx;
			/* position: relative; */
			
			.history-left-jiao{
				position: absolute;
				right: 0;
				top: 0;
				width: 85rpx;
				height: 45rpx;
				background-color: #D9E5FF;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top-right-radius: 25rpx;
				border-bottom-left-radius: 25rpx;
				color: #3C9CFD;
				font-size: 19rpx;
				font-weight: 600;
			}
			.history-left-jiao-error{
				position: absolute;
				right: 0;
				top: 0;
				width: 85rpx;
				height: 45rpx;
				background-color: #FFEBEB;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top-right-radius: 25rpx;
				border-bottom-left-radius: 25rpx;
				color: #F76E6E;
				font-size: 19rpx;
				font-weight: 600;
			}
		}

		/* background-color: red; */
		.history-title {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			justify-content: space-between;


			.history-left {
				font-size: 30rpx;
				margin-top: 10rpx;
			}

			.history-right {
				margin-top: 0.5vw;
				width: 7vw;
				height: 2.5vw;
				background: linear-gradient(to bottom, #009DEF, #0076FF);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40rpx;
				color: #fff;
				font-size: 28rpx;
				position: relative;
			}
		}

		.history-items {
			width: 100%;
			margin-top: 15rpx;
			height: 385rpx;

			.history-item {
				/* margin-left: 1%; */
				width: 95%;
				height: 120rpx;
				margin-bottom: 13rpx;
				position: relative;
				display: flex;
				align-items: center;
				transition: height 0.3s ease;

				.history-left {
					/* margin-left: 58rpx; */
					width: 120rpx;
				}

				.history-right {
					height: 100%;
					width: 245rpx;

					border-radius: 10rpx;
					display: flex;
					align-items: center;
					position: relative;
					margin-left: 5rpx;



					.item-name {
						width: 80rpx;
						/* 必须有宽度 */
						font-size: 25rpx;
						white-space: nowrap;
						/* 不换行 */
						overflow: hidden;
						/* 超出隐藏 */
						text-overflow: ellipsis;
						/* 省略号 */
					}

					.item-min {
						font-size: 25rpx;
					}
				}

				.history-time {
					font-weight: 800;
					font-size: 32rpx;
					margin-bottom: 0rpx;
				}

				.history-name {
					margin-left: 5rpx;
					font-size: 24rpx;
					color: #555555;

				}

				.history-shu-up {
					position: absolute;
					left: 32rpx;
					bottom: calc(50% + 13rpx);
					width: 3rpx;
					height: 110rpx;
					background-color: #E5E5E5;
					transition: height 0.3s ease;

				}

				.history-shu-circle {
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 26.5rpx;
					height: 26.5rpx;
					border-radius: 50%;
					border: 4.5rpx solid #D0D1D1;
					z-index: 1;
				}
			}
		}
	}

	.order-future {
		width: 100%;
		height: 640rpx;
		margin-top: -12rpx;
		position: relative;

		.future-items {
			width: 100%;
			height: 100%;

			.future-fonts {
				font-size: 27rpx;
				display: flex;
			}

			.future-item-target {
				width: 90%;
				margin-left: 5%;
				height: 152rpx;
				margin-bottom: 10rpx;
				background-color: #F7F8F9;
				border-radius: 30rpx;
				/* padding: 25rpx; */
				padding-top: 25rpx;
				padding-left: 25rpx;
				font-size: 25rpx;
				color: #555555;
				position: relative;
				border: 2rpx solid #4690FF;
				

			}

			.future-item {
				width: 90%;
				margin-left: 5%;
				height: 152rpx;
				margin-bottom: 10rpx;
				background-color: #F7F8F9;
				border-radius: 30rpx;
				/* padding: 25rpx; */
				padding-top: 25rpx;
				padding-left: 25rpx;
				font-size: 25rpx;
				color: #555555;
				position: relative;
				border: 2rpx solid #F7F8F9;
				/* transition: height 0.3s ease; */

			}

			.future-time {
				width: 100%;
				margin-top: 20rpx;
				height: 50rpx;
				display: flex;
				align-items: center;

				.time {
					font-size: 48rpx;
					font-weight: 800;
					color: black;
				}
			}
		}
	}
}

.future-tag {
	position: absolute;
	right: 23rpx;
	top: 23rpx;
	width: 70rpx;
	height: 40rpx;
	background-color: #EAF1FF;
	font-size: 22rpx;
	border-radius: 5rpx;
	color: #4690FF;
	border: 1rpx solid #4690FF;
	display: flex;
	justify-content: center;
	align-items: center;
}

.future-info {
	position: absolute;
	left: 23rpx;
	bottom: 23rpx;
	font-size: 25rpx;
	color: #555555;
	display: flex;
}
.future-info-second {
	position: absolute;
	left:80rpx;
	bottom: 12rpx;
	font-size: 25rpx;
	color: #555555;
	display: flex;
}
.info {
	display: flex;

	.info-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 3rpx;
	}
}

.calendar-father {
	position: fixed;
	top: 150rpx;
	right: 30rpx;
	width: 700rpx;
	height: 600rpx;
	z-index: 101;
}

.mengban {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: RGBA(239, 240, 244, 0.55);
}

.history-img {
	width: 30rpx;
	height: 30rpx;
	/* margin-left: 15rpx; */
	/* background-color: red; */
}

.small-font {
	margin-top: 3rpx;
	width: 310rpx;
	white-space: nowrap;
	/* 不换行 */
	overflow: hidden;
	/* 超出隐藏 */
	text-overflow: ellipsis;
	/* 省略号 */
	color: #999999;
	font-size: 22rpx;
}

.small-font-target {
	margin-top: 3rpx;
	width: 310rpx;
	color: #999999;
	font-size: 22rpx;
}

.card-bao {
	position: absolute;
	right: 30rpx;
	top: 40rpx;
	width: 30rpx;
	height: 30rpx;
	font-size: 18rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #4690FF;
	color: #fff;
	border-radius: 5rpx;
}

.card-overtime {
	position: absolute;
	right: 30rpx;
	bottom: 40rpx;
	width: 45rpx;
	height: 30rpx;
	font-size: 18rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #E33B3B;
	color: #fff;
	border-radius: 5rpx;
}

.card-over {
	max-width: 200rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.time-right-bad {
	color: #666666;
	font-size: 24rpx;
	margin-left: 10rpx;
	margin-top: 10rpx;
}

.time-right-blue {
	color: #4690FF;
	font-size: 24rpx;
	margin-left: 10rpx;
	margin-top: 10rpx;
	display: flex;
	position: relative;
}

.ellipsis {
	position: absolute;
	left: 105rpx;
	top: 20rpx;
	display: flex;
	gap: 5rpx;


	/* height: 28px; */
	/* 点的高度 + 跳起空间 */
}


.dot {
	width: 5rpx;
	height: 5rpx;
	background: #4690FF;
	border-radius: 50%;
	animation: jump 1.5s ease-in-out infinite;

}


@keyframes jump {

	0%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-8px);
	}
}


@media (prefers-reduced-motion: reduce) {
	.dot {
		animation: none;
	}
}

.open-img-father {
	position: absolute;
	right: 35rpx;
	bottom: 28rpx;
	width: 22rpx;
	height: 22rpx;
	

	.open-img {
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}
}

.serviceContent {
	color: #999999;
	margin-top: 20rpx;
}