智慧大屏根据视口宽度做自适应

__ℳ๓₯㎕
已于 2024-01-03 17:03:17 修改
阅读量443
点赞数 11
文章标签： vue.js 前端 css3 html5
于 2023-12-28 09:21:47 首次发布
本文链接：https://blog.csdn.net/gxh287010/article/details/135260704
版权
1.最外层容器添加动态class判断是否添加该样式

2.定义widthScale样式，始终保持视口居中

3.通过mounted中使用 window.onresize = this.setScale接收数据；
4.通过视口计算宽高
通过时间轮询的方法1s钟监测一次
<template>
	<div class="u-flex-xy-center container" :class="{ widthScale: isWidth }">
		<div id="container">
			<div class="u-flex-y main-page">
				<div class="header pr">
					<div class="header_bg"></div>
					<div class="header_title fm1">{{projectInfo.projectName}}</div>
					<div class="bi-header-animation-all">
						<div class="bi-header-animation"></div>
						<div class="bi-header-animation1"></div>
						<div class="bi-header-animation2"></div>
					</div>
					<div class="u-flex u-flex-between u-p-l-20 u-p-r-20 u-p-t-12">
						<div class="u-font-20 blue_word">{{ time }}</div>
						<div class="u-font-20 blue_word">
							<span>{{ user }}</span>
							<span class="cp u-m-l-14" @click="loginout">退出</span>
						</div>
					</div>
					<div class="u-flex u-flex-between u-p-l-8 u-p-r-8 u-m-t-16">
						<div class="u-flex link_box">
							<router-link class="pr tc" to="/index"><span>梁场概况</span><img
									src="@/assets/images/menu/line.png" /></router-link>
							<router-link class="pr tc" to="/siteManagement"><span>场区管理</span><img
									src="@/assets/images/menu/line.png" /></router-link>
							<router-link class="pr tc" to="/production"><span>梁场生产</span><img
									src="@/assets/images/menu/line.png" /></router-link>
							<router-link class="pr tc" to="/VideoSup"><span>视频监控</span><img
									src="@/assets/images/menu/line.png" /></router-link>
							<router-link class="pr tc" to="/DigitalConstruction">
								<span>数字工地</span>
								<img src="@/assets/images/menu/line.png" />
								<div class="links tc pa u-flex-y">
									<router-link to="/DigitalConstruction/ConstructionSite">数字工地</router-link>
									<router-link to="/DigitalConstruction/AiMonitor">Ai监测</router-link>
								</div>
							</router-link>
						</div>
						<div class="u-flex link_box">
							<!-- <router-link class="pr tc" to="/Laborservice"><span>劳务管理</span><img
									src="@/assets/images/menu/line.png" /></router-link> -->
							<router-link class="pr tc" to="/Laborservice/">
								<span>劳务管理</span>
								<img src="@/assets/images/menu/line.png" />
								<div class="links tc pa u-flex-y">
									<router-link to="/Laborservice/analyze2">数据分析</router-link>
									<router-link to="/Laborservice/analyze">实时数据</router-link>
								</div>
							</router-link>
							<router-link class="pr tc" to="/SecureManage"><span>安全管理</span><img
									src="@/assets/images/menu/line.png" /></router-link>
							<router-link class="pr tc" to="/qualityControl"><span>质量管理</span><img
									src="@/assets/images/menu/line.png" /></router-link>
							<router-link class="pr tc" to="/IntelligentMonitoring">
								<span>智能监测</span>
								<img src="@/assets/images/menu/line.png" />
								<div class="links tc pa u-flex-y">
									<!-- <router-link to="/IntelligentMonitoring/gantryCrane">龙门吊管理</router-link>
									<router-link to="/IntelligentMonitoring/towerCrane">塔吊管理</router-link>
									<router-link to="/IntelligentMonitoring/materiel">物料管理</router-link> -->
									<router-link to="/IntelligentMonitoring/raiseDust">环境监测</router-link>
									<!-- <router-link to="/IntelligentMonitoring/bridging">架桥机</router-link> -->
									<router-link to="/IntelligentMonitoring/beamHandler">提梁机</router-link>
									<router-link to="/IntelligentMonitoring/Tensioning">智能张拉</router-link>
									<router-link to="/IntelligentMonitoring/Grouting">智能压浆</router-link>
								</div>
							</router-link>
							<router-link class="pr tc" to="/partyConstruction"><span>智慧党建</span><img
									src="@/assets/images/menu/line.png" /></router-link>
						</div>
					</div>
				</div>
				<div class="app-main pr">
					<div class="swiper-container notice_box" ref="notice_swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide tc f20">
								<span style="color:#00FFD1">数字成就新基建</span>
							</div>
							<div class="swiper-slide tc f20">
								<span style="color:#00FFD1">已安全生产{{safe_day}}天</span>
							</div>
						</div>
					</div>
					<router-view :key="key" style="position: relative; z-index: 3" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Swiper,
		Navigation,
		Autoplay
	} from 'swiper'
	import {findProjectById} from '@/api/index'
	let timer = "";
	import {
		removeToken,
		removeHost
	} from "@/utils/auth";
	export default {
		name: "Layout",
		computed: {
			key() {
				return this.$route.path;
			},
			projectInfo(){
				return this.$store.state.projectInfo
			}
		},
		data() {
			return {
				safe_day:0,
				time: "",
				isWidth: false,
				user: localStorage.getItem("nick_name"),
			};
		},
		mounted() {
			this.setTime();
			setInterval(this.setTime, 1000);
			this.setScale();
			window.onresize = this.setScale;
			Swiper.use([Navigation, Autoplay]);
			findProjectById({}).then(res=>{
				if(res.data.length){
					const info = res.data[0];
					this.safe_day = parseInt((new Date().getTime() - new Date(info.actualCommencementDate).getTime())/1000/60/60/24)||0;
					this.$store.commit('SET_PROJECT',info);
					this.$nextTick(()=>{
						new Swiper(this.$refs.notice_swiper, {
							direction: 'vertical',
							observer: true,
							observeParents: true,
							speed: 800,
							loop: true,
							autoplay:{
								delay:3000
							}
						})
					})
				}
			})
		},
		methods: {
			loginout() {
				this.$confirm("提示", {
					type: "warning",
					message: "确定要退出系统吗？",
				}).then(() => {
					removeToken();
					removeHost();
					localStorage.clear();
					this.$router.replace("/login");
				});
			},
			setTime() {
				this.time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
			},
			setScale() {
				if (this.$route.path == "/login") return;
				if (timer) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					var widthScale = document.body.clientWidth / 1920;
					var heightScale = document.body.clientHeight / 1080;
					if (widthScale < heightScale) {
						this.isWidth = true;
					} else {
						this.isWidth = false;
					}
					var scale = Math.floor(Math.min(widthScale, heightScale) * 1000) / 1000;
					document.getElementById(
						"container"
					).style.transform = `scale(${scale})`;
					document.getElementById("container").style.transformOrigin =
						widthScale < heightScale ? "left center 0px" : "center top 0px";
				}, 500);
			},
		}
	};
</script>

