提交领取积分页面切图

packages/product/public.vue

@@ -1,32 +1,41 @@
 <template>
-	<view class="cotainer">
-		<view class="showinfo">
-			<view class="content">
-				<view style="color:#BD3124">
-					恭喜您已经兑换成功
-				</view>
-				<view>关注公众号领取本单积分</view>
-				<view style="font-size: 40rpx;">999积分</view>
-				<view>10积分等于1元</view>
-				<view>
-					<u-image :src="require('@/static/share.jpg')" width="450" height="450"></u-image>
-				</view>
-				<view>
-					<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image>
-					<view>长按图片进行识别</view>
-				</view>
-				<view>
-					<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image>
-					<view>关注公众号可进行物流查询</view>
-				</view>
-				<view>
-					<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image>
-					<view>关注公众号可进行积分兑换</view>
+	<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="back">
-					返回首页
+				<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>
@@ -34,44 +43,132 @@
 <script>
 </script>
 
-<style lang="scss">
-	.showinfo {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
+<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;
-		z-index: 9999999;
+		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;
-		align-items: center;
 		justify-content: center;
-	
-		.content {
-			width: 90%;
-			height:100vh;
-			padding:40rpx 0;
-			box-sizing: border-box;
-			background: #fff;
-			overflow: scroll;
-			font-size: 32rpx;
-			font-weight: bold;
-			text-align: center;
-			>view{
-				margin-bottom:20rpx;
-			}
-			u-image{
-				display: inline-block;
-				margin-top:30rpx;
-			}
-			.back{
-				background-color: #A4ADB3;
-				color: #fff;
-				border-radius: 10rpx;
-				padding: 10rpx 30rpx;
-				margin: 20rpx auto;
-				display: inline-block;
-			}
-		}
+		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>