carbasics2023_web_pad_v4/src/assets/less/common.less

.border-b {
  border-bottom: 1px solid #ccc;
}

// position
.relative {
  position: relative;
}
.absolute {
	position: absolute;
}

// flex
.d-flex{
  display: flex;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.flex-column{
  flex-direction: column;
}

.flex-column-reverse{
  flex-direction: column-reverse;
}

.flex-row{
  flex-direction: row;
}

.flex-row-reverse{
  flex-direction: row-reverse;
}

.justify-center{
  justify-content: center;
}

.justify-space-between{
  justify-content: space-between;
}

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

.flex-1{
  display: flex;
  flex: 1;
}

.flex-2{
  display: flex;
  flex: 2;
}
.flex-3{
  display: flex;
  flex: 3;
}

// other
.pointer{
  cursor:pointer;
}
.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.font-bold{
	font: bold;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}
.fz20{
	font-size: 20px;
}
.fz22{
	font-size: 30px;
}
.fz24{
	font-size: 20px;
}
.border-bottom{
	border-bottom: 1px solid #dfe6ec;
}
.borderNone{
	border-bottom: none;
}

.common-picker{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.common-button {
	width: 200px;
	margin: 0 auto;
	margin-bottom: 12px;
	border-radius: 20px;
}

.throm-common-button {
	width: 60% !important;
	margin: 0 auto;
	// margin-bottom: 12px;
	border-radius: 20px;
	.ant-btn {
		margin-top: 12px;
	}
}
.common-slider{
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
	margin: 80px 0 20px;
	.van-stepper--round{
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		.van-stepper__input{
			position: absolute;
			left: 50%;
			right: 50%;
			transform: translate(-50%, -50%);
			bottom: 5px;
			background: #007AFF;
			border-radius: 6px;
			font-size: 24px;
			font-family: OPPOSans, OPPOSans-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			padding: 10px 0;
			width: 100px;
			margin-bottom: 10px;
			display: none;
		}
		.van-stepper__minus{
			width: 30px;
			height: 30px;
			color: #fff;
			color: #007AFF;
			border-color: #007AFF;
		}
		.van-stepper__plus{
			width: 30px;
			height: 30px;
			background-color: #007AFF;
		}
		&.one{
			.van-stepper__minus{
				position: absolute;
				bottom: 0;
				left: 40px;
				width: 30px;
				height: 30px;
				color: #fff;
				border-color: #007AFF;
				// background-color: #007AFF;
				background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1));
			}
			.van-stepper__plus{
				position: absolute;
				bottom: 0;
				right: 40px;
				width: 30px;
				height: 30px;
				// background-color: #007AFF;
				background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1));
			}
		}
		&.five{
			.van-stepper__minus{
				width: 30px;
				height: 30px;
				color: #fff;
				border-color: #007AFF;
				// background-color: #007AFF;
				background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1));
				&::before{
					content: '-5';
					font-size: 14px;
					font-weight: bold;
					position: absolute;
					top: 4px;
					left: 13px;
					height: 0;
				}
			}
			.van-stepper__plus{
				width: 30px;
				height: 30px;
				color: #fff;
				border-color: #007AFF;
				// background-color: #007AFF;
				background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1));
				position: relative;
				&::before{
					content: '+5';
					font-size: 14px;
					font-weight: bold;
					position: absolute;
					top: 4px;
					left: 13px;
					height: 0;
					// letter-spacing: -1px;
				}
				&::after{
					display: none;
				}
			}
		}
		&.ten{
			.van-stepper__minus{
				position: absolute;
				top: 0;
				left: -35px;
				width: 30px;
				height: 30px;
				color: #fff;
				border-color: #007AFF;
				// background-color: #007AFF;
				background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1));
				&::before{
					content: '-10';
					font-size: 14px;
					font-weight: bold;
					position: absolute;
					top: 4px;
					left: 11px;
					height: 0;
					// letter-spacing: -1px;
				}
			}
			.van-stepper__plus{
				position: absolute;
				top: 0;
				right: -35px;
				width: 30px;
				height: 30px;
				color: #fff;
				// background-color: #52A5FF;
				background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1));
				&::before{
					content: '+10';
					font-size: 14px;
					font-weight: bold;
					position: absolute;
					top: 4px;
					left: 11px;
					height: 0;
					// letter-spacing: -1px;
				}
				&::after{
					display: none;
				}
			}
			
		}
	}
	.common-slider-slider{
		width: 68%;
		position: absolute;
		bottom: 6px;
		height: 16px;
		// background: #e4edff;
		background: linear-gradient(to right, #007AFF, #52A5FF);
		border-radius: 8px;
		.van-slider__button-wrapper{
			width: 30px;
			height: 30px;
			background-color: #007AFF;
			border-radius: 50%;
			box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
			
			.inner-circle{
				width: 15px;
				height: 15px;
				border-radius: 50%; /* 圆形 */
				background-color: white; /* 白色背景 */
				position: absolute; /* 绝对定位 */
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%); /* 居中 */
			}
		}
		.ant-input-number{
			position: absolute;
			left: 50%;
			right: 50%;
			bottom: 18px;
			transform: translate(-50%, -50%);
			font-size: 24px;
			font-family: OPPOSans, OPPOSans-Bold;
			font-weight: 700;
			height: auto;
			padding: 4px 0;
			text-align: center;
			// background: #7690e5;
			background: linear-gradient(to right, rgba(0, 122, 255, 0.7), rgba(0, 122, 255, 1));
			border-radius: 6px;
			color: #fff;
			.ant-input-number-input{
				text-align: center;
			}
			.ant-input-number-handler-wrap{
				display: none;
			}
		}
		.van-slider__bar{
			background: linear-gradient(to right, #007AFF, #52A5FF);
			// background: linear-gradient(to right, rgba(0, 122, 255, 0.7), rgba(0, 122, 255, 1));
		}
		.slider-icon{
			position: absolute;
			top: -20px;
			left: 2px;
			color: #007AFF;
			font-size: 26px;
		}
		
	}
}
.ant-form .ant-form-item-label label{
	font-size: 18px;
	color: #222;

}
.ant-form {
	.ant-form-item-label{
		text-align: left;
	}
	label{
		font-size: 26px ;
		font-weight: 500;
		color: #565e6f;
	} 
	.ant-form-item{
		&:not(:last-child) {
			// border-bottom: 1px solid #dfe6ec;
		}
		box-sizing: border-box;
	}
	.dose-item{
		margin-bottom: 40px!important;
	}
	.mb0{
		margin-bottom: 10px!important;
	}
	.borderNone{
		border-bottom: none!important;
	}
	.ant-radio-button-wrapper{
		padding: 0 18px;
		height: 40px;
		line-height: 40px;
		font-size: 18px!important;
		margin-right: 20px;
		margin-bottom: 10px;
		background: #f9f9f9;
		border: 0.5px solid #a3acbf;
		border-radius: 6px;
		vertical-align: middle;
		&:before, .ant-radio-button-wrapper-checked:before{
			display: none!important;
		}
		&:first-child, &:last-child{
			border-radius: 6px!important;
		}
		&:last-child{
			margin-right: 0;
		}
	}
	.ant-form-item-control{
		text-align: left;
		margin-left: 10px;
	}
}
 // .solid{
	//  .ant-checkbox-wrapper {
	// 	 background: #f9f9f9;
	// 	 border: 0.5px solid #a3acbf;
	// 	 border-radius: 6px;
	// 	 vertical-align: middle;
	// 	 margin-right: 20px;
	// 	 margin-bottom: 10px;
	// 	 font-size: 18px!important;
	// 	 line-height: 40px;
	// 	 padding: 0 18px;
	// 	 height: 40px;
	// 	 min-width: 0!important;
	// 	&.ant-checkbox-wrapper-checked{
	// 		background: #7690e5;
	// 		color: #fff;
	// 	}
	// 	.ant-checkbox{
	// 		display: none;
	// 	}
	//  }
 // }
 .ant-tabs-nav-container{
	 .ant-tabs-tab{
		 // font-size: 20px;
		 // font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		 // font-weight: 500;
		 // text-align: left;
		 // color: #70798c;
	 }
	 .ant-tabs-tab-active{
		 // // font-weight: 700;
		 // font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		 // color: #393d4e!important;
	 }
	 .ant-tabs-ink-bar{
		 // background: #7690e5 !important;
		border-bottom: 3px solid transparent; /* 设置透明的底部边框 */
		border-image: linear-gradient(to right, #fff, #007AFF) 1; /* 使用渐变色填充边框 */
		border-radius: 10px; /* 设置圆角 */
	 }
 }
 .ant-modal-wrap {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 .ant-modal{
		top: 0;
	 	padding-bottom: 0;
	 	.ant-modal-body {
	 		padding: 26px 26px 20px !important;
	 	}
	 }
 }

//  .container-left-header {
//  	// display: flex;
// 	margin-top: 20px;
// 	margin-bottom: 20px;
// 	// width: 100%;
// 	// float: left;
//  	span {
//  		width: 8px;
//  		height: 25px;
//  		display: inline-block;
//  		border-radius: 12px;
//  		background: #8FB3FB;
//  		margin-right: 16px;
//  	}
 
//  	p {
//  		line-height: 32px;
//  		font-size: 1.2rem;
//  		font-weight: 600;
//  		margin: 0;
//  	}
//  }
 
 //急诊溶栓记录
 .basic-btn {
 	height: 72px;
 	background: linear-gradient(180deg, #b1caff, #83aafa);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	border-radius: 36px;
 	margin: 60px 20px 0 20px;
 
 	.basic-ico {
 		margin-right: 10px;
 	}
 
 	p {
 		line-height: 72px;
 		font-weight: 600;
 		color: #fff;
 		font-size: 24px;
 	}
 }
 
 .container-left-basic {
 	min-height: 80px;
 	background: #7690E5;
 	border-radius: 12px;
 	margin-bottom: 24px;
 	color: #70798c;
 	// 下一节点
 	.container-basic-node {
 		display: flex;
 		justify-content: space-between;
 		padding: 0 24px;
 
 		.basic-p {
 			font-size: 24px;
 			color: #fff;
 			font-weight: 600;
 			text-align: left;
 			line-height: 62px;
 			margin: 0;
 			max-width: 74%;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
 
 		// 节点倒计时
 		.basic-node-time {
 			display: flex;
 			align-items: center;
 
 			p {
 				margin: 0;
 				background: #fff;
 				padding: 2px 6px;
 				color: #758FE4;
 				font-weight: 600;
 				font-size: 18px;
 				border-radius: 6px;
 
 			}
 
 			span {
 				font-weight: 600;
 				font-size: 30px;
 				color: #fff;
 				margin: 0 8px;
 			}
 		}
 	}
 
 	.leftbasic-centbox {
 		height: 80px;
 		background: #fff;
 		margin-left: 6px;
 		border-radius: 12px;
 		display: flex;
 		justify-content: space-between;
 		padding: 0 16px;
 	}
 
 	.leftbasic-centbox-title {
 		font-size: 24px;
 		font-weight: 600;
 		line-height: 80px;
 	}
 
 	.leftbasic-centbox-ico {
 		margin-top: 32px;
 	}
 	&.active{
 		background: #fff;
 		.leftbasic-centbox{
 			background: #7690E5;
 			color: #fff;
 		}
 	}
 }
 .container-left-header {
 	display: flex;
	margin-top: 10px;
 	span {
 		width: 8px;
 		height: 28px;
 		display: inline-block;
 		border-radius: 12px;
 		background: #8FB3FB;
 		margin-right: 16px;
		position: relative;
		top: 3px;
 	}
 
 	p {
 		line-height: 32px;
 		font-size: 20px;
 		font-weight: bold;
 		margin: 0;
 	}
 }
 .basicr-back {
 	border-radius: 12px;
 	background: #fff;
 	padding: 0 12px;
 	// box-shadow: 0 2px 12px 0 rgba(52, 52, 52, .1);
 }
 .container {
 	flex: 1;
 	display: flex;
 	justify-content: space-between;
 
 	.container-left {
 		flex: 1;
 		padding-left: 20px;
		margin-top: 24px;
 	}
 	.container-right{
 		flex: 2;
 		overflow-y: auto;
 		display: flex;
 		padding-right: 20px;
		border-left: 1px solid #C9D1DF;
		padding-left: 20px;
		margin-left: 20px;
		margin-top: 24px;
		margin-bottom: 24px;
 	}
 }
 .ant-select-dropdown{
	 .ant-select-dropdown-menu-item{
		 font-size: 16px;
	 }
 }
 .ant-checkbox-group .ant-checkbox-wrapper{
	font-size: 18px;
 }
 .ant-radio-wrapper{
	font-size: 18px;
 }

 .detail-form {
	 .detail-form-control{
		 display: flex;
		 align-items: center;
	 }
	 .ant-form-item-control{
		 width: 100%;
	 }
 	.ant-form-item {
 		display: flex;
 		// justify-content: space-between;
 		align-items: left;
 		padding: 12px 0 !important;
 		margin-bottom: 0 !important;
 
 		.ant-form-item-label {
 			display: flex;
			// width: 160px !important;
 		}
 
 		.ant-radio-wrapper {
 			// height: 30px !important;
 			font-size: 14px !important;
 		}
 	}
	 .ant-input{
		 width: 100%;
		background: #f2f3f5;
		border: 1px solid #f2f3f5;
	 }
	.ant-select{
		// width: 195px;
		 width: 100%;
	}
	.ant-radio-group span{
		padding: 0;
	}
	.ant-select-selection--single{
		background: #f2f3f5;
		border: 1px solid #f2f3f5;
	}
	.ant-select-selection-selected-value{
		padding-right: 10px;
	}
	.ant-select-selection__rendered{
		 line-height: 32px;
		 max-width: 300px;
	}
 	.ant-form-item-control-wrapper {
 		display: flex;
 		align-items: center;
		// justify-content: flex-end;
		text-align: right;
 	}

 }
 .Overviewbasicr {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 20px;
	width: 100%;
 }
 .adverse{
	width: 100%;
	float: left;
 }
// 复选框
.ant-checkbox-group{
	display: flex!important;
	width: 100%;
	flex-wrap: wrap;
	.ant-checkbox-wrapper{
		min-width: 30%;
	}
	.ant-checkbox-checked{
		 .ant-checkbox-inner{
		 	 background-color: #7690e5!important;
		 	 border-color: #7690e5!important;
		 }
	} 
}

 // 详情form-item
 .jmrs-form-item {
 	.jmrs-form-item-con {
 		
 		&.checkbox {
 			flex-direction: column;
 			.content-right{
 				margin-top: 10px;
				
 			}
 		}
		.content-right{
			display: flex;
			align-items: center;
		}
 		.operate {
 			font-size: 1rem;
 			color: #000000;
 			padding-right: 12px;
 		}
		.label-info{
			color: #000000;
			font-size: 1rem;
		}
 	}
 }
 // 折叠面板
 // .collapse-content{
 // 	display: flex;
 // 	justify-content: space-between;
 // 	padding: 5px 0;
 // }
 // .ant-collapse-arrow, .ant-select-arrow{
 //  	font-size: 20px!important;
 //  	color: #70798C!important;
 //  }
  
  // 知情同意
  .Informed-container {
  	// padding: 0 0 30px;
  
  	.mt2 {
  		margin-top: 20px;
  	}
  
  	.informed-info {
  		font-size: 1.2rem;
		font-weight: bold;
  		text-align: left;
  		line-height: 36px;
		&.indent {
			text-indent: 2em;
		}
		&.pl{
			padding-left: 20px;
		}
		
		&.informed-info-sky{
			color: #007AFF;
		}
  	}
  
  	.informed-list {
  		display: flex;
  		// flex-wrap: wrap;
  		justify-content: space-between;
  		align-items: center;
  		margin-top: 20px;
  
  		.informed-item {
  			flex: 1;
  			display: flex;
  			// justify-content: space-between;
  			align-items: center;
  			margin-bottom: 15px;
			margin-right: 10px;
  
  			// margin: 0 10px 20px;
  			>span {
  				font-size: 16px;
  			}
  
  			.item-input {
  				width: 45%;
  			}
  
  			.item-sign {
  				width: 50%;
  			}
  
  			.item-btn {
  				color: #7690e5;
  				border: 1px solid #7690e5;
  				box-sizing: border-box;
  			}
  
  			.item-img {
  				min-width: 120px;
				// flex: 1;
  				height: 40px;
  				display: flex;
  				align-items: center;
  				justify-content: center;
				box-sizing: border-box;
				margin: 0 5px;
  				img {
  					width: 100%;
  					height: 100%;
  				}
				&.item-img-black{
					background-color: black;
					color: #fff;
				}
  			}
			.item-img-non {
				
			}
  		}
		.informed-item1{
			width: 40%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			
			.item-input {
				width: 60%;
			}
		}
  	}
  }
  .thrombolysis-box{
	  .ant-steps-dot .ant-steps-item-content,
	  .ant-steps-dot.ant-steps-small .ant-steps-item-content{
	  	 width: 100px;
	  }
	  
	  .ant-steps.ant-steps-horizontal {
		  .ant-steps-item-container .ant-steps-item-title{
				font-size: 20px;
			}
		  .ant-steps-item-finish,
		  .ant-steps-item-process{
			  .ant-steps-item-container .ant-steps-item-title{
					font-size: 20px;
					color: #3D3D3D;
				}
		  }
	  }
	   
	   
  }