<template>
	<view class="pop_up_componnet" v-if="isOpened">
		<!-- 遮罩层 -->
		<view class="background_blur"></view>
		<!-- 弹窗 -->
		<view class="pop_up_box" >
			<!-- 背景飞机 -->
			<image class="plane_image" src="../../static/components/my_pop_up/plane.png"></image>
			<!-- 关闭图标 -->
			<image class="close_image" @click="onClose" src="../../static/components/my_pop_up/close_icon.png"></image>
			<!-- 标题 -->
			<view class="title">{{title}}</view>
			<!-- 内容 -->
			<view class="content">{{content}}</view>
			<!-- 横线 -->
			<image class="line" src="../../static/components/my_pop_up/line.png"></image>
			<!-- 按钮 -->
			<button class="button" @click="onButtonClick">确认</button>
		</view>
	</view>
</template>

<script>
	import { ref } from 'vue'
	export default{
		name:'my_pop_up',
		props:{
			title:{
				default:'提示',
			},
			content:{
				default:'',
			},
			isOpened:{
				default:true,
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			onButtonClick(){
				this.$emit('onClick','onButtonclick');
			},
			onClose(){
				this.$emit('onClose');
			}
		}
	}
</script>

<style lang="scss">
	.pop_up_componnet{
		height: 100vh;
		width: 100vw;
		position: relative;
		.background_blur{
			height: 100%;
			width: 100%;
			float: left;
			background-repeat: no-repeat;
			background: #ffffff;
			background-position: center;
			background-size: cover;
			opacity: 70%;
		}
		.pop_up_box{
			background-color: #EAF5FF;
			height: 13vh;
			width: 50vw;
			border-radius: 12px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			.plane_image{
				position: absolute;
				left: 0%;
				top: 0%;
				width: 15.3vw;
				height: 5vh;
			}
			.close_image{
				position: absolute;
				right: 10%;
				top: 10%;
				width: 0.7rem;
				height: 0.7rem;
			}
			.title{
				/* 错误 */
				position: absolute;
				left: 50%;
				top: 10.74%;
				transform: translateX(-50%);
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 1rem;
				display: flex;
				align-items: center;
				color: #000364;
			}
			.content{
				position: absolute;
				left: 50%;
				top: 41.32%;
				transform: translateX(-50%);
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 0.8rem;
				display: flex;
				align-items: center;
				color: #5FA0D1;
			}
			.line{
				position: absolute;
				left: 4.93%;
				top: 63.64%;
				height: 0.1rem;
				width: 90.14%;
				opacity: 0.35;
			}
			.button{
				position: absolute;
				left: 50%;
				top: 71.07%;
				transform: translateX(-50%);
				background: #7BC0FE;
				border-radius: 8px;
				color: #ffffff;
				height: 3vh;
				width: 37vw;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1rem;
			}
			.button:active{
				color: #4A69F7;
			}
		}
	}
</style>