<style lang="scss" scoped>
	@keyframes anim-star{
		0%{
			transform: translateY(0);
		}
		100%{
			transform: translateY(-2000px);
		}
	}
	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		align-items: normal;
		user-select: none;
		overflow: unset;
	}

	.widthScale {
		align-items: center;
		justify-content: normal;
	}

	#container,
	.main-page {
		width: 1920px;
		height: 1080px;
	}

	.header {
		height: 100px;
		background: url("~@/assets/images/menu/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		z-index: 5;
		.header_title{
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index:-1;
			text-align: center;
			line-height: 90px;
			color: #fff;
			font-size: 42px;
		}
		.bi-header-animation-all{
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -2;
		}
		.bi-header-animation{
			width: 2px;
			    height: 2px;
			    overflow: hidden;
			    border-radius: 50%;
			    background: transparent;
			    opacity: 1;
			    box-shadow: 1245px 31px rgba(194,215,250,.6), 845px 339px rgba(194,215,250,.6), 770px 699px rgba(194,215,250,.6), 1661px 352px rgba(194,215,250,.6), 339px 1355px rgba(194,215,250,.6), 163px 1713px rgba(194,215,250,.6), 1681px 920px rgba(194,215,250,.6), 899px 1695px rgba(194,215,250,.6), 1165px 1723px rgba(194,215,250,.6), 1109px 196px rgba(194,215,250,.6), 489px 1228px rgba(194,215,250,.6), 363px 198px rgba(194,215,250,.6), 762px 611px rgba(194,215,250,.6), 264px 1388px rgba(194,215,250,.6), 1401px 553px rgba(194,215,250,.6), 1630px 1592px rgba(194,215,250,.6), 881px 824px rgba(194,215,250,.6), 321px 1683px rgba(194,215,250,.6), 314px 1015px rgba(194,215,250,.6), 1297px 1477px rgba(194,215,250,.6), 1975px 1013px rgba(194,215,250,.6), 766px 882px rgba(194,215,250,.6), 863px 120px rgba(194,215,250,.6), 98px 944px rgba(194,215,250,.6), 1192px 891px rgba(194,215,250,.6), 1703px 1388px rgba(194,215,250,.6), 1173px 172px rgba(194,215,250,.6), 39px 526px rgba(194,215,250,.6), 1723px 170px rgba(194,215,250,.6), 1228px 1022px rgba(194,215,250,.6), 378px 165px rgba(194,215,250,.6), 1594px 476px rgba(194,215,250,.6), 603px 621px rgba(194,215,250,.6), 1674px 1922px rgba(194,215,250,.6), 1589px 212px rgba(194,215,250,.6), 771px 1232px rgba(194,215,250,.6), 1723px 444px rgba(194,215,250,.6), 793px 1238px rgba(194,215,250,.6), 1111px 1464px rgba(194,215,250,.6), 1071px 1073px rgba(194,215,250,.6), 397px 626px rgba(194,215,250,.6), 818px 184px rgba(194,215,250,.6), 686px 299px rgba(194,215,250,.6), 1179px 1494px rgba(194,215,250,.6), 600px 954px rgba(194,215,250,.6), 105px 426px rgba(194,215,250,.6), 562px 185px rgba(194,215,250,.6), 794px 113px rgba(194,215,250,.6), 1436px 1780px rgba(194,215,250,.6), 1980px 1476px rgba(194,215,250,.6), 960px 1314px rgba(194,215,250,.6), 1125px 1742px rgba(194,215,250,.6), 887px 431px rgba(194,215,250,.6), 1078px 1516px rgba(194,215,250,.6), 1547px 1383px rgba(194,215,250,.6), 1354px 596px rgba(194,215,250,.6), 1052px 1775px rgba(194,215,250,.6), 1996px 227px rgba(194,215,250,.6), 1337px 821px rgba(194,215,250,.6), 173px 4px rgba(194,215,250,.6), 239px 667px rgba(194,215,250,.6), 468px 1813px rgba(194,215,250,.6), 9px 303px rgba(194,215,250,.6), 1935px 621px rgba(194,215,250,.6), 1602px 1959px rgba(194,215,250,.6), 290px 912px rgba(194,215,250,.6), 906px 1542px rgba(194,215,250,.6), 670px 1860px rgba(194,215,250,.6), 1742px 479px rgba(194,215,250,.6), 1694px 1283px rgba(194,215,250,.6), 1986px 427px rgba(194,215,250,.6), 1021px 896px rgba(194,215,250,.6), 1758px 227px rgba(194,215,250,.6), 1493px 279px rgba(194,215,250,.6), 839px 734px rgba(194,215,250,.6), 1314px 1278px rgba(194,215,250,.6), 746px 387px rgba(194,215,250,.6), 854px 204px rgba(194,215,250,.6), 1366px 1654px rgba(194,215,250,.6), 899px 1647px rgba(194,215,250,.6), 1307px 570px rgba(194,215,250,.6), 748px 1365px rgba(194,215,250,.6), 468px 1238px rgba(194,215,250,.6), 832px 223px rgba(194,215,250,.6), 82px 93px rgba(194,215,250,.6), 1751px 289px rgba(194,215,250,.6), 1246px 1125px rgba(194,215,250,.6), 1140px 1346px rgba(194,215,250,.6), 365px 1797px rgba(194,215,250,.6), 1912px 1989px rgba(194,215,250,.6), 336px 1573px rgba(194,215,250,.6), 1018px 29px rgba(194,215,250,.6), 303px 1006px rgba(194,215,250,.6), 1167px 1655px rgba(194,215,250,.6), 1385px 438px rgba(194,215,250,.6), 1535px 1430px rgba(194,215,250,.6), 620px 736px rgba(194,215,250,.6), 836px 342px rgba(194,215,250,.6), 970px 1574px rgba(194,215,250,.6), 979px 1582px rgba(194,215,250,.6), 1454px 389px rgba(194,215,250,.6), 614px 463px rgba(194,215,250,.6), 706px 916px rgba(194,215,250,.6), 1964px 1340px rgba(194,215,250,.6), 1811px 194px rgba(194,215,250,.6), 1166px 1361px rgba(194,215,250,.6), 941px 918px rgba(194,215,250,.6), 359px 1715px rgba(194,215,250,.6), 316px 1743px rgba(194,215,250,.6), 1462px 1124px rgba(194,215,250,.6), 493px 712px rgba(194,215,250,.6), 1570px 960px rgba(194,215,250,.6), 1710px 1876px rgba(194,215,250,.6), 1127px 1959px rgba(194,215,250,.6), 738px 1033px rgba(194,215,250,.6), 1794px 381px rgba(194,215,250,.6), 836px 749px rgba(194,215,250,.6), 1657px 375px rgba(194,215,250,.6), 525px 212px rgba(194,215,250,.6), 1303px 842px rgba(194,215,250,.6), 897px 608px rgba(194,215,250,.6), 657px 887px rgba(194,215,250,.6), 1232px 133px rgba(194,215,250,.6), 107px 290px rgba(194,215,250,.6), 1458px 1751px rgba(194,215,250,.6), 128px 1332px rgba(194,215,250,.6), 1127px 782px rgba(194,215,250,.6), 911px 1554px rgba(194,215,250,.6), 1036px 1191px rgba(194,215,250,.6), 1684px 1260px rgba(194,215,250,.6), 592px 1588px rgba(194,215,250,.6), 441px 955px rgba(194,215,250,.6), 382px 1871px rgba(194,215,250,.6), 1195px 1059px rgba(194,215,250,.6), 1677px 325px rgba(194,215,250,.6), 884px 104px rgba(194,215,250,.6), 648px 836px rgba(194,215,250,.6), 1269px 1504px rgba(194,215,250,.6), 144px 919px rgba(194,215,250,.6), 1256px 1311px rgba(194,215,250,.6), 516px 1098px rgba(194,215,250,.6), 1367px 1149px rgba(194,215,250,.6), 98px 1779px rgba(194,215,250,.6), 935px 732px rgba(194,215,250,.6), 61px 1011px rgba(194,215,250,.6), 1207px 1843px rgba(194,215,250,.6), 1931px 1915px rgba(194,215,250,.6), 754px 1658px rgba(194,215,250,.6), 1734px 1698px rgba(194,215,250,.6), 1172px 1547px rgba(194,215,250,.6), 962px 584px rgba(194,215,250,.6), 152px 1264px rgba(194,215,250,.6), 1464px 1931px rgba(194,215,250,.6), 473px 894px rgba(194,215,250,.6), 174px 224px rgba(194,215,250,.6), 979px 301px rgba(194,215,250,.6), 1839px 1807px rgba(194,215,250,.6), 385px 1479px rgba(194,215,250,.6), 167px 49px rgba(194,215,250,.6), 64px 434px rgba(194,215,250,.6), 1190px 1266px rgba(194,215,250,.6), 534px 640px rgba(194,215,250,.6), 1888px 1310px rgba(194,215,250,.6), 1283px 1375px rgba(194,215,250,.6), 1495px 599px rgba(194,215,250,.6), 1243px 1331px rgba(194,215,250,.6), 1559px 1230px rgba(194,215,250,.6), 275px 1426px rgba(194,215,250,.6), 1106px 1102px rgba(194,215,250,.6), 866px 1421px rgba(194,215,250,.6), 1461px 1599px rgba(194,215,250,.6), 1327px 1009px rgba(194,215,250,.6), 1786px 800px rgba(194,215,250,.6), 881px 733px rgba(194,215,250,.6), 1208px 784px rgba(194,215,250,.6), 857px 900px rgba(194,215,250,.6), 1122px 77px rgba(194,215,250,.6), 1051px 1352px rgba(194,215,250,.6), 1617px 1174px rgba(194,215,250,.6), 1988px 1523px rgba(194,215,250,.6), 968px 1167px rgba(194,215,250,.6), 1447px 902px rgba(194,215,250,.6), 1834px 598px rgba(194,215,250,.6), 1274px 669px rgba(194,215,250,.6), 906px 951px rgba(194,215,250,.6), 1457px 1597px rgba(194,215,250,.6), 1641px 945px rgba(194,215,250,.6), 690px 1052px rgba(194,215,250,.6), 1551px 965px rgba(194,215,250,.6), 1468px 1282px rgba(194,215,250,.6), 802px 745px rgba(194,215,250,.6), 1528px 261px rgba(194,215,250,.6), 1965px 1239px rgba(194,215,250,.6), 542px 1686px rgba(194,215,250,.6), 866px 611px rgba(194,215,250,.6), 1048px 1938px rgba(194,215,250,.6), 710px 63px rgba(194,215,250,.6), 1954px 758px rgba(194,215,250,.6), 1416px 993px rgba(194,215,250,.6), 1590px 1598px rgba(194,215,250,.6), 1497px 1951px rgba(194,215,250,.6), 166px 720px rgba(194,215,250,.6), 733px 88px rgba(194,215,250,.6), 576px 549px rgba(194,215,250,.6), 284px 1295px rgba(194,215,250,.6), 1103px 230px rgba(194,215,250,.6), 753px 1653px rgba(194,215,250,.6), 470px 960px rgba(194,215,250,.6), 580px 1944px rgba(194,215,250,.6), 1131px 1873px rgba(194,215,250,.6), 182px 1859px rgba(194,215,250,.6), 383px 834px rgba(194,215,250,.6), 510px 474px rgba(194,215,250,.6), 1460px 1471px rgba(194,215,250,.6), 1180px 882px rgba(194,215,250,.6), 1002px 1471px rgba(194,215,250,.6), 1293px 1102px rgba(194,215,250,.6), 305px 778px rgba(194,215,250,.6), 890px 1327px rgba(194,215,250,.6), 1826px 1609px rgba(194,215,250,.6), 1614px 1448px rgba(194,215,250,.6), 1675px 1850px rgba(194,215,250,.6), 1134px 603px rgba(194,215,250,.6), 1303px 1988px rgba(194,215,250,.6), 1464px 265px rgba(194,215,250,.6), 30px 1107px rgba(194,215,250,.6), 98px 981px rgba(194,215,250,.6), 290px 580px rgba(194,215,250,.6), 1674px 819px rgba(194,215,250,.6), 1245px 82px rgba(194,215,250,.6), 396px 1881px rgba(194,215,250,.6), 1150px 1991px rgba(194,215,250,.6), 1548px 1584px rgba(194,215,250,.6), 1518px 1407px rgba(194,215,250,.6), 1161px 1262px rgba(194,215,250,.6), 1011px 274px rgba(194,215,250,.6), 899px 293px rgba(194,215,250,.6), 1834px 1811px rgba(194,215,250,.6), 1515px 1658px rgba(194,215,250,.6), 1510px 1115px rgba(194,215,250,.6), 1376px 1239px rgba(194,215,250,.6), 951px 1237px rgba(194,215,250,.6), 1369px 1588px rgba(194,215,250,.6), 652px 1123px rgba(194,215,250,.6), 1481px 536px rgba(194,215,250,.6), 167px 358px rgba(194,215,250,.6), 1231px 1309px rgba(194,215,250,.6), 1602px 437px rgba(194,215,250,.6), 1153px 672px rgba(194,215,250,.6), 534px 1716px rgba(194,215,250,.6), 604px 1687px rgba(194,215,250,.6), 1396px 646px rgba(194,215,250,.6), 1417px 1923px rgba(194,215,250,.6), 139px 488px rgba(194,215,250,.6), 1845px 897px rgba(194,215,250,.6), 415px 1082px rgba(194,215,250,.6), 1421px 1914px rgba(194,215,250,.6), 1496px 1337px rgba(194,215,250,.6), 254px 1341px rgba(194,215,250,.6), 1660px 1416px rgba(194,215,250,.6), 732px 1726px rgba(194,215,250,.6), 86px 1921px rgba(194,215,250,.6), 90px 151px rgba(194,215,250,.6), 728px 288px rgba(194,215,250,.6), 1351px 1093px rgba(194,215,250,.6), 393px 1182px rgba(194,215,250,.6), 1986px 496px rgba(194,215,250,.6), 667px 110px rgba(194,215,250,.6), 682px 643px rgba(194,215,250,.6), 77px 1938px rgba(194,215,250,.6), 490px 829px rgba(194,215,250,.6), 747px 1449px rgba(194,215,250,.6), 36px 788px rgba(194,215,250,.6), 1612px 1658px rgba(194,215,250,.6), 1392px 1191px rgba(194,215,250,.6), 723px 1748px rgba(194,215,250,.6), 911px 141px rgba(194,215,250,.6), 28px 1101px rgba(194,215,250,.6), 1360px 665px rgba(194,215,250,.6), 1593px 1751px rgba(194,215,250,.6), 411px 936px rgba(194,215,250,.6), 1140px 123px rgba(194,215,250,.6), 815px 517px rgba(194,215,250,.6), 1696px 880px rgba(194,215,250,.6), 731px 1541px rgba(194,215,250,.6), 1958px 792px rgba(194,215,250,.6), 52px 1045px rgba(194,215,250,.6), 1157px 93px rgba(194,215,250,.6), 1230px 1214px rgba(194,215,250,.6), 1433px 1465px rgba(194,215,250,.6), 1435px 792px rgba(194,215,250,.6), 1552px 662px rgba(194,215,250,.6), 709px 659px rgba(194,215,250,.6), 124px 885px rgba(194,215,250,.6), 1351px 535px rgba(194,215,250,.6), 1222px 688px rgba(194,215,250,.6), 1944px 1453px rgba(194,215,250,.6), 1139px 488px rgba(194,215,250,.6), 285px 902px rgba(194,215,250,.6), 1781px 104px rgba(194,215,250,.6), 442px 1103px rgba(194,215,250,.6), 58px 60px rgba(194,215,250,.6), 775px 1496px rgba(194,215,250,.6), 844px 321px rgba(194,215,250,.6), 534px 418px rgba(194,215,250,.6), 608px 1866px rgba(194,215,250,.6), 562px 684px rgba(194,215,250,.6), 1194px 366px rgba(194,215,250,.6), 1305px 1753px rgba(194,215,250,.6), 334px 1186px rgba(194,215,250,.6), 285px 966px rgba(194,215,250,.6), 1431px 1140px rgba(194,215,250,.6), 990px 221px rgba(194,215,250,.6), 1720px 347px rgba(194,215,250,.6), 159px 1150px rgba(194,215,250,.6), 1329px 345px rgba(194,215,250,.6), 1288px 1553px rgba(194,215,250,.6), 735px 1060px rgba(194,215,250,.6), 1157px 168px rgba(194,215,250,.6), 61px 902px rgba(194,215,250,.6), 1602px 1986px rgba(194,215,250,.6), 419px 492px rgba(194,215,250,.6), 1797px 1613px rgba(194,215,250,.6), 435px 1760px rgba(194,215,250,.6), 1769px 1239px rgba(194,215,250,.6), 517px 938px rgba(194,215,250,.6), 652px 1887px rgba(194,215,250,.6), 1744px 1544px rgba(194,215,250,.6), 784px 1384px rgba(194,215,250,.6), 1582px 435px rgba(194,215,250,.6), 1190px 1463px rgba(194,215,250,.6), 1497px 577px rgba(194,215,250,.6), 571px 297px rgba(194,215,250,.6), 342px 249px rgba(194,215,250,.6), 1159px 1786px rgba(194,215,250,.6), 222px 1809px rgba(194,215,250,.6), 80px 318px rgba(194,215,250,.6), 985px 1972px rgba(194,215,250,.6), 1362px 612px rgba(194,215,250,.6), 451px 1760px rgba(194,215,250,.6), 1067px 1803px rgba(194,215,250,.6), 69px 1556px rgba(194,215,250,.6), 1295px 1381px rgba(194,215,250,.6), 930px 1640px rgba(194,215,250,.6), 265px 424px rgba(194,215,250,.6), 324px 1109px rgba(194,215,250,.6), 587px 743px rgba(194,215,250,.6), 1841px 548px rgba(194,215,250,.6), 1215px 1248px rgba(194,215,250,.6), 1216px 1791px rgba(194,215,250,.6), 698px 1259px rgba(194,215,250,.6), 1309px 952px rgba(194,215,250,.6), 943px 1624px rgba(194,215,250,.6), 1281px 1582px rgba(194,215,250,.6), 1627px 107px rgba(194,215,250,.6), 78px 1617px rgba(194,215,250,.6), 152px 275px rgba(194,215,250,.6), 790px 1832px rgba(194,215,250,.6), 648px 942px rgba(194,215,250,.6), 1471px 1623px rgba(194,215,250,.6), 450px 1042px rgba(194,215,250,.6), 194px 1199px rgba(194,215,250,.6), 1864px 145px rgba(194,215,250,.6), 965px 296px rgba(194,215,250,.6), 1662px 1395px rgba(194,215,250,.6), 1840px 857px rgba(194,215,250,.6), 633px 1586px rgba(194,215,250,.6), 1007px 1648px rgba(194,215,250,.6), 785px 1823px rgba(194,215,250,.6), 1333px 489px rgba(194,215,250,.6), 1940px 372px rgba(194,215,250,.6), 1592px 1532px rgba(194,215,250,.6), 676px 614px rgba(194,215,250,.6), 736px 217px rgba(194,215,250,.6), 968px 1073px rgba(194,215,250,.6), 819px 1607px rgba(194,215,250,.6), 1017px 1679px rgba(194,215,250,.6), 1569px 1747px rgba(194,215,250,.6), 1595px 1027px rgba(194,215,250,.6), 915px 1481px rgba(194,215,250,.6), 1829px 1234px rgba(194,215,250,.6), 357px 846px rgba(194,215,250,.6), 726px 830px rgba(194,215,250,.6), 1487px 1865px rgba(194,215,250,.6), 1385px 1417px rgba(194,215,250,.6), 1081px 1135px rgba(194,215,250,.6), 664px 620px rgba(194,215,250,.6), 1809px 599px rgba(194,215,250,.6), 660px 1534px rgba(194,215,250,.6), 7px 327px rgba(194,215,250,.6), 80px 1476px rgba(194,215,250,.6), 93px 238px rgba(194,215,250,.6), 1864px 40px rgba(194,215,250,.6), 1766px 226px rgba(194,215,250,.6), 47px 535px rgba(194,215,250,.6), 1730px 703px rgba(194,215,250,.6), 924px 1387px rgba(194,215,250,.6), 191px 1106px rgba(194,215,250,.6), 1094px 1859px rgba(194,215,250,.6), 429px 943px rgba(194,215,250,.6), 4px 1302px rgba(194,215,250,.6), 1638px 399px rgba(194,215,250,.6), 119px 514px rgba(194,215,250,.6), 642px 1005px rgba(194,215,250,.6), 1131px 1541px rgba(194,215,250,.6), 434px 1283px rgba(194,215,250,.6), 822px 1261px rgba(194,215,250,.6), 1515px 1316px rgba(194,215,250,.6), 989px 359px rgba(194,215,250,.6), 1785px 88px rgba(194,215,250,.6), 1252px 1252px rgba(194,215,250,.6), 1009px 257px rgba(194,215,250,.6), 930px 984px rgba(194,215,250,.6), 1727px 1569px rgba(194,215,250,.6), 924px 994px rgba(194,215,250,.6), 1688px 316px rgba(194,215,250,.6), 327px 1287px rgba(194,215,250,.6), 11px 1183px rgba(194,215,250,.6), 457px 984px rgba(194,215,250,.6), 1818px 113px rgba(194,215,250,.6), 1710px 1428px rgba(194,215,250,.6), 1825px 301px rgba(194,215,250,.6), 1392px 881px rgba(194,215,250,.6), 707px 1040px rgba(194,215,250,.6), 1949px 869px rgba(194,215,250,.6), 1146px 1040px rgba(194,215,250,.6), 986px 1200px rgba(194,215,250,.6), 1417px 1153px rgba(194,215,250,.6), 1933px 1476px rgba(194,215,250,.6), 1939px 1976px rgba(194,215,250,.6), 1001px 1662px rgba(194,215,250,.6), 1477px 1388px rgba(194,215,250,.6), 1425px 1826px rgba(194,215,250,.6), 1656px 1191px rgba(194,215,250,.6), 1088px 173px rgba(194,215,250,.6), 445px 135px rgba(194,215,250,.6), 1633px 1096px rgba(194,215,250,.6), 227px 1933px rgba(194,215,250,.6), 1246px 1093px rgba(194,215,250,.6), 1729px 58px rgba(194,215,250,.6), 988px 1060px rgba(194,215,250,.6), 1758px 1926px rgba(194,215,250,.6), 545px 1954px rgba(194,215,250,.6), 950px 1305px rgba(194,215,250,.6), 1947px 1088px rgba(194,215,250,.6), 1661px 1990px rgba(194,215,250,.6), 880px 1761px rgba(194,215,250,.6), 126px 383px rgba(194,215,250,.6), 946px 585px rgba(194,215,250,.6), 876px 1339px rgba(194,215,250,.6), 176px 1796px rgba(194,215,250,.6), 252px 1880px rgba(194,215,250,.6), 615px 1620px rgba(194,215,250,.6), 243px 1782px rgba(194,215,250,.6), 1569px 1015px rgba(194,215,250,.6), 525px 10px rgba(194,215,250,.6), 1154px 1024px rgba(194,215,250,.6), 50px 415px rgba(194,215,250,.6), 1993px 510px rgba(194,215,250,.6), 515px 601px rgba(194,215,250,.6), 1626px 233px rgba(194,215,250,.6), 302px 815px rgba(194,215,250,.6), 158px 1041px rgba(194,215,250,.6), 924px 1171px rgba(194,215,250,.6), 1618px 1849px rgba(194,215,250,.6), 1476px 817px rgba(194,215,250,.6), 22px 481px rgba(194,215,250,.6), 573px 657px rgba(194,215,250,.6), 773px 1357px rgba(194,215,250,.6), 651px 455px rgba(194,215,250,.6), 247px 1523px rgba(194,215,250,.6), 1184px 109px rgba(194,215,250,.6), 353px 87px rgba(194,215,250,.6), 1141px 355px rgba(194,215,250,.6), 539px 1059px rgba(194,215,250,.6), 1307px 1838px rgba(194,215,250,.6), 1450px 185px rgba(194,215,250,.6), 1173px 1163px rgba(194,215,250,.6), 1472px 566px rgba(194,215,250,.6), 1415px 1400px rgba(194,215,250,.6), 1345px 1701px rgba(194,215,250,.6), 947px 709px rgba(194,215,250,.6), 835px 1896px rgba(194,215,250,.6), 1509px 294px rgba(194,215,250,.6), 908px 875px rgba(194,215,250,.6), 98px 49px rgba(194,215,250,.6), 26px 577px rgba(194,215,250,.6), 1615px 1988px rgba(194,215,250,.6), 1045px 1259px rgba(194,215,250,.6), 1894px 1608px rgba(194,215,250,.6), 349px 763px rgba(194,215,250,.6), 1081px 1217px rgba(194,215,250,.6), 744px 428px rgba(194,215,250,.6), 660px 515px rgba(194,215,250,.6), 1342px 708px rgba(194,215,250,.6), 758px 929px rgba(194,215,250,.6), 502px 143px rgba(194,215,250,.6), 1855px 1090px rgba(194,215,250,.6), 678px 1710px rgba(194,215,250,.6), 5px 1272px rgba(194,215,250,.6), 885px 268px rgba(194,215,250,.6), 1055px 1495px rgba(194,215,250,.6), 550px 486px rgba(194,215,250,.6), 789px 825px rgba(194,215,250,.6), 602px 238px rgba(194,215,250,.6), 781px 1388px rgba(194,215,250,.6), 1725px 393px rgba(194,215,250,.6), 617px 10px rgba(194,215,250,.6), 1369px 52px rgba(194,215,250,.6), 1774px 1833px rgba(194,215,250,.6), 1157px 1144px rgba(194,215,250,.6), 983px 1425px rgba(194,215,250,.6), 812px 386px rgba(194,215,250,.6), 1410px 1308px rgba(194,215,250,.6), 640px 1418px rgba(194,215,250,.6), 286px 437px rgba(194,215,250,.6), 1361px 876px rgba(194,215,250,.6), 189px 1462px rgba(194,215,250,.6), 1491px 78px rgba(194,215,250,.6), 1571px 125px rgba(194,215,250,.6), 1491px 896px rgba(194,215,250,.6), 1651px 1197px rgba(194,215,250,.6), 881px 1685px rgba(194,215,250,.6), 1205px 1290px rgba(194,215,250,.6), 178px 673px rgba(194,215,250,.6), 956px 663px rgba(194,215,250,.6), 593px 526px rgba(194,215,250,.6), 860px 528px rgba(194,215,250,.6), 311px 107px rgba(194,215,250,.6), 967px 110px rgba(194,215,250,.6), 123px 256px rgba(194,215,250,.6), 742px 1370px rgba(194,215,250,.6), 865px 1026px rgba(194,215,250,.6), 426px 620px rgba(194,215,250,.6), 149px 1177px rgba(194,215,250,.6), 1625px 875px rgba(194,215,250,.6), 1251px 292px rgba(194,215,250,.6), 168px 1581px rgba(194,215,250,.6), 1080px 1776px rgba(194,215,250,.6), 149px 1667px rgba(194,215,250,.6), 1585px 1428px rgba(194,215,250,.6), 1096px 1507px rgba(194,215,250,.6), 1462px 1074px rgba(194,215,250,.6), 1486px 606px rgba(194,215,250,.6), 716px 326px rgba(194,215,250,.6), 922px 1531px rgba(194,215,250,.6), 772px 1011px rgba(194,215,250,.6), 1013px 1128px rgba(194,215,250,.6), 1246px 417px rgba(194,215,250,.6), 1698px 991px rgba(194,215,250,.6), 527px 1585px rgba(194,215,250,.6), 639px 1057px rgba(194,215,250,.6), 1009px 1216px rgba(194,215,250,.6), 199px 1030px rgba(194,215,250,.6), 602px 387px rgba(194,215,250,.6), 485px 1099px rgba(194,215,250,.6), 201px 1658px rgba(194,215,250,.6), 804px 1376px rgba(194,215,250,.6), 993px 1879px rgba(194,215,250,.6), 1612px 1447px rgba(194,215,250,.6), 39px 713px rgba(194,215,250,.6), 1915px 99px rgba(194,215,250,.6), 15px 99px rgba(194,215,250,.6), 1962px 1497px rgba(194,215,250,.6), 874px 551px rgba(194,215,250,.6), 1575px 1468px rgba(194,215,250,.6), 965px 1250px rgba(194,215,250,.6), 1153px 1181px rgba(194,215,250,.6), 1395px 1929px rgba(194,215,250,.6), 461px 1749px rgba(194,215,250,.6), 942px 1225px rgba(194,215,250,.6), 1498px 281px rgba(194,215,250,.6), 808px 1510px rgba(194,215,250,.6), 825px 1399px rgba(194,215,250,.6), 1097px 1371px rgba(194,215,250,.6), 1413px 740px rgba(194,215,250,.6), 1293px 1652px rgba(194,215,250,.6), 583px 625px rgba(194,215,250,.6), 429px 1976px rgba(194,215,250,.6), 1832px 351px rgba(194,215,250,.6), 1356px 1087px rgba(194,215,250,.6), 924px 1666px rgba(194,215,250,.6), 1687px 1689px rgba(194,215,250,.6), 1546px 1912px rgba(194,215,250,.6), 1556px 677px rgba(194,215,250,.6), 1979px 1568px rgba(194,215,250,.6), 205px 60px rgba(194,215,250,.6), 1437px 456px rgba(194,215,250,.6), 1688px 1515px rgba(194,215,250,.6), 1078px 362px rgba(194,215,250,.6), 1054px 1126px rgba(194,215,250,.6), 196px 267px rgba(194,215,250,.6), 686px 1315px rgba(194,215,250,.6), 1314px 202px rgba(194,215,250,.6), 1514px 40px rgba(194,215,250,.6), 1411px 1553px rgba(194,215,250,.6), 11px 1593px rgba(194,215,250,.6), 301px 587px rgba(194,215,250,.6), 1847px 1206px rgba(194,215,250,.6), 414px 833px rgba(194,215,250,.6), 1131px 100px rgba(194,215,250,.6), 1550px 1187px rgba(194,215,250,.6), 1961px 1893px rgba(194,215,250,.6), 1460px 624px rgba(194,215,250,.6), 1396px 624px rgba(194,215,250,.6), 1005px 1065px rgba(194,215,250,.6), 1129px 1202px rgba(194,215,250,.6), 1887px 676px rgba(194,215,250,.6), 1243px 1493px rgba(194,215,250,.6), 1877px 1922px rgba(194,215,250,.6), 849px 296px rgba(194,215,250,.6), 712px 311px rgba(194,215,250,.6), 698px 1983px rgba(194,215,250,.6), 1642px 59px rgba(194,215,250,.6), 268px 1473px rgba(194,215,250,.6), 1117px 1577px rgba(194,215,250,.6), 561px 1884px rgba(194,215,250,.6), 1350px 173px rgba(194,215,250,.6), 1407px 1289px rgba(194,215,250,.6), 1194px 315px rgba(194,215,250,.6), 415px 266px rgba(194,215,250,.6), 1074px 1210px rgba(194,215,250,.6), 542px 1955px rgba(194,215,250,.6), 1692px 1668px rgba(194,215,250,.6), 507px 171px rgba(194,215,250,.6), 644px 78px rgba(194,215,250,.6), 1967px 34px rgba(194,215,250,.6), 952px 468px rgba(194,215,250,.6), 1259px 1886px rgba(194,215,250,.6), 153px 767px rgba(194,215,250,.6), 783px 1340px rgba(194,215,250,.6), 1812px 251px rgba(194,215,250,.6), 1254px 881px rgba(194,215,250,.6), 1123px 256px rgba(194,215,250,.6), 1351px 342px rgba(194,215,250,.6), 1853px 1746px rgba(194,215,250,.6), 1672px 12px rgba(194,215,250,.6), 1850px 1701px rgba(194,215,250,.6), 1674px 478px rgba(194,215,250,.6), 1130px 1924px rgba(194,215,250,.6), 1440px 717px rgba(194,215,250,.6), 108px 24px rgba(194,215,250,.6), 1393px 89px rgba(194,215,250,.6), 197px 55px rgba(194,215,250,.6), 1168px 120px rgba(194,215,250,.6), 559px 419px rgba(194,215,250,.6), 584px 9px rgba(194,215,250,.6), 45px 1728px rgba(194,215,250,.6), 1355px 1731px rgba(194,215,250,.6), 644px 1912px rgba(194,215,250,.6), 1709px 1652px rgba(194,215,250,.6), 1701px 152px rgba(194,215,250,.6), 329px 402px rgba(194,215,250,.6), 1467px 185px rgba(194,215,250,.6), 406px 233px rgba(194,215,250,.6), 1427px 506px rgba(194,215,250,.6), 506px 1537px rgba(194,215,250,.6), 1728px 689px rgba(194,215,250,.6), 504px 461px rgba(194,215,250,.6), 1949px 1019px rgba(194,215,250,.6), 628px 1504px rgba(194,215,250,.6), 1892px 257px rgba(194,215,250,.6), 910px 1445px rgba(194,215,250,.6), 1051px 941px rgba(194,215,250,.6), 424px 1048px rgba(194,215,250,.6), 778px 1433px rgba(194,215,250,.6), 109px 1476px rgba(194,215,250,.6), 401px 1185px rgba(194,215,250,.6), 130px 767px rgba(194,215,250,.6), 1568px 267px rgba(194,215,250,.6), 1497px 1506px rgba(194,215,250,.6), 1626px 730px rgba(194,215,250,.6), 229px 1756px rgba(194,215,250,.6), 1662px 504px rgba(194,215,250,.6), 713px 265px rgba(194,215,250,.6), 1784px 1729px rgba(194,215,250,.6), 725px 1425px rgba(194,215,250,.6), 1331px 1502px rgba(194,215,250,.6), 96px 8px rgba(194,215,250,.6), 1712px 667px rgba(194,215,250,.6), 266px 1960px rgba(194,215,250,.6), 391px 651px rgba(194,215,250,.6), 729px 1425px rgba(194,215,250,.6), 1514px 174px rgba(194,215,250,.6), 1252px 504px rgba(194,215,250,.6), 524px 1693px rgba(194,215,250,.6), 1509px 856px rgba(194,215,250,.6), 1791px 613px rgba(194,215,250,.6), 1656px 361px rgba(194,215,250,.6), 752px 1770px rgba(194,215,250,.6), 1237px 937px rgba(194,215,250,.6), 350px 482px rgba(194,215,250,.6), 793px 1428px rgba(194,215,250,.6), 306px 389px rgba(194,215,250,.6), 814px 1851px rgba(194,215,250,.6), 207px 66px rgba(194,215,250,.6), 739px 539px rgba(194,215,250,.6), 1475px 901px rgba(194,215,250,.6), 994px 1498px rgba(194,215,250,.6), 49px 330px rgba(194,215,250,.6);
			    -webkit-animation: anim-star 50s linear infinite;
			    animation: anim-star 50s linear infinite;
		}
		.bi-header-animation1{
			width: 6px;
			    height: 6px;
			    box-shadow: 1221px 1713px rgba(194,215,250,.6), 1284px 710px rgba(194,215,250,.6), 1135px 1773px rgba(194,215,250,.6), 923px 55px rgba(194,215,250,.6), 988px 1462px rgba(194,215,250,.6), 567px 622px rgba(194,215,250,.6), 1634px 1569px rgba(194,215,250,.6), 812px 588px rgba(194,215,250,.6), 492px 1240px rgba(194,215,250,.6), 1092px 1902px rgba(194,215,250,.6), 536px 933px rgba(194,215,250,.6), 256px 66px rgba(194,215,250,.6), 86px 735px rgba(194,215,250,.6), 1484px 38px rgba(194,215,250,.6), 460px 720px rgba(194,215,250,.6), 544px 1890px rgba(194,215,250,.6), 1524px 746px rgba(194,215,250,.6), 1111px 1361px rgba(194,215,250,.6), 210px 609px rgba(194,215,250,.6), 1782px 1349px rgba(194,215,250,.6), 1698px 1848px rgba(194,215,250,.6), 35px 1588px rgba(194,215,250,.6), 507px 367px rgba(194,215,250,.6), 918px 1670px rgba(194,215,250,.6), 1564px 1733px rgba(194,215,250,.6), 650px 214px rgba(194,215,250,.6), 290px 418px rgba(194,215,250,.6), 232px 853px rgba(194,215,250,.6), 1326px 1430px rgba(194,215,250,.6), 1767px 106px rgba(194,215,250,.6), 107px 520px rgba(194,215,250,.6), 1588px 845px rgba(194,215,250,.6), 1989px 1883px rgba(194,215,250,.6), 662px 1538px rgba(194,215,250,.6), 173px 968px rgba(194,215,250,.6), 210px 1697px rgba(194,215,250,.6), 698px 847px rgba(194,215,250,.6), 92px 118px rgba(194,215,250,.6), 925px 254px rgba(194,215,250,.6), 649px 1967px rgba(194,215,250,.6), 482px 1395px rgba(194,215,250,.6), 607px 830px rgba(194,215,250,.6), 1795px 423px rgba(194,215,250,.6), 809px 1656px rgba(194,215,250,.6), 1606px 1527px rgba(194,215,250,.6), 541px 485px rgba(194,215,250,.6), 1243px 282px rgba(194,215,250,.6), 1047px 605px rgba(194,215,250,.6), 1771px 1581px rgba(194,215,250,.6), 89px 1709px rgba(194,215,250,.6), 1106px 776px rgba(194,215,250,.6), 1756px 136px rgba(194,215,250,.6), 957px 1829px rgba(194,215,250,.6), 1092px 529px rgba(194,215,250,.6), 1142px 493px rgba(194,215,250,.6), 657px 643px rgba(194,215,250,.6), 1957px 753px rgba(194,215,250,.6), 935px 219px rgba(194,215,250,.6), 1197px 1971px rgba(194,215,250,.6), 336px 1394px rgba(194,215,250,.6), 1451px 215px rgba(194,215,250,.6), 899px 541px rgba(194,215,250,.6), 190px 1411px rgba(194,215,250,.6), 1012px 1121px rgba(194,215,250,.6), 1914px 361px rgba(194,215,250,.6), 231px 71px rgba(194,215,250,.6), 323px 1631px rgba(194,215,250,.6), 183px 1377px rgba(194,215,250,.6), 98px 765px rgba(194,215,250,.6), 1520px 320px rgba(194,215,250,.6), 556px 77px rgba(194,215,250,.6), 588px 1518px rgba(194,215,250,.6), 1177px 1487px rgba(194,215,250,.6), 1172px 1426px rgba(194,215,250,.6), 243px 520px rgba(194,215,250,.6), 25px 296px rgba(194,215,250,.6), 1021px 344px rgba(194,215,250,.6), 1416px 63px rgba(194,215,250,.6), 1624px 1590px rgba(194,215,250,.6), 1198px 224px rgba(194,215,250,.6), 72px 136px rgba(194,215,250,.6), 347px 1099px rgba(194,215,250,.6), 1240px 113px rgba(194,215,250,.6), 506px 1883px rgba(194,215,250,.6), 623px 1889px rgba(194,215,250,.6), 507px 139px rgba(194,215,250,.6), 531px 96px rgba(194,215,250,.6), 436px 398px rgba(194,215,250,.6), 1471px 1957px rgba(194,215,250,.6), 769px 1696px rgba(194,215,250,.6), 774px 973px rgba(194,215,250,.6), 698px 1904px rgba(194,215,250,.6), 1616px 1098px rgba(194,215,250,.6), 1560px 1560px rgba(194,215,250,.6), 1282px 1888px rgba(194,215,250,.6), 1733px 1275px rgba(194,215,250,.6), 1602px 1509px rgba(194,215,250,.6), 1579px 220px rgba(194,215,250,.6), 1860px 1609px rgba(194,215,250,.6), 1157px 1685px rgba(194,215,250,.6), 1278px 1172px rgba(194,215,250,.6), 758px 277px rgba(194,215,250,.6), 1676px 1446px rgba(194,215,250,.6), 532px 1445px rgba(194,215,250,.6), 1285px 1024px rgba(194,215,250,.6), 1013px 576px rgba(194,215,250,.6), 635px 1717px rgba(194,215,250,.6), 546px 1058px rgba(194,215,250,.6), 537px 1261px rgba(194,215,250,.6), 548px 1134px rgba(194,215,250,.6), 919px 1738px rgba(194,215,250,.6), 889px 1641px rgba(194,215,250,.6), 944px 1035px rgba(194,215,250,.6), 1354px 1298px rgba(194,215,250,.6), 1539px 1950px rgba(194,215,250,.6), 1157px 1710px rgba(194,215,250,.6), 442px 1488px rgba(194,215,250,.6), 703px 936px rgba(194,215,250,.6), 1395px 226px rgba(194,215,250,.6), 1946px 783px rgba(194,215,250,.6), 420px 466px rgba(194,215,250,.6), 100px 743px rgba(194,215,250,.6), 361px 523px rgba(194,215,250,.6), 1218px 151px rgba(194,215,250,.6), 395px 799px rgba(194,215,250,.6), 1977px 1741px rgba(194,215,250,.6), 1570px 991px rgba(194,215,250,.6), 1124px 375px rgba(194,215,250,.6), 1414px 1520px rgba(194,215,250,.6), 1535px 884px rgba(194,215,250,.6), 1572px 1672px rgba(194,215,250,.6), 1828px 325px rgba(194,215,250,.6), 650px 128px rgba(194,215,250,.6), 1650px 1509px rgba(194,215,250,.6), 11px 1725px rgba(194,215,250,.6), 383px 1595px rgba(194,215,250,.6), 1705px 944px rgba(194,215,250,.6), 472px 1684px rgba(194,215,250,.6), 1406px 612px rgba(194,215,250,.6), 1702px 17px rgba(194,215,250,.6), 214px 1801px rgba(194,215,250,.6), 1126px 1647px rgba(194,215,250,.6), 1454px 1588px rgba(194,215,250,.6), 210px 1734px rgba(194,215,250,.6), 1937px 685px rgba(194,215,250,.6), 1563px 1972px rgba(194,215,250,.6), 1830px 216px rgba(194,215,250,.6), 965px 1699px rgba(194,215,250,.6), 1077px 467px rgba(194,215,250,.6), 460px 1225px rgba(194,215,250,.6), 953px 45px rgba(194,215,250,.6), 1655px 936px rgba(194,215,250,.6), 735px 1358px rgba(194,215,250,.6), 557px 643px rgba(194,215,250,.6), 718px 147px rgba(194,215,250,.6), 1607px 1301px rgba(194,215,250,.6), 356px 338px rgba(194,215,250,.6), 661px 1688px rgba(194,215,250,.6), 1222px 1982px rgba(194,215,250,.6), 1892px 1851px rgba(194,215,250,.6), 1419px 998px rgba(194,215,250,.6), 801px 1986px rgba(194,215,250,.6), 70px 410px rgba(194,215,250,.6), 749px 1282px rgba(194,215,250,.6), 1952px 850px rgba(194,215,250,.6), 1925px 1px rgba(194,215,250,.6), 1478px 1744px rgba(194,215,250,.6), 193px 393px rgba(194,215,250,.6), 1501px 1712px rgba(194,215,250,.6), 1514px 843px rgba(194,215,250,.6), 5px 440px rgba(194,215,250,.6), 999px 1317px rgba(194,215,250,.6), 572px 1005px rgba(194,215,250,.6), 1035px 1755px rgba(194,215,250,.6), 619px 1703px rgba(194,215,250,.6), 664px 1405px rgba(194,215,250,.6), 404px 1649px rgba(194,215,250,.6), 1247px 1359px rgba(194,215,250,.6), 516px 1296px rgba(194,215,250,.6), 644px 23px rgba(194,215,250,.6), 1683px 1026px rgba(194,215,250,.6), 623px 897px rgba(194,215,250,.6), 1727px 1580px rgba(194,215,250,.6), 1838px 1281px rgba(194,215,250,.6), 1065px 85px rgba(194,215,250,.6), 1175px 1054px rgba(194,215,250,.6), 480px 147px rgba(194,215,250,.6), 1778px 865px rgba(194,215,250,.6), 489px 1065px rgba(194,215,250,.6), 767px 896px rgba(194,215,250,.6), 100px 981px rgba(194,215,250,.6), 788px 286px rgba(194,215,250,.6), 323px 769px rgba(194,215,250,.6), 1470px 1743px rgba(194,215,250,.6), 289px 910px rgba(194,215,250,.6), 1053px 116px rgba(194,215,250,.6), 1455px 1242px rgba(194,215,250,.6), 1213px 1249px rgba(194,215,250,.6), 301px 561px rgba(194,215,250,.6), 288px 301px rgba(194,215,250,.6);
			border-radius: 50%;
			background: transparent;
			opacity: 1;
			-webkit-animation: anim-star 100s linear infinite;
			animation: anim-star 100s linear infinite;
		}
		.bi-header-animation2{
			width: 4px;
			    height: 4px;
			    box-shadow: 765px 271px rgba(194,215,250,.6), 1412px 1921px rgba(194,215,250,.6), 1809px 339px rgba(194,215,250,.6), 1582px 36px rgba(194,215,250,.6), 462px 1589px rgba(194,215,250,.6), 1025px 1178px rgba(194,215,250,.6), 826px 1714px rgba(194,215,250,.6), 1756px 316px rgba(194,215,250,.6), 214px 1719px rgba(194,215,250,.6), 446px 812px rgba(194,215,250,.6), 1094px 908px rgba(194,215,250,.6), 1944px 2px rgba(194,215,250,.6), 1139px 1913px rgba(194,215,250,.6), 499px 2px rgba(194,215,250,.6), 112px 1939px rgba(194,215,250,.6), 766px 513px rgba(194,215,250,.6), 1324px 70px rgba(194,215,250,.6), 1850px 650px rgba(194,215,250,.6), 392px 320px rgba(194,215,250,.6), 834px 1855px rgba(194,215,250,.6), 165px 221px rgba(194,215,250,.6), 81px 1914px rgba(194,215,250,.6), 1911px 237px rgba(194,215,250,.6), 1813px 1021px rgba(194,215,250,.6), 15px 1572px rgba(194,215,250,.6), 1895px 1844px rgba(194,215,250,.6), 44px 538px rgba(194,215,250,.6), 1226px 1436px rgba(194,215,250,.6), 667px 1295px rgba(194,215,250,.6), 1906px 1610px rgba(194,215,250,.6), 593px 221px rgba(194,215,250,.6), 968px 1407px rgba(194,215,250,.6), 992px 1538px rgba(194,215,250,.6), 726px 248px rgba(194,215,250,.6), 1273px 179px rgba(194,215,250,.6), 138px 1186px rgba(194,215,250,.6), 395px 785px rgba(194,215,250,.6), 1644px 780px rgba(194,215,250,.6), 31px 1348px rgba(194,215,250,.6), 1942px 87px rgba(194,215,250,.6), 718px 1015px rgba(194,215,250,.6), 1323px 107px rgba(194,215,250,.6), 1436px 421px rgba(194,215,250,.6), 75px 1863px rgba(194,215,250,.6), 1269px 557px rgba(194,215,250,.6), 1162px 1036px rgba(194,215,250,.6), 257px 669px rgba(194,215,250,.6), 827px 1098px rgba(194,215,250,.6), 138px 1908px rgba(194,215,250,.6), 439px 527px rgba(194,215,250,.6), 76px 295px rgba(194,215,250,.6), 1266px 248px rgba(194,215,250,.6), 1940px 718px rgba(194,215,250,.6), 1214px 265px rgba(194,215,250,.6), 37px 1486px rgba(194,215,250,.6), 1937px 290px rgba(194,215,250,.6), 1129px 785px rgba(194,215,250,.6), 1261px 1650px rgba(194,215,250,.6), 144px 219px rgba(194,215,250,.6), 1341px 606px rgba(194,215,250,.6), 1317px 872px rgba(194,215,250,.6), 1421px 693px rgba(194,215,250,.6), 496px 1803px rgba(194,215,250,.6), 1055px 1732px rgba(194,215,250,.6), 1448px 302px rgba(194,215,250,.6), 774px 495px rgba(194,215,250,.6), 266px 1037px rgba(194,215,250,.6), 941px 792px rgba(194,215,250,.6), 779px 1034px rgba(194,215,250,.6), 1333px 1194px rgba(194,215,250,.6), 1546px 188px rgba(194,215,250,.6), 947px 1906px rgba(194,215,250,.6), 1769px 1595px rgba(194,215,250,.6), 1667px 724px rgba(194,215,250,.6), 699px 1979px rgba(194,215,250,.6), 194px 213px rgba(194,215,250,.6), 1984px 1738px rgba(194,215,250,.6), 466px 1754px rgba(194,215,250,.6), 1998px 1908px rgba(194,215,250,.6), 975px 1413px rgba(194,215,250,.6), 1505px 752px rgba(194,215,250,.6), 1341px 932px rgba(194,215,250,.6), 1260px 812px rgba(194,215,250,.6), 1591px 50px rgba(194,215,250,.6), 1655px 1730px rgba(194,215,250,.6), 1955px 1340px rgba(194,215,250,.6), 859px 1742px rgba(194,215,250,.6), 1608px 1931px rgba(194,215,250,.6), 1431px 1227px rgba(194,215,250,.6), 1553px 222px rgba(194,215,250,.6), 684px 1866px rgba(194,215,250,.6), 371px 59px rgba(194,215,250,.6), 1885px 869px rgba(194,215,250,.6), 1887px 1795px rgba(194,215,250,.6), 1032px 1431px rgba(194,215,250,.6), 1085px 1840px rgba(194,215,250,.6), 817px 1343px rgba(194,215,250,.6), 1260px 1135px rgba(194,215,250,.6), 124px 1566px rgba(194,215,250,.6), 1975px 1980px rgba(194,215,250,.6);
				border-radius: 50%;
				background: transparent;
				opacity: 1;
				-webkit-animation: anim-star 100s linear infinite;
				animation: anim-star 100s linear infinite;
		}
		.header_bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100px;
			background: url("~@/assets/images/menu/bg.gif") no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
		}

		.blue_word {
			color: #1b91ff;
			text-shadow: 0px 0px 10px #0082fa;
		}

		.link_box {
			.pr {
				width: 118px;
				height: 34px;
				line-height: 34px;
				font-size: 16px;
				font-weight: bold;

				span {
					text-shadow: 0px 0px 4px rgba(79, 159, 234, 0.4);
					background: linear-gradient(180deg, #b2daff 0%, #4f9fea 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					position: relative;
					z-index: 2;
				}

				z-index: 1;

				img {
					position: absolute;
					top: 50%;
					margin-top: -5px;
					right: 0;
					z-index: 2;
				}

				&:nth-last-child(1) {
					img {
						display: none;
					}
				}

				.links {
					width: 100%;
					padding: 10px 0;
					top: 34px;
					left: 0;
					background: #031121;
					display: none;

					a {
						height: 40px;
						line-height: 40px;
						font-size: 16px;
						font-weight: bold;
						color: #ffffff;

						&:hover {
							background: #0a3157;
						}
					}
				}

				&:hover {
					.links {
						display: flex;
					}
				}

				.router-link-active {
					background: #0a3157;
				}
			}

			>.router-link-active {
				background: url("~@/assets/images/menu/active.png") no-repeat;
				background-size: 100% 100%;

				span {
					color: #c6dfff;
					text-shadow: 0 0 0;
					background: transparent;
				}
			}

			&:nth-last-child(1) {
				img {
					transform: rotateY(180deg);
				}

				>.router-link-active {
					background: url("~@/assets/images/menu/active1.png") no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}

	.app-main {
		width: 100%;
		box-sizing: border-box;
		background: #071c30;
		padding: 20px;
		flex: 1 1 0%;
		.notice_box{
			width: 700px;
			position: absolute;
			top: -10px;
			height: 30px;
			line-height: 30px;
			z-index: 8;
			left: 610px;
			letter-spacing: 4px;
		}
	}
</style>