助力邀请弹框样式

components/activity-help/activity-help.vue

@@ -1,40 +1,40 @@
 <template>
 	<view>
 		<!-- 确认助力 -->
-		<u-popup :show="activityShow"  mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5"
+		<u-popup :show="activityShow" mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5"
 			@touchmove.prevent.stop>
-			<view class="activityShow" style="text-align: center;width: 600rpx; ">
-				<view style="position: relative;">
-					<image src="../../static/logo.png" mode="" style="position: absolute;top: -75rpx; left: 235rpx; height: 134rpx;width: 134rpx;border-radius: 100%;background-color: #FDFDFC;"></image>
+			<view class="activityShow">
+				<view class="activityShow-one">
+					<image src="../../static/logo.png" mode="" class="activityShow-one-img"></image>
 				</view>
-				<view class="" style="position: relative; margin-top: 25rpx;">
-					<image src="../../static/activity/anniu.png" mode="" style="width: 198rpx;height: 48rpx;"></image>
-					<text class="ells-one" style="width: 170rpx; position: absolute;left: 220rpx;top: 6rpx;font-size: 28rpx; color: #FDFDFC;font-weight: bold; text-align: center;">张三</text>
+				<view class="activityShow-two">
+					<image src="../../static/activity/anniu.png" mode="" class="activityShow-two-img"></image>
+					<text class="activityShow-two-text ells-one">张三</text>
 				</view>
-				<view style="font-size: 36rpx;font-weight: bold;color: #333;">邀请您一起免费抽奖</view>
-				<image src="../../static/activity/tupian.png" mode="" style="width: 410rpx;height: 362rpx;"></image>
-				<view style="color: #FF8B0A;font-size: 73rpx;font-family: YouSheBiaoTiHei;font-weight: 400;">一起免费抽奖</view>
-				<view style="color: #F78B3C;font-size: 26rpx;line-height: 60rpx;">收下好意可以帮助好友完成抽奖助力</view>
-				<view class="activityShow-wrap" style="position: relative;" @click="activityHelp()">
-					<image src="../../static/activity/yuanjiao.png" mode="" style="width: 340rpx;height: 88rpx;margin-top: 20rpx;margin-bottom: 40rpx;"></image>
-					<view style="font-size: 34rpx; color: #FDFBFB; position: absolute; top: 40rpx;left: 235rpx;">收下好意</view>
+				<view class="activityShow-three">邀请您一起免费抽奖</view>
+				<image class="activityShow-four" src="../../static/activity/tupian.png" mode=""></image>
+				<view class="activityShow-five">一起免费抽奖</view>
+				<view class="activityShow-six">收下好意可以帮助好友完成抽奖助力</view>
+				<view class="activityShow-seven" @click="activityHelp()">
+					<image src="../../static/activity/yuanjiao.png" mode="" class="activityShow-seven-img"></image>
+					<view class="activityShow-seven-view">收下好意</view>
 				</view>
 			</view>
 		</u-popup>
 		<!-- 助力成功 -->
-		<u-popup :show="closeShow" mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5" @touchmove.prevent.stop>
-		<!-- <u-popup :show="true" mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5" @touchmove.prevent.stop> -->
-			<view class="closeShow" style="text-align: center;width: 600rpx;height: 700rpx; ">
-				<view style="position: relative;">
-					<!-- <image src="../../static/activity/beijing.png" mode="" style="position: absolute;top: 0;left: 0;"></image> -->
-					<!-- <image src="../../static/activity/beijingtwo.png" mode=""></image> -->
+		<u-popup :show="closeShow" mode="center" round="17" @close="close" :closeable="true" overlayOpacity="0.5"
+			@touchmove.prevent.stop>
+			<view class="closeShow">
+				<view class="closeShow-one">
+					<image class="closeShow-one-imgone" src="../../static/activity/beijing.png" mode=""></image>
+					<image class="closeShow-one-imgtwo" src="../../static/activity/beijingtwo.png" mode=""></image>
+					<view class="closeShow-one-view">助力成功!</view>
 				</view>
-				<view class="closeShow-wrap" style="position: relative;" @click="close()">
-					<image src="../../static/activity/yuanjiao.png" mode="" style="width: 340rpx;height: 88rpx;margin-top: 20rpx;margin-bottom: 40rpx;"></image>
-					<view style="font-size: 34rpx; color: #FDFBFB; position: absolute; top: 40rpx;left: 255rpx;">确定</view>
+				<view class="closeShow-two" @click="close()">
+					<image class="closeShow-two-img" src="../../static/activity/yuanjiao.png" mode=""></image>
+					<view class="closeShow-two-view">确定</view>
 				</view>
 			</view>
-
 		</u-popup>
 	</view>
 </template>
@@ -95,5 +95,135 @@
 </script>
 
 <style lang="scss" scoped>
+	.activityShow {
+		text-align: center;
+		width: 600rpx;
+
+		&-one {
+			position: relative;
+
+			&-img {
+				position: absolute;
+				top: -75rpx;
+				left: 235rpx;
+				height: 134rpx;
+				width: 134rpx;
+				border-radius: 100%;
+				background-color: #FDFDFC;
+			}
+		}
+
+		&-two {
+			position: relative;
+			margin-top: 25rpx;
+
+			&-img {
+				width: 198rpx;
+				height: 48rpx;
+			}
+
+			&-text {
+				width: 170rpx;
+				position: absolute;
+				left: 220rpx;
+				top: 6rpx;
+				font-size: 28rpx;
+				color: #FDFDFC;
+				font-weight: bold;
+				text-align: center;
+			}
+		}
+
+		&-three {
+			font-size: 36rpx;
+			font-weight: bold;
+			color: #333;
+		}
+
+		&-four {
+			width: 410rpx;
+			height: 362rpx;
+		}
+
+		&-five {
+			color: #FF8B0A;
+			font-size: 73rpx;
+			font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+		}
+
+		&-six {
+			color: #F78B3C;
+			font-size: 26rpx;
+			line-height: 60rpx;
+		}
+
+		&-seven {
+			position: relative;
+
+			&-img {
+				width: 340rpx;
+				height: 88rpx;
+				margin-top: 20rpx;
+				margin-bottom: 40rpx;
+			}
+
+			&-view {
+				font-size: 34rpx;
+				color: #FDFBFB;
+				position: absolute;
+				top: 40rpx;
+				left: 235rpx;
+			}
+		}
+	}
+
+	.closeShow {
+		text-align: center;
+		width: 600rpx;
+		height: 700rpx;
+
+		&-one {
+			&-imgone {
+				width: 600rpx;
+				height: 500rpx;
+			}
+
+			&-imgtwo {
+				position: absolute;
+				left: -42rpx;
+				top: 235rpx;
+				height: 160rpx;
+				width: 690rpx;
+			}
+
+			&-view {
+				font-size: 122rpx;
+				font-family: YouSheBiaoTiHei;
+				position: absolute;
+				top: 235rpx;
+				left: 55rpx;
+				color: #fff;
+			}
+		}
+
+		&-two {
+			position: relative;
 
+			&-img {
+				width: 340rpx;
+				height: 88rpx;
+				margin-top: 40rpx;
+				margin-bottom: 40rpx;
+			}
+
+			&-view {
+				font-size: 34rpx;
+				color: #FDFBFB;
+				position: absolute;
+				top: 60rpx;
+				left: 255rpx;
+			}
+		}
+	}
 </style>