bolinscreening-miniapp/pages/index/style.scss

.container {
	overflow-x: scroll;
	background: #ffffff;
	.bl-user-con {
		position: relative;
		.user-bg {
			@include WH(100%, 100px);
			background: linear-gradient(135deg, #e6f7ff, #d5f1ff);
			.icon-maotouying {
				@include FONT(#eaf8ff, 118px, 400);
				margin-top: -20px;
				margin-left: 5px;
				display: inline-block;
			}
		}
		.user-info {
			padding: 0 20px 16px;
			margin-top: -12px;
			background: #f9f9f9;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			position: relative;
			.user-avatar {
				@include WH(80px, 80px);
				border-radius: 50%;
				border: 3px solid #ffffff;
				margin: -40px 0 0 0;
			}

			.user-name {
				margin-top: 4px;
				display: flex;
				flex-direction: column;
				text-align: left;

				span:nth-child(1) {
					@include FLEX(flex, row, flex-start, center);
					.name {
						@include FONT(#333333, 18px, 500);
					}
					.icon-boy,
					.icon-girl {
						margin: 0 5px 0 10px;
						@include FONT(#26baee, 18px, 400);
					}
					.icon-girl {
						color: #ff8673;
					}
					.age {
						@include FONT(#999999, 14px, 400);
					}
				}

				span:nth-child(2) {
					@include FONT(#999999, 14px, 400);
					margin-top: 6px;
				}
			}
			.chart-btn {
				position: absolute;
				right: 16px;
				top: 5px;
				img {
					@include WH(50px, 50px);
					display: block;
					margin: 0 auto;
				}
				.btn {
					@include WH(auto, 20px);
					border: 1px solid #ededed;
					border-radius: 20px;
					@include FONT(#999999, 12px, 400);
					text-align: center;
					line-height: 20px;
					padding: 0 5px;
					display: block;
					margin-top: 8px;
				}
			}
		}
		.change-user {
			width: 90px;
			height: 32px;
			background: #9ad8f2;
			border-radius: 50px 0px 0px 50px;
			@include FONT(#ffffff, 12px, 400);
			@include FLEX(flex, row, center, center);
			position: absolute;
			top: 30px;
			right: 0;
			.icon-qiehuan {
				font-size: 16px;
				margin-right: 4px;
			}
		}
	}
	.date-box {
		border-bottom: 1px solid #ededed;
		.date-bar {
			width: 100%;
			white-space: nowrap;
			.date-item {
				width: 40px;
				height: 40px;
				padding: 0 6px;
				border-radius: 6px;
				background: rgba(237, 237, 237, 0.06);
				border: 1px solid #ededed;
				@include FONT(#999999, 12px, 600);
				display: inline-block;
				margin: 10px 0 6px 10px;
				overflow: hidden;
				span {
					height: 40px;
					@include FLEX(flex, column, center, center);
				}
			}
			.date-item:last-child {
				margin-right: 6px;
			}
			.checked {
				background: rgba(3, 159, 222, 0.06);
				border-color: #039fde;
				color: #039fde;
			}
		}
	}
	.date-box::-webkit-scrollbar {
		height: 0 !important;
	}
	.date-box {
		-ms-overflow-style: none;
	}
	.date-box {
		overflow: -moz-scrollbars-none;
	}
	.school-box {
		height: 80px;
		background: #ccf3ed;
		border-radius: 10px;
		margin: 12px 16px;
		padding: 9px 12px;
		box-sizing: border-box;
		.title {
			@include FONT(#333333, 12px, 500);
		}
		.center {
			@include FONT(#333333, 16px, 500);
			text-align: center;
			span:last-child {
				font-size: 14px;
				margin-top: 2px;
				display: block;
			}
		}
	}
	.result-memo {
		// margin: 0 10px 10px 10px;
		@include FONT(#999999, 12px, 400);
		@include FLEX(flex, row, flex-start, flex-start);
		.label {
			min-width: 60px;
		}
		.text {
			@include FONT(#333333, 14px, 400);
			display: block;
		}
	}
	.report-box {
		.cell-item {
			padding: 16px;
			.title {
				@include FONT(#333333, 14px, 500);
				margin-bottom: 16px;
			}
			.eye-grid {
				@include FLEX(flex, row, space-between, center);
				padding: 0 60px;
				span {
					display: block;
					text-align: center;
					@include FONT(#666666, 12px, 400);
					line-height: 25px;
				}
				span:nth-child(2) {
					@include FONT(#333333, 18px, 500);
				}
				.line {
					width: 80px;
					height: 4px;
					background: #00caa2;
					border-radius: 4px;
				}
				.red {
					background: #ff3500;
				}
				.green {
					background: #00caa2;
				}
			}

			.eye-table {
				.th {
					@include FLEX(flex, row, space-between, center);
					@include FONT(#666666, 12px, 400);
					// border-bottom: 1px solid #ededed;
					padding: 8px 0;
					span:first-child {
						margin-right: 10px;
					}
					span {
						width: 100%;
						text-align: left;
						i {
							display: block;
						}
					}
				}
				.tr {
					@include FLEX(flex, row, space-between, flex-start);
					// border-bottom: 1px solid #ededed;
					padding: 12px 0;
					.td:first-child {
						margin-right: 10px;
						@include FLEX(flex, column, center, flex-start);
						@include FONT(#999999, 12px, 400);
						.td-label {
							text-decoration: underline;
						}
						.note {
							font-size: 12px;
							color: #666666;
						}
					}
					.td {
						width: 100%;
						text-align: left;
						@include FONT(#666666, 12px, 400);
					}
				}
			}
			.eye-table:last-child {
				.tr:last-child {
					border-bottom: 0;
				}
			}
		}
		.tips-box {
			border-top: 1px solid #ededed;
			padding: 16px 10px;
			.tips-content {
				width: 100%;
				height: 132px;
				border-radius: 10px;
				overflow: hidden;
				position: relative;

				img {
					width: 100%;
					height: 100%;
					position: absolute;
				}
				.text {
					position: absolute;
					top: 20px;
					left: 20px;
					@include FONT(#000000, 14px, 400);
					span:nth-child(1) {
						display: flex;
						align-items: center;
						font-weight: 500;
						i {
							margin-right: 6px;
							color: #ffffff;
						}
						.icon-gouxuan {
							color: #999999;
						}
					}
					span:nth-child(2) {
						display: flex;
						align-items: center;
						margin-left: 20px;
						.name {
							@include FONT(#333333, 12px, 400);
							padding: 4px 10px;
							border-bottom: 1px solid #bfecff;
						}
					}
				}
			}
		}
	}
}

.popup-content {
	width: 270px;
	background: #ffffff;
	border-radius: 12px;
	.kf-img {
		width: 100%;
		height: 200px;
	}
	.close-btn {
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		position: absolute;
		top: 5px;
		right: 5px;
		i {
			@include FONT(#949494, 15px, 400);
		}
	}
	.bl-describe-con {
		padding: 21px 15px;
		.describe-title {
			@include FONT(#000000, 17px, 600);
			text-align: center;
		}
		.describe-box {
			margin-top: 20px;
			.describe-tag {
				@include WH(100%, 21px);
				border-bottom: 1rpx solid #10aeff;
				span {
					line-height: 21px;
					padding: 0 13px;
					box-sizing: border-box;
					text-align: center;
					transform: skew(-20deg);
					background: #10aeff;
					display: inline-block;
					margin: 1px 0 0 4px;
					i {
						@include FONT(#ffffff, 14px, 600);
						transform: skew(20deg);
						display: inline-block;
					}
				}
			}
			.describe-img {
				@include WH(80px, 80px);
				border-radius: 12px;
				margin-top: 12px;
			}
			.describe-text {
				@include FONT(#666666, 14px, 400);
				margin-top: 12px;
			}
			.jm-table {
				@include FLEX(flex, column, center, center);
				border: 1px solid #666666;
				@include FONT(#666666, 12px, 400);
				margin: 10px 0;
				div:nth-child(1) {
					@include FLEX(flex, row, space-between, center);
					width: 100%;
					text-align: center;
					span {
						width: 100%;
						height: 33px;
						@include FLEX(flex, row, center, center);
						border-left: 1px solid #666666;
						border-bottom: 1px solid #666666;
					}
					span:first-child {
						border-left: none;
					}
				}
				div:nth-child(2) {
					@include FLEX(flex, row, space-between, center);
					width: 100%;
					text-align: center;
					span {
						width: 100%;
						height: 33px;
						@include FLEX(flex, row, center, center);
						border-left: 1px solid #666666;
					}
					span:first-child {
						border-left: none;
					}
				}
			}
		}
	}
}

.popup-btn {
	height: 50px;
	background: #ffffff;
	padding: 0 16px;
	border-bottom: 1px solid #ededed;
	@include FLEX(flex, row, space-between, center);
	span {
		@include FONT(#999999, 14px, 400);
	}
	span:last-child {
		@include FONT(#10aeff, 14px, 400);
	}
}
.picker-view {
	width: 100%;
	height: 200px;
	background: #ffffff;
	/deep/.indicator-class {
		height: 50px;
	}
	.item {
		height: 50px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

.null-box {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #f5f5f5;
	@include FONT(#999999, 12px, 400);
	@include FLEX(flex, row, center, center);
	.center-box {
		@include FLEX(flex, column, center, center);
		.icon-shoucang {
			@include FONT(#dedede, 60px, 400);
			margin-bottom: 4px;
		}
	}
}

// 悬浮客服按钮
.custom-movable-area {
	pointer-events: none;
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	.custom-movable-view {
		pointer-events: auto;
		width: 50px;
		height: 50px;
		top: auto;
		left: auto;
		bottom: 120px;
		right: 5px;
		z-index: 999;
		transition: all 0.3s;
		.contact-box {
			.contact-btn {
				border: 0;
				padding: 0;
				background: #9ad8f2;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				line-height: 50px;
				img {
					@include WH(60px, 60px);
				}
				.icon-rexianicon {
					font-size: 30px;
					color: #ffffff;
					text-align: center;
				}
			}
		}
	}
}