抽奖活动详情页调整

packageOperate/activity/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<view style="background-image: linear-gradient(#FF8000,#FFA524,#FF8000); width: 100%; height: 100%;">
 		<u-navbar title="免费抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<view class="wrap" style="background: url(../static/activity/effectsone.png) no-repeat 100% 0%;background-size: 100%;">
+		<view class="wrap">
 			<view class="wrap-fakeNum">
-				<view class="fakeNum" >{{info.fakeNum}}人已参与</view>
+				<view class="fakeNum">{{info.fakeNum}}人已参与</view>
 			</view>
-			<view v-if="info.status && JSON.parse(info.status).value == 3" class="wrap-date" >
+			<view v-if="info.status && JSON.parse(info.status).value == 3" class="wrap-date">
 				<view class="wrap-date-on">
 					<view class="wrap-date-on-line" style="right: 30rpx;"></view>距离开奖
 					<view class="wrap-date-on-line" style="left: 30rpx;"></view>
@@ -19,7 +19,7 @@
 					</view>
 				</u-count-down>
 			</view>
-			<view v-if="info.status && JSON.parse(info.status).value == 2" class="wrap-date" >
+			<view v-if="info.status && JSON.parse(info.status).value == 2" class="wrap-date">
 				<view class="wrap-date-on">
 					<view class="wrap-date-on-line" style="right: 30rpx;"></view>距离开始
 					<view class="wrap-date-on-line" style="left: 30rpx;"></view>
@@ -33,96 +33,96 @@
 					</view>
 				</u-count-down>
 			</view>
-			<view class="wrap-fixed"  v-for="(item,index) in awardsList" :key="index">
-				<view  class="wrap-fixed-effectstwo" v-if="item.name == '一等奖'">
-					<view class="effectsthree">
-						<view class="effectsthree-width">
-							<image src="../static/activity/effectsthree.png" mode=""></image>
-						</view>
-						<view class="effectsthree-position">{{item.quantity}}个名额 </view>
-						<view class="effectsthree-positionTwo" >
-							<image :src="awardsList[0].prizeList[0].picUrl" mode="" style=""></image>
+			<view v-for="(item,index) in awardsList" :key="index">
+				<view class="wrap-fixed" v-for="(itemTwo,index) in item.prizeList" :key="index"
+					v-if="item.name == '一等奖'">
+					<view class="wrap-fixed-effectstwo">
+						<view class="effectsthree">
+							<view class="effectsthree-width">
+								<image src="../static/activity/effectsthree.png"></image>
+								<view class="effectsthree-width-name">
+									{{item.name}}
+								</view>
+							</view>
+							<view class="effectsthree-position">{{item.quantity}}个名额 </view>
+							<view class="effectsthree-positionTwo">
+								<view>
+									<image :src="itemTwo.picUrl" mode="aspectFit"></image>
+								</view>
+								<view class="textone"> {{itemTwo.title}} </view>
+								<view class="texttwo"> ￥{{itemTwo.value / 100}} </view>
+							</view>
 						</view>
-					</view>
-					<view class="effectstwo" style="">
+						<view class="effectstwo"></view>
 					</view>
 				</view>
 			</view>
-		</view>
-		
-		
+			<view>
+				<view v-for="(item,index) in awardsList" :key="index">
+					<view v-if="item.name != '一等奖'">
+						<view class="wrap-award">
+							<view class="effectsthree">
+								<view class="effectsthree-width">
+									<image src="../static/activity/effectsthree.png" mode=""></image>
+									<view class="effectsthree-width-name">
+										{{item.name}}
+									</view>
+								</view>
+								<view class="effectsthree-position">{{item.quantity}}个名额 </view>
+								<view class="effectsthree-positionTwo" v-for="(itemTwo,index) in item.prizeList"
+									:key="index">
+									<view>
+										<image :src="itemTwo.picUrl" mode="aspectFit" class="imatwo"></image>
+									</view>
+									<image src="../static/activity/effectssix.png" mode="" class="imgone"></image>
+									<view class="textone"> {{itemTwo.title}} </view>
+									<view class="texttwo"> ￥{{itemTwo.value / 100}} </view>
 
