<template>
	<view class="root">
		<view class="content">
			<view class="head">
				<text>{{title}}</text>
				<u--image @click="$emit('close')" :src="require('@/static/close.png')" width="22rpx" height="22rpx"></u--image>
			</view>
		<scroll-view scroll-y style="width: 100%;height: calc(100% - 112rpx);">
			<view v-html="content" style="font-family: Arial;font-weight: 400;text-align: center;"></view>
		</scroll-view>	
		</view>
	</view>
</template>

<script>
	export default {
		name:"notice",
		props:["title","content"],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.root{
		height: 100%;
		width: 100%;
		position: fixed;
		top:0;
		left:0;
		background:RGBA(204, 204, 204, 0.8);
		display: flex;
		// align-items: center;
		justify-content: center;
		z-index: 100;
		.content{
			border: 20rpx solid var(--borderTheme--);
			width: calc(90% - 60rpx);
			border-radius: 12rpx;
			padding: 0 40rpx;
			background: white;
			padding-bottom:60rpx;
			overflow: auto;
			height: fit-content;
			max-height: 70%;
			margin-top: 25%;
			.head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0;
				font-family: Arial;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
		}
	}
</style>