book-hi/pages-sell/components/packet-dialog/index.vue

<template>
	<view class="custom-popup" v-if="visible" @touchmove.stop.prevent>
		<view class="popup-mask"></view>
		<view class="packet-dialog-container">
			<view class="dialog-body">
				<image src="/pages-sell/static/search/packet-dialog.png" class="dialog-bg" mode="widthFix"></image>
				<view class="content-overlay">
					<text class="dialog-title">惊喜红包!</text>
					<view class="amount-wrapper">
						<text class="amount-num">15</text>
						<text class="amount-unit">元</text>
					</view>
					<view class="condition-box">
						<text>满0.01可用 24小时有效</text>
					</view>
					<view class="btn-accept" @click="close">
						<text>开心收下</text>
					</view>
				</view>
			</view>
			<view class="close-area" @click="close">
				<view class="close-icon-custom">×</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'PacketDialog',
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			visible: false
		}
	},
	watch: {
		value: {
			handler(val) {
				this.visible = val;
			},
			immediate: true
		},
		visible(val) {
			this.$emit('input', val);
		}
	},
	methods: {
		close() {
			this.visible = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;

	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0.7;
	}
}

.packet-dialog-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1000;
	
	.dialog-body {
		position: relative;
		width: 640rpx;
		// height is determined by image aspect ratio
		
		.dialog-bg {
			width: 100%;
			display: block;
		}
		
		.content-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 120rpx;
			padding-left: 50rpx;
			
			.dialog-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #B31700;
				margin-bottom: 20rpx;
				padding-top: 50rpx;
			}
			
			.amount-wrapper {
				display: flex;
				align-items: baseline;
				justify-content: center;
				margin-bottom: 20rpx;
				
				.amount-num {
					font-family: Arial;
					font-weight: bold;
					font-size: 80rpx;
					color: #B31700;
					background: linear-gradient(214deg, rgba(179,23,0,0.69) 0%, rgba(255,132,0,0.69) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				
				.amount-unit {
					color: #B31700;
					font-size: 38rpx;
					font-weight: bold;
					margin-left: 4rpx;
				}
			}
			
			.condition-box {
				padding: 4rpx 20rpx;
				border-radius: 8rpx;
				
				text {
					font-size: 24rpx;
					color: #B31700;
				}
			}
			
			.btn-accept {
				width: 300rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #FFF5D6 0%, #FFDFA8 100%);
				border-radius: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 10rpx rgba(179, 23, 0, 0.3);
				margin-top: 20rpx; // Adjust positioning
				
				text {
					color: #B31700;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
	
	.close-area {
		position: absolute;
		top: 0rpx;
		right: 0;
		
		.close-icon-custom {
			width: 60rpx;
			height: 60rpx;
			border: 2rpx solid #fff;
			border-radius: 50%;
			color: #fff;
			font-size: 50rpx;
			line-height: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 6rpx; // Visual adjustment for 'x'
		}
	}
}
</style>