还原

src/views/newpage.vue

@@ -1,926 +0,0 @@
-<template>
-	<div class="yying-bg">
-		<!-- 头部 -->
-		<div class="yy-header">
-			<div class="yy-header-tit">
-				<div class="yy-header-tit-text">{{headerTitle}}</div>
-			</div>
-		</div>
-		<!-- 上一体化入口 -->
-		<div class="go-integration" ref="lineHeight1">
-			<div class="img-con">
-				<div class="img-l-con" v-for="(item,index) in 8" ref="lineHeight222">
-					<el-image :src="require('@/assets/yyzx/index-image.jpg')" fit="scale-down" id="lineHeight2"
-						@load="imgLoad"></el-image>
-					<div class="img-line" :style="'height:'+ conHeight3 +'px'"></div>
-				</div>
-			</div>
-			<div class="i-name-con" ref="lineHeight4">
-				<div class="i-x-line" :style="'width:'+ conWidth1 +'px'"></div>
-				<div class="name-item" :style="'width:'+ conWidth2 +'px'" v-for="(item,index) in 8">
-					<div class="i-origin"></div>
-					<div class="i-name">智慧某入口</div>
-				</div>
-			</div>
-		</div>
-		<!-- 中间动画 -->
-		<div class="yyzx-center-container">
-			<!-- 圆环 -->
-			<div class="ring-outside">
-				<div class="c c13"></div>
-				<div class="c c14"></div>
-				<div class="c c15"></div>
-				<div class="c c16"></div>
-				<div class="c c17"></div>
-				<div class="c c18"></div>
-				<div class="c c19"></div>
-				<div class="c c20"></div>
-				<div class="c c21"></div>
-				<div class="c c22"></div>
-				<div class="c c23"></div>
-				<div class="c c24"></div>
-				<div class="c c25"></div>
-				<div class="c c26"></div>
-				<div class="c c27"></div>
-				<div class="c c28"></div>
-				<div class="c c29"></div>
-				<div class="c c30"></div>
-				<div class="l"></div>
-			</div>
-			<div id="atome">
-				<div class="atome-wrap">
-					<div class="circle circle_0"></div>
-					<div class="circle circle_1"></div>
-					<div class="circle circle_2"></div>
-					<div class="circle circle_3"></div>
-					<div class="circle circle_4"></div>
-					<div class="circle circle_5"></div>
-					<div class="circle circle_6"></div>
-				</div>
-			</div>
-			<div class="center-demon" style=""><img src="../assets/yyzx/center-demon.png" /></div>
-			<div style="position: absolute;top:55%;left:50%; transform: translate(-50%,-50%); z-index: 3;"><img
-					src="../assets/yyzx/center1.png" /></div>
-			<img class="center-building" src="../assets/yyzx/yy-bg.png" />
-			<div class="ring">
-				<div class="particle" v-for="(item,index) in 50"></div>
-			</div>
-		</div>
-		<div class="bg-bottom">
-			
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				headerTitle: '四平态势感知平台 运营中心',
-				conHeight1: 0, // 一体化入口 外层容器高度
-				conHeight3: 0, // 一体化入口 竖线高度
-				conHeight4: 0, // 一体化入口 名称容器高度
-				conWidth1: 0, //  一体化入口 图片宽度
-				conWidth2: 0 // 一体化入口 名称容器宽度
-			}
-		},
-		created() {
-			this.getHeight()
-		},
-		mounted() {
-			window.onresize = () => {
-				this.getHeight()
-				this.imgLoad()
-			}
-
-
-		},
-		methods: {
-			getHeight() {
-				this.$nextTick(() => {
-					// console.log('111',)
-					var h1 = this.$refs.lineHeight1.offsetHeight
-					var h4 = this.$refs.lineHeight4.offsetHeight
-					var w1 = this.$refs.lineHeight1.offsetWidth
-					var w2 = this.$refs.lineHeight222[0].offsetWidth
-					console.log(w1, w2, '边距')
-					this.conHeight1 = h1
-					this.conHeight4 = h4
-					this.conWidth1 = w1 - w2
-					this.conWidth2 = w2
-				})
-			},
-			imgLoad() {
-				var imgH = document.getElementById('lineHeight2')
-				this.$nextTick(() => {
-					// console.log(imgH.offsetHeight,'666666666666')
-					this.conHeight3 = this.conHeight1 - imgH.offsetHeight - this.conHeight4
-					console.log('==================41554645645465=============', this.conHeight3)
-				})
-			},
-
-		},
-		destroyed() {
-			window.onresize = null
-		},
-
-
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import url("../assets/yyzx/yyzx.css");
-	@import '@/assets/styles/base.scss';
-
-	.el-image {
-		width: 100%;
-
-		img {
-			width: 100%;
-		}
-	}
-
-	//头部
-	.yy-header {
-		width: 100%;
-		height: 3.75rem;
-		position: absolute;
-		top: 0;
-		background: url('../assets/yyzx/yy-header-bg.png')no-repeat;
-		background-size: 100%;
-
-		.yy-header-tit {
-			width: 35%;
-			height: 5rem;
-			position: absolute;
-			top: 0;
-			left: 50%;
-			transform: translateX(-50%);
-			background: url('../assets/yyzx/yy-header-tit.png') no-repeat;
-			display: flex;
-			justify-content: center;
-			background-size: 100%;
-			align-items: flex-start;
-
-
-			.yy-header-tit-text {
-				display: flex;
-				align-items: center;
-				text-align: center;
-				color: $white;
-				font-size: 2rem;
-				line-height: 4rem;
-				font-family: $fontFk;
-
-			}
-		}
-	}
-
-	//一体化入口
-	.go-integration {
-		width: 95%;
-		height: 23%;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-		top: 10%;
-		z-index: 6;
-		display: flex;
-		flex-direction: column;
-
-		//图片
-		.img-con {
-			width: 100%;
-			height: 75%;
-			z-index: 7;
-			display: flex;
-			justify-content: space-between;
-
-			.img-l-con {
-				width: 11%;
-				height: auto;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				position: relative;
-
-				.img-line {
-					width: 1px;
-					height: 20px;
-					background-color: #69cbff;
-				}
-			}
-		}
-
-		//名称
-		.i-name-con {
-			width: 100%;
-			height: 30%;
-			display: flex;
-			position: relative;
-			justify-content: space-between;
-			bottom: 0;
-			z-index: 10;
-
-			.i-x-line {
-				width: 100%;
-				height: 1px;
-				background-color: #69cbff;
-				position: absolute;
-				left: 50%;
-				transform: translateX(-50%);
-				top: 0;
-			}
-
-			.name-item {
-				height: 100%;
-				// background: red;
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				justify-content: center;
-
-				.i-origin {
-					width: 1rem;
-					height: 1rem;
-					background: #0FF;
-					border-radius: 100%;
-					position: absolute;
-					top:-.4rem;
-					z-index: 8;
-					left: 50%;
-					transform: translateX(-50%);
-
-				}
-
-				.i-name {
-					font-size: 1.3rem;
-					text-align: center;
-					color: #0FF;
-
-				}
-			}
-		}
-	}
-
-	.ring-outside {
-		width: 445px;
-		height: 510px;
-		position: absolute;
-		top: 40%;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	// 容器
-	.yyzx-center-container {
-		width: 60.8125rem;
-		height: 45rem;
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	.center-demon {
-		animation: cc 5s infinite;
-		-webkit-filter: hue-rotate(0deg);
-		position: absolute;
-		top: 38%;
-		left: 51%;
-		transform: translateX(-50%);
-		z-index: 5;
-	}
-
-	@keyframes cc {
-		0% {
-			-webkit-filter: hue-rotate(0deg);
-			top: 35%;
-		}
-
-		20% {
-			-webkit-filter: hue-rotate(343deg);
-			top: 36%;
-		}
-
-		50% {
-			-webkit-filter: hue-rotate(0deg);
-			top: 35%;
-		}
-
-		70% {
-			-webkit-filter: hue-rotate(216deg);
-			top: 36%;
-		}
-
-		100% {
-			-webkit-filter: hue-rotate(0deg);
-			top: 35%;
-		}
-	}
-
-
-
-	.center-building {
-		width: 100%;
-		height: 50%;
-		position: absolute;
-		top: 62%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		height: 510px;
-		animation: abc 15s infinite;
-		-webkit-filter: hue-rotate(0deg);
-	}
-
-	@keyframes abc {
-		0% {
-			-webkit-filter: hue-rotate(0deg);
-		}
-
-		20% {
-			-webkit-filter: hue-rotate(343deg);
-		}
-
-		50% {
-			-webkit-filter: hue-rotate(30deg);
-		}
-
-		70% {
-			-webkit-filter: hue-rotate(216deg);
-		}
-
-		100% {
-			-webkit-filter: hue-rotate(0deg);
-		}
-	}
-
-	.yying-bg {
-		width: 100%;
-		height: 100%;
-		background-color: rgb(14, 15, 16);
-		overflow: hidden;
-		position: absolute;
-		font-size: 16px;
-	}
-
-	#atome {
-		perspective: 1000px;
-		perspective-origin: 50% 50%;
-		height: 50%;
-		top: 18%;
-		position: absolute;
-		left: 50%;
-		margin-left: -90px;
-		z-index: 4;
-	}
-
-	.atome-wrap {
-		height: 200px;
-		width: 200px;
-		margin: auto;
-		position: absolute;
-		transform-style: preserve-3d;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		animation: turn 8s infinite;
-		animation-timing-function: linear;
-	}
-
-	.atome-wrap:after,
-	.atome-wrap:before {
-		content: '';
-		position: absolute;
-		height: 8px;
-		width: 8px;
-		border-radius: 100%;
-		background-color: #fff;
-		box-shadow: 0 0 10px #000,
-			0 0 15px #4fff34,
-			0 0 30px #31ff42;
-		top: 50%;
-		left: 50%;
-		margin-top: -4px;
-		margin-left: -4px;
-	}
-
-	.atome-wrap:before {
-		transform: rotateX(90deg);
-	}
-
-	.circle {
-		height: 200px;
-		width: 200px;
-		position: absolute;
-		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-		border-radius: 100%;
-		border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		animation-timing-function: linear;
-	}
-
-	.circle:before {
-		content: '';
-		position: absolute;
-		height: 4px;
-		width: 8px;
-		border-radius: 100%;
-		background-color: #fff;
-		box-shadow: 0 0 10px #C1FFFD,
-			0 0 15px #3bff1d,
-			0 0 30px #f9ff74,
-			0 0 40px #69cbff;
-		animation: electrons 3s infinite;
-		animation-timing-function: linear;
-	}
-
-	.circle:after {
-		content: '';
-		position: absolute;
-		height: 8px;
-		width: 8px;
-		border-radius: 100%;
-		background-color: #fff;
-		top: 50%;
-		left: 50%;
-		margin-top: -4px;
-		margin-left: -4px;
-		box-shadow: 0 0 10px #000,
-			0 0 15px #64FFF9,
-			0 0 30px #0FF;
-
-	}
-
-	.circle_0 {
-		transform: translateZ(0px) rotateY(0deg) rotateX(0deg);
-		animation: rotate_0 1.8s infinite;
-		animation-timing-function: linear;
-
-		height: 300px;
-		width: 300px;
-		top: -50px;
-		left: -50px;
-	}
-
-	.circle_0:before {
-		top: 50%;
-		left: 0;
-		margin-left: -3px;
-		margin-top: 0;
-		height: 8px;
-		width: 3px;
-	}
-
-	.circle_1 {
-		transform: translateZ(0px) rotateY(90deg) rotateX(0deg);
-		animation: rotate_1 1.8s infinite;
-		animation-timing-function: linear;
-
-		height: 300px;
-		width: 300px;
-		top: -50px;
-		left: -50px;
-	}
-
-	.circle_1:before {
-		top: 50%;
-		right: 0;
-		margin-right: -2px;
-		margin-top: 0px;
-		width: 3px;
-		height: 8px;
-	}
-
-	.circle_2 {
-		transform: translateZ(0px) rotateY(45deg) rotateX(0deg);
-		animation: rotate_2 1.2s infinite;
-		animation-timing-function: linear;
-	}
-
-	.circle_2:before {
-		top: 50%;
-		right: 0;
-		margin-right: -3px;
-		margin-top: 0;
-		height: 8px;
-		width: 3px;
-	}
-
-	.circle_3 {
-		transform: translateZ(0px) rotateY(135deg) rotateX(0deg);
-		animation: rotate_3 1.2s infinite;
-		animation-timing-function: linear;
-	}
-
-	.circle_3:before {
-		bottom: 50%;
-		right: 0;
-		margin-right: -3px;
-		margin-bottom: 0;
-		height: 8px;
-		width: 3px;
-	}
-
-	.circle_4 {
-		transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px);
-		animation: rotate_4 0.5s infinite;
-		animation-timing-function: linear;
-
-		height: 100px;
-		width: 100px;
-		top: 50px;
-		left: 50px;
-	}
-
-	.circle_4:before {
-		top: 50%;
-		left: 0;
-		margin-left: -3px;
-		margin-top: 0;
-		height: 8px;
-		width: 3px;
-	}
-
-	.circle_5 {
-		transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px);
-		animation: rotate_5 0.5s infinite;
-		animation-timing-function: linear;
-
-
-		height: 100px;
-		width: 100px;
-		top: 50px;
-		left: 50px;
-	}
-
-	.circle_5:before {
-		top: 50%;
-		right: 0;
-		margin-right: -2px;
-		margin-top: 0px;
-		width: 3px;
-		height: 8px;
-	}
-
-	.circle_6 {
-		transform: rotateX(50deg) rotateY(90deg) translateZ(0px) translateY(0px);
-		animation: rotate_5 0.5s infinite;
-		animation-timing-function: linear;
-
-
-		height: 100px;
-		width: 100px;
-		top: 50px;
-		left: 50px;
-	}
-
-	.circle_6:before {
-		top: 50%;
-		right: 0;
-		margin-right: -2px;
-		margin-top: 0px;
-		width: 3px;
-		height: 8px;
-	}
-
-
-
-	@keyframes turn {
-		0% {
-			transform: rotateX(0deg) rotateZ(0deg);
-		}
-
-		100% {
-			transform: rotateX(360deg) rotateZ(360deg);
-		}
-	}
-
-	@keyframes electrons {
-		0% {
-			transform: rotateY(0deg);
-			opacity: 1;
-		}
-
-		50% {
-			transform: rotateY(180deg);
-			opacity: 0.2;
-		}
-
-		100% {
-			transform: rotateY(360deg);
-			opacity: 1;
-		}
-	}
-
-	@keyframes rotate_0 {
-		0% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-
-		50% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(180deg);
-			border: dashed 1.5px rgba(16, 244, 255, 1.0);
-		}
-
-		100% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(360deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-	}
-
-	@keyframes rotate_1 {
-		0% {
-			transform: translateZ(0px) rotateY(90deg) rotateX(0deg) rotateZ(0deg);
-			border: dashed 3px rgba(0, 255, 255, 0.1);
-		}
-
-		50% {
-			transform: translateZ(0px) rotateY(90deg) rotateX(0deg) rotateZ(-180deg);
-			border: dashed 1.5px rgba(0, 255, 29, 1.0);
-		}
-
-		100% {
-			transform: translateZ(0px) rotateY(90deg) rotateX(0deg) rotateZ(-360deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-	}
-
-	@keyframes rotate_2 {
-		0% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(135deg) rotateZ(0deg);
-			border: dashed 6px rgba(0, 255, 255, 0.1);
-		}
-
-		50% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(135deg) rotateZ(180deg);
-			border: dashed 1.5px rgba(0, 255, 255, 1);
-		}
-
-		100% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(135deg) rotateZ(360deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-	}
-
-	@keyframes rotate_3 {
-		0% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(45deg) rotateZ(0deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-
-		50% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(45deg) rotateZ(-180deg);
-			border: dashed 6px rgba(130, 255, 209, 1.0);
-		}
-
-		100% {
-			transform: translateZ(0px) rotateY(0deg) rotateX(45deg) rotateZ(-360deg);
-			border: dashed 5px rgba(0, 255, 255, 0.1);
-		}
-	}
-
-	@keyframes rotate_4 {
-		0% {
-			transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px) rotateZ(0deg);
-			border: dashed 1.5px rgba(255, 255, 255, 1);
-		}
-
-		50% {
-			transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px) rotateZ(180deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-
-		100% {
-			transform: rotateX(90deg) rotateY(-30deg) translateZ(0px) translateY(0px) rotateZ(360deg);
-			border: dashed 1.5px rgba(255, 255, 255, 1);
-		}
-	}
-
-	@keyframes rotate_5 {
-		0% {
-			transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px) rotateZ(0deg);
-			border: dashed 1.5px rgba(245, 255, 39, 1.0);
-		}
-
-		50% {
-			transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px) rotateZ(-180deg);
-			border: dashed 1.5px rgba(0, 255, 255, 0.1);
-		}
-
-		100% {
-			transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px) rotateZ(-360deg);
-			border: dashed 1.5px rgba(255, 255, 255, 1);
-		}
-	}
-
-	@keyframes rotate_6 {
-		0% {
-			transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px) rotateZ(0deg);
-			border: dashed 1.5px rgba(255, 193, 164, 1.0);
-		}
-
-		50% {
-			transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px) rotateZ(-180deg);
-			border: dashed 1.5px rgba(43, 32, 27, 0.1);
-		}
-
-		100% {
-			transform: rotateX(90deg) rotateY(45deg) translateZ(0px) translateY(0px) rotateZ(-360deg);
-			border: dashed 1.5px rgba(255, 81, 23, 1.0);
-		}
-	}
-
-	.c {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%) rotateX(45deg);
-		/* 	Native CSS properties don't support the customization of border-style. Therefore, we use a trick with an SVG image inside background-image property. 
-		https://kovart.github.io/dashed-border-generator/
-		*/
-		/* 	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='aqua' stroke-width='1' stroke-dasharray='1' stroke-dashoffset='1' stroke-linecap='butt'/%3e%3c/svg%3e"); */
-		border-radius: 50%;
-		border: 1px dotted aqua;
-		animation: dripBounce 5s infinite;
-	}
-
-	@keyframes dripBounce {
-
-		/* 	0%{top:50%} */
-		10% {
-			top: calc(50% + 5px);
-		}
-
-		20% {
-			top: calc(50% - 5px);
-		}
-
-		35% {
-			top: 50%;
-		}
-	}
-
-	.c13 {
-		height: 130px;
-		width: 260px;
-		animation-delay: -7.6s;
-		top: calc(50% + 12px);
-	}
-
-	.c14 {
-		height: 140px;
-		width: 280px;
-		animation-delay: -7.4s;
-		top: calc(50% + 13px);
-	}
-
-	.c15 {
-		height: 150px;
-		width: 300px;
-		animation-delay: -7.2s;
-		top: calc(50% + 14px);
-	}
-
-	.c16 {
-		height: 160px;
-		width: 320px;
-		animation-delay: -7s;
-		top: calc(50% + 15px);
-	}
-
-	.c17 {
-		height: 170px;
-		width: 340px;
-		animation-delay: -6.8s;
-		top: calc(50% + 16px);
-	}
-
-	.c18 {
-		height: 180px;
-		width: 360px;
-		animation-delay: -6.6s;
-		top: calc(50% + 17px);
-	}
-
-	.c19 {
-		height: 190px;
-		width: 380px;
-		animation-delay: -6.4s;
-		top: calc(50% + 18px);
-	}
-
-	.c20 {
-		height: 200px;
-		width: 400px;
-		animation-delay: -6.2s;
-		top: calc(50% + 19px);
-	}
-
-	.c21 {
-		height: 210px;
-		width: 420px;
-		animation-delay: -6s;
-		top: calc(50% + 20px);
-	}
-
-	.c22 {
-		height: 220px;
-		width: 440px;
-		animation-delay: -5.8s;
-		top: calc(50% + 21px);
-	}
-
-	.c23 {
-		height: 230px;
-		width: 460px;
-		animation-delay: -5.6s;
-		top: calc(50% + 22px);
-	}
-
-	.c24 {
-		height: 240px;
-		width: 480px;
-		animation-delay: -5.4s;
-		top: calc(50% + 23px);
-	}
-
-	.c25 {
-		height: 250px;
-		width: 500px;
-		animation-delay: -5.2s;
-		top: calc(50% + 24px);
-	}
-
-	.c26 {
-		height: 260px;
-		width: 520px;
-		animation-delay: -5s;
-		top: calc(50% + 25px);
-	}
-
-	.c27 {
-		height: 270px;
-		width: 540px;
-		animation-delay: -4.8s;
-		top: calc(50% + 26px);
-	}
-
-	.c28 {
-		height: 280px;
-		width: 560px;
-		animation-delay: -4.6s;
-		top: calc(50% + 27px);
-	}
-
-	.c29 {
-		height: 290px;
-		width: 580px;
-		animation-delay: -4.4s;
-		top: calc(50% + 28px);
-	}
-
-	.c30 {
-		height: 300px;
-		width: 600px;
-		animation-delay: -4.2s;
-		top: calc(50% + 29px);
-	}
-
-	.l {
-		height: 20px;
-		width: 1px;
-		position: absolute;
-		top: 0%;
-		left: 50%;
-		transform: translate(-50%, -70%);
-		background: aqua;
-		animation: drip 5s infinite;
-		animation-delay: -10.3s;
-	}
-
-	@keyframes drip {
-		0% {
-			opacity: 1;
-			top: 0%;
-		}
-
-		10% {
-			opacity: 0.1;
-			top: calc(50% + 10px);
-		}
-
-		100% {
-			opacity: 0;
-		}
-	}
-	.bg-bottom{
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		height: 20%;
-		background-image: url('../assets/yyzx/b-bg.png');
-	}
-</style>