<!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>
<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>
html,body{top:0;left:0;padding: 0;margin: 0;border: 0;height:100%;
background-image: url("./img/bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#show{position: fixed;z-index: 30;top:0;left:0;width:100%;height: 100%;min-height: 570px;}
#index{position: absolute;z-index: 20;top:0;left:0;width:100%;height: 100%;display:none;min-height: 570px;}
#detail{position: absolute;z-index: 10;top:0;left:0;width:100%;height: 100%;display: none;background-color: rgb(240,240,240);padding: 0;min-height: 570px;}
.show-img{margin:20px auto 0 auto;width: 100%;max-width: 375px;}
.show-img img{width: 100%;display:inline-block;height: auto;}
.box{
height: 400px;
width: 100%;
margin-top: 30%;
position: relative;
margin-bottom: 0px;
}
@media screen and (max-width: 320px) {
.box{
height: 400px;
width: 100%;
margin-top: 20%;
position: relative;
margin-bottom:-50px;
}
}
@media screen and (min-device-width: 414px) {
.box{
height: 400px;
width: 100%;
margin-top: 20%;
position: relative;
margin-bottom:50px;
}
}
.box .main{
background-image: url("./img/mian.png");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.box .five{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("./img/five.png");
background-size: 100% auto;
background-repeat: no-repeat;
animation: five 1.5s;
animation-iteration-count: infinite;
}
.box .star{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("./img/star.png");
background-size: 100% auto;
background-repeat: no-repeat;
animation: star 3s;
animation-iteration-count: infinite;
}
.box-bottom{
background: -webkit-linear-gradient(left, #FFE29A , #E0B65F);
width: 258px;
height: 40px;
line-height: 40px;
margin: 0 auto;
border-radius:40px ;
font-size: 14px;
text-align: center;
}
@keyframes five
{
0{
background-image: url("./img/five.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
60% {
background-image: none;
}
100% {
background-image: url("./img/five.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
}
@keyframes star
{
0 { top: 2px ; }
10% { top: 4px ; }
20% { top: 6px ; }
30% { top: 8px ; }
40% { top: 10px ; }
50% { top: 10px ; }
60% { top: 8px ; }
70% { top: 6px ; }
80% { top: 4px ; }
90% { top: 2px ; }
100% { top: 0px ; }
}
#index .head-img-line{ border: 1px solid rgb(130,114,84);border-radius:50%;width:152px;height: 152px;margin: 125px auto 0px auto;position: relative;}
#index .head-img-line .head-img{position:absolute;top:10px;left:10px;border: 1px solid transparent;border-radius:50%;width:130px;height: 130px;overflow: hidden;margin: 0;}
#index .head-img-line .head-img img{width: 140px;height: auto;min-height: 140px;}
.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:#666;padding-left:18px;outline:0 none !important;font-size:16px;}
.form-bottom{position: absolute;width:100%;height: 40px;left: 0;bottom: 40px;text-align: center;z-index:41;}
.form-bottom button{width:298px;height: 35px;border: 1px solid rgb(227,191,117); border-radius: 18px;background-color: rgb(227,191,117);color: #fff;outline:0 none !important;bottom:50px;font-size:16px;}
.detail-bg{margin:110px auto 0 auto;width: 100%;max-width: 308px;max-height: 370px;}
.detail-bg>img{width: 100%;height: auto;}
#detail .content{position: absolute;z-index: 21;top:0px;left:0;width:100%;text-align: center;}
#detail .detail-head{border: 1px solid transparent;border-radius:50%;width:100px;height: 100px;overflow: hidden;margin: 60px auto 0 auto;}
#detail .detail-head>img{width: 110px;height: auto;min-width: 110px;min-height: 110px;}
.detail-realname{font-size: 16px;color:#ffffff;margin-top:30px;height: 30px;}
.detail-lottery-num-txt{font-size: 22px;color:#DFC082;margin-top:50px;}
.detail-lottery-num{font-size: 50px;color:#DFC082;}
.detail-lottery-notice{font-size: 12px;color:#919191;margin-top:50px;}
.sharelogo{display: none;}
</style>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="mobile.js?t=2"></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>
</head>
<body>
<img src="img/logo.jpg" class="sharelogo"/>
<!--开场-->
<div id="show">
<div class="box">
<div class="main"></div>
<div class="star"></div>
<div class="five"></div>
</div>
<div class="box-bottom" onclick="action.openCamera()">开启年会之旅</div>
</div>
<!--签到-->
<div id="index">
<div class="head-img-line">
<dig class="head-img" onclick="action.openCamera()">
<img src="img/pink.jpg" class="head-img-show" />
<input type="hidden" class="data-img" />
</dig>
</div>
<div class="form-data">
<input type="text" value="姓名：陈独秀" class="data-realname" >
</div>
<div class="form-bottom">
<button type="button" onclick="action.submit()">马上签到</button>
</div>
</div>
<!--用户信息-->
<div id="detail">
<div class="content">
<div class="detail-head">
<img src="img/pink.jpg" class="detail-head-img"/>
</div>
<div class="detail-realname"></div>
<div class="detail-lottery-num-txt">抽奖码</div>
<div class="detail-lottery-num"></div>
<div class="detail-lottery-notice">你牢记您的抽奖码</div>
</div>
<div class="detail-bg">
<img src="img/bg-detail.png" />
</div>
<div class="form-bottom">
<button type="button" onclick="action.vote()">节目投票</button>
</div>
</div>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
// var vConsole = new VConsole();
action.init();
$(function() {
$('.data-realname').focus(function(){
if($(this).val() == '姓名：陈独秀') {
$(this).val('');
}
});
$('.data-realname').blur(function(){
$('body,html').animate({ scrollTop: 0 }, 100);
});
})
</script>
</body>
</html>