tz-onest-monitor/monitor_ui/src/views/integrated/index.vue

<!-- 一体化首页 -->
<template>
	<div class="sj-container">
		<div class="integrated-con">
			<div class="in-header">
				<h3 class="title">态势感知监管平台</h3>
				<router-link  to="/integrated/bigdata" class="header-right" exact><img src="../../assets/images/integrated/logo-small.png"  />四平市一体化平台</router-link>
			</div>
			<div class="map-con"></div>
			<div class="left-btn-item">
				<div class="left-btn-con">
					<router-link  to="/integrated/forest" class="header-right" exact>
					<div class="left-btn">
						<span>数字林业</span>
						<i class="iconfont sj-icon-szly"></i>
					</div>
					</router-link>
				</div>
				<div class="left-btn-con m-t-5">
					<div class="left-btn">
						<span>数字农业</span>
						<i class="iconfont sj-icon-szny"></i>
					</div>
				</div>
				<div class="left-btn-con m-t-5">
					<div class="left-btn">
						<span>数字水利</span>
						<i class="iconfont sj-icon-szsl"></i>
					</div>
				</div>
				<div class="left-btn-con m-t-5">
					<div class="left-btn">
						<span>数字环保</span>
						<i class="iconfont sj-icon-szhb"></i>
					</div>
				</div>
			</div>
			<div class="right-btn-item">
				<div class="right-btn-con">
					<div class="right-btn">
						<i class="iconfont sj-icon-szyj sz"></i>
						<span>数字应急</span>
					</div>
				</div>
				<div class="right-btn-con m-t-5">
					<div class="right-btn">
						<i class="iconfont sj-icon-szjt"></i>
						<span>数字交通</span>
					</div>
				</div>
				<div class="right-btn-con m-t-5">
					<div class="right-btn">
						<i class="iconfont sj-icon-szzx"></i>
						<span>数字资源</span>
					</div>
				</div>
				<div class="right-btn-con m-t-5">
					<div class="right-btn">
						<i class="iconfont sj-icon-szxf"></i>
						<span>数字消防</span>
					</div>
				</div>
			</div>
			<div class="bottom-menu">
				<router-link v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con" :to="fastMenu.path" exact><i class="iconfont" :class="fastMenu.icon"></i>{{fastMenu.name}}</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fastMenu:[
					{
						name:'数据中心',
						path:'/',
						icon:'sj-icon-shujzx'
					},
					{
						name:'事件中心',
						path:'/',
						icon:'sj-icon-sjzx'
					},
					{
						name:'监控中心',
						path:'/integrated/monitor',
						icon:'sj-icon-jkzx'
					},
					{
						name:'任务中心',
						path:'/',
						icon:'sj-icon-rwzx'
					},
					{
						name:'评测中心',
						path:'/',
						icon:'sj-icon-pczx'
					}
				]

			}
		}
	}
</script>


<style rel="stylesheet/scss" lang="scss">
	@import '@/assets/styles/base.scss';

	.m-t-5 {
		margin-top: 5vh;
	}

	.integrated-con {
		font-family: $fontFk;
		width: 100%;
		height: 100vh;
		background: url("../../assets/images/integrated/integrated-bg.jpg") center;
		background-size: cover;

		.in-header {
			width: 100%;
			height: 6vh;
			position: absolute;
			background: url("../../assets/images/integrated/header.png") center;
			background-size: cover;
			z-index: 100000;

			.title {
				margin: 0 auto;
				line-height: 5vh;
				text-align: center;
				background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				color: #fff;
				font-size: 35px;
			}

			.header-right {
				position: absolute;
				right: 10px;
				top: 5px;
				display: flex;
				align-items: center;
				color: $inBlue;
			}
			.header-right:hover{
				filter: brightness(2.3);
			}
		}

		.map-con {}

		.left-btn-item,
		.right-btn-item {
			height: 70vh;
			width: 25%;
			position: absolute;
			top: 15vh;
			z-index: 100000;

		}

		.left-btn-item {
			left: 0;

			.left-btn-con {
				width: 100%;
				height: 7rem;
				background: url(../../assets/images/integrated/btn-bg.png) no-repeat left;

				.left-btn {
					width: 24rem;
					height: 7rem;
					background: url(../../assets/images/integrated/btn-six.png) no-repeat left;
					display: flex;
					justify-content: center;
					align-items: center;
					-webkit-transform: translateX(0px);
					transform: translateX(0px);
					transition: all 0.5s ease-in-out;
					cursor: pointer;

					span {
						font-size: 2rem;
						color: $inBlue;
					}

					i {
						font-size: 3rem;
						color: $inBlue;
						margin-left: 1rem;
						text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
					}

				}

				.left-btn:hover {
					filter: brightness(2.3);
					-webkit-transform: translateX(20px);
					transform: translateX(20px);
					transition: all 0.5s ease-in-out;

					i {
						color: $inBlueHover;
						text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
					}
				}
			}

			.left-btn-con:nth-child(1) .left-btn {
				margin-left: 10%;
			}

			.left-btn-con:nth-child(2) .left-btn {
				margin-left: 14%;
			}

			.left-btn-con:nth-child(3) .left-btn {
				margin-left: 18%;
			}

			.left-btn-con:nth-child(4) .left-btn {
				margin-left: 22%;
			}
		}

		.right-btn-item {
			right: 0;

			.right-btn-con {
				width: 100%;
				height: 7rem;
				background: url(../../assets/images/integrated/btn-bg-r.png) right no-repeat;


				.right-btn {
					width: 24rem;
					height: 7rem;
					background: url(../../assets/images/integrated/btn-six.png) no-repeat right;
					display: flex;
					justify-content: center;
					align-items: center;
					-webkit-transform: translateX(0px);
					transform: translateX(0px);
					transition: all 0.5s ease-in-out;
					cursor: pointer;

					span {
						font-size: 2rem;
						color: $inBlue;
					}

					i {
						font-size: 3rem;
						color: $inBlue;
						margin-right: 1rem;
						text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
					}

					.sz {
						font-size: 2.5rem;
					}
				}

				.right-btn:hover {
					filter: brightness(2.3);
					-webkit-transform: translateX(-20px);
					transform: translateX(-20px);
					transition: all 0.5s ease-in-out;

					i {
						color: $inBlueHover;
						text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
					}
				}
			}

			.right-btn-con:nth-child(1) .right-btn {
				float: right;
				margin-right: 10%;
			}

			.right-btn-con:nth-child(2) .right-btn {
				float: right;
				margin-right: 14%;
			}

			.right-btn-con:nth-child(3) .right-btn {
				float: right;
				margin-right: 18%;
			}

			.right-btn-con:nth-child(4) .right-btn {
				float: right;
				margin-right: 22%;
			}
		}

		.bottom-menu {

			min-width: 52%;
			height: 7vh;
			padding: 0 2rem;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
			z-index: 100000;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: url(../../assets/images/integrated/btm-menu.png) center no-repeat;
			background-size: cover;

			.btm-m-con {
				width: 10rem;
				position: relative;
				bottom: 1rem;
				color: $inBlue;
				font-size: 1.2rem;
				padding: 0 2rem 1rem 2rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				transition: all 0.2s ease-in-out;
				cursor: pointer;

				i {
					font-size: 2.5rem;
					color: $inBlue;
					text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
					margin-bottom: 0.5rem;
				}
			}

			.btm-m-con:hover {
				text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
				filter: brightness(2.3);
				-webkit-transform: translateY(-10px);
				transform: translateY(-10px);
				transition: all 0.2s ease-in-out;

				i {
					color: $inBlueHover;
					text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
				}
			}



		}
	}
</style>