InteSecurePlatform.git

			@@ -17,6 +17,7 @@
			<div class="blocks">
			<div>
			<div class="star-pic">
			<dv-decoration-12 scanDur="5" haloDur="4" class="scan"/>
			<div class="star-bg"><img src="../../../assets/loginPage/star-bg.png" /></div>
			<div class="star"><img src="../../../assets/loginPage/device-pic.png" /></div>
			</div>
			@@ -105,7 +106,8 @@
			socket: any;
			socketData: string;
			data: Array<any>;
			id: string
			id: string;
			defaultImg: string
			}
			export default {
			name: 'intelligentLine',
			@@ -121,7 +123,8 @@
			socketData: '',
			socket: null,
			data: [],
			id: ''
			id: '',
			defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href
			});

			onMounted(() => {
			@@ -148,7 +151,6 @@
			alert('您的浏览器不支持socket');
			} else {
			// 实例化socket
			// debugger
			let uid = userInfos.value.uid.toString()
			var url = state.path + uid + '*' + id;
			console.log(url,'url',uid,'uid')
			@@ -235,7 +237,7 @@
			};
			</script>

			<!-- Add "scoped" attribute to limit CSS to this component only -->
			<!-- Add "scoped" attribute to limit CSS to this components only -->
			<style scoped lang="scss">
			@media screen and (min-width: 1366px) {
			.big-title {
			@@ -263,23 +265,35 @@

			.picbox {
			width: 100%;
			height: 180px;
			height: 200px;
			padding: 10px;
			margin-bottom: 40px;
			margin-bottom: 20px;
			box-sizing: border-box;

			img {
			display: block;
			.imgbox{
			width: 100%;
			height: 100px;
			margin-bottom: 8px;
			height: 120px;
			position: relative;
			margin-bottom: 10px;
			border-radius: 4px;
			overflow: hidden;
			img {
			display: block;
			width: 100%;
			height: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			}
			}

			p {
			font-size: 14px;
			white-space: nowrap;
			color: rgba(255, 255, 255, 0.8);
			margin-top: 10px;
			margin-bottom: 4px;
			span {
			color: #fff;
			}
			@@ -289,7 +303,7 @@
			.item {
			width: calc((100vw - 40px) / 6);
			height: calc((100vh - 130px) / 5);
			padding: 0 20px 20px 50px;
			padding: 0 40px 20px 50px;
			position: relative;
			box-sizing: border-box;
			border-left: 1px solid #36fcfc;
			@@ -303,7 +317,7 @@
			height: 24px;
			border-radius: 50%;
			position: absolute;
			border: 1px solid rgba(0, 225, 255, 0.6);
			border: 1px solid rgba(0, 114, 255, 0.6);
			top: -12px;
			left: 10px;

			@@ -317,7 +331,7 @@
			-moz-border-radius: 50%;
			border: 1px solid #0072ff;
			border-radius: 50%;
			background-color: #00e1ff;
			background-color: #0072ff;
			z-index: 2;
			}
			.pulse {
			@@ -326,7 +340,7 @@
			height: 48px;
			left: -13px;
			top: -13px;
			border: 1px solid #00e1ff;
			border: 1px solid #0072ff;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			@@ -338,7 +352,7 @@
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00e1ff;
			box-shadow: 1px 1px 30px #0072ff;
			}
			.pulse1 {
			position: absolute;
			@@ -346,7 +360,7 @@
			height: 48px;
			left: -13px;
			top: -13px;
			border: 1px solid #00e1ff;
			border: 1px solid #0072ff;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			@@ -358,7 +372,7 @@
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00e1ff;
			box-shadow: 1px 1px 30px #0072ff;
			}
			}
			& > div {
			@@ -464,13 +478,24 @@
			padding: 10px;
			margin-bottom: 40px;
			box-sizing: border-box;

			img {
			display: block;
			.imgbox{
			width: 100%;
			height: 100px;
			position: relative;
			margin-bottom: 6px;
			border-radius: 4px;
			overflow: hidden;
			img {
			display: block;
			width: 100%;
			height: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			}
			}
			p {
			font-size: 14px;
			@@ -500,7 +525,7 @@
			height: 24px;
			border-radius: 50%;
			position: absolute;
			border: 1px solid rgba(0, 225, 255, 0.6);
			border: 1px solid rgba(0, 114, 255, 0.6);
			top: -12px;
			left: 10px;

			@@ -512,9 +537,9 @@
			top: 5px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #0072ff;
			border: 1px solid #0072FF;
			border-radius: 50%;
			background-color: #00e1ff;
			background-color: #0072FF;
			z-index: 2;
			}
			.pulse {
			@@ -523,7 +548,7 @@
			height: 48px;
			left: -13px;
			top: -13px;
			border: 1px solid #00e1ff;
			border: 1px solid #0072FF;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			@@ -535,7 +560,7 @@
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00e1ff;
			box-shadow: 1px 1px 30px #0072FF;
			}
			.pulse1 {
			position: absolute;
			@@ -543,7 +568,7 @@
			height: 48px;
			left: -13px;
			top: -13px;
			border: 1px solid #00e1ff;
			border: 1px solid #0072FF;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			@@ -555,7 +580,7 @@
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00e1ff;
			box-shadow: 1px 1px 30px #0072FF;
			}
			}
			& > div {
			@@ -663,13 +688,24 @@
			padding: 10px;
			margin-bottom: 30px;
			box-sizing: border-box;

			img {
			display: block;
			.imgbox{
			width: 100%;
			height: 80px;
			position: relative;
			margin-bottom: 10px;
			border-radius: 4px;
			overflow: hidden;
			img {
			display: block;
			width: 100%;
			height: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			}
			}
			p {
			font-size: 12px;
			@@ -698,7 +734,7 @@
			height: 24px;
			border-radius: 50%;
			position: absolute;
			border: 1px solid rgba(0, 225, 255, 0.6);
			border: 1px solid rgba(0, 114, 255, 0.6);
			top: -12px;
			left: 2px;

			@@ -712,7 +748,7 @@
			-moz-border-radius: 50%;
			border: 1px solid #0072ff;
			border-radius: 50%;
			background-color: #00e1ff;
			background-color: #0072ff;
			z-index: 2;
			}
			.pulse {
			@@ -721,7 +757,7 @@
			height: 48px;
			left: -13px;
			top: -13px;
			border: 1px solid #00e1ff;
			border: 1px solid #0072ff;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			@@ -733,7 +769,7 @@
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00e1ff;
			box-shadow: 1px 1px 30px #0072ff;
			}
			.pulse1 {
			position: absolute;
			@@ -741,7 +777,7 @@
			height: 48px;
			left: -13px;
			top: -13px;
			border: 1px solid #00e1ff;
			border: 1px solid #0072ff;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			@@ -753,7 +789,7 @@
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00e1ff;
			box-shadow: 1px 1px 30px #0072ff;
			}
			}
			& > div {
			@@ -832,533 +868,547 @@
			}
			}

			@keyframes warn {
			0% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0;
			}

			25% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0.1;
			}

			50% {
			transform: scale(0.5);
			-webkit-transform: scale(0.5);
			opacity: 0.3;
			}

			75% {
			transform: scale(0.8);
			-webkit-transform: scale(0.8);
			opacity: 0.6;
			}

			100% {
			transform: scale(1);
			-webkit-transform: scale(1);
			opacity: 0;
			}
			}

			@keyframes warn1 {
			0% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0;
			}

			25% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0.1;
			}

			50% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0.3;
			}

			75% {
			transform: scale(0.5);
			-webkit-transform: scale(0.5);
			opacity: 0.6;
			}

			100% {
			transform: scale(0.8);
			-webkit-transform: scale(0.8);
			opacity: 0;
			}
			}

			@keyframes circle {
			0% {
			transform: rotate(0);
			-webkit-transform: rotate(0);
			}
			100% {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			}
			}
			@keyframes run {
			to {
			transform: translateX(calc((100vw - 180px) / 6 - 80px));
			}
			}
			.container {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center;
			background-size: 100% 100%;
			.big-title {
			height: 40px;
			line-height: 40px;
			font-weight: bold;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			}
			.btns {
			display: flex;
			align-items: center;
			.fullbtn {
			cursor: pointer;
			display: flex;
			align-items: center;
			margin-right: 20px;
			.toFull {
			font-weight: bolder;
			color: #00ffff;
			margin-right: 10px;
			}
			@keyframes warn {
			0% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0;
			}

			.backBtn {
			cursor: pointer;
			display: flex;
			align-items: center;
			img {
			width: 14px;
			height: 14px;
			margin-right: 10px;
			}
			25% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0.1;
			}

			50% {
			transform: scale(0.5);
			-webkit-transform: scale(0.5);
			opacity: 0.3;
			}

			75% {
			transform: scale(0.8);
			-webkit-transform: scale(0.8);
			opacity: 0.6;
			}

			100% {
			transform: scale(1);
			-webkit-transform: scale(1);
			opacity: 0;
			}
			}
			.blocks {

			@keyframes warn1 {
			0% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0;
			}

			25% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0.1;
			}

			50% {
			transform: scale(0.3);
			-webkit-transform: scale(0.3);
			opacity: 0.3;
			}

			75% {
			transform: scale(0.5);
			-webkit-transform: scale(0.5);
			opacity: 0.6;
			}

			100% {
			transform: scale(0.8);
			-webkit-transform: scale(0.8);
			opacity: 0;
			}
			}

			@keyframes circle {
			0% {
			transform: rotate(0);
			-webkit-transform: rotate(0);
			}
			100% {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			}
			}
			@keyframes run {
			to {
			transform: translateX(calc((100vw - 180px) / 6 - 80px));
			}
			}
			.container {
			width: 100%;
			height: calc(100% - 90px);
			padding: 10px 40px 35px;
			box-sizing: border-box;

			&>div{
			width: 100%;
			height: 100%;
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center;
			background-size: 100% 100%;
			.big-title {
			height: 40px;
			line-height: 40px;
			font-weight: bold;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			align-items: flex-start;
			overflow: hidden;
			overflow-x: auto;
			overflow-y: auto;
			}

			.line-map {
			.btns {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			align-items: center;
			.fullbtn {
			cursor: pointer;
			display: flex;
			align-items: center;
			margin-right: 20px;
			.toFull {
			font-weight: bolder;
			color: #00ffff;
			margin-right: 10px;
			}
			}

			.line-item {
			.backBtn {
			cursor: pointer;
			display: flex;
			align-items: center;
			img {
			width: 14px;
			height: 14px;
			margin-right: 10px;
			}
			}
			}
			.blocks {
			width: 100%;
			height: calc(100% - 90px);
			padding: 10px 40px 35px;
			box-sizing: border-box;

			.area-head {
			position: relative;
			width: 100%;
			height: 80px;
			padding-left: 38px;
			border-left: 1px solid #36fcfc;
			&>div{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			overflow: auto;

			.indicator {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			position: absolute;
			border: 1px solid #00ff66;
			top: -18px;
			left: -18px;
			&::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
			&::scrollbar { width: 0; height: 0; color: transparent; }
			}

			.indi-dot {
			.line-map {
			display: flex;
			justify-content: center;
			align-items: flex-start;

			.line-item {

			.area-head {
			position: relative;
			width: 100%;
			height: 80px;
			padding-left: 38px;
			border-left: 1px solid #36fcfc;

			.indicator {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			position: absolute;
			width: 20px;
			height: 20px;
			left: 7px;
			top: 7px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #00ff66;
			border-radius: 50%;
			background-color: #00ff66;
			z-index: 2;
			}
			.indi-pulse {
			position: absolute;
			width: 56px;
			height: 56px;
			left: -11px;
			top: -11px;
			border: 1px solid #00ff66;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
			opacity: 0;
			-webkit-animation: warn 2s ease-out;
			-moz-animation: warn 2s ease-out;
			animation: warn 2s ease-out;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00ff66;
			}
			.indi-pulse1 {
			position: absolute;
			width: 56px;
			height: 56px;
			left: -11px;
			top: -11px;
			border: 1px solid #3399ff;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
			opacity: 0;
			-webkit-animation: warn1 2s ease-out;
			-moz-animation: warn1 2s ease-out;
			animation: warn1 2s ease-out;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #3399ff;
			}
			}
			.someUndone {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			position: absolute;
			border: 1px solid #ccc;
			top: -18px;
			left: -18px;
			top: -18px;
			left: -18px;

			.indi-dot {
			.indi-dot {
			position: absolute;
			width: 20px;
			height: 20px;
			left: 7px;
			top: 7px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #00ff66;
			border-radius: 50%;
			background-color: #00ff66;
			z-index: 2;
			}
			.indi-pulse {
			position: absolute;
			width: 56px;
			height: 56px;
			left: -11px;
			top: -11px;
			border: 1px solid #00ff66;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
			opacity: 0;
			-webkit-animation: warn 2s ease-out;
			-moz-animation: warn 2s ease-out;
			animation: warn 2s ease-out;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #00ff66;
			}
			.indi-pulse1 {
			position: absolute;
			width: 56px;
			height: 56px;
			left: -11px;
			top: -11px;
			border: 1px solid #3399ff;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
			opacity: 0;
			-webkit-animation: warn1 2s ease-out;
			-moz-animation: warn1 2s ease-out;
			animation: warn1 2s ease-out;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px #3399ff;
			}
			}
			.someUndone {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			position: absolute;
			width: 20px;
			height: 20px;
			left: 7px;
			top: 7px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #ccc;
			border-radius: 50%;
			background-color: #ccc;
			z-index: 2;
			}
			}
			.somewarning {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			position: absolute;
			border: 1px solid #ff0000;
			top: -18px;
			left: -18px;
			top: -18px;
			left: -18px;

			.indi-dot {
			.indi-dot {
			position: absolute;
			width: 20px;
			height: 20px;
			left: 7px;
			top: 7px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #ccc;
			border-radius: 50%;
			background-color: #ccc;
			z-index: 2;
			}
			}
			.somewarning {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			position: absolute;
			width: 20px;
			border: 1px solid #ff0000;
			top: -18px;
			left: -18px;

			.indi-dot {
			position: absolute;
			width: 20px;
			height: 20px;
			left: 7px;
			top: 7px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #ff0000;
			border-radius: 50%;
			background-color: #ff0000;
			z-index: 2;
			}
			}
			.arrow {
			position: absolute;
			width: 58px;
			height: 20px;
			left: 7px;
			top: 7px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border: 1px solid #ff0000;
			border-radius: 50%;
			background-color: #ff0000;
			z-index: 2;
			left: 38px;
			top: -10px;
			background: url('../../../assets/loginPage/arrow-r.png') 0 / cover no-repeat;
			animation: run 2s steps(4) 0s infinite;
			}
			.top-line {
			width: 100%;
			border-top: 2px solid #36fcfc;
			}
			.fadeLine {
			width: 100%;
			border-top: 1px solid rgba(54,252,252,.6);
			}
			}
			.arrow {
			position: absolute;
			width: 58px;
			height: 20px;
			left: 38px;
			top: -10px;
			background: url('../../../assets/loginPage/arrow-r.png') 0 / cover no-repeat;
			animation: run 2s steps(4) 0s infinite;
			.fadeBorder {
			border-left: 1px solid #ccc;
			}
			.top-line {
			.more-info {
			width: 100%;
			border-top: 2px solid #36fcfc;
			}
			.fadeLine {
			width: 100%;
			border-top: 1px solid rgba(54,252,252,.6);
			}
			}
			.fadeBorder {
			border-left: 1px solid #ccc;
			}
			.more-info {
			width: 100%;

			.warning {
			& > section {
			border: 1px solid #ff0000;
			.warning {
			& > section {
			border: 1px solid #ff0000;

			.dot {
			border: 1px solid #ff0000;
			background: #ff0000;
			.dot {
			border: 1px solid #ff0000;
			background: #ff0000;
			}
			.pulse {
			border: 1px solid #ff0000;
			box-shadow: 1px 1px 30px #ff0000;
			}
			.pulse1 {
			border: 1px solid #ff0000;
			box-shadow: 1px 1px 30px #ff0000;
			}
			}
			.pulse {
			border: 1px solid #ff0000;
			box-shadow: 1px 1px 30px #ff0000;
			}
			.pulse1 {
			border: 1px solid #ff0000;
			box-shadow: 1px 1px 30px #ff0000;

			& > div {
			div {
			span.target {
			color: #ff2929;
			font-weight: bolder;
			}
			}
			}
			}
			.undone {
			& > section {
			border: 1px solid #ccc;

			& > div {
			div {
			span.target {
			color: #ff2929;
			font-weight: bolder;
			.dot {
			border: 1px solid #ccc;
			background: #ccc;
			}
			.pulse {
			display: none;
			}
			.pulse1 {
			display: none;
			}
			}
			}
			}
			.undone {
			& > section {
			border: 1px solid #ccc;
			}
			.finish {
			.area-head {
			position: relative;
			width: 100%;
			height: 80px;
			border-left: none;
			}
			}
			.pic-tit {
			display: flex;
			width: calc((100vw - 120px) / 7);
			height: 160px;
			padding: 20px;
			transform: translate(-20px, -40%);
			flex-direction: column;
			align-items: flex-start;

			.dot {
			border: 1px solid #ccc;
			background: #ccc;
			}
			.pulse {
			display: none;
			}
			.pulse1 {
			display: none;
			}
			}
			img {
			width: calc((100vw - 120px) / 7 - 40px);
			height: 90px;
			margin-bottom: 10px;
			border-radius: 4px;
			}
			p {
			font-size: 16px;
			color: #00ffff;
			font-weight: bold;
			}
			}

			.water {
			transform: none;
			}
			.start {
			padding: 40px 0;
			p {
			margin-top: -21px;
			margin-left: 20px;
			}
			span {
			width: 1px;
			height: 50px;
			background: #36fcfc;
			position: absolute;
			top: -10px;
			left: 0;
			}
			section {
			position: absolute;
			top: 30px;
			left: -14px;
			}
			}
			}
			.finish {
			.area-head {
			position: relative;
			width: 100%;
			height: 80px;
			border-left: none;
			}
			.tip {
			width: 100%;
			font-size: 30px;
			text-align: center;
			margin-top: 100px;
			color: #fff;
			font-weight: bolder;
			}
			.pic-tit {
			display: flex;
			width: calc((100vw - 120px) / 7);
			height: 160px;
			padding: 20px;
			transform: translate(-20px, -40%);
			flex-direction: column;
			align-items: flex-start;

			img {
			width: calc((100vw - 120px) / 7 - 40px);
			height: 90px;
			margin-bottom: 10px;
			border-radius: 4px;
			}
			p {
			font-size: 16px;
			color: #00ffff;
			font-weight: bold;
			}
			}

			.water {
			transform: none;
			}
			.start {
			padding: 40px 0;
			p {
			margin-top: -21px;
			margin-left: 20px;
			}
			span {
			width: 1px;
			height: 50px;
			background: #36fcfc;
			position: absolute;
			top: -10px;
			left: 0;
			}
			section {
			position: absolute;
			top: 30px;
			left: -14px;
			}
			}
			}
			.tip {
			width: 100%;
			font-size: 30px;
			text-align: center;
			margin-top: 100px;
			color: #fff;
			font-weight: bolder;
			}
			.current-task {
			position: absolute;
			width: calc((500vw - 600px) / 7);
			z-index: 999999;
			top: 0;
			right: 0;
			padding: 0 60px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.task-des {
			padding: 10px 20px;
			.current-task {
			position: absolute;
			width: calc((500vw - 600px) / 7);
			z-index: 999999;
			top: 0;
			right: 0;
			padding: 0 60px;
			display: flex;
			align-items: center;
			border: 1px solid #36fcfc;
			justify-content: space-between;

			.task-des-l {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20px;
			color: #36fcfc;
			border-right: 1px solid #36fcfc;
			padding-right: 20px;
			img {
			margin-bottom: 10px;
			}
			}
			.task-des-r {
			width: calc((200vw - 240px) / 7);
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20px;
			line-height: 28px;
			color: #fcfc36;
			padding-left: 20px;
			}
			}
			.current-data {
			width: 267px;
			height: 138px;
			padding: 20px 30px;
			box-sizing: border-box;
			background: url('../../../assets/loginPage/xj-bg.png') no-repeat center;
			background-size: 100% 100%;

			.data-area {
			.task-des {
			padding: 10px 20px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #040c3b;
			font-weight: bold;
			padding-bottom: 10px;
			box-sizing: border-box;
			border: 1px solid #36fcfc;

			img {
			width: 30px;
			height: 30px;
			margin-right: 10px;
			animation: circle 1s ease-in-out infinite;
			}

			div {
			font-size: 15px;
			color: rgba(4, 12, 59, 0.8);

			span {
			color: #040c3b;
			}
			}
			}

			.data-spot {
			display: flex;
			align-items: flex-start;
			margin-top: 10px;

			& > div {
			.task-des-l {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;
			font-size: 14px;
			color: rgba(4, 12, 59, 0.8);
			font-size: 20px;
			color: #36fcfc;
			border-right: 1px solid #36fcfc;
			padding-right: 20px;
			img {
			margin-bottom: 10px;
			}
			}
			.task-des-r {
			width: calc((200vw - 240px) / 7);
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20px;
			line-height: 28px;
			color: #fcfc36;
			padding-left: 20px;
			}
			}
			.current-data {
			width: 267px;
			height: 138px;
			padding: 20px 30px;
			box-sizing: border-box;
			background: url('../../../assets/loginPage/xj-bg.png') no-repeat center;
			background-size: 100% 100%;

			p {
			margin-top: 6px;
			color: #040c3b;
			.data-area {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #040c3b;
			font-weight: bold;
			padding-bottom: 10px;
			box-sizing: border-box;

			img {
			width: 30px;
			height: 30px;
			margin-right: 10px;
			animation: circle 1s ease-in-out infinite;
			}

			&:first-of-type {
			border-right: 1px solid #040c3b;
			div {
			font-size: 15px;
			color: rgba(4, 12, 59, 0.8);

			span {
			color: #040c3b;
			}
			}
			}

			.data-spot {
			display: flex;
			align-items: flex-start;
			margin-top: 10px;

			& > div {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;
			font-size: 14px;
			color: rgba(4, 12, 59, 0.8);

			p {
			margin-top: 6px;
			color: #040c3b;
			}

			&:first-of-type {
			border-right: 1px solid #040c3b;
			}
			}
			}
			}
			}
			}
			.star-pic {
			position: absolute;
			width: calc((100vw - 120px) / 7);
			height: calc((100vw - 120px) / 7);
			z-index: 999999999;
			bottom: 40px;
			right: 40px;
			padding: 20px;
			.star-pic {
			position: absolute;
			width: calc((100vw - 120px) / 7);
			height: calc((100vw - 120px) / 7);
			z-index: 9999;
			bottom: 40px;
			right: 40px;
			padding: 20px;

			.star-bg {
			position: inherit;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			img {
			width: 100%;
			height: auto;
			animation: circle 30s linear infinite;
			.scan{
			position: inherit;
			width: 65%;
			height: 65%;
			z-index: 99997;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			}
			}

			.star {
			position: inherit;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			img {
			.star-bg {
			position: inherit;
			width: 100%;
			height: auto;
			height: 100%;
			z-index: 99998;
			left: 0;
			top: 0;
			img {
			width: 100%;
			height: auto;
			animation: circle 30s linear infinite;
			}
			}
			.star {
			position: inherit;
			width: 100%;
			height: 100%;
			z-index: 99999;
			left: 0;
			top: 0;
			img {
			width: 100%;
			height: auto;
			}
			}
			}
			}
			}
			}
			</style>