抽奖模块详情页样式调整

components/activity-help/activity-help.vue

@@ -1,5 +1,6 @@
 <template>
 	<view>
+		<!-- 确认助力 -->
 		<u-popup :show="activityShow" mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5" @touchmove.prevent.stop>
 			<view class="choiceShow-wrap">
 				<view style="width: 400rpx; height: 400rpx;line-height: 400rpx; text-align: center;">
@@ -8,6 +9,7 @@
 				<button @click="activityHelp()">确定助力</button>
 			</view>
 		</u-popup>
+		<!-- 助力成功 -->
 		<u-popup :show="closeShow" mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5" @touchmove.prevent.stop>
 			<view class="choiceShow-wrap">
 				<view style="width: 400rpx; height: 400rpx;line-height: 400rpx; text-align: center;">
@@ -25,14 +27,17 @@
 	export default {
 		name:"activity-help",
 		props: {
+			//显示与隐藏
 			activityShow: {
 				type: [Boolean],
 				default: false
 			},
+			//邀请码
 			inviteCode: {
 				type: [String],
 				default: {}
 			},
+			//活动id
 			marketingId: {
 				type: [String],
 				default: {}
@@ -41,31 +46,20 @@
 		},
 		data() {
 			return {
-				closeShow: false,
+				closeShow: false,//邀请助力成功隐藏
 			};
 		},
-		onShow(){
-			// this.activity()
-		},
 		methods: {
-			activity() {
-				console.log(this.marketingId);
-				console.log(this.inviteCode);
-			},
-			
 			//关闭
 			close() {
 				this.$emit('close')
 			},
-			
-			success(id) {
-				this.$emit('success', id)
-			},
-			
+			//确定助力
 			activityHelp() {
 				uni.showLoading({
 					title: '助力中'
 				});
+
 				$http.post('/api/v1/mp/user/marketing/help', {
 					inviteCode:this.inviteCode,
 					marketingId: this.marketingId

packageOperate/activity/index.vue

@@ -1,7 +1,7 @@
 <template>
-	<view style="background-image: linear-gradient(#ff7f00,#ffd600,#ff7f00); width: 100%; height: 100%;">
+	<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: ;">
+		<view class="wrap" style="background: url(../static/activity/effectsone.png) no-repeat 100% 0%;background-size: 100%;">
 			<view class="wrap-fakeNum">
 				<view class="fakeNum" >{{info.fakeNum}}人已参与</view>
 			</view>
@@ -12,7 +12,7 @@
 				</view>
 				<u-count-down :time="activityTime" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
 					<view class="wrap-date-date">
-						<text v-if="timeData.days != 0">{{timeData.days}}天</text>
+						<text>{{timeData.days}}天</text>
 						<text>{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}:</text>
 						<text>{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}:</text>
 						<text>{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
@@ -26,16 +26,26 @@
 				</view>
 				<u-count-down :time="activityTimeTwo" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
 					<view class="wrap-date-date">
-						<text v-if="timeData.days != 0">{{timeData.days}}天</text>
+						<text>{{timeData.days}}天</text>
 						<text>{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}:</text>
 						<text>{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}:</text>
 						<text>{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
 					</view>
 				</u-count-down>
 			</view>
-			<view style="height: 630rpx; width: ; background-color: #fff; margin: 15rpx 30rpx;">
-				<view>
-					<image src="../static/activity/effectstwo.png" mode=""></image>
+			<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>
+					</view>
+					<view class="effectstwo" style="">
+					</view>
 				</view>
 			</view>
 		</view>
@@ -275,6 +285,33 @@
 				font-size: 52rpx;
 			}
 		}
+		&-fixed {
+			height: 630rpx;margin: 15rpx 30rpx;
+			&-effectstwo {
+				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;
+					&-width {
+						position: absolute; width: 175rpx; height: 175rpx;margin: 0;
+						image {
+							width: 100%;height: 100%;
+						}
+					}
+					&-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; 
+					}
+					&-positionTwo {
+						width: 100%;height: 100%;text-align: center;
+						image {
+							width: 330rpx;height: 330rpx; margin-top: 70rpx;
+						}
+					}
+				}
+				.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%;
+				}
+			}
+		}
 	}
 	.data-btn {
 		float: left;

pages/activity/index.vue

@@ -8,12 +8,12 @@
 				lineColor="#E96737" :activeStyle="{
 									color: '#E96737',
 									transform: 'scale(1)',
-									width: '130rpx',
+									width: '150rpx',
 									
 								}" :inactiveStyle="{
 									color: '#999999',
 									transform: 'scale(1)',
-									width: '130rpx'
+									width: '150rpx'
 								}" itemStyle="padding-left: 11px; padding-right: 11px; height: 44px;text-align: center;  ">
 			</u-tabs>
 		</view>