zdtap-uniapp-main/pagesMy/addAiad.vue

<template>
	<view class="addAiad">
		<view class="header">
			<view class="title">关注企业微信</view>
			<view class="subtitle">获取更多专属权益</view>
		</view>
		
		<view class="content">
			<view class="qrcode-box">
				<image :src="qrcode" mode="aspectFit" class="qrcode" show-menu-by-longpress></image>
				<view class="tips">长按识别二维码</view>
			</view>
			
			<view class="benefits">
				<view class="benefit-item">
					<image src="/static/medal-star.svg" class="benefit-icon"></image>
					<view class="info">
						<view class="title">专属优惠</view>
						<view class="desc">第一时间获取优惠信息</view>
					</view>
				</view>
				
				<view class="benefit-item">
					<text class="cuIcon-service text-xl"></text>
					<view class="info">
						<view class="title">专属客服</view>
						<view class="desc">一对一贴心服务</view>
					</view>
				</view>
				
				<view class="benefit-item">
					<text class="cuIcon-activity text-xl"></text>
					<view class="info">
						<view class="title">活动优先</view>
						<view class="desc">优先参与品牌活动</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode: '/static/contact_me_qr.png'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addAiad {
		min-height: 100vh;
		background: #F7F7F7;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		
		.header {
			text-align: center;
			margin-bottom: 48rpx;
			padding: 32rpx 0;
			
			.title {
				font-family: Source Han Sans;
				font-size: 40rpx;
				color: #0B0E26;
				font-weight: 600;
				margin-bottom: 16rpx;
				letter-spacing: 1rpx;
			}
			
			.subtitle {
				font-size: 28rpx;
				color: #606060;
				letter-spacing: 0.5rpx;
			}
		}
		
		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.qrcode-box {
				background: #FFFFFF;
				padding: 48rpx;
				border-radius: 24rpx;
				box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.08);
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 48rpx;
				position: relative;
				overflow: hidden;
				
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 4rpx;
					background: linear-gradient(90deg, #19367A, #D42E78);
				}
				
				.qrcode {
					width: 400rpx;
					height: 400rpx;
					margin-bottom: 24rpx;
					border-radius: 16rpx;
					box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.05);
				}
				
				.tips {
					font-size: 24rpx;
					color: #979797;
					letter-spacing: 0.5rpx;
				}
			}
			
			.benefits {
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 32rpx;
				box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.08);
				
				.benefit-item {
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #F5F5F5;
					transition: all 0.3s ease;
					
					&:last-child {
						border-bottom: none;
					}
					
					&:active {
						transform: scale(0.98);
					}
					
					.benefit-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 24rpx;
						color: #19367A;
						opacity: 0.9;
					}
					
					.cuIcon-gift,
					.cuIcon-service,
					.cuIcon-activity {
						color: #19367A;
						margin-right: 24rpx;
						font-size: 40rpx;
						opacity: 0.9;
					}
					
					.info {
						flex: 1;
						
						.title {
							font-size: 28rpx;
							color: #0B0E26;
							font-weight: 500;
							margin-bottom: 8rpx;
							letter-spacing: 0.5rpx;
						}
						
						.desc {
							font-size: 24rpx;
							color: #606060;
							line-height: 1.5;
							letter-spacing: 0.5rpx;
						}
					}
				}
			}
		}
	}
</style>