InteSecurePlatform.git

			@@ -57,7 +57,7 @@
			</div>
			</div>
			</div>
			<img class="bgImg1" src="../../assets/newMenu/card1.png" />
			<img class="bgImg1" src="../../assets/newMenu/card-1.png" />
			</div>
			<div class="grid-content cont-bg-1" v-throttle @click="render('2')">
			<div class="toplayer">
			@@ -67,7 +67,7 @@
			<div class="enTit">Double prevention</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card4.png" />
			<img class="bgImg" src="../../assets/newMenu/card-4.png" />
			</div>
			<div class="grid-content cont-bg-1" v-throttle @click="render('4')">
			<div class="toplayer">
			@@ -77,7 +77,7 @@
			<div class="enTit">Intelligent inspection system</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card8.png" />
			<img class="bgImg" src="../../assets/newMenu/card-8.png" />
			</div>
			<div class="grid-content cont-bg-1" v-throttle @click="render('3')">
			<div class="toplayer">
			@@ -87,7 +87,7 @@
			<div class="enTit">special work</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card7.png" />
			<img class="bgImg" src="../../assets/newMenu/card-7.png" />
			</div>
			<div class="grid-content cont-bg-1" v-throttle @click="render('7')">
			<div class="toplayer">
			@@ -97,7 +97,7 @@
			<div class="enTit">Target Responsibility Management</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card2.png" />
			<img class="bgImg" src="../../assets/newMenu/card-2.png" />
			</div>
			<div class="grid-content cont-bg-2" v-throttle @click="render('10')">
			<div class="toplayer">
			@@ -107,7 +107,7 @@
			<div class="enTit">Security Knowledge Graph</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card3.png" />
			<img class="bgImg" src="../../assets/newMenu/card-3.png" />
			</div>
			<div class="grid-content cont-bg-2" v-throttle @click="render('9')">
			<div class="toplayer">
			@@ -117,7 +117,7 @@
			<div class="enTit">Comprehensive equipment control</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card9.png" />
			<img class="bgImg" src="../../assets/newMenu/card-9.png" />
			</div>
			<div class="grid-content cont-bg-2" v-throttle @click="render('6')">
			<div class="toplayer">
			@@ -127,17 +127,17 @@
			<div class="enTit">Emergency management</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card5.png" />
			<img class="bgImg" src="../../assets/newMenu/card-5.png" />
			</div>
			<div class="grid-content cont-bg-2" v-throttle @click="render('11')">
			<div class="toplayer">
			<img class="iconImg" src="../../assets/newMenu/icon9.png" />
			<div>
			<div class="itemTit">危险化学品全生命周期安全<br />管理系统</div>
			<div class="itemTit">危险化学品全生命周期安全管理系统</div>
			<div class="enTit">Full life cycle of hazardous chemicals</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card10.png" />
			<img class="bgImg" src="../../assets/newMenu/card-10.png" />
			</div>
			<div class="grid-content cont-bg-2" v-throttle @click="render('8')">
			<div class="toplayer">
			@@ -147,7 +147,7 @@
			<div class="enTit">Incident Management</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card6.png" />
			<img class="bgImg" src="../../assets/newMenu/card-6.png" />
			</div>
			<div class="grid-content cont-bg-2" @click="render('1')">
			<div class="toplayer">
			@@ -157,7 +157,7 @@
			<div class="enTit">Basic data permissions</div>
			</div>
			</div>
			<img class="bgImg" src="../../assets/newMenu/card11.png" />
			<img class="bgImg" src="../../assets/newMenu/card-11.png" />
			</div>
			</div>
			</div>
			@@ -400,6 +400,312 @@
			</script>

			<style scoped lang="scss">
			@media screen and (min-width: 1400px) {
			.gridCont {
			width: 100%;
			height: 100%;
			display: grid;
			grid-gap: 20px;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			justify-content: center;
			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			padding: 0 20px;
			z-index: 99;

			.itemTit {
			font-size: 28px;
			line-height: 34px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			color: #072270;
			}
			.enTit{
			font-size: 18px;
			line-height: 20px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}

			.iconImg {
			width: 88px;
			height: 88px;
			margin-right: 20px;
			}
			}
			.bgImg {
			position: absolute;
			width: 30%;
			height: auto;
			right: -10px;
			top: 15px;
			}
			}


			.grid-content-1{
			grid-row-start: 1;
			grid-row-end: 3;

			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			z-index: 99;

			&>div{
			display: flex;
			align-items: flex-start;
			}

			.itemTit1 {
			font-size: 34px;
			line-height: 42px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			letter-spacing: 1px;
			color: #072270;
			margin-bottom: 12px;
			}
			.enTit1{
			font-size: 22px;
			line-height: 24px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}
			}
			.bgImg1 {
			position: absolute;
			width: 45%;
			height: auto;
			right: -20px;
			top: 30%;
			}
			}

			.bot-rights{
			font-size: 18px;
			color: #333;
			}
			}

			@media screen and (min-width: 1200px) and (max-width: 1400px){
			.gridCont {
			width: 100%;
			height: 100%;
			display: grid;
			grid-gap: 15px;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			justify-content: center;

			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			padding: 0 20px;
			z-index: 99;

			.itemTit {
			font-size: 26px;
			line-height: 30px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			color: #072270;
			margin-bottom: 2px;
			}
			.enTit{
			font-size: 14px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}

			.iconImg {
			width: 44px;
			height: 44px;
			margin-right: 10px;
			}

			}
			.bgImg {
			position: absolute;
			width: 30%;
			height: auto;
			right: -10px;
			top: 15px;
			}
			}

			.grid-content-1{
			grid-row-start: 1;
			grid-row-end: 3;

			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			z-index: 99;

			&>div{
			display: flex;
			align-items: flex-start;
			}

			.itemTit1 {
			font-size: 28px;
			line-height: 36px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			letter-spacing: 1px;
			color: #072270;
			margin-bottom: 12px;
			}
			.enTit1{
			font-size: 16px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}
			}
			.bgImg1 {
			position: absolute;
			width: 45%;
			height: auto;
			right: -20px;
			top: 30%;
			}
			}
			.bot-rights{
			font-size: 15px;
			color: #333;
			}
			}
			@media screen and (max-width: 1200px){
			.gridCont {
			width: 100%;
			height: 100%;
			display: grid;
			grid-gap: 10px;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			justify-content: center;

			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			padding: 0 15px;
			z-index: 99;

			.itemTit {
			font-size: 18px;
			line-height: 22px;
			font-family: 'PingFang SC';
			font-weight: 600;
			color: #072270;
			}
			.enTit{
			font-size: 12px;
			line-height: 14px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}

			.iconImg {
			width: 32px;
			height: 32px;
			margin-right: 10px;
			}
			}
			.bgImg {
			position: absolute;
			width: 45%;
			height: auto;
			right: -10px;
			top: 15px;
			}
			}

			.grid-content-1{
			grid-row-start: 1;
			grid-row-end: 3;

			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			z-index: 99;

			&>div{
			display: flex;
			align-items: flex-start;
			}

			.itemTit1 {
			font-size: 24px;
			line-height: 36px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			letter-spacing: 1px;
			color: #072270;
			margin-bottom: 12px;
			}
			.enTit1{
			font-size: 14px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}
			}
			.bgImg1 {
			position: absolute;
			width: 45%;
			height: auto;
			right: -20px;
			top: 30%;
			}
			}
			.bot-rights{
			font-size: 12px;
			color: #333;
			}
			}
			.login-container {
			width: 100%;
			height: 100%;
			@@ -499,7 +805,7 @@
			height: 100%;
			z-index: 99;
			background: url('../../assets/newMenu/leftbg.png') no-repeat center;
			background-size: 100% auto;
			background-size: 100% 100%;
			}
			.topCont{
			position: absolute;
			@@ -579,13 +885,6 @@
			top: 260px;
			left: 240px;
			.gridCont {
			width: 100%;
			height: 100%;
			display: grid;
			grid-gap: 20px;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			justify-content: center;

			.grid-content {
			border-radius: 16px;
			@@ -594,71 +893,10 @@
			cursor: pointer;
			transition: 0.3s;
			border: none;
			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			padding: 0 20px;
			z-index: 99;
			}

			&:hover {
			background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%);
			box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa;
			}

			.itemTit {
			font-size: 29px;
			line-height: 36px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			color: #072270;
			margin-bottom: 2px;
			}
			.enTit{
			font-size: 18px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}
			.enTit1{
			font-size: 22px;
			color: #072270;
			font-family: 'PingFang SC';
			font-weight: 600;
			}
			.itemTit1 {
			font-size: 36px;
			line-height: 48px;
			height: 40%;
			font-family: 'PingFang SC';
			font-weight: 600;
			letter-spacing: 1px;
			color: #072270;
			margin-bottom: 18px;
			}
			.iconImg {
			width: 88px;
			height: 88px;
			margin-right: 20px;
			}
			.bgImg1 {
			position: absolute;
			width: 45%;
			height: auto;
			right: -20px;
			top: 30%;
			}
			.bgImg {
			position: absolute;
			width: 30%;
			height: auto;
			right: -10px;
			top: 15px;
			}
			}
			.cont-bg-1{
			@@ -667,26 +905,7 @@
			.cont-bg-2{
			background: #CDD6FF;
			}
			.grid-content-1{
			grid-row-start: 1;
			grid-row-end: 3;

			.toplayer{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			z-index: 99;

			&>div{
			display: flex;
			align-items: flex-start;
			}
			}
			}

			/.grid-content-2{/
			/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
			@@ -713,8 +932,6 @@
			height: 8px;
			}
			div{
			font-size: 18px;
			color: #333;
			margin: 0 20px;
			}
			}