jewelry-front/components/couponPopup/couponPopup.vue

<!-- 优惠券弹窗 -->
<template>
	<view class="couponPopup">
		<uv-overlay :show="show" :z-index="999999">
			<view class="couponPopup-wrapper">
				<view class="main-container">
					<view class="body">
						<image src="@/pages_order/static/coupon/bg.png" mode="widthFix" class="coupon-bg"></image>
						<image @click="closeCouponPopup" src="@/pages_order/static/coupon/close-btn.png" mode="widthFix"
							class="close-btn">
						</image>
						<view class="coupon-money">
							<text class="unit">￥</text>
							<view class="money">
								20
							</view>
						</view>
						<image src="@/pages_order/static/coupon/register-success.png" mode="widthFix"
							class="register-success"></image>
						<view class="shopping">（购物即可抵扣！）</view>
					</view>
					<image src="@/pages_order/static/coupon/examine.png" mode="widthFix" class="examine"></image>
				</view>
			</view>
		</uv-overlay>
	</view>
</template>

<script>
	export default {
		name: "CouponPopup",
		data() {
			return {}
		},
		methods: {
			//关闭新人优惠券活动
			closeCouponPopup() {
				this.show = false;
			}
		},
		computed: {
			show: {
				get() {
					return this.value;
				},
				set(newValue) {
					this.$emit('input', newValue);
				}
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.couponPopup {
		.couponPopup-wrapper {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;

			.main-container {
				.body {
					position: relative;

					.coupon-bg {}

					.close-btn {
						position: absolute;
						right: 0;
						top: 0;
						width: 50rpx;
						height: 50rpx;
					}

					.coupon-money {
						display: flex;
						justify-content: center;
						align-items: flex-end;
						position: absolute;
						left: 50%;
						top: 34%;
						width: 40%;
						color: #FF6733;
						transform: translateX(-30%);
						font-weight: bold;

						.unit {
							font-size: 40rpx;
						}

						.money {
							font-size: 120rpx;
							line-height: 120rpx;
						}
					}

					.register-success {
						position: absolute;
						top: 7%;
						left: 50%;
						transform: translateX(-50%);
						width: 80%;
					}

					.shopping {
						position: absolute;
						bottom: 5%;
						left: 50%;
						transform: translateX(-50%);
						color: #FEF3DD;
						text-align: center;
						font-size: 40rpx;
						width: 80%;
					}
				}

				.examine {
					display: block;
					width: 70%;
					margin: 20rpx auto;
				}
			}
		}
	}
</style>