-		<view>
-			<view v-for="(item,index) in awardsList" :key="index">
-				<view v-if="item.name == '一等奖'">
-					<view style="height: 90rpx;">
-						<view style="float: left;">
-							<text
-								style="display: inline-block; background-color: #bbbbbb;width: 200rpx;height: 90rpx;line-height:90rpx;text-align: center;">{{item.name}}</text>
-						</view>
-						<view style="float: right;line-height: 90rpx;">{{item.quantity}}个名额</view>
-					</view>
-					<view v-for="(itemTwo,index) in item.prizeList" :key="index">
-						<view style="text-align: center;">
-							<image :src="itemTwo.picUrl" mode="" style="width: 400rpx;"></image>
-							<view>{{itemTwo.title}}</view>
-							<view>￥{{itemTwo.value / 100}}</view>
+								</view>
+							</view>
+							<view v-if="item.prizeList.length > 1 " class="wrap-award-explain">以上奖品随机获得一件</view>
 						</view>
 					</view>
-					<view v-if="item.prizeList.length > 1 " style="text-align: center;">以上奖品随机获得一件</view>
 				</view>
 			</view>
-			<view v-for="(item,index) in awardsList" :key="index">
-				<view v-if="item.name != '一等奖'">
-					<view style="height: 60rpx;">
-						<view style="float: left;">
-							<text
-								style="display: inline-block; background-color: #bbbbbb;width: 200rpx;height: 60rpx;line-height:60rpx;text-align: center;">{{item.name}}</text>
-						</view>
-						<view style="float: right;line-height: 60rpx;">{{item.quantity}}个名额</view>
-					</view>
-					<view v-for="(itemTwo,index) in item.prizeList" :key="index">
-						<view style="overflow: hidden; width: 100%;padding: 10rpx 20rpx;">
-							<view style="display: inline-block;">
-								<image :src="itemTwo.picUrl" mode="" style="width: 100rpx;height: 100rpx;"></image>
-							</view>
-							<view style="display: inline-block;width: 60%;margin-left: 20rpx;">
-								<view>{{itemTwo.title}}</view>
-								<view>￥{{itemTwo.value / 100}}</view>
-							</view>
 
-						</view>
+			<!-- 我的抽奖码 -->
+			<view class="wrap-description">
+				<view class="wrap-description-code"> 我的抽奖码</view>
+				<view v-if="info.codeList.length > 0" class="wrap-description-codetwo">
+					<view class="codeList">
+						<view class="codeList-bottom" v-for="(item,index) in info.codeList">{{item}}</view>
+					</view>
+				</view>
+				<view v-else class="wrap-description-codethree">
+					<view class="codethree">
+						<image src="../static/activity/off.png" mode="" class="codeimg"></image>
 					</view>
-					<view v-if="item.prizeList.length > 1 " style="text-align: center;">以上奖品随机获得一件</view>
+					<text style="line-height: 1rpx;color: #9A9FB4; font-size: 30rpx;">还没有抽奖码</text>
 				</view>
+				<view
+					style="text-align: center;line-height: 200rpx;padding-bottom: 10rpx; font-size: 28rpx; color: #666; ">
+					抽奖码越多，中奖概率越大</view>
 			</view>
-		</view>
-		<view>
-			<view style="height: 90rpx;line-height: 90rpx;">
-				<text
-					style="display: inline-block; background-color: #bbbbbb;width: 200rpx;text-align: center;">图文介绍</text>
+
+			<!-- 关注公众号 -->
+			<view class="wrap-account">
+				<image src="../static/activity/gzh.png" mode=""></image>
 			</view>
-			<view v-html="description">{{description}} </view>
-		</view>
-		<view v-if="false"> 关注公众号：获取抽奖码和开奖提醒 > </view>
 
-		<view>
-			<view>我的抽奖码</view>
-			<view style="text-align: center;margin-top: 20rpx;margin-bottom: 50rpx;">
-				<view v-if="info.codeList.length > 0">
-					<view v-for="(item,index) in info.codeList">{{item}}</view>
-				</view>
-				<view v-else>还没有抽奖码</view>
+			<!-- 图文介绍 -->
+			<view class="wrap-descriptiontwo">
+				<view v-html="description">{{description}} </view>
 			</view>
 
-			<view style="text-align: center;line-height: 90rpx;border-top: 2rpx solid #555;">抽奖码越多，中奖概率越大</view>
 		</view>
 
