discounts-minapp/components/zs-getVip/index.vue

<template>
	<view class="zs-getVip">
		<view class="content">
			<image class="bg" src="https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/uHMgZAP95DoL7c10575028ada2bc02c172627840290d.png/1.png" mode=""></image>
			<image @click="submit" class="btn" src="https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/39IILRhLzeb35d1bc2dc0c13256eaa79865032fb19ca.png/1.png" mode=""></image>
			<image @click="close" class="close-btn" src="@/static/close.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			close() {
				this.$emit('close')
			},
			submit() {
				this.$emit('submit')
			}
		},
	}
</script>

<style lang="scss" scoped>
.zs-getVip{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.3);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	.content{
		position: relative;
		.bg{
			width: 628rpx;
			height: 628rpx;
		}
		.btn{
			width: 290rpx;
			height: 86rpx;
			position: absolute;
			bottom: 32rpx;
			left: calc(50% - 145rpx);
		}
		.close-btn{
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			bottom: -80rpx;
			left: calc(50% - 30rpx);
		}
	}
}
</style>