realty/virgo.wzfrontend/console/src/assets/scss/tips.scss

.tips-14 {
	width: 122px;
	height: 33px;
	background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/eb08c436e39a41218c38bffa5f066936) no-repeat;
	background-size: 100% 100%;
	padding-top: 7px;
	padding-left: 45px;
	font-size: 12px;
	color: #FFFFFF;

	&.error {
		background-image: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/e84a8319fb31420aa80e9eb6180d234e);
	}

	&.success {
		background-image: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/a4e554e324ad410aaf1dab9dbe863da5);
	}
}

.tips-13 {
	width: 150px;
	height: 84px;
	background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/277e9c68f3074892965263cd3cf05307) -1px -1px no-repeat;
	background-size: 152px 86px;
	color: #fff;
	font-size: 12px;
	padding: 10px 8px;

	.title {
		margin-bottom: 5px;
	}

	.item {
		height: 17px;
		background: rgba(101, 112, 137, 0.5);
		margin-bottom: 2px;
		color: #D3DEF6;
		display: flex;
		align-items: center;
		padding: 0 3px;
	}

	.label {
		flex: 1;
		width: 0;
		color: #D3DEF6;
	}

	.unit {
		color: #BDC7DB;
	}
}

.tips-12 {
	width: 50px;
	padding: 10px;
	border-radius: 5px;
	background: $--color-primary;
	text-align: center;
	color: #fff;
	opacity: 0.7;
	
	.huifont-dianti1 {
		font-size: 26px;
	}
}

.tips-11 {
	color: #fff;
	width: 220px;

	.title {
		height: 33px;
		display: flex;
		align-items: center;
		background: linear-gradient(270deg, rgba(0, 22, 50, 0) 1%, rgba(37, 97, 176, 0.84) 65%, rgba(41, 105, 191, 0.9) 100%);
		border: 1px solid;
		border-image: linear-gradient(270deg, rgba(62, 201, 255, 0), rgba(29, 153, 255, 1)) 1 1;
		border-right: none;

		img {
			width: 33px;
			height: 33px;
		}

		.name {
			padding-left: 9px;
			font-weight: 500;
		}
	}

	.content {
		background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/6d622a2d48244bd49964cee555f44610) no-repeat;
		background-size: 100% 100%;
		padding: 9px 7px;
		position: relative;

		.item {
			display: flex;
			align-items: center;
			line-height: 19px;
			font-size: 12px;
		}

		.item:last-child {
			margin-top: 9px;
		}

		.label {
			width: 38px;
		}

		.value {
			flex: 1;
			width: 0;
			background: linear-gradient(270deg, rgba(0, 151, 225, 0) 0%, rgba(0, 151, 225, 0.8) 100%);
			padding-left: 5px;
		}

		&:before {
			content: '';
			position: absolute;
			width: 100%;
			background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/dd857ae85d8a47bdbc91a59c6ac70483) 100% no-repeat;
			background-size: 100% 100%;
			height: 9px;
			left: 0;
			bottom: 0;
		}
	}
}

.tips-10 {
	color: #fff;

	.tips-top {
		width: 139px;
		height: 51px;
		border: 1px solid rgba(6, 224, 233, 0.4);
		background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/68a6c73b116a4f76b6fb166d1ba91bfd) no-repeat;
		background-size: 100% 100%;
		margin-left: 12px;
		padding: 7px;
	}

	.item {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.item :last-child {
		margin-bottom: 0px;
	}

	.label {
		font-weight: 500;
	}

	.value {
		font-size: 14px;
		margin-right: 2px;
	}

	.tips-bottom {
		background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/756652f93bbd407e9642fe3950e63434) no-repeat;
		background-size: 100% 100%;
		width: 151px;
		height: 63px;
		margin-top: 3px;
		position: relative;
	}

	.tips-bottom::before {
		content: '';
		position: absolute;
		width: 6px;
		height: 6px;
		background: #06E0E9;
		bottom: -3px;
		left: -2px;
		border-radius: 50%;
	}

	.tips-bottom::after {
		content: '';
		position: absolute;
		width: 36px;
		height: 1px;
		background: #06E0E9;
		top: 0;
		right: 0;
	}
}

