<template>
	<u-popup :show="show" round="20rpx" mode="center" zIndex="10076" @close="$emit('close')">
		<view class="message-popup">
			<image class="message-close-icon" src="/static/images/message_icon.png" />
			<view class="message-title">消息通知</view>
			<view class="message-content">{{ message }}</view>
			<view class="message-confirm-button" @click="$emit('close')">确认</view>
			<image src="/static/images/close_white_icon.png" class="close" @click="$emit('close')" />
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'LiveNoticePopPanel',
	props: {
		show: { type: Boolean, default: false },
		message: { type: String, default: '' }
	}
}
</script>

<style scoped lang="scss">
.message-popup {
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	padding: 126rpx 48rpx 0;
	width: 554rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, #E2FCEF 0%, rgba(226, 252, 239, 0) 100%);
	border-radius: 62rpx 62rpx 0rpx 0rpx;

	.message-close-icon {
		position: absolute;
		z-index: 9;
		top: -74rpx;
		width: 176rpx;
		height: 176rpx;
	}

	.message-title {
		font-weight: 600;
		font-size: 36rpx;
		color: #333333;
		margin: 24rpx 0 28rpx;
	}

	.message-content {
		margin-bottom: 52rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.message-confirm-button {
		width: 358rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
		border-radius: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.close {
		position: absolute;
		z-index: 9;
		bottom: -168rpx;
		width: 64rpx;
		height: 64rpx;
	}
}
</style>
