UI-首页

src/views/homePage.vue

@@ -1,84 +1,567 @@
 <!--可视化公共模板 林业-->
 <template>
-  <div class="visual-con hz_body">
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;">
-      </supermap>
-
-    </div>
-  </div>
+	<div class="visual-con lifeline-con">
+		<!--主体-->
+		<div class="visual-body">
+			<div class="life-header">
+				<span>四平市城市生命线监管平台</span>
+			</div>
+			<div class="btn btn-r">
+				<div class="btn-left">
+					<img src="../assets/index_img/button-r.png" alt="" />
+					<span>热力</span>
+				</div>
+				<div class="btn-right">
+					<div class="btn-right-con">
+						四平电力
+					</div>
+					<div class="btn-right-con">
+						四平电厂
+					</div>
+				</div>
+			</div>
+			<div class="btn btn-rq">
+				<div class="btn-left">
+					<img src="../assets/index_img/button-rq.png" alt="" />
+					<span>燃气</span>
+				</div>
+				<div class="btn-right">
+					<div class="btn-right-con">
+						华生燃气
+					</div>
+					<div class="btn-right-con">
+						奥德燃气
+					</div>
+					<div class="btn-right-con">
+						润德燃气
+					</div>
+					<div class="btn-right-con">
+						港华燃气
+					</div>
+				</div>
+			</div>
+			<div class="btn btn-ps">
+				<div class="btn-left">
+					<img src="../assets/index_img/button-ps.png" alt="" />
+					<span>燃气</span>
+				</div>
+				<div class="btn-right" v-if="false">
+					<div class="btn-right-con">
+					</div>
+				</div>
+			</div>
+			<div class="btn btn-ql">
+				<div class="btn-left">
+					<img src="../assets/index_img/button-ql.png" alt="" />
+					<span>桥梁</span>
+				</div>
+				<div class="btn-right" v-if="false">
+					<div class="btn-right-con">
+					</div>
+				</div>
+			</div>
+			<div class="btn btn-gl">
+				<div class="btn-left">
+					<img src="../assets/index_img/button-gl.png" alt="" />
+					<span>综合管廊</span>
+				</div>
+				<div class="btn-right" v-if="false">
+					<div class="btn-right-con">
+					</div>
+				</div>
+			</div>
+			<div class="btn btn-gs">
+				<div class="btn-left">
+					<img src="../assets/index_img/button-gs.png" alt="" />
+					<span>供水</span>
+				</div>
+				<div class="btn-right" v-if="false">
+					<div class="btn-right-con">
+					</div>
+				</div>
+			</div>
+
+
+
+			<div class="radar">
+				<img src="../assets/index_img/r-sy.png" class="rotating-image" />
+				<img src="../assets/index_img/r-bj.png" style="position: absolute" class="rotating-bg" />
+			</div>
+
+			<!-- 地图 -->
+			<supermap ref="supermap" style="width: 100%;height: 100vh;">
+			</supermap>
+			
+			<!-- 底部按钮2层-->
+			<div class="btm-btn2">
+				<div class="btn-span2">
+					<img src="../assets/index_img/jgzx.png" alt="" />
+					<span>监管中心</span>
+				</div>
+				<div class="btn-span2">
+					<img src="../assets/index_img/jsc.png" alt="" />
+					<span>驾驶舱</span>
+				</div>
+				<div class="btn-span2">
+					<img src="../assets/index_img/yyzx.png" alt="" />
+					<span>运营中心</span>
+				</div>
+			</div>
+			<!-- 底部按钮 -->
+			<div class="life-btm-btn">
+				<div class="btn-span">
+					<span>监测系统</span>
+				</div>
+				<div class="btn-span">
+					<span>风险清单</span>
+				</div>
+				<div class="btn-span">
+					<span>数据库</span>
+				</div>
+				<div class="btn-span">
+					<span>监管平台</span>
+				</div>
+				<div class="btn-span">
+					<span>运营体系</span>
+				</div>
+			</div>
+
+		</div>
+	</div>
 </template>
 
 <script>
