UI-新页面-勿删

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/integrated/index','/integrated/bigdata','/integrated/forest', '/integrated/fire-forest', '/integrated/monitor','/integrated/date','/integrated/dialog']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/integrated/index','/integrated/bigdata','/integrated/forest', '/integrated/fire-forest', '/integrated/monitor','/integrated/date','/integrated/dialog','/newpage']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -125,6 +125,15 @@ export const constantRoutesNew = [{
 		}
 	},
 	{
+		//林业中心
+		path: '/newpage',
+		name: 'newpage',
+		component: () => import('@/views/newpage'),
+		meta: {
+			title: '实验'
+		}
+	},
+	{
 		//数据中心
 		path: '/datacenter',
 		name: 'datacenter',

src/views/newpage.vue

@@ -0,0 +1,926 @@
+<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>