调整

src/views/startLottery-zkx.vue

@@ -50,7 +50,7 @@
 					<div class="leftRegion leftRegionB">
 						<div style="text-align:center;margin-bottom:30px">中奖名单</div>
 						<div style="width:100%;margin-top: 24px;">
-							<span >一等奖：1人</span>
+							<span>一等奖：1人</span>
 							<el-divider></el-divider>
 							<div style="margin-bottom:30px;">
 								<div class="imgText">
@@ -67,8 +67,8 @@
 
 						</div>
 
-						<div style="width:100%;margin-top: 24px;">
-							<span >一等奖：1人</span>
+						<div style="width:100%;margin-top: 24px;">
+							<span>一等奖：1人</span>
 							<el-divider></el-divider>
 							<div style="margin-bottom:30px;">
 								<div class="imgText">
@@ -85,69 +85,69 @@
 
 						</div>
 
-						<div style="width:100%;margin-top: 24px;">
-							<span >一等奖：1人</span>
+						<div style="width:100%;margin-top: 24px;">
+							<span>一等奖：1人</span>
 							<el-divider></el-divider>
 							<div style="margin-bottom:30px;">
 								<div class="imgText">
 									<el-image style="width: 80px; height: 80px"
 										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
 									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
 								</div>
 								<div class="imgText">
 									<el-image style="width: 80px; height: 80px"
@@ -162,6 +162,26 @@
 				</el-main>
 			</el-container>
 		</el-container>
+		<div v-show="submitting" class=" lotteryRegion" :class="{
+			lotteryResultsNum:lotteryResultsNum,
+			lotteryProcess: !lotteryResultsNum
+		}">
+			<div class="l-title">中奖结果</div>
+			<div class="l-title2">中奖结果</div>
+
+			<div class="l-results">
+				<div class="l-imgText" v-for="(item,i) in  lotteryResultsNum?20:1" :key="i">
+					<el-image class="l-imgText-img"
+						src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+					<div class="l-imgText-t" style="">135****8888</div>
+				</div>
+			</div>
+
+			<div class="l-button-group">
+				<el-button>重新开始</el-button>
+			</div>
+		</div>
+
 	</div>
 </template>
 
@@ -171,7 +191,10 @@
 	export default {
 		data() {
 			return {
-				submitting: false,
+				submitting: true,
+
+				lotteryResultsNum: true, //抽奖人数 多 or 少
+
 				formModel: {},
 				activityList: [],
 				awardInfoList: [],
@@ -213,7 +236,85 @@
 		}
 	}
 </script>
-<style>
+<style lang="scss">
+	/* lotteryRegion */
+	.lotteryRegion {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: 800px;
+		height: 720px;
+
+		border-radius: 10px;
+		background-color: rgba(0, 0, 0, 0.75);
+		text-align: center;
+		box-shadow: 0px 0px 6px 10px rgba(0, 0, 0, 0.15);
+		border: 3px solid rgba(255, 255, 255, 1);
+		padding: 40px;
+	}
+
+	.l-title {
+		font-size: 36px;
+	}
+
+	.l-title2 {
+		font-size: 24px;
+
+	}
+
+	.l-results {
+		margin-top: 72px;
+
+	}
+
+	.l-imgText {
+		//margin: 0 32px 32px 0 ;
+	}
+
+	//大图
+	.lotteryProcess {
+		.l-imgText-img {
+			width: 240px;
+			height: 240px
+		}
+
+		.l-imgText-t {
+			font-size: 28px;
+			margin-top: 20px;
+		}
+	}
+
+	//小图
+	.lotteryResultsNum {
+		.l-results {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			height: 400px;
+			overflow: hidden;
+			overflow-y: auto;
+		}
+
+		.l-imgText-img {
+			width: 100px;
+			height: 100px;
+		}
+
+		.l-imgText-t {
+			font-size: 18px;
+		}
+
+		.l-imgText {
+			margin: 0 24px 24px 0;
+		}
+	}
+
+	.l-button-group {
+		margin-top: 70px;
+	}
+
 	/* zkx */
 	.bgDiv {
 		background-image: url('../../public/bg2.jpg');
@@ -242,9 +343,9 @@
 	.leftRegionB {
 		margin: 40px 40px 40px 0;
 		display: flex;
-		flex-direction: column;
-		    overflow: hidden;
-		    overflow-y: auto;
+		flex-direction: column;
+		overflow: hidden;
+		overflow-y: auto;
 	}
 
 	.el-main {