UI一张图

src/views/lookall.vue

@@ -0,0 +1,515 @@
+<template>
+	<div class="lookall">
+		<div class="lookall-header">
+			<span>四平市城市生命线监管平台</span>
+		</div>
+
+		<div class="content-bar">
+			<nav class="left-nav">
+				<img src="../assets/lookall/lan-line.png" alt="" class="line" />
+				<div class="nthm">
+					<div class="nthl" :class="'nthl'+index" v-for="(item,index) in iconData"
+						@mousemove="handleMouseOver(index)" @mouseleave="handleMouseLeave(index)">
+						<a :href="'#section'+index" @click.prevent="scrollToSection('section'+computedIndex(index))"
+							style="color: #fff;">
+							<img :src="getIcon(index)" alt="" class="icon-left" />
+							<img :src="item.icon" class="icon-left2" />
+							<span>{{item.name}}</span>
+						</a>
+					</div>
+				</div>
+			</nav>
+			<div class="right-content">
+				<div v-for="(item,index) in section" :id="'section'+computedIndex(index)" class="con-box">
+					<div class="tit">
+						{{item.name}}
+					</div>
+					<div class="btm-btn3">
+						<div class="btn-span2" v-for="(item,index) in item.btn">
+							<img :src="item.btnSrc" alt="" />
+							<span>{{item.btnName}}</span>
+						</div>
+					</div>
+				</div>
+				<div style="height: 600px;"></div>
+			</div>
+		</div>
+
+	</div>
+
+
+
+</template>
+
+
+<script>
+	export default {
+		data() {
+			return {
+				iconData: [{
+						name: '综合',
+						icon: require("@/assets/lookall/zh-icon.png"),
+					},
+					{
+						name: '燃气',
+						icon: require("@/assets/lookall/rq-icon.png")
+					},
+					{
+						name: '热力',
+						icon: require("@/assets/lookall/rl-icon.png")
+					},
+					{
+						name: '排水',
+						icon: require("@/assets/lookall/ps-icon.png")
+					},
+					{
+						name: '桥梁',
+						icon: require("@/assets/lookall/ql-icon.png")
+					},
+					{
+						name: '管廊',
+						icon: require("@/assets/lookall/gl-icon.png")
+					},
+					{
+						name: '供水',
+						icon: require("@/assets/lookall/gs-icon.png")
+					}
+
+				],
+				normalIcon: require("@/assets/lookall/left-icon-2.png"),
+				hoveredIcon: require("@/assets/lookall/left-icon-1.png"),
+				hoveredIndexes: [],
+				section: [{
+						name: '综合管廊',
+						btn:[
+							{
+								btnName:'监管中心',
+								btnSrc:require("@/assets/lookall/jgzx-icon.png")
+							},
+							{
+								btnName:'驾驶舱',
+								btnSrc:require("@/assets/lookall/jsc-icon.png")
+							},
+							{
+								btnName:'运营中心',
+								btnSrc:require("@/assets/lookall/yyzx-icon.png")
+							}
+						]
+					},
+					{
+						name: '燃气',
+						btn:[
+							{
+								btnName:'一张图',
+								btnSrc:require("@/assets/lookall/yzw-icon.png")
+							},
+							{
+								btnName:'瓶安四平',
+								btnSrc:require("@/assets/lookall/pan-icon.png")
+							},
+							{
+								btnName:'智慧哨兵',
+								btnSrc:require("@/assets/lookall/sb-icon.png")
+							},
+							{
+								btnName:'城市生命线',
+								btnSrc:require("@/assets/lookall/smx-icon.png")
+							}
+						]
+					},
+					{
+						name: '热力',
+						btn:[
+							{
+								btnName:'监管中心',
+								btnSrc:require("@/assets/lookall/jgzx-icon.png")
+							},
+							
+						]
+					},
+					{
+						name: '排水',
+						btn:[
+							{
+								btnName:'监管中心',
+								btnSrc:require("@/assets/lookall/jgzx-icon.png")
+							},
+							
+						]
+					},
+					{
+						name: '桥梁',
+						btn:[
+							{
+								btnName:'监管中心',
+								btnSrc:require("@/assets/lookall/jgzx-icon.png")
+							},
+							
+						]
+					},
+					{
+						name: '管廊',
+						btn:[
+							{
+								btnName:'监管中心',
+								btnSrc:require("@/assets/lookall/jgzx-icon.png")
+							},
+							
+						]
+					},
+					{
+						name: '供水',
+						btn:[
+							{
+								btnName:'监管中心',
+								btnSrc:require("@/assets/lookall/jgzx-icon.png")
+							},
+							
+						]
+					},
+				]
+
+			}
+		},
+
+		methods: {
+			//icon替换
+			getIcon(index) {
+				return this.hoveredIndexes.includes(index) ? this.hoveredIcon : this.normalIcon;
+			},
+			handleMouseOver(index) {
+				if (!this.hoveredIndexes.includes(index)) {
+					this.hoveredIndexes.push(index); // 添加到被hover的数组中
+				}
+			},
+			handleMouseLeave(index) {
+				const indexToRemove = this.hoveredIndexes.indexOf(index);
+				if (indexToRemove !== -1) {
+					this.hoveredIndexes.splice(indexToRemove, 1); // 从数组中移除索引，恢复普通图标状态
+				}
+			},
+			//点击滚动
+			scrollToSection(index) {
+				const element = document.getElementById(index);
+				if (element) {
+					element.scrollIntoView({
+						behavior: 'smooth'
+						
+					});
+				}
+				console.log(index)
+			},
+			//序号+1
+			computedIndex(index) {
+				return index + 1;
+			}
+
+		}
+
+
+	}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import '@/assets/styles/base.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 topDown {
+		0% {
+			transform: translateY(-1000px);
+		}
+
+		100% {
+			transform: translateY(0px);
+		}
+	}
+
+	@keyframes movetop2 {
+		0% {
+			transform: translateY(0px);
+		}
+
+		50% {
+			transform: translateY(-18px);
+		}
+
+		100% {
+			transform: translateY(0px);
+		}
+	}
+
+
+
+	@keyframes moveLeft {
+		0% {
+			transform: translateX(-200px);
+		}
+
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+
+	@keyframes moveRight {
+		0% {
+			transform: translateX(1000px);
+		}
+
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+
+	div ::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+
+	.lookall {
+		background: url('../assets/lookall/lan-bg.jpg') no-repeat fixed;
+		width: 100%;
+		height: 100vh;
+		overflow: hidden;
+
+		.lookall-header {
+			width: 100%;
+			height: 109px;
+			background: url('../assets/lookall/lan-header-bg.png') no-repeat top center;
+			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;
+			}
+
+		}
+
+		.content-bar {
+			width: 100%;
+			position: absolute;
+			height: calc(100% - 109px);
+			overflow: hidden;
+
+			.left-nav {
+				height: calc(100% - 109px);
+				float: left;
+				width: 23%;
+				overflow-y: scroll;
+				position: relative;
+				display: flex;
+
+				.line {
+					position: absolute;
+					left: 130px;
+					height: 78vh;
+					top: 20px;
+					animation: topDown 1s ease-out;
+
+				}
+
+				.none {
+					display: none;
+				}
+
+				.nthm {
+					margin-left: 130px;
+
+					.nthl {
+						margin-bottom: 20px;
+						transition: all .5s ease-in-out;
+
+						a {
+							display: flex;
+							position: relative;
+							width: 226px;
+							height: 84px;
+							background: url('../assets/lookall/left-icon-bg.png') no-repeat right;
+							align-items: center;
+
+							.icon-left {
+								position: absolute;
+								left: -24px;
+								animation: topDown 1s ease-out;
+							}
+
+							.icon-left2 {
+								position: absolute;
+								left: 54px;
+							}
+
+							img {
+								transition: all .8s ease-in-out;
+							}
+
+							span {
+								position: absolute;
+								left: 130px;
+								font-family: pmzd;
+								font-size: 24px;
+							}
+						}
+					}
+
+					.nthl:hover {
+						filter: hue-rotate(-60deg) brightness(160%);
+						transform: translateX(5px);
+
+						img:nth-child(2) {
+							transform: rotate3d(1, 2, 3, 360deg);
+						}
+
+					}
+
+					.nthl0 {
+						animation: moveLeft .5s ease-out;
+					}
+
+					.nthl1 {
+						animation: moveLeft .8s ease-out;
+					}
+
+					.nthl2 {
+						animation: moveLeft 1.1s ease-out;
+					}
+
+					.nthl3 {
+						animation: moveLeft 1.4s ease-out;
+					}
+
+					.nthl4 {
+						animation: moveLeft 1.7s ease-out;
+					}
+
+					.nthl5 {
+						animation: moveLeft 2s ease-out;
+					}
+
+					.nthl6 {
+						animation: moveLeft 2.3s ease-out;
+					}
+				}
+
+			}
+
+			.right-content {
+				overflow-y: scroll;
+				position: relative;
+				height: calc(100vh - 109px);
+				margin-right: 120px;
+
+				.con-box {
+					height: 280px;
+					display: flex;
+					flex-direction: column;
+
+					.tit {
+						width: 100%;
+						height: 60px;
+						background: url('../assets/lookall/lan-tit-bg.png') no-repeat top left;
+						font-family: pmzd;
+						font-size: 24px;
+						line-height: 60px;
+						padding-left: 70px;
+						animation: headermove 1s ease-out;
+						color: #fff;
+					}
+					.btm-btn3{
+						width: 100%;
+						height: 220px;
+						display: flex;
+						justify-content: start;
+						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;
+							margin: 0 20px;
+					
+							img{
+								width: 160px;
+								height: 160px;
+							}
+							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: -30px;
+							}
+						}
+						.btn-span2:hover{
+							filter: brightness(170%) hue-rotate(-20deg);
+							transform: translateY(-10px);
+						}
+					}
+
+				}
+
+
+			}
+		}
+
+
+	}
+</style>