Skip to content

L
lottery
Commit e197c1de authored by fushaowu's avatar fushaowu
Browse files
Options

feat: + UI OK

parent 949c824b
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 28 deletions
src/admin.html
View file @ e197c1de
...@@ -10,6 +10,10 @@ ...@@ -10,6 +10,10 @@
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #bc1e22;
color: #fefefe;
box-sizing: border-box;
overflow: hidden;
} }
#admin { #admin {
width: 100%; width: 100%;
...@@ -32,7 +36,20 @@ ...@@ -32,7 +36,20 @@
width: 100%; width: 100%;
align-items: center; 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> <script src="./info.js"></script>
</head> </head>
<body> <body>
...@@ -56,22 +73,37 @@ ...@@ -56,22 +73,37 @@
<div><button style="margin-left: 50px" onclick="submit()">打开抽奖页面</button></div> <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('./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('./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="submit(1)">一等奖</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="submit(2)">二等奖</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(3)">三等奖</button></div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function submit() { function submit(index) {
let num = document.getElementById('num').value; let num = document.getElementById('num').value;
let title = document.getElementById('title').value.trim(); let title = document.getElementById('title').value.trim();
let info = document.getElementById('info').value; let info = document.getElementById('info').value;
let winPerson = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {}; 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]) { if (winPerson[title]) {
let status = window.confirm('该标题已存在，跳转至抽奖结果页面'); let status = window.confirm('该标题已存在，跳转至抽奖结果页面');
status && window.open('./list.html'); status && window.open('./list.html');
} else { } 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) { if (num && title) {
window.open(`./lottery.html?num=${num}&title=${title}&info=${info}`); window.open(`./lottery.html?num=${num}&title=${title}&info=${info}`);
} else { } else {
...@@ -79,6 +111,6 @@ ...@@ -79,6 +111,6 @@
} }
} }
} }
</script> </script>
</body> </body>
</html> </html>
src/lottery.html
View file @ e197c1de
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<title>抽奖</title> <title>抽奖</title>
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./style/common.css" /> <link rel="stylesheet" href="./style/common.css" />
<link rel="stylesheet" href="./style/lottory.css" />
<script src="./info.js"></script> <script src="./info.js"></script>
<script src="./vue.js"></script> <script src="./vue.js"></script>
<script></script> <script></script>
...@@ -13,11 +14,13 @@ ...@@ -13,11 +14,13 @@
<body onkeydown="next(event)"> <body onkeydown="next(event)">
<div id="v1"> <div id="v1">
<div class="step1" v-if="step === 1"> <div class="step1" v-if="step === 1">
<img class="logo" src="./assets/logo.png" alt="">
<div class="title">{{awardTitle}}</div> <div class="title">{{awardTitle}}</div>
<div class="info" v-if="awardInfo">奖品：{{awardInfo}}</div> <div class="info" v-if="awardInfo">奖品：{{awardInfo}}</div>
<div class="company">一条网络科技2021年会</div>
</div> </div>
<div v-if="step !== 1" class="step2"> <div v-if="step !== 1" class="step2">
<h3>幸运员工&nbsp;&nbsp;({{lotteryStatus ? '抽奖完成' : '抽奖中...'}})</h3> <h3 class="jump-title">{{lotteryStatus ? '恭喜获奖员工' : '幸运员工 抽奖中...'}}</h3>
<div class="jump-box"> <div class="jump-box">
<div v-for="item in activePersonList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div> <div v-for="item in activePersonList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div>
</div> </div>
......
src/lottery.js
View file @ e197c1de
...@@ -95,7 +95,7 @@ let vue = new Vue({ ...@@ -95,7 +95,7 @@ let vue = new Vue({
winPerson[this.awardTitle] = activePersonList; winPerson[this.awardTitle] = activePersonList;
localStorage['yit'] = JSON.stringify(winPerson); localStorage['yit'] = JSON.stringify(winPerson);
this.activePersonList = activePersonList; this.activePersonList = activePersonList;
uploadLog(this.awardTitle, activePersonList) // uploadLog(this.awardTitle, activePersonList)
}, },
}, },
}); });
...@@ -143,6 +143,7 @@ function getRandomPerson(num, candidateMap) { ...@@ -143,6 +143,7 @@ function getRandomPerson(num, candidateMap) {
* *
* @param {*} title 日志 中奖标题 * @param {*} title 日志 中奖标题
* @param {*} list 日志中奖上传列表 * @param {*} list 日志中奖上传列表
* 上传中奖人员名单到日志系统 err_ctype lottery
*/ */
function uploadLog(title, list) { function uploadLog(title, list) {
let arr = chuck(list, 30) let arr = chuck(list, 30)
......
src/style/common.css
View file @ e197c1de
html, html,
body { body {
width: 100%; width: 100%;
height: 100%;
background: #bc1e22;
} }
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
} box-sizing: border-box;
#v1 {
width: 100%;
height: 100%;
} }
.step1 { .step1 {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -28,34 +25,42 @@ body { ...@@ -28,34 +25,42 @@ body {
} }
.title { .title {
letter-spacing: 10px; letter-spacing: 10px;
font-size: 32px; font-size: 32px;
color: #FEFEFE;
} }
.info { .info {
margin-top: 20px; margin-top: 20px;
font-size: 16px; font-size: 16px;
color: #FEFEFE;
} }
.step2 { .step2 {
padding-top: 35vh;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
h3{
font-size: 60px;
color: #FEFEFE;
}
.jump-item { .jump-item {
background-color: #dda9e6; margin-left: 1%;
margin-left: 2%; margin-right: 1%;
margin-right: 2%; height: 80px;
height: 50px; line-height: 80px;
line-height: 50px; font-size: 21px;
width: 16%; width: 18%;
color: #FEFEFE;
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
border: 1px solid rgba(254,254,254,0.7);
} }
.jump-box { .jump-box {
width: 100%; /* width: 100%; */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
......
src/style/lottory.css 0 → 100644
View file @ e197c1de
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment