xc/components/alertPop/vipPop.vue

<template>
	<alertPop title="开通VIP" btntitle='确认开通' :show="vipAlertShow" @close="vipAlertShow=false">
		<view class="popup-box">
			<image src="../../static/user/lm/huanguan.png" mode="" class="hg"></image>
			<view class="tit" style="letter-spacing: 0;">
				会员VIP
			</view>
			<view class="gg">
				购买VIP免除广告30天
			</view>
			<view class="yue">
				<image src="../../static/index/index/icon01.png" mode=""></image>
				<view class="">
					拥有矿石 <text>10000</text> 个，开通需 <text>10000</text> 个
				</view>
			</view>
		</view>
	</alertPop>
</template>

<script>
	import alertPop from "@/components/alertPop/alertPop.vue"
	export default {
		data() {
			return {
				vipAlertShow:false,
			};
		},
		components: {
			alertPop
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {
			open(name) {
				this.vipAlertShow = true;
			},
			close(name) {
				this.vipAlertShow = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.popup-box {
		.hg {
			width: 256rpx;
			height: 234rpx;
			display: block;
			margin:68rpx auto 35rpx;
		}
		.tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #222222;
			text-align: center;
			padding-top: 10rpx;
			letter-spacing: 10rpx;
		}
	
	
		.gg {
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
			text-align: center;
			padding-bottom: 58rpx;
		}
	
		.yue {
			display: flex;
			width: 100%;
			justify-content: center;
	
			image {
				width: 43rpx;
				height: 34rpx;
				margin: 0;
			}
	
			view {
				padding-left: 10rpx;
			}
	
			font-weight: bold;
			font-size: 25rpx;
			color: #222222;
			text-align: center;
	
			text {
				color: #3C4192;
			}
		}
	
		.btn {
			width: 330rpx;
			line-height: 77rpx;
			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
			border-radius: 10rpx;
			margin: 35rpx auto 0;
			text-align: center;
			font-weight: bold;
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}
</style>