<!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>畅移2020年度庆典</title>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
dpr = 1,
scale = 1 / dpr;
var metaEl = doc.createElement('meta');
metaEl.name = "viewport";
metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc = function () {
var deviceWidth = docEl.clientWidth;
if (deviceWidth > 750) deviceWidth = 750;
docEl.style.fontSize = deviceWidth / 7.5 + 'px';
};
recalc();
})(document, window);
</script>
<style>
* {padding: 0;margin: 0;}
html, body {padding: 0;margin: 0;min-height:100%;font-family: 'PingFangSC','PingFang','Microsoft Yahei','Hiragino Sans GB','WenQuanYi Micro Hei','Droidsansfallback','Droid Sans',STHeiti,'\534E\6587\7EC6\9ED1','Helvetica Neue',SimHei,Helvetica,Arial,sans-serif;}
img {display: block;}
input {outline: none;border: none;-webkit-appearance: none;appearance: none;}
.wrap {position: relative;width: 100%;min-height: 100%;box-sizing: border-box;}
.sign-in, .pic, .home, .seat {user-select: none;-webkit-user-select: none;-moz-user-select: none;}
.common-btn {position: relative;width: 5.9rem;height: 1.08rem;margin: 0 auto;}
.common-btn:not(:first-of-type) {margin-top: .4rem;}
.common-btn-bg {display: inline-block;width: 6.82rem;margin-left: -.46rem;margin-top: -.5rem;}
.common-btn-inner {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;}
input::-webkit-input-placeholder {color: #B8BCBD;}
input:-moz-placeholder {color: #B8BCBD;}
input::-moz-placeholder {color: #B8BCBD;}
input::-ms-input-placeholder {color: #B8BCBD;}
.sign-in {height: 100vh;background: url('./img/mobile/signin_bg.png') no-repeat;background-size: 100% 100%;}
.sign-in-logo {position: absolute;top: .3rem;left: .3rem;width: 1.46rem;height: .5rem;background: url('./img/mobile/signin_logo.png') no-repeat;background-size: 100%;}
.sign-in-title {width: 90.67%;height: 4.26rem;margin: -.1rem auto 0;background: url('./img/mobile/signin_title.png') no-repeat;background-size: 100%;}
.sign-input {
display: block;
width: 5.8rem;
height: 1rem;
margin: .5rem auto .6rem;
background: #fff;
box-sizing: border-box;
padding: .28rem .2rem;
border: 1px solid #FFE9CC;
-webkit-box-shadow: 0 .04rem .24rem .04rem #D97711, inset 0 0 .16rem 0 #D7BDA3;
-moz-box-shadow: 0 .04rem .24rem .04rem #D97711, inset 0 0 .16rem 0 #D7BDA3;
box-shadow: 0 .04rem .24rem .04rem #D97711, inset 0 0 .16rem 0 #D7BDA3;
border-radius: .5rem;
line-height: .44rem;
text-align: center;
font-size: .32rem;
}
.pic {height: 100vh;padding-top: 1.28rem;background: url('./img/mobile/pic_bg.png') no-repeat;background-size: 100% 100%;}
.pic-title {width: 5.1rem;margin: 0 auto;}
.pic-img-wrap {position: relative;width: 4.78rem;height: 4.78rem;margin: .5rem auto 0;box-sizing: border-box;padding: .96rem .92rem .98rem 1.02rem;}
.pic-img-bg {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: url('./img/mobile/pic_avatar_bg.png') no-repeat;background-size: 100% 100%;}
.pic-avatar {width: 2.84rem;height: 2.84rem;border-radius: 50%;}
.pic-btn-wrap {position: absolute;bottom: 1.2rem;left: 50%;transform: translateX(-50%);width: 6.82rem;padding-bottom: .72rem;}
.pic-btn-album {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 3rem;display: flex;align-items: center;justify-content: center;}
.pic-btn-album .album-text {font-size: .28rem;color: #fff;margin-right: .1rem;}
.pic-btn-album .pic-arrow {width: .32rem;height: .32rem;background: url('./img/mobile/pic_arrow.png') no-repeat;background-size: contain;}
.home {padding-bottom: 3rem; background: url('./img/mobile/home_bg.png') no-repeat;background-size: cover;}
.user-info {position: relative;padding-top: 1.16rem;}
.info-bg {width: 100%;height: 3.26rem;background: url('./img/mobile/home_info_bg.png') no-repeat center bottom;background-size: 100% 100%;}
.info-lantern {position: absolute;top: 0;right: 0;width: 100%;height: 2.72rem;background: url('./img/mobile/home_lantern.png') no-repeat;background-size: 100%;}
.info-center {position: absolute;top: .4rem;left: 50%;transform: translateX(-50%);}
.user-avatar {position: relative;width: 1.34rem;height: 1.4rem;box-sizing: border-box;padding-top: .24rem;padding-left: .18rem;margin: 0 auto;overflow: hidden;}
.user-avatar .avatar-img {width: 1.14rem;height: 1.14rem;border-radius: 50%;}
.user-avatar .avatar-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./img/mobile/home_avatar.png') no-repeat;background-size: contain;}
.info-center .user-name {text-align: center;font-size: .36rem;font-weight: 500;color: #C93120;margin-top: .1rem;}
.info-main {position: absolute;bottom: .8rem;left: 50%;transform: translateX(-50%); width: 6.3rem; height: .82rem;display: flex;align-items: center;}
.info-main-item {position: relative;flex: 1;-webkit-flex: 1;text-align: center;}
.info-main-item .item-content {font-size: .32rem;font-weight: 600;color: #C93120;margin-bottom: .04rem;}
.info-main-item .item-label {font-size: .24rem;font-weight: 400;color: #631810;}
.enter-btn {position: absolute; top: -.48rem;right: .4rem;width: 1.18rem;height: .48rem;background: url('./img/mobile/home_enter.png') no-repeat;background-size: contain;}
.info-main-space {width: .02rem;height: .6rem;background: rgba(208, 162, 82, .2);}
.home-title {width: 5.64rem;height: 1.46rem;margin: .2rem auto 0;background: url('./img/mobile/home_title.png') no-repeat;background-size: 100%;}
.home-list {width: 100%;height: 20.28rem;margin-top: -.2rem;background: url('./img/mobile/home_program.png') no-repeat;background-size: 100%;}
.home-vote-btn {position: fixed;bottom: 1.6rem;left: 50%;transform: translateX(-50%);z-index: 1;width: 3.2rem;height: .9rem;}
.home-vote-btn .btn-bg {width: 4.06rem;height: 2rem;margin-left: -.46rem;margin-top: -.5rem;}
.home-vote-inner {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.home-barrage-wrap {position: fixed;bottom: 0;left: 0;right: 0;z-index: 1;display: flex;}
.barrage-input {width: 70.67%;height: 1.08rem;box-sizing: border-box;border: none;border-radius: 0;background: #fff;padding: .3rem .4rem;line-height: .48rem;font-size: .32rem;}
.send-btn {width: 29.33%;height: 1.08rem;line-height: 1.08rem;text-align: center;font-size: .32rem;color: #fff;background: url('./img/mobile/home_btn_gray.png') no-repeat;background-size: cover;}
.send-btn.active {background: url('./img/mobile/home_btn_red.png') no-repeat;background-size: cover;}
.seat {min-height: 100vh;background: #F8F8F9;padding-top: .4rem;}
.stage {width: 6.3rem;height: 2.14rem;margin: 0 auto; background: #FFF8DD; box-sizing: border-box;border: 1px dashed rgba(255, 205, 0, .5);border-top: .16rem solid #FBCE07;font-size: .32rem;font-weight: 500;color: #FBCE07;display: flex;align-items: center;justify-content: center;}
.entrance {width: .4rem;height: .6rem;margin-top: .5rem;padding: .1rem;background: #E6F7EF;border: 1px dashed #64DCA1;border-left: none;font-size: .28rem;font-weight: 500;color: #64DCA1;display: flex;align-items: center;justify-content: center;}
.seat-list {padding: 0 .6rem;margin-top: .14rem;}
.seat-list .list-item {float: left;width: 1rem;height: 1rem;margin-right: .32rem;margin-bottom: .4rem;border-radius: 50%;background: #EDEDED;line-height: 1rem;text-align: center;font-size: .4rem;color: #ccc;font-family: DINAlternate-Bold,DINAlternate;font-weight: bold;}
.seat-list .list-item.active {position: relative;padding: .12rem;margin: -.12rem .2rem .2rem -.12rem;background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;color: #fff;}
.seat-list .list-item:nth-child(5n) {margin-right: 0;}
.seat-icon {position: absolute;right: -.38rem;top: -.52rem;width: .76rem;height: .76rem;background: url('./img/mobile/icon_seat.png') no-repeat;background-size: contain;}
.bottom-btn {position: fixed;bottom: 0;left: 0;z-index: 1;width: 100%;height: 1.08rem;background: url('./img/mobile/btn_bg_red.png') no-repeat;background-size: cover;line-height: 1.08rem;text-align: center;font-size: .32rem;color: #fff;}
.vote {min-height: 100vh;padding-bottom: 1.2rem;}
.vote .tip {width: 100%;height: .84rem;background: #FFE7E4;line-height: .84rem;text-align: center;font-size: .28rem;font-weight: 600;color: #D02E1D;}
.program-title {margin-top: .3rem;padding-left: .4rem;font-size: .28rem;color: #A6A6A6;}
.program-list {padding-left: .4rem;}
.program-item {padding: .4rem 0;display: flex;align-items: center;}
.program-item:not(:last-of-type) {border-bottom: 1px solid #F7F7F7;}
.program-item-icon {width: .44rem;height: .44rem;box-sizing: border-box;border: 1px solid rgba(201, 49, 32, .5);border-radius: 50%;}
.program-item-label {font-size: .3rem;color: #000;margin-left: .22rem;}
.program-item.active .program-item-icon {background: url('./img/mobile/vote_active.png') no-repeat;background-size: contain;border: none;}
.dialog-wrap {position: fixed;z-index: 10;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.5);}
.dialog-main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 9.36rem;box-sizing: border-box;padding-top: 3.2rem;background: url('./img/mobile/dialog_bg.png') no-repeat;background-size: contain;}
.dialog-title {width: 3.7rem;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
.title-icon-left, .title-icon-right {width: .9rem;height: .2rem;}
.title-icon-left {background: url('./img/mobile/dialog_title1.png') no-repeat;background-size: 100% 100%;}
.title-icon-right {background: url('./img/mobile/dialog_title2.png') no-repeat;background-size: 100% 100%;}
.title-text {font-size: .32rem;font-weight: 600;color: #C93120;}
.dialog-content {width: 5rem;margin: .4rem auto 0;padding: .2rem;line-height: .46rem;font-size: .28rem;color: #C93120;}
.content-row {text-align: center;}
.dialog-btn-single {width: 4.3rem;height: .94rem;margin: 1rem auto 0;background: url('./img/mobile/dialog_btn_bg.png') no-repeat;background-size: cover;line-height: .94rem;text-align: center; font-size: .32rem;color: #FBDB97;}
.dialog-btn-wrap {width: 4.62rem;margin: 1rem auto;display: flex;justify-content: space-between;}
.dialog-btn-item {width: 2.12rem;height: .94rem;line-height: .94rem;text-align: center; font-size: .32rem;}
.dialog-theme-btn {background: url('./img/mobile/dialog_btn_confirm.png') no-repeat;background-size: cover;color: #FBDB97;}
.dialog-reverse-btn {background: url('./img/mobile/dialog_btn_cancel.png') no-repeat;background-size: cover;color: #CF3727;}
.dialog-close {position: absolute;top: -.6rem;right: .26rem;width: .76rem;height: .76rem;background: url('./img/mobile/dialog_close.png') no-repeat;background-size: contain;}
.toast-tip {display: none;position: fixed;bottom: 50%;left: 50%;transform: translateX(-50%);z-index: 11;opacity: 0;padding: 0 .5rem;height: .84rem;background: rgba(0, 0, 0, .8);border-radius: .06rem;transition: opacity 1s ease-out;line-height: .84rem;text-align: center;font-size: .28rem;color: #fff;}
.clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both;}
.hide {display: none;}
</style>
</head>
<body>
<!--签到-->
<div class="sign-in wrap hide" id="signIn">
<div class="sign-in-logo"></div>
<div class="sign-in-title"></div>
<input class="sign-input" type="text" placeholder="请输入你的姓名" maxlength="15" onblur="action.resetPosition()">
<div class="common-btn">
<img class="common-btn-bg" src="./img/mobile/signin_btn.png">
<div class="common-btn-inner" onclick="action.signIn()"></div>
</div>
</div>
<!--拍照-->
<div class="pic wrap hide" id="pic">
<img class="pic-title" src="./img/mobile/pic_text1.png">
<img class="pic-title hide" src="./img/mobile/pic_text2.png">
<div class="pic-img-wrap" onclick="action.openCamera()">
<img class="pic-avatar" src="./img/mobile/default_avatar.png">
<div class="pic-img-bg"></div>
<input type="hidden" class="data-img" />
</div>
<div class="pic-btn-wrap" id="upload_unavailable">
<!-- 自拍出境 -->
<div class="common-btn">
<img class="common-btn-bg" src="./img/mobile/pic_btn1.png">
<div class="common-btn-inner" onclick="action.openCamera(1)"></div>
</div>
<div class="pic-btn-album" onclick="action.openCamera(2)">
<span class="album-text">还是相册选一张吧</span>
<i class="pic-arrow"></i>
</div>
</div>
<div class="pic-btn-wrap hide" id="upload_available">
<!-- 完美提交 -->
<div class="common-btn">
<img class="common-btn-bg" src="./img/mobile/pic_btn2.png">
<div class="common-btn-inner" onclick="action.uploadImage()"></div>
</div>
<!-- 再拍一次 -->
<div class="common-btn">
<img class="common-btn-bg" src="./img/mobile/pic_btn3.png">
<div class="common-btn-inner" onclick="action.openCamera(1)"></div>
</div>
<div class="pic-btn-album" onclick="action.openCamera(2)">
<span class="album-text">再翻翻相册吧</span>
<i class="pic-arrow"></i>
</div>
</div>
</div>
<!-- 首页 -->
<div class="home wrap hide" id="home">
<div class="user-info">
<div class="info-bg"></div>
<div class="info-lantern"></div>
<div class="info-center">
<div class="user-avatar">
<img class="avatar-img" id="home_user_avatar" src="./img/mobile/default_avatar.png">
<div class="avatar-border"></div>
</div>
<div class="user-name" id="home_user_name">姓名</div>
</div>
<div class="info-main">
<div class="info-main-item">
<div class="item-content" id="home_prize_no"></div>
<div class="item-label">奖号</div>
</div>
<i class="info-main-space"></i>
<div class="info-main-item">
<div class="item-content"><span id="home_table_no">0</span>桌</div>
<div class="item-label">入座区域</div>
<div class="enter-btn" onclick="action.goSeat()"></div>
</div>
</div>
</div>
<div class="home-title"></div>
<div class="home-list"></div>
<div class="home-vote-btn">
<img class="btn-bg" src="./img/mobile/home_vote_btn.png">
<div class="home-vote-inner" onclick="action.getVoteState()"></div>
</div>
<div class="home-barrage-wrap">
<input class="barrage-input"
type="text"
placeholder="发条弹幕试试"
oninput="action.toggleBtnState()"
onblur="action.resetPosition()">
<div class="send-btn">发送</div>
</div>
</div>
<!-- 查看座位 -->
<div class="seat wrap hide">
<div class="stage">舞台</div>
<div class="entrance">入口</div>
<div class="seat-list clearfix"></div>
<div class="bottom-btn" onclick="action.goHome()">返回</div>
</div>
<!-- 投票 -->
<div class="vote wrap hide">
<div class="tip hide">最多可以票选5个优秀节目！</div>
<div class="program-title">选项（多选）</div>
<ul class="program-list"></ul>
<div class="bottom-btn" onclick="action.vote()">确认投票</div>
</div>
<!-- 姓名不存在 弹框 -->
<div class="dialog-wrap hide" id="sign_in_dialog">
<div class="dialog-main">
<div class="dialog-close" onclick="action.switchDialog('#sign_in_dialog', false)"></div>
<div class="dialog-title">
<i class="title-icon-left"></i>
<div class="title-text">温馨提示</div>
<i class="title-icon-right"></i>
</div>
<div class="dialog-content">
<p class="content-row">纳尼？您的姓名竟然不存在！</p>
<p class="content-row">快老实交代，你是卧底还是走丢了！</p>
</div>
<div class="dialog-btn-single" onclick="action.switchDialog('#sign_in_dialog', false)">速速联系组委会</div>
</div>
</div>
<!-- 未开启投票 弹框 -->
<div class="dialog-wrap hide" id="home_dialog">
<div class="dialog-main">
<div class="dialog-title">
<i class="title-icon-left"></i>
<div class="title-text">温馨提示</div>
<i class="title-icon-right"></i>
</div>
<div class="dialog-content">
<p class="content-row">投票还没开始，还是专心看节目吧～</p>
</div>
<div class="dialog-btn-single" onclick="action.switchDialog('#home_dialog', false)">我知道了</div>
</div>
</div>
<!-- 投票确认 弹框 -->
<div class="dialog-wrap hide" id="vote_dialog">
<div class="dialog-main">
<div class="dialog-title">
<i class="title-icon-left"></i>
<div class="title-text">温馨提示</div>
<i class="title-icon-right"></i>
</div>
<div class="dialog-content">
<p class="content-row">投票完成就不能反悔了，</p>
<p class="content-row">确认投票吗？</p>
</div>
<div class="dialog-btn-wrap">
<div class="dialog-btn-item dialog-reverse-btn" onclick="action.switchDialog('#vote_dialog', false)">取消</div>
<div class="dialog-btn-item dialog-theme-btn" onclick="action.submitVote()">确认</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script src="./js/template.js"></script>
<script src="mobile.js?t=2"></script>
<script>
var vConsole = new VConsole();
action.init();
</script>
<script type="text/html" id="seatListTmpl">
{{each list as item}}
<div class="list-item {{if item.number == userSeat}}active{{/if}}">
<span>{{item.number}}</span>
{{if item.number == userSeat}}
<i class="seat-icon"></i>
{{/if}}
</div>
{{/each}}
</script>
<script type="text/html" id="programListTmpl">
{{each list as item index}}
<li class="program-item {{if item.checked}}active{{/if}}" onclick="action.selectProgram({{index}})">
<i class="program-item-icon"></i>
<span class="program-item-label">{{item.item_name}}</span>
</li>
{{/each}}
</script>
</body>
</html>