.tips-9 {
	width: 310px;
	position: relative;
	display: flex;

	.line {
		width: 137px;
		height: 162px;

		.top {
			width: 100%;
			height: 88px;
			position: relative;
		}

		.top::before {
			content: '';
			position: absolute;
			width: 70px;
			height: 1px;
			background: #fff;
			top: 0;
			right: 0;
		}

		.top::after {
			content: '';
			position: absolute;
			width: 1px;
			height: 93px;
			background: #fff;
			top: -2px;
			left: 51px;
			transform: rotate(20deg);
		}

		.cricle {
			width: 74px;
			height: 74px;
			border: 2px solid #FFFFFF;
			border-radius: 50%;
			position: relative;
		}

		.cricle::before {
			content: '';
			position: absolute;
			width: 62px;
			height: 62px;
			border: 1px solid #FFFFFF;
			left: 3px;
			top: 3px;
			border-radius: 50%;
		}
	}

	.article {
		background: rgba(24, 31, 45, 0.7);
		box-shadow: inset 0px 0px 8px 0px rgba(227, 235, 255, 0.49);
		border: 1px solid #A7C3DF;
		width: 170px;
	}

	.title {
		color: #D2E4FF;
		height: 25px;
		background: rgba(76, 84, 103, 0.5);
		border-radius: 2px 2px 0px 0px;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 10px;
			color: #D2E4FF;
			margin: 0 9px;
			box-shadow: 0px 0px 6px 0px rgba(5, 36, 255, 0.7);
		}
	}

	.content {
		padding: 7px 15px;
	}

	.item {
		display: flex;
		line-height: 24px;
		font-size: 12px;
	}

	.label {
		color: #AAD1FF;
		margin-right: 5px;
		min-width: 48px;
	}

	.value {
		color: #FFFFFF;
	}
}

.tips-8 {
	color: #fff;

	.title {
		width: 268px;
		height: 32px;
		background: rgba(210, 228, 255, 0.05);
		border: 1px solid #96C6FF;
		line-height: 30px;
		font-weight: 500;
		padding-left: 12px;
		position: relative;
		box-sizing: initial;
	}

	.title::before,
	.title::after {
		content: '';
		width: 3px;
		height: 32px;
		background: #96C6FF;
		position: absolute;
		left: -6px;
		top: 0;
	}

	.title::after {
		left: auto;
		right: -6px;
	}

	.content {
		margin-top: 4px;
		padding: 7px 9px;
		background: linear-gradient(270deg, rgba(108, 152, 246, 0) 0%, rgba(108, 152, 246, 0.3) 99%);
	}

	.item {
		display: flex;
		line-height: 25px;
		font-size: 12px;
		margin-bottom: 2px;
	}

	.item:last-child {
		margin-bottom: 0px;
	}

	.label {
		width: 97px;
		text-align: center;
		background: rgba(38, 57, 105, 0.7);
		border: 1px solid #96C6FF;
	}

	.value {
		padding-left: 11px;
		flex: 1;
		width: 0;
		background: rgba(63, 72, 95, 0.7);
		border: 1px solid rgba(150, 198, 255, 0.66);
		border-left: none;
	}
}

.tips-7 {
	width: 185px;
	background: rgba(0, 0, 0, 0.7);
	color: #FFFFFF;

	.title {
		background: #D5B54C;
		border-radius: 2px 2px 0px 0px;
		padding: 4px 7px;
	}

	.content {
		padding: 12px;
	}

	.item {
		font-size: 12px;
		height: 24px;
		line-height: 24px;
		display: flex;
	}

	.label {
		margin-right: 14px;
	}

	.value {
		color: #E6BA6F;
	}
}

.tips-6 {
	padding: 8px;

	.item {
		display: flex;
		margin-bottom: 2px;
	}

	.item:last-child {
		margin-bottom: 0px;
	}

	.label,
	.value {
		width: 80px;
		height: 28px;
		line-height: 28px;
		background: rgba(79, 108, 152, 0.3);
		padding-left: 10px;
		font-size: 12px;
		color: #D2E4FF;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.label {
		margin-right: 2px;
	}
}

.tips-5 {
	background: rgba(24, 31, 45, 0.9);
	border-radius: 2px;
	border: 1px solid rgba(154, 168, 199, 0.2);

	.title {
		height: 32px;
		background: rgba(76, 84, 103, 0.5);
		border-radius: 2px 2px 0px 0px;
		display: flex;
		align-items: center;
		font-weight: 600;
		font-size: 13px;
		color: #D2E4FF;
		border-bottom: 1px solid rgba(154, 168, 199, 0.5);

		.iconfont {
			font-size: 10px;
			color: #D2E4FF;
			margin: 0 9px;
		}
	}
}

