JT-CIM-ZHNY/src/components/jt-popup/jt-popup3.vue

<template>
	<!-- 弹出框组件 -->
	<div :class="['popup-main',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
		<!-- <div class="borderstyle" :style="{height:height}">
			<div class="angle-border-blue left-top-border"></div>
			<div class="angle-border-blue right-top-border"></div>
			<div class="angle-border left-bottom-border"></div>
			<div class="angle-border right-bottom-border"></div>
			
		</div> -->
		<div class="header">
			<div style="width: 41rem;"></div>
			<span>{{title}}</span>
			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
		</div>
		<div class="middle">
			<slot></slot>
		</div>
		<div class="footers"></div>
	</div>
	<div :class="['popup-main2',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
		<!-- <div class="borderstyle" :style="{height:height}">
			<div class="angle-border-blue left-top-border"></div>
			<div class="angle-border-blue right-top-border"></div>
			<div class="angle-border left-bottom-border"></div>
			<div class="angle-border right-bottom-border"></div>
			
		</div> -->
		<div class="header2">
			<div style="width: 41rem;"></div>
			<span>能耗同比统计</span>
			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
		</div>
		<div class="middle2">
			<slot></slot>
		</div>
		<div class="footers2"></div>
	</div>
	<div :class="['popup-main3',animationClass]" v-drag v-show="isshow" :isEmit="isEmit" id="popup" :style="{height:height,width:width}">
		<!-- <div class="borderstyle" :style="{height:height}">
			<div class="angle-border-blue left-top-border"></div>
			<div class="angle-border-blue right-top-border"></div>
			<div class="angle-border left-bottom-border"></div>
			<div class="angle-border right-bottom-border"></div>
			
		</div> -->
		<div class="header3">
			<div style="width: 41rem;"></div>
			<span>智能监控</span>
			<!-- <i class='iconfont icon-chahao' @click="closebasicLayer" /> -->
		</div>
		<div class="middle3">
			<slot></slot>
		</div>
		<div class="footers3"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				title: '',
			}
		},
		// watch: {
		// 	isshow(newVal, oldVal) {
		// 		if (newVal) {
		// 			let popup = document.getElementById('popup')
		// 			popup.style.left = '0rem'
		// 			popup.style.right = '10rem'
		// 		}
		// 	}

		// },
		props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
		methods: {
			closebasicLayer() {
				this.isshow = true
				if (this.isEmit) {
					this.$emit('closeJTPopup');
				}
			}
		},
		mounted() {}
	}
</script>