-import Cookies from 'js-cookie'
-import supermap from '@/components/supermap-2.5d' //超图
-import {getUserProfile} from "@/api/system/user";
-
-import '../assets/styles/hz_body.css';
-
-import {
-  selectConfigKey
-} from "@/api/system/config";
-let echarts = require('echarts')
-export default {
-  components: {
-    supermap,
-  },
-  metaInfo () {
-    return {
-      title:'全域视联态势感知平台',
-      meta:[{
-        charset: "utf-8"
-      },
-        {
-          name: "viewport",
-          content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-        }]
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-    // 初始化地图数据
-    this.getSuperMapUrl();
-    setTimeout(() => {
-      this.title = '全域视联态势感知平台'
-    }, 1000)
-  },
-  data() {
-    return {
-      input:''
-    }
-  },
-  methods: {
-    getSuperMapUrl(){
-      getUserProfile().then(response => {
-        let mapDeptId=response.mapDeptId
-        let num = 0;
-        if (mapDeptId == "365") {
-          num = 0;
-        } else if (mapDeptId == "369") {
-          num = 1;
-        } else if (mapDeptId == "371") {
-          num = 2;
-        } else if (mapDeptId == "373") {
-          num = 3;
-        } else if (mapDeptId == "372") {
-          num = 4;
-        } else if (mapDeptId == "370") {
-          num = 5;
-        }
-        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
-      });
-    },
-  },
-}
+	import Cookies from 'js-cookie'
+	import supermap from '@/components/supermap-2.5d' //超图
+	import {
+		getUserProfile
+	} from "@/api/system/user";
+
+	import '../assets/styles/hz_body.css';
+
+	import {
+		selectConfigKey
+	} from "@/api/system/config";
+	let echarts = require('echarts')
+	export default {
+		components: {
+			supermap,
+		},
+		metaInfo() {
+			return {
+				title: '全域视联态势感知平台',
+				meta: [{
+						charset: "utf-8"
+					},
+					{
+						name: "viewport",
+						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+					}
+				]
+			}
+		},
+		created() {
+
+		},
+		mounted() {
+			// 初始化地图数据
+			this.getSuperMapUrl();
+			setTimeout(() => {
+				this.title = '全域视联态势感知平台'
+			}, 1000)
+		},
+		data() {
+			return {
+				input: ''
+			}
+		},
+		methods: {
+			getSuperMapUrl() {
+				getUserProfile().then(response => {
+					let mapDeptId = response.mapDeptId
+					let num = 0;
+					if (mapDeptId == "365") {
+						num = 0;
+					} else if (mapDeptId == "369") {
+						num = 1;
+					} else if (mapDeptId == "371") {
+						num = 2;
+					} else if (mapDeptId == "373") {
+						num = 3;
+					} else if (mapDeptId == "372") {
+						num = 4;
+					} else if (mapDeptId == "370") {
+						num = 5;
+					}
+					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+				});
+			},
+		},
+	}
 </script>
 <style rel="stylesheet/scss" lang="scss">
+	// 动画
+	//标题初始动画
+	@keyframes headermove {
+		0% {
+			transform: translateY(-200px);
+		}
+
+		100% {
+			transform: translateY(0);
+		}
+	}
+    @keyframes btmmove2 {
+    	0% {
+    		transform: translateY(-100px);
+    	}
+    
+    	100% {
+    		transform: translateY(0);
+    	}
+    }
+	//雷达初始化
+	@keyframes radarOP {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	//按钮初始化
+	@keyframes btnRun {
+		0% {
+			transform: translateY(500px);
+		}
+
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	//按钮上下浮动
+	@keyframes movetop {
+		0% {
+			transform: translateY(0px);
+		}
+
+		50% {
+			transform: translateY(15px);
+		}
+
+		100% {
+			transform: translateY(0px);
+		}
+	}
+
+	@keyframes movetop2 {
+		0% {
+			transform: translateY(0px);
+		}
+
+		50% {
+			transform: translateY(-18px);
+		}
+
+		100% {
+			transform: translateY(0px);
+		}
+	}
+
+	// 雷达转动
+	@keyframes rotatebg {
+		0% {
+			filter: brightness(1);
+		}
+
+		50% {
+			filter: brightness(1.5);
+		}
+
+		100% {
+			filter: brightness(1);
+		}
+	}
+	
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	
+	//底部导航上浮
+	@keyframes btnmove {
+		0% {
+			transform: translateY(200px);
+		}
+	
+		100% {
+			transform: translateY(0);
+		}
+	}
+	
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-</style>
+	@import '@/assets/styles/base.scss';
+    
+	.lifeline-con {
+		background: url('../assets/index_img/b-bg.jpg') no-repeat;
+
+		.life-header {
+			width: 100%;
+			height: 109px;
+			background: url('../assets/index_img/header-img.png') no-repeat center;
+			position: fixed;
+			top: 0;
+			font-family: pmzd;
+			font-size: 42px;
+			text-align: center;
+			line-height: 80px;
+			animation: headermove 1s ease-out;
+
+			span {
+				line-height: 22px;
+				font-weight: 400;
+				color: #EFF8FC;
+				background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
+				opacity: 1;
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+
+		}
+        //左右侧按钮
+		.btn {
+			display: flex;
+			justify-content: center;
+			width: 300px;
+			height: 195px;
+			transition: all 0.5s ease-in-out;
+
+			.btn-left {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				cursor: pointer;
+
+				img {
+					width: 160px;
+					height: 155px;
+					margin-top: 1.25rem;
+				}
+
+				span {
+					font-weight: 400;
+					font-size: 24px;
+					color: #EFF8FC;
+					line-height: 28px;
+					font-family: pmzd;
+				}
+			}
+
+			.btn-right {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.btn-right-con {
+					cursor: pointer;
+					width: 131px;
+					height: 37px;
+					text-align: center;
+					background: url('../assets/index_img/name-bg.png') no-repeat center;
+					font-weight: 400;
+					font-size: 14px;
+					line-height: 32px;
+					color: #EFF8FC;
+					transition: all .2s ease-in-out;
+				}
+
+				.btn-right-con:hover {
+					filter: hue-rotate(-70deg);
+				}
+			}
+		}
+
+		.btn:hover {
+			filter: brightness(180%);
+		}
+
+		.btn-r {
+			position: absolute;
+			left: 16%;
+			top: 15%;
+			animation: btnRun 1s , movetop 3.5s 1s infinite;
+		}
+
+		.btn-rq {
+			position: absolute;
+			right: 12%;
+			top: 12%;
+			animation: btnRun 1s ,movetop 4s 1s infinite;
+		}
+
+		.btn-ps {
+			position: absolute;
+			left: 5%;
+			top: 38%;
+			animation: btnRun 1s ,movetop2 5s 1s infinite;
+		}
+
+		.btn-ql {
+			position: absolute;
+			left: 12%;
+			top: 60%;
+			animation: btnRun 1s ,movetop2 3s 1s infinite;
+		}
+
+		.btn-gl {
+			position: absolute;
+			right: 6%;
+			top: 38%;
+			animation: btnRun 1s ,movetop2 4s 1s infinite;
+		}
+
+		.btn-gs {
+			position: absolute;
+			right: 16%;
+			top: 59%;
+			animation: btnRun 1s , movetop2 2s 1s infinite;
+		}
+
+
+        //雷达
+		.radar {
+			display: flex;
+			position: absolute;
+			left: 50%;
+			top: 40%;
+			transform: translate(-50%, -40%);
+			justify-content: center;
+			align-items: center;
+			width: 726px;
+			height: 726px;
+			animation: radarOP 1s ease-in;
+		}
+
+		.rotating-bg {
+			position: relative;
+			z-index: 100;
+			animation: rotatebg 2s infinite linear;
+		}
+
+		.rotating-image {
+			position: relative;
+			animation: rotate 5s infinite linear;
+			z-index: 150;
+		}
+		
+		//底部按钮5个
+	    .life-btm-btn{
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+		    justify-content: center;
+			align-items: center;
+			
+			.btn-span:nth-child(1){
+				animation: btnmove 1s ;
+			}
+			.btn-span:nth-child(2){
+				animation: btnmove 1.2s ;
+			}
+			.btn-span:nth-child(3){
+				animation: btnmove 1.4s ;
+			}
+			.btn-span:nth-child(4){
+				animation: btnmove 1.6s ;
+			}
+			.btn-span:nth-child(5){
+				animation: btnmove 1.8s ;
+			}
+			.btn-span{
+				width: 166px;
+				height: 50px;
+				background:url('../assets/index_img/btm-btn.png') no-repeat center; 
+				text-align: center;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin: 10px 5px;
+				transition: all 0.3s ease-in-out ;
+				cursor: pointer;
+				span{
+					font-size: 20px;
+					color: #EFF2FF;
+					font-family: ysbth;
+					line-height: 40px;
+					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+				}
+			}
+			.btn-span:hover{
+				filter: brightness(170%) hue-rotate(-20deg);
+				transform: translateY(-10px);
+			}
+		}
+		.btm-btn2{
+			position: absolute;
+			bottom: 80px;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+			animation: btmmove2 1s ease-out;
+			.btn-span2{
+				margin: 0 10px;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				transition: all 0.3s;
+				
+				img{
+					width: 150px;
+					height: 100px;
+				}
+				span{
+					font-size: 20px;
+					color: #EFF2FF;
+					font-family: ysbth;
+					line-height: 40px;
+					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+					margin-top: -10px;
+				}
+			}
+			.btn-span2:hover{
+				filter: brightness(170%) hue-rotate(-20deg);
+				transform: translateY(-10px);
+			}
+		}
+
+
+	}
+</style>