-		<view style="height: 200rpx;"></view>
 		<view class="footer-fixed">
 			<view class="flex btn">
-				<button v-if="info.status && JSON.parse(info.status).value == 3" type="default" @click="exChange">获取抽奖码</button>
-				<u-count-down v-else  :time="activityTimeTwo" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
+				<button v-if="info.status && JSON.parse(info.status).value == 3" type="default"
+					@click="exChange">获取抽奖码</button>
+				<u-count-down v-else :time="activityTimeTwo" format="DD:HH:mm:ss" autoStart millisecond
+					@change="onChange">
 					<button style="background-color: #555;" type="default">
 						开启倒计时：{{timeData.days}}&nbsp;天{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}&nbsp;:{{timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}&nbsp;:{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}
 					</button>
@@ -130,21 +130,15 @@
 			</view>
 		</view>
 
-
 		<u-popup :show="popupShow" mode="bottom" @close="close" closeable>
-			<view
-				style="height: 98rpx;width: 100%; border-bottom: 2rpx solid #bbbbbb;text-align: center;line-height: 98rpx;">
-				获取抽奖码</view>
-			<view style="padding: 30rpx 20rpx;">
-				<view style="color: #101010; line-height: 50rpx;">邀请好友助力，获取抽奖码</view>
-				<text style="color: #8c8c8c; font-size: 24rpx;">每邀请一位好友助力成功，即可获得1个抽奖码，没有上限</text>
+			<view class="popupcode">获取抽奖码</view>
+			<view class="popupcodetwo">
+				<view class="popupcodetwo-view">邀请好友助力，获取抽奖码</view>
+				<text class="popupcodetwo-text">每邀请一位好友助力成功，即可获得1个抽奖码，没有上限</text>
 			</view>
-			<view style="padding: 0rpx 20rpx 50rpx ; ">
-				<button type="default" style="background-color: #f7682b; color: #fff;"
-					open-type="share">立即邀请好友助力</button>
+			<view class="popupcodethree" style="">
+				<button type="default" class="popupcodethree-default" open-type="share">立即邀请好友助力</button>
 			</view>
-
-
 		</u-popup>
 	</view>
 </template>
@@ -185,7 +179,8 @@
 						let awardsList = res.data.awardsList
 						awardsList.forEach(item => {
 							item.prizeList.forEach(itemTwo => {
-								itemTwo.picUrl = (env.filePublic + itemTwo.picUrl.split(',')[0] + '?imageView2/2/w/750')
+								itemTwo.picUrl = (env.filePublic + itemTwo.picUrl.split(',')[0] +
+									'?imageView2/2/w/750')
 							})
 						})
 						this.awardsList = awardsList
@@ -266,53 +261,352 @@
 </script>
 
 <style lang="scss" scoped>
-	.wrap{
+	.popupcode {
+		height: 98rpx;
+		width: 100%;
+		background-color: #F8832C;
+		text-align: center;
+		line-height: 98rpx;
+		color: #fff;
+		font-size: 32rpx;
+	}
+
+	.popupcodetwo {
+		padding: 30rpx 20rpx;
+
+		&-view {
+			color: #101010;
+			line-height: 50rpx;
+			font-size: 30rpx;
+		}
+
+		&-text {
+			color: #8c8c8c;
+			font-size: 26rpx;
+		}
+	}
+
+	.popupcodethree {
+		padding: 0rpx 20rpx 50rpx;
+
+		&-default {
+			background-color: #FCE9DB;
+			color: #fff;
+			border: 2rpx solid #F8832C;
+			color: #F9832C;
+			border-radius: 22rpx;
+		}
+	}
+
+	.wrap {
+		// 设置ios刘海屏底部横线安全区域
+		// padding-bottom: constant(safe-area-inset-bottom);
+		// padding-bottom: env(safe-area-inset-bottom);
+		padding-bottom: 200rpx;
+
+		background: url(../static/activity/effectsone.png) no-repeat 100% 0%;
+		background-size: 100%;
+
 		&-fakeNum {
 			margin-top: 46rpx;
-			.fakeNum{
-				line-height: 66rpx; text-align: center; width: 266rpx; height: 76rpx; background: url(../static/activity/rectangle.png) no-repeat center center; background-size: 266rpx 76rpx;  margin: 0 auto; color: #A13D01; font-size: 30rpx;
+
+			.fakeNum {
+				line-height: 66rpx;
+				text-align: center;
+				width: 266rpx;
+				height: 76rpx;
+				background: url(../static/activity/rectangle.png) no-repeat center center;
+				background-size: 266rpx 76rpx;
+				margin: 0 auto;
+				color: #A13D01;
+				font-size: 30rpx;
 			}
 		}
+
 		&-date {
-			text-align: center;width: 100%;font-family: YouSheBiaoTiHei;color: #FFFFFF;
+			text-align: center;
+			width: 100%;
+			font-family: YouSheBiaoTiHei;
+			color: #FFFFFF;
+
 			&-on {
-				display: inline-block;font-size: 76rpx;line-height: 68rpx;
+				display: inline-block;
+				font-size: 76rpx;
+				line-height: 68rpx;
+
 				&-line {
-					display: inline-block; width: 68rpx; height: 2rpx; overflow: hidden;background-color: #fff; position: relative; bottom: 25rpx;
+					display: inline-block;
+					width: 68rpx;
+					height: 2rpx;
+					overflow: hidden;
+					background-color: #fff;
+					position: relative;
+					bottom: 25rpx;
 				}
 			}
+
 			&-date {
 				font-size: 52rpx;
 			}
 		}
+
 		&-fixed {
-			height: 630rpx;margin: 15rpx 30rpx;
+			height: 630rpx;
+			margin: 30rpx 30rpx;
+
 			&-effectstwo {
-				border-radius: 20rpx;width: 100%; height: 100%; background: url(../static/activity/effectstwo.png) no-repeat center center;
+				border-radius: 20rpx;
+				width: 100%;
+				height: 100%;
+				background: url(../static/activity/effectstwo.png) no-repeat center center;
+
 				.effectsthree {
-					position: relative; height: 400rpx; width:100%; z-index: 10;
+					position: relative;
+					height: 400rpx;
+					width: 100%;
+					z-index: 10;
+
 					&-width {
-						position: absolute; width: 175rpx; height: 175rpx;margin: 0;
+						position: absolute;
+						width: 175rpx;
+						height: 175rpx;
+						margin: 0;
+
 						image {
-							width: 100%;height: 100%;
+							width: 100%;
+							height: 100%;
+						}
+
+						&-name {
+							position: relative;
+							left: 10rpx;
+							top: -160rpx;
+							transform: rotateZ(-45deg);
+							color: #fff;
+							font-size: 26rpx;
 						}
 					}
+
 					&-position {
-						position: absolute;width: 180rpx; height: 62rpx; background-image: linear-gradient( to right ,#FAE08A, #FFC45A);border-radius: 17rpx; line-height: 62rpx; text-align: center;color: #A13D01; font-size: 30rpx;top: 20rpx; right: 20rpx; 
+						position: absolute;
+						width: 180rpx;
+						height: 62rpx;
+						background-image: linear-gradient(to right, #FAE08A, #FFC45A);
+						border-radius: 17rpx;
+						line-height: 62rpx;
+						text-align: center;
+						color: #A13D01;
+						font-size: 30rpx;
+						top: 20rpx;
+						right: 20rpx;
 					}
+
 					&-positionTwo {
-						width: 100%;height: 100%;text-align: center;
+						width: 100%;
+						height: 100%;
+						text-align: center;
+
 						image {
-							width: 330rpx;height: 330rpx; margin-top: 70rpx;
+							width: 350rpx;
+							height: 350rpx;
+							margin-top: 70rpx;
+						}
+
+						.textone {
+							margin-top: 80rpx;
+							color: #333333;
+							font-size: 30rpx;
+							line-height: 40rpx;
+						}
+
+						.texttwo {
+							color: #FE2616;
+							font-size: 28rpx;
+							line-height: 34rpx;
 						}
 					}
 				}
+
 				.effectstwo {
-					position: relative; bottom: 110rpx; margin-left: 17.5%;  width: 65%; height: 65%; background: url(../static/activity/effectssix.png) no-repeat 100% center;background-size: 100%;
+					position: relative;
+					bottom: 120rpx;
+					margin-left: 17.5%;
+					width: 65%;
+					height: 65%;
+					background: url(../static/activity/effectssix.png) no-repeat 100% center;
+					background-size: 100%;
 				}
 			}
 		}
+
+		&-award {
+			padding-bottom: 50rpx;
+			// height: 2230rpx;
+			border-radius: 18rpx;
+			margin: 30rpx 30rpx;
+			background-color: #fff;
+
+			.effectsthree {
+				position: relative;
+				// height: 400rpx;
+				// width: 100%;
+				// z-index: 10;
+
+				&-width {
+					position: absolute;
+					width: 175rpx;
+					height: 175rpx;
+					margin: 0;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+
+					&-name {
+						position: relative;
+						left: 10rpx;
+						top: -160rpx;
+						transform: rotateZ(-45deg);
+						color: #fff;
+						font-size: 26rpx;
+					}
+				}
+
+				&-position {
+					position: absolute;
+					z-index: 11;
+					width: 180rpx;
+					height: 62rpx;
+					background-image: linear-gradient(to right, #FAE08A, #FFC45A);
+					border-radius: 17rpx;
+					line-height: 62rpx;
+					text-align: center;
+					color: #A13D01;
+					font-size: 30rpx;
+					top: 20rpx;
+					right: 20rpx;
+				}
+
+				&-positionTwo {
+					width: 100%;
+					height: 600rpx;
+					text-align: center;
+
+					.imatwo {
+						position: relative;
+						width: 350rpx;
+						height: 350rpx;
+						margin-top: 70rpx;
+						z-index: 10;
+					}
+
+					.textone {
+						position: relative;
+						bottom: 200rpx;
+						z-index: 10;
+						color: #333333;
+						font-size: 30rpx;
+						line-height: 40rpx;
+					}
+
+					.texttwo {
+
+						position: relative;
+						bottom: 195rpx;
+						z-index: 10;
+						color: #FE2616;
+						font-size: 28rpx;
+						line-height: 34rpx;
+					}
+
+					.imgone {
+						width: 449rpx;
+						height: 280rpx;
+						position: relative;
+						bottom: 80rpx;
+						margin-left: 0%;
+						z-index: 0;
+						// width: 45%;
+						// height: 45%;
+					}
+				}
+			}
+
+			&-explain {
+				margin-top: 30rpx;
+				text-align: center;
+				color: #999999;
+				font-size: 30rpx;
+			}
+		}
+
+		&-description {
+			min-height: 200rpx;
+			background-color: #fff;
+			margin: 30rpx 30rpx;
+			border-radius: 18rpx;
+
+			&-code {
+				font-size: 30rpx;
+				color: #333;
+				padding: 36rpx 24rpx;
+			}
+
+			&-codetwo {
+				text-align: center;
+				margin-top: 20rpx;
+				margin-bottom: 50rpx;
+
+				.codeList {
+					text-align: center;
+					margin-bottom: 40rpx;
+
+					&-bottom {
+						margin: 0 auto;
+						width: 526rpx;
+						height: 94rpx;
+						background-color: #F8832C;
+						color: #fff;
+						border-radius: 12rpx;
+						font-size: 38rpx;
+						line-height: 94rpx;
+
+					}
+				}
+			}
+
+			&-codethree {
+				text-align: center;
+
+				.codethree {
+					margin-left: 80rpx;
+
+					.codeimg {
+						width: 200rpx;
+						height: 200rpx;
+					}
+				}
+			}
+		}
+
+		&-descriptiontwo {
+			margin: 30rpx;
+			border-radius: 18rpx;
+			overflow: hidden;
+			background-color: #fff;
+		}
+
+		&-account {
+			margin: 15rpx 15rpx 0 15rpx;
+
+			image {
+				width: 100%;
+				height: 152rpx;
+			}
+		}
 	}
+
 	.data-btn {
 		float: left;
 
@@ -341,16 +635,12 @@
 				width: 640rpx;
 				height: 90rpx;
 				line-height: 90rpx;
-				font-size: 36rpx;
+				font-size: 34rpx;
 				color: #fff;
-				background-color: $uni-bg-color;
+				background-color: #FF6000;
 				border: none;
-				border-radius: 20rpx;
+				border-radius: 48rpx;
 			}
 		}
-
-		// 设置ios刘海屏底部横线安全区域
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
 	}
 </style>