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

<script setup>
	import {
		Store
	} from '@/store/index';

	store = Store();
</script>
<template>
	<!-- 弹出框组件 -->
	<div :class="['popup-main',animationClass]" v-show="isshow" :isEmit="isEmit" id="popup"
		:style="{height:height,width:width,top:top,right:right,minWidth:minWidth}" ref="popup">
		<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 :class="longheader?'header long':'header'">
				<div style="width: 20rem;"></div>
				<span>{{title}}</span>
				<i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
					@click="closebasicLayer" style="font-size: 16rem;" />
			</div>
			<div class="middle">
				<slot></slot>
			</div>
			<div v-if="showfooter" class="footers"></div>
		</div>
	</div>
</template>

<script>
	let store = undefined;
	export default {
		data() {
			return {
				isshow: false,
				title: '',
			}
		},
		// props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
		props: {
			height: { //高度单位rem
				type: String,
				default: ''
			},
			title: { //标题
				type: String,
				default: ""
			},
			right: { //初始化位置，右侧距离
				type: String,
				default: ""
			},
			top: { //初始化位置，顶部距离
				type: String,
				default: ""
			},
			width: { //的宽度
				type: String,
				default: ""
			},
			isEmit: { //是否有回调函数，用于清除功能
				type: Boolean,
				default: false
			},
			animationClass: { //组件弹出方向，slide-right右，slide-left左，slide-bottom下
				type: String,
				default: 'slide-right'
			},
			showfooter: { //底部动态文字是否展示
				type: Boolean,
				default: true
			},
			minWidth: { //最小宽度
				type: String,
				default: ""
			},
			longheader: { //是否是长背景图
				type: String,
				default: 0
			},
			top:{//距离顶端
				type:String,
				default:""
			}
		},
		methods: {
			closebasicLayer() {
				console.log("animationClass", this.animationClass)

				let style = document.styleSheets[0];
				if (this.animationClass === "slide-right") {
					style.insertRule(
						"@keyframes move-right {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
						10);
					style.insertRule(
						"@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
						11);
					let popup = this.$refs.popup
					popup.style.right = '-400rem'
					popup.style.animation = 'move-right 0.4s linear';
					setTimeout(res => {
						popup.style.animation = 'slide-right 0.4s linear'
						this.isshow = false
					}, 400)
				} else if (this.animationClass === "fadein-left") {
					style.insertRule(
						"@keyframes move-rightL {0% {opacity: 1;transform: translateX(0%)}100% {opacity: 1;transform: translateX(-100%)}}",
						8);
					style.insertRule(
						"@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
						9);
					style.insertRule(
						"@keyframes slide-left {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
						10);
					let popup = this.$refs.popup
					// popup.style.left = '-400rem'
					popup.style.animation = 'move-rightL 0.4s linear';
					setTimeout(res => {
						popup.style.animation = 'slide-left 0.4s linear'
						this.isshow = false
					}, 400)
				}

				if (this.isEmit) {
					this.$emit('closeJTPopup');
				}
			}
		},
		mounted() {
			console.log('store', this.showfooter)
		}
	}
</script>

<style scoped lang="scss">
	@charset "UTF-8";

	@font-face {
		font-family: "TTTGB-Medium";
		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
		font-weight: normal;
		font-style: normal;
	}

	.popup-main {
		position: absolute;
		right: 26rem;
		top: 125rem;
		// height: 490rem;

		height: calc(100% - 200rem);
		width: 350rem;
		// padding: 10rem;
		// z-index: 1000;
		font-size: 16rem;
		color: white;
		user-select: none;
		animation-name: slide-right;
		animation-duration: .8s;

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

			i:hover {
				cursor: pointer;
			}

			span {
				font-family: "TTTGB-Medium", sans-serif !important;
				font-size: 20rem;
				flex: 15;
			}

			i:hover {
				cursor: pointer;
			}

			i {
				z-index: 101;
				flex: 1;
				margin: 0rem 8rem;
				font-size: 20rem !important;
				text-align: center;
			}
		}

		// .iconfont{
		// 	font-size: 16rem;
		// }

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

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

		//滚动条一直显示
		.middle {
			height: calc(100% - 81rem);
			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(100vh - 200rem);
			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;
			}
		}
	}

	.long {
		background: url('@/assets/images/longheader.png') no-repeat !important;
		background-size: 100% 100% !important;
	}

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

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

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

	@keyframes slide-bottom {
		0% {
			opacity: 0;
			transform: translateY(-100%)
		}

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

	@keyframes move-right {
		0% {
			opacity: 0;
			transform: translateX(50%)
		}

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

	.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>