<template>
	<view class="watermark">
		<view class="watermarkBox">
			<!-- 		<image v-if="dark=='light'" class="watermarkImg" src="/static/image/watermark.png" mode=""></image>
			<image v-else class="watermarkImg" src="/static/image/watermarkDark.png" mode=""></image>
			<image v-if="dark=='light'" class="colse" src="/static/image/watermarkColseLight.png" mode=""></image>
			<image v-else class="colse" src="/static/image/watermarkColseDark.png" mode=""></image> -->
			<image class="watermarkImg" src="/static/image/watermark.png" mode=""></image>
			<image class="colse" src="/static/image/watermarkColse.png" mode=""
				@click="$goRechargePage('watermark_close', source)"></image>
		</view>

	</view>
</template>

<script>
export default {
	props: {
		dark: {
			type: String,
			default: 'light'
		},
		source: {
			type: String,
			default: 'uni_alipay_other'
		}
	},
	name: "watermark",
	data() {
		return {
			statusBarHeight: 0
		};
	},
	mounted() {
		this.getStatusBarHeight()
	},
	methods: {
		getStatusBarHeight() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			console.log('状态栏高度:', this.statusBarHeight + 'px')
		}
	},
}
</script>

<style lang="scss">
.watermark {
	pointer-events: none;
	width: 100vw;
	position: fixed;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99 !important;
	background-image: url('/static/image/watermarkBG.png');
	background-size: 500rpx 500rpx;

	.watermarkBox {
		width: 200px;
		height: 255px;
		position: relative;
		z-index: 99 !important;

		.colse {
			position: absolute;
			right: -18px;
			top: -18px;
			width: 18px;
			height: 20px;
			pointer-events: auto;
		}
	}

	.watermarkImg {
		width: 200px;
		height: 55px;
		pointer-events: none;
	}
}
</style>