feat: + UI OK

src/admin.html

@@ -10,6 +10,10 @@
 			body {
 				width: 100%;
 				height: 100%;
+				background: #bc1e22;
+				color: #fefefe;
+				box-sizing: border-box;
+				overflow: hidden;
 			}
 			#admin {
 				width: 100%;
@@ -32,7 +36,20 @@
 				width: 100%;
 				align-items: center;
 			}
-    </style>
+			input {
+				padding: 10px;
+				border: none;
+				border-radius: 5px;
+				outline: none;
+			}
+			button {
+				border: 1px solid rgba(254, 254, 254, 0.7);
+				color: #fefefe;
+				background-color: #bc1e22;
+				padding: 20px;
+				outline: none;
+			}
+		</style>
 		<script src="./info.js"></script>
 	</head>
 	<body>
@@ -56,22 +73,37 @@
 					<div><button style="margin-left: 50px" onclick="submit()">打开抽奖页面</button></div>
 					<div><button style="margin-left: 50px" onclick="window.open('./list.html')">打开中奖人员名单</button></div>
 					<div><button style="margin-left: 50px" onclick="window.open('./data.html')">百万次人均中奖次数展示</button></div>
-					<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=10&title=一等奖&info=奖品：macpro一部')">一等奖</button></div>
-					<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=20&title=二等奖&info=奖品：mac air一部')">二等奖</button></div>
-					<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=30&title=三等奖&info=奖品：iphone 12一部')">三等奖</button></div>
+					<div><button style="margin-left: 50px" onclick="submit(1)">一等奖</button></div>
+					<div><button style="margin-left: 50px" onclick="submit(2)">二等奖</button></div>
+					<div><button style="margin-left: 50px" onclick="submit(3)">三等奖</button></div>
 				</div>
 			</div>
 		</div>
 		<script>
-			function submit() {
-        let num = document.getElementById('num').value;
+			function submit(index) {
+				let num = document.getElementById('num').value;
 				let title = document.getElementById('title').value.trim();
 				let info = document.getElementById('info').value;
         let winPerson = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {};
+        if(index === 1) title = '一等奖'
+        if(index === 2) title = '二等奖'
+        if(index === 3) title = '三等奖'
 				if (winPerson[title]) {
 					let status = window.confirm('该标题已存在，跳转至抽奖结果页面');
 					status && window.open('./list.html');
 				} else {
+          if(index === 1) {
+            window.open('./lottery.html?num=10&title=一等奖&info=奖品：macpro一部')
+            return
+          }
+          if(index === 2) {
+            window.open('./lottery.html?num=20&title=二等奖&info=奖品：mac air一部')
+            return
+          }
+          if(index === 3) {
+            window.open('./lottery.html?num=30&title=三等奖&info=奖品：iphone 12一部')
+            return
+          }
 					if (num && title) {
 						window.open(`./lottery.html?num=${num}&title=${title}&info=${info}`);
 					} else {
@@ -79,6 +111,6 @@
 					}
 				}
 			}
-    </script>
+		</script>
 	</body>
 </html>

src/lottery.html

@@ -6,6 +6,7 @@
 		<title>抽奖</title>
 		<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
 		<link rel="stylesheet" href="./style/common.css" />
+		<link rel="stylesheet" href="./style/lottory.css" />
 		<script src="./info.js"></script>
 		<script src="./vue.js"></script>
 		<script></script>
@@ -13,11 +14,13 @@
 	<body onkeydown="next(event)">
 		<div id="v1">
 			<div class="step1" v-if="step === 1">
+				<img class="logo" src="./assets/logo.png" alt="">
 				<div class="title">{{awardTitle}}</div>
 				<div class="info" v-if="awardInfo">奖品：{{awardInfo}}</div>
+				<div class="company">一条网络科技2021年会</div>
 			</div>
 			<div v-if="step !== 1" class="step2">
-				<h3>幸运员工&nbsp;&nbsp;({{lotteryStatus ? '抽奖完成' : '抽奖中...'}})</h3>
+				<h3 class="jump-title">{{lotteryStatus ? '恭喜获奖员工' : '幸运员工 抽奖中...'}}</h3>
 				<div class="jump-box">
 					<div v-for="item in activePersonList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div>
 				</div>

src/lottery.js

@@ -95,7 +95,7 @@ let vue = new Vue({
 			winPerson[this.awardTitle] = activePersonList;
 			localStorage['yit'] = JSON.stringify(winPerson);
 			this.activePersonList = activePersonList;
-			uploadLog(this.awardTitle, activePersonList)
+			// uploadLog(this.awardTitle, activePersonList)
 		},
 	},
 });
