<!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%;}
img {display: block;}
input {outline: none;border: none;}
.wrap {position: relative;width: 100%;min-height: 100%;box-sizing: border-box;}
.common-btn {width: 5.9rem;height: 1.08rem;margin: 0 auto;}
.common-btn:not(:first-of-type) {margin-top: .4rem;}
.common-btn-bg {width: 6.82rem;margin-left: -.46rem;margin-top: -.5rem;}
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-main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.sign-input {
width: 5.8rem;
height: 1rem;
background: #fff;
box-sizing: border-box;
padding: 0 .1rem;
border: 1px solid;
border-image: linear-gradient(148deg, rgba(255,233,204,1), rgba(255,232,189,1));
box-shadow: 0 4px 24px 0 rgba(241,132,19,1),0px 0px 16px 0px rgba(215,189,163,1);
border-radius: .5rem;
text-align: center;
font-size: .32rem;
margin-bottom: .5rem;
}
.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;}
.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 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;width: 2.78rem;height: 2.78rem;border-radius: 50%;}
.pic-btn-wrap {position: absolute;bottom: 1.6rem;left: 50%;transform: translateX(-50%); width: 6.82rem;margin: 1rem auto 0;}
.pic-btn-album {display: flex;align-items: center;justify-content: center;margin-top: .6rem;}
.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:linear-gradient(180deg,rgba(212,71,34,1) 0%,rgba(231,75,41,1) 16%,rgba(202,54,57,1) 100%);}
.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: contain;}
.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: .2rem;padding-left: .14rem;margin: 0 auto;}
.user-avatar .avatar-img {width: 1.2rem;height: 1.2rem;}
.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;margin: .2rem auto 0;}
.home-list {width: 100%;margin-top: -.2rem;}
.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-barrage-wrap {position: fixed;bottom: 0;left: 0;right: 0;z-index: 1;display: flex;}
.barrage-input {width: 5.3rem;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: 2.2rem;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 .94rem;margin-top: .14rem;}
.seat-list .list-item {float: left;width: 1rem;height: 1rem;margin-right: .5rem;margin-bottom: .5rem;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-left: -.12rem;margin-top: -.12rem;margin-right: .38rem;margin-bottom: .38rem;background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;color: #fff;}
.seat-list .list-item:nth-child(4n) {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;}
.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 {width: 4.3rem;height: .94rem;margin: 1rem auto 0;background: url('./img/mobile/dialog_btn_bg.png') no-repeat;background-size: 100% 100%;line-height: .94rem;text-align: center; font-size: .32rem;color: #FBDB97;}
.dialog-close {position: absolute;top: -.6rem;right: .26rem;width: .76rem;height: .76rem;background: url('./img/mobile/dialog_close.png') no-repeat;background-size: contain;}
.clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both}
.hide {display: none;}
</style>
</head>
<body>
<!--签到-->
<div class="sign-in wrap" id="signIn">
<div class="sign-in-main">
<input class="sign-input" type="text" placeholder="请输入你的姓名" maxlength="15" onblur="action.resetPosition()">
<div class="common-btn" onclick="action.enter()">
<img class="common-btn-bg" src="./img/mobile/signin_btn.png">
</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/icon_seat.png">
<div class="pic-img-bg"></div>
<input type="hidden" class="data-img" />
</div>
<div class="pic-btn-wrap">
<div class="common-btn" onclick="action.goHome()">
<img class="common-btn-bg" src="./img/mobile/pic_btn1.png">
</div>
<div class="pic-btn-album">
<span class="album-text">还是相册选一张吧</span>
<i class="pic-arrow"></i>
</div>
</div>
<div class="pic-btn-wrap hide">
<div class="common-btn">
<img class="common-btn-bg" src="./img/mobile/pic_btn2.png">
</div>
<div class="common-btn">
<img class="common-btn-bg" src="./img/mobile/pic_btn3.png">
</div>
<div class="pic-btn-album">
<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" src="./img/mobile/vote_active.png">
<div class="avatar-border"></div>
</div>
<div class="user-name">姓名</div>
</div>
<div class="info-main">
<div class="info-main-item">
<div class="item-content">001</div>
<div class="item-label">奖号</div>
</div>
<i class="info-main-space"></i>
<div class="info-main-item">
<div class="item-content">16桌</div>
<div class="item-label">入座区域</div>
<div class="enter-btn" onclick="action.goSeat()"></div>
</div>
</div>
</div>
<img class="home-title" src="./img/mobile/home_title.png">
<img class="home-list" src="./img/mobile/home_program.png">
<div class="home-vote-btn" onclick="action.goVote()">
<img class="btn-bg" src="./img/mobile/home_vote_btn.png">
</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 class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item active">6 <i class="seat-icon"></i></div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
<div class="list-item">11</div>
<div class="list-item">12</div>
<div class="list-item">13</div>
<div class="list-item">14</div>
<div class="list-item">15</div>
<div class="list-item">16</div>
</div>
<div class="bottom-btn" onclick="action.goHome()">返回</div>
</div>
<!-- 投票 -->
<div class="vote wrap hide">
<div class="tip">最多可以票选5个优秀节目！</div>
<div class="program-title">选项（多选）</div>
<ul class="program-list">
<li class="program-item">
<i class="program-item-icon"></i>
<span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
</li>
<li class="program-item active">
<i class="program-item-icon"></i>
<span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
</li>
<li class="program-item active">
<i class="program-item-icon"></i>
<span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
</li>
<li class="program-item">
<i class="program-item-icon"></i>
<span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
</li>
<li class="program-item">
<i class="program-item-icon"></i>
<span class="program-item-label">舞蹈：《名字太长容易被记住的一段尬舞》</span>
</li>
</ul>
<div class="bottom-btn" onclick="action.submitVote()">确认投票</div>
</div>
<!-- 弹框 -->
<div class="dialog-wrap hide">
<div class="dialog-main">
<div class="dialog-close" onclick="action.switchDialog(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" onclick="action.switchDialog(false)">速速联系组委会</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="mobile.js?t=2"></script>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
action.init();
</script>
</body>
</html>