<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="UTF-8">
<title>畅移2020年会盛典</title>
<style>
* {padding: 0;margin: 0;}
html, body {padding: 0;margin: 0;height:100%;overflow: hidden;}
img {display: block;}
input {outline: none;}
ul, li {list-style: none;}
body {width: 100%;height: 100%;box-sizing: border-box;padding-top: 60px;background: url('./img/pc/bg.png') no-repeat;background-size: cover;}
.header {width: 765px;margin-left: 1025px;}
.main {width: 1660px;margin-top: 110px;margin-left: 637px;}
.radio-group {width: 330px;margin-left: 572px;padding-top: 60px;}
.radio-item {display: flex;align-items: center;justify-content: space-between;cursor: pointer;}
.radio-item:not(:last-of-type) {margin-bottom: 70px;}
.radio-item.active .radio-icon-active {display: block;}
.radio-item .radio-icon {position: relative;width: 48px;height: 48px;box-sizing: border-box;border: 2px solid #F9D28D;border-radius: 50%;}
.radio-item .radio-icon-active {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 34px;height: 34px;border-radius: 50%;background: #F9D28D;}
.radio-item .radio-label {font-size: 68px;color: #F9D28D;}
.enter-btn {width: 506px;height: 152px;margin-top: 156px;margin-left: 517px;background: url('./img/pc/btn_bg.png') no-repeat;background-size: 100% 100%;line-height: 152px;text-align: center;font-size: 55px;color: #FFDCC2;cursor: pointer;}
.dialog {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 2;background: rgba(0, 0, 0, .7);}
.dialog-main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 720px;height: 590px;box-sizing: border-box;padding-top: 112px;background: url('./img/pc/dialog_bg.png') no-repeat;background-size: contain;}
.dialog-title {text-align: center;font-size: 50px;font-weight: 500;color: #DC4834;}
.dialog-content {text-align: center;font-size: 40px;font-weight: 500;color: #DC4834;padding-top: 60px;padding-bottom: 87px;}
.dialog-btn {width: 242px;height: 98px;margin: 0 auto;background: url('./img/pc/dialog_btn.png') no-repeat;background-size: contain;line-height: 98px;text-align: center;font-size: 40px;font-weight: 500;color: #FFD590;cursor: pointer;}
.result-page {display: flex;justify-content: space-between;}
.main-left {width: 586px;}
.main-left .avatar {position: relative; width: 100%;height: 615px;box-sizing: border-box;padding: 90px 29px 36px 69px;margin-bottom: 90px;}
.main-left .avatar-img {position: relative; width: 488px;height: 488px;border-radius: 50%;overflow: hidden;}
.main-left .avatar-list {position: absolute;top: 0;left: 0;}
.winner {width: 488px;height: 488px;border-radius: 50%;overflow: hidden;}
.main-left .avatar-item {float: left;width: 488px;height: 488px;border-radius: 50%;}
.main-left .avatar-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./img/pc/avatar_bg.png') no-repeat;background-size: 100% 100%;}
.user-info {display: flex;font-size: 55px;color: #FFCD7E;}
.user-info .label {width: 292px;text-align: right;}
.user-info .content {width: 292px;}
.user-info .scroll-wrap {position: relative;width: 100%;height: 77px;overflow: hidden;}
.scroll-list {position: absolute;top: 0;left: 0;}
.scroll-item {float: left;width: 292px;}
.lottery-btn {width: 527px;height: 172px;margin: 74px auto 0;background: url('./img/pc/btn_bg.png') no-repeat;background-size: contain;line-height: 172px;text-align: center;font-size: 55px;color: #FFDCC2;cursor: pointer;}
.main-right {width: 852px;}
.result {width: 100%;height: 1120px;box-sizing: border-box;padding: 290px 90px 0;background: url('./img/pc/result_bg.png') no-repeat;background-size: 100% 100%;}
.result-title {text-align: center;font-size: 60px;color: #DC4834;margin-bottom: 22px;}
.result-main-header, .result-item {display: flex;align-items: center;text-align: center;font-size: 40px;color: #DC4834;}
.result-list {margin-top: 10px;height: 600px;padding: 6px 0; overflow-y: auto;-ms-overflow-style: none;}
.result-list::-webkit-scrollbar {width: 0 !important;}
.result-item:not(:last-of-type) {margin-bottom: 11px;}
.result-cell {flex: 2;-webkit-flex: 2;}
.result-cell-del {flex: 1;-webkit-flex: 1;display: flex;justify-content: center;align-items: center;}
.result-item .result-cell-del {cursor: pointer;}
.fw-500 {font-weight: 500;}
.result-cell-del .del-icon {width: 44px;height: 44px;background: url('./img/pc/icon_del.png') no-repeat;background-size: contain;}
.clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both}
.hide {display: none;}
</style>
</head>
<body>
<img class="header" src="./img/pc/header.png">
<!-- 选择奖项 -->
<div class="main select-page">
<ul class="radio-group"></ul>
<div class="enter-btn" onclick="action.goLottery()">进入抽奖页面</div>
<!-- 提示弹框 -->
<div class="dialog hide">
<div class="dialog-main">
<div class="dialog-title">温馨提示</div>
<div class="dialog-content">请先选择奖项，再进行抽奖活动</div>
<div class="dialog-btn" onclick="action.switchDialog(false)">我知道了</div>
</div>
</div>
</div>
<!-- 抽奖页 -->
<div class="main result-page hide">
<div class="main-left">
<div class="avatar">
<div class="avatar-img">
<div class="avatar-list clearfix">
<img class="avatar-item" src="./img/pc/default_avatar.png">
</div>
</div>
<div class="winner hide">
<img class="avatar-item" src="./img/pc/default_avatar.png">
</div>
<div class="avatar-bg"></div>
</div>
<div class="user-info user-name" style="margin-bottom: 40px;">
<div class="label">姓名：</div>
<div class="content">
<div class="scroll-wrap">
<div class="scroll-list clearfix">
<span class="scroll-item"></span>
</div>
</div>
<div class="winner-name"></div>
</div>
</div>
<div class="user-info user-no">
<div class="label">奖号：</div>
<div class="content">
<div class="scroll-wrap">
<div class="scroll-list clearfix">
<span class="scroll-item"></span>
</div>
</div>
<div class="winner-no"></div>
</div>
</div>
<div class="lottery-btn start-btn" onclick="action.start()">开始抽奖</div>
<div class="lottery-btn stop-btn hide" onclick="action.stop()">暂停</div>
<div class="lottery-btn continue-btn hide" onclick="action.continueLottery()">继续抽奖</div>
</div>
<div class="main-right">
<div class="result">
<div class="result-title"></div>
<div class="result-main">
<div class="result-main-header fw-500">
<span class="result-cell">序号</span>
<span class="result-cell">姓名</span>
<span class="result-cell">奖号</span>
<span class="result-cell-del"> </span>
</div>
<div class="result-list"></div>
</div>
</div>
</div>
</div>
<script src="./js/axios.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/template.js"></script>
<script src="lottery.js"></script>
<script>
action.init();
</script>
<!-- 奖项模板 -->
<script type="text/html" id="prizeTmpl">
{{each list as item index}}
<li class="radio-item" onclick="action.selectPrize({{index}})">
<i class="radio-icon"><i class="radio-icon-active"></i></i>
<span class="radio-label">{{item.prize_name}}</span>
</li>
{{/each}}
</script>
<!-- 中奖名单模板 -->
<script type="text/html" id="resultTmpl">
{{each list as item index}}
<div class="result-item">
<span class="result-cell">{{index + 1}}</span>
<span class="result-cell">{{item.realname}}</span>
<span class="result-cell">{{item.prize_no}}</span>
<span class="result-cell-del" onclick="action.delWinner({{index}})"><i class="del-icon"></i></span>
</div>
{{/each}}
</script>
</body>
</html>