.tips-4 {
	width: 150px;
	height: 24px;
	// background: linear-gradient(90deg, rgba(211, 179, 20, 0) 0%, rgba(161, 140, 35, 0.8) 53%, rgba(211, 179, 20, 0) 100%);
	border: 1px solid;
	border-image: linear-gradient(270deg, rgba(15, 70, 255, 0), rgba(15, 70, 255, 1.0), rgba(15, 70, 255, 0)) 1 1;
	font-weight: 600;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	line-height: 22px;
	position: relative;

	.iconfont {
		position: absolute;
		color: #3371FF;
		bottom: -23px;
		left: 50%;
		margin-left: -8px;
	}
}

.tips-3 {
	width: 130px;
	height: 26px;
	display: flex;
	color: #fff;
	position: relative;

	.label {
		width: 68px;
		height: 26px;
		background: #3371FF;
		border-radius: 63px 0px 0px 63px;
		opacity: 0.94;
		text-align: center;
		line-height: 26px;
		font-size: 12px;
		font-weight: 500;
	}

	.value {
		flex: 1;
		width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #000000;
		opacity: 0.8;
		height: 26px;
	}

	.unit {
		font-size: 12px;
		opacity: 0.5;
		margin-left: 2px;
	}

	&::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-top: 12px solid transparent;
		border-right: 12px solid transparent;
		border-left: 12px solid transparent;
		border-bottom: 12px solid #2E333D;
		bottom: -12px;
		right: 5px;
		transform: rotate(-45deg);
	}

	&.primary {
		.label {
			color: #3371FF;
			background: #FFF;
			opacity: 1;
		}

		.value {
			background: #3371FF;
			opacity: 1;
		}

		.unit {
			opacity: 1;
		}

		&::before {
			border-bottom: 12px solid #3371FF;
		}
	}
}

.tips-2 {
	width: 127px;
	height: 22px;
	color: #fff;
	background: #000000;
	border-radius: 3px;
	opacity: 0.8;
	display: flex;
	align-items: center;

	.label {
		width: 60px;
		height: 18px;
		background: linear-gradient(270deg, rgba(205, 115, 50, 0) 0%, #3371FF 100%);
		border-radius: 3px 0px 0px 3px;
		font-size: 12px;
		color: #FFFFFF;
		text-align: center;
	}

	.value {
		flex: 1;
		width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.unit {
		font-size: 12px;
		opacity: 0.5;
		margin-left: 2px;
	}

	&.warning {
		.label {
			background: linear-gradient(270deg, rgba(205, 115, 50, 0) 0%, #F37F2C 100%);
		}
	}

	&.error {
		.label {
			background: linear-gradient(270deg, rgba(205, 115, 50, 0) 0%, #F04243 100%);
		}
	}
}

.tips-1 {
	width: 205px;
	height: 56px;
	background: rgba(8, 49, 51, 0.8);
	box-shadow: inset 0px 0px 16px 0px #06E0E9;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	color: #fff;
	position: relative;

	.cricle {
		width: 48px;
		height: 48px;
		background: rgba(8, 49, 51, 0.8);
		box-shadow: inset 0px 0px 16px 0px #06E0E9;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		margin-left: 7px;
		margin-right: 25px;
		text-align: center;
		line-height: 46px;
	}

	.iconfont {
		font-size: 24px;
	}

	.label {
		font-size: 12px;
		line-height: 17px;
	}

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

	.number {
		font-size: 22px;
		line-height: 24px;
		margin-right: 6px;
	}

	.line {
		content: '';
		position: absolute;
		width: 54px;
		height: 3px;
		background: #FFFFFF;
		bottom: 0;
		left: 50%;
		margin-left: -27px;
	}

	.line::after {
		content: '';
		position: absolute;
		height: 240px;
		width: 3px;
		background: linear-gradient(313deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
		bottom: -240px;
		left: 50%;
		margin-left: -1px;
	}

	&.error {
		background: rgba(61, 5, 0, 0.7);
		box-shadow: inset 0px 0px 16px 0px rgba(240, 66, 67, 0.72);

		.cricle {
			background: rgba(61, 5, 0, 0.7);
			box-shadow: inset 0px 0px 16px 0px rgba(240, 66, 67, 0.72);
		}
	}

	&.warning {
		background: rgba(57, 54, 3, 0.68);
		box-shadow: inset 0px 0px 16px 0px rgba(255, 221, 97, 0.72);

		.cricle {
			background: rgba(57, 54, 3, 0.68);
			box-shadow: inset 0px 0px 16px 0px rgba(255, 221, 97, 0.72);
		}
	}
}