xietaitai-shop-wx/packages/product/public.vue

<template>
	<view class="changecontainer">
		<view class="exchangebox">
			<view class="exchange-top">
				<image src="../../static/exchangeword.png" mode="widthFix"></image>
			</view>
			<view class="exchange-content">
				<view class="exchange-tit">
					<image src="../../static/icon-xie.png" mode="widthFix"></image>
					<view class="exchange-ftit">
						<text>添加客服</text>
						<text>领取2024版大闸蟹食用指南</text>
					</view>
				</view>
				<view class="exchange-brief">
					<view class="qrCodebox">
						<view class="codeimg">
							<image src="../../static/ewmimg.jpg" mode="widthFix"></image>
						</view>
					</view>
					<text class="taphold">长按扫码即可关注</text>
					<view class="exchange-bottom">
						<text class="whattext">客服能做什么？</text>
						<view class="exchangelist">
							<view class="textitem">
								<image src="../../static/icon-exchange1.png" mode="widthFix"></image>
								<text>物流查询</text>
							</view>
							<view class="textitem">
								<image src="../../static/icon-exchange2.png" mode="widthFix"></image>
								<text>积分兑换</text>
							</view>
						</view>
					</view>
					<view class="returnhome">返回首页</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
</script>

<style type="text/css" scoped>
	.changecontainer{
		width: 100%;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
		padding-top: 142rpx;
		padding-bottom: 270rpx;
	}
	.exchangebox{
		width: 87.33%;
		margin: 0 auto;
	}
	.exchange-top{
		text-align: center;
		margin-bottom: 28rpx;
	}
	.exchange-top image{
		width: 438rpx;
		height: auto;
	}
	.exchange-content{
		background: url(../../static/bg-exchange.png) no-repeat center top #fff;
		background-size: 100% auto;
		border-radius: 30rpx;
		overflow: hidden;
	}
	.exchange-content .exchange-tit{
		display: flex;
		justify-content: center;
		padding-top: 46rpx;
		padding-bottom: 46rpx;
	}
	.exchange-tit image{
		width: 68rpx;
		height: auto;
	}
	.exchange-tit .exchange-ftit{
		padding-left: 22rpx;
	}
	.exchange-ftit text{
		display: block;
		font-size: 24rpx;
		line-height: 38rpx;
		font-weight: bold;
		color: #000;
	}
	.exchange-brief{
		border-radius: 30rpx 30rpx 0 0;
		background: #fff;
		padding-top: 45rpx;
		padding-bottom: 45rpx;
	}
	.qrCodebox{
		width: 380rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 18rpx;
		box-sizing: border-box;
		background: #ededed;
		text-align: center;
		margin-bottom:20rpx;
	}
	.codeimg{
		width: 345rpx;
		height: 345rpx;
		margin: 0 auto;
		background: url(../../static/ewmbg.png) center center no-repeat;
		background-size: cover;
		padding: 12rpx;
	}
	.codeimg image{
		width: 320rpx;
		height: auto;
		border-radius: 20rpx;
	}
	.taphold{
		display: block;
		text-align: center;
		font-size: 24rpx;
		color: #000;
	}
	.exchange-bottom{
		margin-top: 86rpx;
	}
	.whattext{
		display: block;
		text-align: center;
		font-size: 24rpx;
		color:#000;
		font-weight: bold;
	}
	.exchangelist{
		display: flex;
		justify-content: center;
		margin-top: 44rpx;
		margin-bottom: 75rpx;
	}
	.textitem{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 58rpx 5rpx;
	}
	.textitem:first-child{
		border-right: 1rpx solid #f6d9b6;
	}
	.textitem image{
		width: 56rpx;
		height: auto;
		margin-bottom: 16rpx;
	}
	.textitem text{
		font-size: 24rpx;
		color: #323232;
	}
	.returnhome{
		width: 450rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		font-size: 29rpx;
		margin: 0 auto;
		border-radius: 74rpx;
		background: #ba8b45;
	}
</style>