@@ -143,6 +143,7 @@ function getRandomPerson(num, candidateMap) {
  * 
  * @param {*} title 日志 中奖标题
  * @param {*} list 日志中奖上传列表
+ * 上传中奖人员名单到日志系统 err_ctype lottery 
  */
 function uploadLog(title, list) {
 	let arr = chuck(list, 30)

src/style/common.css

 html,
 body {
-	width: 100%;
+  width: 100%;
+  height: 100%;
+	background: #bc1e22;
 }
 * {
 	padding: 0;
-	margin: 0;
-}
-
-#v1 {
-	width: 100%;
-	height: 100%;
+  margin: 0;
+  box-sizing: border-box;
 }
 
 .step1 {
 	width: 100%;
 	height: 100%;
-	position: absolute;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -28,34 +25,42 @@ body {
 }
 .title {
 	letter-spacing: 10px;
-	font-size: 32px;
+  font-size: 32px;
+  color: #FEFEFE;
 }
 
 .info {
 	margin-top: 20px;
-	font-size: 16px;
+  font-size: 16px;
+  color: #FEFEFE;
 }
 
 .step2 {
-	padding-top: 35vh;
 	width: 100%;
 	text-align: center;
 }
 
+h3{
+  font-size: 60px;
+  color: #FEFEFE;
+}
+
 .jump-item {
-	background-color: #dda9e6;
-	margin-left: 2%;
-	margin-right: 2%;
-	height: 50px;
-	line-height: 50px;
-	width: 16%;
+	margin-left: 1%;
+	margin-right: 1%;
+	height: 80px;
+  line-height: 80px;
+  font-size: 21px;
+  width: 18%;
+  color: #FEFEFE;
 	text-align: center;
 	margin-top: 30px;
-	margin-bottom: 30px;
+  margin-bottom: 30px;
+  border: 1px solid rgba(254,254,254,0.7);
 }
 
 .jump-box {
-	width: 100%;
+	/* width: 100%; */
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;

src/style/lottory.css

+html,
+body {
+	height: 100%;
+	background: #bc1e22;
+}
+
+html {
+	padding: 19px;
+}
+
+body {
+	border: 1px solid #d8d8d8;
+}
+
+#v1 {
+	height: 100%;
+	overflow: scroll;
+}
+
+#v1::-webkit-scrollbar {
+	display: none;
+}
+
+.company {
+	position: absolute;
+	bottom: 80px;
+	left: 50%;
+	transform: translateX(-50%);
+	height: 54px;
+	line-height: 54px;
+	font-size: 18px;
+	color: #fefefe;
+	letter-spacing: 0.11px;
+	opacity: 0.6;
+}
+
+.title {
+	font-size: 73.935px;
+	color: #fefefe;
+	letter-spacing: 0.17px;
+	text-align: center;
+}
+
+.info {
+	font-size: 20px;
+	color: #fefefe;
+	letter-spacing: 0.265px;
+}
+
+.jump-title {
+  height: 270px;
+	line-height: 270px;
+}
+
+.logo {
+  position: absolute;
+	top: 164.6px;
+	left: 50%;
+  transform: translateX(-50%);
+  width: 30px;
+}
\ No newline at end of file