xc-app/pages/index/components/tip.vue

<template>
	<!-- 提示卡弹窗 -->
	<view class="dlg" v-if="visible" @click="nonuse">
		<view class="tip-dlg" @click.stop="">
			<view class="tip-main">
				<image src="@/static/new/tip/title.png" mode="" class="tip-icon"></image>
				<view class="tip-txt">商品提示语</view>
				<view class="tip-sub">使用提示卡后可提前获得该盲盒的商品提示语</view>
			</view>
			<view class="tip-btn">
				<image src="@/static/new/tip/bsy.png" mode="aspectFit" class="btn-icon" @click="nonuse"></image>
				<view class="btn-icon now" @click="immediate">
					立即使用
				</view>
			</view>
			<!-- <image src="@/static/order/close.png" mode="" class="close-tip" @click="close"></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		mounted() {

		},
		methods: {
			// 关闭弹框
			close() {
				this.$emit('close')
			},
			// 不使用提示卡
			nonuse() {
				this.$emit('nonuse')
			},
			// 使用提示卡
			immediate() {
				this.$emit('click')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dlg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.dlg-main {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.dlg-swiper {
				// width: 402rpx;
				width: 750rpx;
				height: 580rpx;
				border-radius: 20rpx;

				.dlg-swiper-item {
					width: 468rpx;
					height: 580rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.dlg-swiper-img {
						width: 468rpx;
						height: 580rpx;
						border-radius: 20rpx;
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: center;
						transform: scale(1);
						transition: transform 0.3s ease-in-out 0s;
					}
				}

			}

			.dlg-close-img {
				margin-top: 23rpx;
				width: 64rpx;
				height: 64rpx;
				z-index: 9999;
			}
		}

		.activity-main {
			flex-direction: column;
			width: 480rpx;
			height: 608rpx;
			background-image: url('@/static/new/box/hdtc.png');
			background-repeat: no-repeat;
			background-size: 100%;

			.dlg-title {
				display: block;
				margin: 0 auto;
				width: 148rpx;
				height: 52rpx;
			}

			.activity-img {
				width: 448rpx;
				height: 440rpx;
				border-radius: 20rpx;
				border: 1px solid red;
				display: block;
				margin: 20rpx auto;
				z-index: 2;
			}

			.now-buy {
				width: 348rpx;
				// height: 120rpx;
				display: block;
				margin: -120rpx auto 0 auto;
				z-index: 1;
			}

			.dlg-close-img {
				display: block;
				width: 64rpx;
				height: 64rpx;
				z-index: 9999;
				margin: -120rpx auto 0 auto;
			}
		}

		.buy-main {
			width: 480rpx;
			height: 640rpx;
			background-image: url('@/static/new/index/bg.png');
			background-size: 100%;
			background-repeat: no-repeat;

			.buy-header {
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.header-icon {
					width: 24rpx;
					height: 24rpx;
				}

				.header-txt {
					font-weight: 800;
					font-size: 32rpx;
					color: #143D66;
					margin: 0 16rpx;
				}
			}

			.dlg-tip {
				text-align: center;
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #528FCC;
			}

			.btn-main {
				height: 480rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.btn-buy {
					width: 400rpx;
					height: 188rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					// display: flex;
					// justify-content: center;
					padding-left: 96rpx;
					padding-top: 52rpx;

					.buy-title {
						width: 208rpx;
						height: 72rpx;
					}
				}

				.one {
					background-image: url('@/static/new/index/1.png');
				}

				.three {
					background-image: url('@/static/new/index/3.png');
				}

				.five {
					background-image: url('@/static/new/index/5.png');
				}
			}
		}

		.close-buy {
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 129rpx auto 0 auto;
		}

		.tip-dlg {
			.tip-main {
				width: 480rpx;
				height: 648rpx;
				background-image: url('@/static/new/tip/card.png');
				background-repeat: no-repeat;
				background-size: 100%;

				.tip-icon {
					width: 112rpx;
					height: 52rpx;
					display: block;
					margin: 0 auto;
				}

				.tip-txt {
					padding-top: 364rpx;
					font-weight: 800;
					font-size: 40rpx;
					color: #143D66;
					text-align: center;
				}

				.tip-sub {
					margin: 0 auto;
					margin-top: 24rpx;
					width: 352rpx;
					font-size: 24rpx;
					color: #528FCC;
				}
			}

			.tip-btn {
				margin-top: 64rpx;
				width: 480rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn-icon {
					width: 228rpx;
					height: 96rpx;
					font-size: 44rpx;
					color: rgba(255, 255, 255, 0.9);
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: YouSheBiaoTiHei;
				}

				.now {
					background-image: url('@/static/new/tip/btn.png');
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}

			.close-tip {
				width: 64rpx;
				height: 64rpx;
				display: block;
				margin: 84rpx auto 0 auto;
			}
		}
	}
</style>