alipay-emulator/components/watermark/watermark.vue

83 lines
1.8 KiB
Vue

<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')"></image>
</view>
</view>
</template>
<script>
export default {
props: {
dark: {
type: String,
default: 'light'
}
},
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: 125px 125px;
.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>