<!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>