lottery.html
8.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="UTF-8">
<title>畅移5周年庆典</title>
<style>
html,body{top:0;left:0;padding: 0;margin: 0;border: 0;height:100%;overflow: hidden;background-color:#000000;min-height: 768px;}
.header{background-image: url("img/lottery-header1024.png");background-position: center top;top:0;left:0;height: 115px;width: 100%;color: #E3BF75;line-height: 115px;text-align: center;font-size: 50px;}
.main{width:100%;height: 520px;}
.left,.right{width:50%;float:left;height:500px;position: relative;}
.left .user-count{color:#E3BF75;font-size: 28px;width:100%;text-align: center;margin-top: 75px; line-height: 40px}
.left .user-head{width:100%;}
.left .user-head-img-line{ margin: 20px auto 0 auto;border: 1px solid rgb(130,114,84);border-radius:100%;width:258px;height: 258px;position: relative;overflow: hidden;}
.left .user-head-img-line .head-winner{border-radius:100%;width:210px;height: 210px;overflow: hidden;margin: 23px auto;}
.left .user-head-img-line .head-winner img{width:210px;height: auto;}
.left .user-head-img-line .headimg-bind{width:210px;height: 210px;overflow: hidden;}
.left .user-head-img-line .headimg-bind .head-img{position:absolute;top:23px;left:-212px;border: 1px solid transparent;border-radius:50%;width:210px;height: 210px;overflow: hidden;margin: 0;}
.left .user-head-img-line .headimg-bind .head-img img{width: 220px;height: auto;}
.left .user-award{margin-top: 40px;width: 100%;text-align: center;}
.left .user-award select{width:280px;height: 45px;border: 1px solid rgb(100,100,100); border-radius: 18px;background-color: transparent;color:#ffffff;padding-left:18px;outline:0 none !important;font-size:25px;text-indent: 70px;}
.left .user-award option{background-color: rgb(43,36,22);text-indent: 90px;}
.right .lottery-list{border: 1px solid rgb(98,82,51);border-radius: 5px;width:400px;margin:60px auto 0 auto;height: 450px;overflow-y: auto;}
.right .title{background-color: rgb(43,36,22);height: 45px;line-height: 45px;padding-left: 20px;font-size: 18px;color: #E3BF75;}
.right .data-headimg{border-radius:100%;width:43px;height: 43px;}
.right .data-headimg img{width: 43px;height: 43px;border-radius:100%;min-height: 43px;}
.right .table{color:#E3BF75;font-size: 18px;width:100%;margin-top: 20px;}
.right .table .tr{height: 43px;line-height: 43px;font-size: 18px;margin-bottom: 10px;}
.right .table .sort{float:left;width:72px;text-align: center}
.right .table .head{float:left;width: 43px;padding-right: 14px;}
.right .table .name{float:left;padding-right: 14px;max-width: 160px;overflow: hidden;height: 43px;}
.right .table .number{float:right;text-align: right;margin-right: 14px;}
.right .table .delete{float:right;text-align: right;margin-right: 16px;margin-top: 3px}
.right .table .delete img{width:20px;height:20px;}
#winner-show-dlg{width:100%;height:100%;position: fixed;opacity: 0.5; background-color: #000000;min-height: 100px;min-width: 100px;z-index: 20;left:0;top:0;display: none;}
#winner-show{z-index: 121;position: absolute;left:0;top:0;width:100%;height: 100%;display: none;}
#winner-show .winner-main{width: 653px;height: 450px;background-image: url('img/winner-flag.png');background-size: 653px 450px;background-position: top;margin: 148px auto 0 auto;}
#winner-show ul{list-style: none;width: 100%;margin: 0;padding: 0;text-align: center;}
#winner-show .title{height: 170px;line-height: 250px;font-size: 20px;color: #E3BF75;margin-top:148px;}
#winner-show .winner-no{height: 100px;line-height: 100px;font-size: 50px;color: #E3BF75;}
#winner-show .winner-name{height: 50px;line-height: 50px;font-size: 25px;color: #E3BF75;}
.form-data{width: 300px; margin: 50px auto 0px auto;}
.form-data input{width:280px;height: 35px;border: 1px solid rgb(100,100,100); border-radius: 18px;background-color: transparent;color:#fff;padding-left:18px;outline:0 none !important;font-size:16px;}
.floor{position: absolute;width:100%;height: 87px;left: 0;bottom: 0;text-align: center;z-index:11;background-image: url('img/lottery-floor1024.png');background-repeat: no-repeat;background-size: 100% auto;padding-top: 70px;background-position: 0 -50px;}
.floor div{width:50%;text-align: center;float: left;}
.floor .start{width:330px;height: 40px;line-height: 35px;border: 1px solid rgb(227,191,117); border-radius: 18px;background-color: rgb(227,191,117);color: #fff;outline:0 none !important;font-size:21px;}
.floor .stop{width:330px;height: 40px;line-height: 35px;border: 1px solid rgb(227,191,117); border-radius: 18px;background-color: transparent;color: rgb(227,191,117);outline:0 none !important;font-size:21px;}
</style>
<script src="axios.js"></script>
<script src="jquery.min.js"></script>
<script src="usercache.js"></script>
<script src="lottery.js"></script>
</head>
<body>
<div class="header">
畅移2019年度盛典抽奖
</div>
<div class="main">
<div class="left">
<div class="user-count">活动参与人数：<span z-bind="lottery.userCount"></span>人</div>
<div class="user-head">
<div class="user-head-img-line">
<div class="head-winner">
<img z-bind = "winner.headimg" src = "./img/head.png" />
</div>
<div z-for-container = "headimg-bind" class="headimg-bind">
<div z-for-item = "headimg" class="head-img">
<img z-for-data = 'headimg' src = "./img/head.png"/>
</div>
</div>
</div>
<div class="user-award">
<select onchange="action.winnerList()">
<option>一等奖</option>
<option>二等奖</option>
<option>三等奖</option>
<option>四等奖</option>
<option>五等奖</option>
<option>六等奖</option>
</select>
</div>
</div>
</div>
<div class="right">
<div class="lottery-list">
<div class="title"><span z-bind = "lottery.award"></span>：<span z-bind = "lottery.winnerCount">0</span>人</div>
<div class="data">
<div class="table" z-for-container = "winner-bind">
<div class="tr" z-for-item = "winner">
<div class="sort" z-for-data = "user_id"></div>
<div class="head"><div class="data-headimg"><img z-for-data ="headimg" src="" /></div></div>
<div class="name" z-for-data = "realname"></div>
<div class="delete" z-for-click="action.delWinner"><img src="./img/delete.png"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="winner-show-dlg">
</div>
<div id="winner-show" onclick="$(this).hide(500);$('#winner-show-dlg').hide();">
<div class="winner-main">
<ul>
<li class="title" z-bind = "lottery.award"></li>
<li class="winner-no">NO.<span z-bind="winner.number"></span></li>
<li class="winner-name" z-bind="winner.realname"></li>
</ul>
</div>
</div>
<div class="floor">
<div>
<button class="start" onclick="action.start(this)">开始抽奖</button></div>
<div>
<button class="stop" onclick="action.stop(this)">停止</button>
</div>
</div>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
// var vConsole = new VConsole();
action.init(1);
</script>
</body>
</html>