<style scoped lang="scss">
	.popup-main {
		position: absolute;
		right: 1rem;
		top: 90rem;
		// height: 490rem;
		height: calc((100% - 115rem) / 3);
		width: 350rem;
		// padding: 10rem;
		background-color: rgba(0, 45, 66, 0.5);
		z-index: 1000;
		font-size: 16rem;
		color: white;
		user-select: none;
		animation-name: slide-right;
		animation-duration: .8s;

		//头部背景图
		.header {
			height: 41rem;
			width: calc(100% + 20rem);
			background: url('@/assets/images/tcheader.png') no-repeat;
			background-size: 100%;
			margin: -10rem;
			margin-bottom: 0rem;
			line-height: 41rem;
			display: flex;
			text-align: center;


			span {
				// flex: 15;
				font-weight: bold;
			}

			i {
				z-index: 101;
				flex: 1;
				margin: 0rem 8rem;
				font-size: 20rem;
			}
		}

		//滚动条-鼠标悬浮显示
		// .middle {
		// 	height: calc(100% - 71rem);
		// 	width: 100%;
		// 	overflow-y: hidden;
		// 	padding: 15rem 0 0 0;
		// }

		// .middle:hover{
		// 	overflow-y:auto;
		// }

		//滚动条一直显示
		.middle {
			height: calc(100% - 71rem);
			width: 100%;
			overflow-y: auto;
			padding: 15rem 0 0 0;
		}

		.footers {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 30rem;
			width: 100%;
			line-height: 30rem;
			background: url('@/assets/images/footerss.webp') no-repeat center;
			opacity: 0.7;
		}


		/* 四个边角样式 */
		.borderstyle {
			position: relative;
			width: 100%;
			// height: 490rem;
			height: calc(100% - 30rem);
			padding: 10rem;
			border: 1rem solid #008aff70 !important;
			background-color: rgba(5, 45, 115, 0.7) !important;
			box-shadow: 0 4rem 15rem 1rem #02213bb3;



			.angle-border {
				position: absolute;
				width: 12rem;
				height: 12rem;
			}

			.angle-border-blue {
				position: absolute;
				width: 70rem;
				height: 30rem;
			}

			.left-top-border {
				top: -2rem;
				left: -2rem;
				border-left: 2rem solid #008affdd;
				border-top: 2rem solid #008affdd;
			}

			.right-top-border {
				top: -2rem;
				right: -2rem;
				border-right: 2rem solid #008affdd;
				border-top: 2rem solid #008affdd;
			}

			.left-bottom-border {
				bottom: -2rem;
				left: -2rem;
				border-bottom: 2rem solid #FFFFFF;
				border-left: 2rem solid #FFFFFF;
			}

			.right-bottom-border {
				bottom: -2rem;
				right: -2rem;
				border-right: 2rem solid #FFFFFF;
				border-bottom: 2rem solid #FFFFFF;
			}
		}
	}
	
	.popup-main2 {
		position: absolute;
		right: 1rem;
		top: calc(calc(100% - 115rem) / 3 + 90rem);
		// height: 490rem;
		height: calc((100% - 115rem) / 3);
		width: 350rem;
		// padding: 10rem;
		background-color: rgba(0, 45, 66, 0.5);
		z-index: 1000;
		font-size: 16rem;
		color: white;
		user-select: none;
		animation-name: slide-right;
		animation-duration: .8s;
	
		//头部背景图
		.header2 {
			height: 41rem;
			width: calc(100% + 20rem);
			background: url('@/assets/images/tcheader.png') no-repeat;
			background-size: 100%;
			margin: -10rem;
			margin-bottom: 0rem;
			line-height: 41rem;
			display: flex;
			text-align: center;
	
	
			span {
				// flex: 15;
				font-weight: bold;
			}
	
			i {
				z-index: 101;
				flex: 1;
				margin: 0rem 8rem;
				font-size: 20rem;
			}
		}
	
		//滚动条-鼠标悬浮显示
		// .middle {
		// 	height: calc(100% - 71rem);
		// 	width: 100%;
		// 	overflow-y: hidden;
		// 	padding: 15rem 0 0 0;
		// }
	
		// .middle:hover{
		// 	overflow-y:auto;
		// }
	
		//滚动条一直显示
		.middle2 {
			height: calc(100% - 71rem);
			width: 100%;
			overflow-y: auto;
			padding: 15rem 0 0 0;
		}
	
		.footers2 {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 30rem;
			width: 100%;
			line-height: 30rem;
			background: url('@/assets/images/footerss.webp') no-repeat center;
			opacity: 0.7;
		}
	
	
		/* 四个边角样式 */
		.borderstyle {
			position: relative;
			width: 100%;
			// height: 490rem;
			height: calc(100% - 30rem);
			padding: 10rem;
			border: 1rem solid #008aff70 !important;
			background-color: rgba(5, 45, 115, 0.7) !important;
			box-shadow: 0 4rem 15rem 1rem #02213bb3;
	
	
	
			.angle-border {
				position: absolute;
				width: 12rem;
				height: 12rem;
			}
	
			.angle-border-blue {
				position: absolute;
				width: 70rem;
				height: 30rem;
			}
	
			.left-top-border {
				top: -2rem;
				left: -2rem;
				border-left: 2rem solid #008affdd;
				border-top: 2rem solid #008affdd;
			}
	
			.right-top-border {
				top: -2rem;
				right: -2rem;
				border-right: 2rem solid #008affdd;
				border-top: 2rem solid #008affdd;
			}
	
			.left-bottom-border {
				bottom: -2rem;
				left: -2rem;
				border-bottom: 2rem solid #FFFFFF;
				border-left: 2rem solid #FFFFFF;
			}
	
			.right-bottom-border {
				bottom: -2rem;
				right: -2rem;
				border-right: 2rem solid #FFFFFF;
				border-bottom: 2rem solid #FFFFFF;
			}
		}
	}
	
	.popup-main3 {
		position: absolute;
		right: 1rem;
		top: calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem);
		// height: 490rem;
		height: calc((100% - 115rem) / 3);
		width: 350rem;
		// padding: 10rem;
		background-color: rgba(0, 45, 66, 0.5);
		z-index: 1000;
		font-size: 16rem;
		color: white;
		user-select: none;
		animation-name: slide-right;
		animation-duration: .8s;
	
		//头部背景图
		.header3 {
			height: 41rem;
			width: calc(100% + 20rem);
			background: url('@/assets/images/tcheader.png') no-repeat;
			background-size: 100%;
			margin: -10rem;
			margin-bottom: 0rem;
			line-height: 41rem;
			display: flex;
			text-align: center;
	
	
			span {
				// flex: 15;
				font-weight: bold;
			}
	
			i {
				z-index: 101;
				flex: 1;
				margin: 0rem 8rem;
				font-size: 20rem;
			}
		}
	
		//滚动条-鼠标悬浮显示
		// .middle {
		// 	height: calc(100% - 71rem);
		// 	width: 100%;
		// 	overflow-y: hidden;
		// 	padding: 15rem 0 0 0;
		// }
	
		// .middle:hover{
		// 	overflow-y:auto;
		// }
	
		//滚动条一直显示
		.middle3 {
			height: calc(100% - 71rem);
			width: 100%;
			overflow-y: auto;
			padding: 15rem 0 0 0;
		}
	
		.footers3 {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 30rem;
			width: 100%;
			line-height: 30rem;
			background: url('@/assets/images/footerss.webp') no-repeat center;
			opacity: 0.7;
		}
	
	
		/* 四个边角样式 */
		.borderstyle {
			position: relative;
			width: 100%;
			// height: 490rem;
			height: calc(100% - 30rem);
			padding: 10rem;
			border: 1rem solid #008aff70 !important;
			background-color: rgba(5, 45, 115, 0.7) !important;
			box-shadow: 0 4rem 15rem 1rem #02213bb3;
	
	
	
			.angle-border {
				position: absolute;
				width: 12rem;
				height: 12rem;
			}
	
			.angle-border-blue {
				position: absolute;
				width: 70rem;
				height: 30rem;
			}
	
			.left-top-border {
				top: -2rem;
				left: -2rem;
				border-left: 2rem solid #008affdd;
				border-top: 2rem solid #008affdd;
			}
	
			.right-top-border {
				top: -2rem;
				right: -2rem;
				border-right: 2rem solid #008affdd;
				border-top: 2rem solid #008affdd;
			}
	
			.left-bottom-border {
				bottom: -2rem;
				left: -2rem;
				border-bottom: 2rem solid #FFFFFF;
				border-left: 2rem solid #FFFFFF;
			}
	
			.right-bottom-border {
				bottom: -2rem;
				right: -2rem;
				border-right: 2rem solid #FFFFFF;
				border-bottom: 2rem solid #FFFFFF;
			}
		}
	}

	// .fadein-right {
	// 	animation-name: slide-right;
	// 	animation-duration: .8s;
	// }

	@keyframes slide-right {
		0% {
			opacity: 0;
			transform: translateX(100%)
		}

		100% {
			opacity: 1;
			transform: translateX(0)
		}
	}

	.fadein-left {
		animation-name: slide-left;
		animation-duration: .8s;
		left: 40rem;
	}

	@keyframes slide-left {
		from {
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
</style>