onepage_mrhi/tm/compile_dir/%%B3^B3D^B3D542DA%%events_cutscreen.html.php

<?php /* Smarty version 2.6.17, created on 2018-04-23 10:04:21
         compiled from events_cutscreen.html */ ?>
<?php $_smarty_tpl_vars = $this->_tpl_vars;
$this->_smarty_include(array('smarty_include_tpl_file' => "header.html", 'smarty_include_vars' => array()));
$this->_tpl_vars = $_smarty_tpl_vars;
unset($_smarty_tpl_vars);
 ?>
<?php $_smarty_tpl_vars = $this->_tpl_vars;
$this->_smarty_include(array('smarty_include_tpl_file' => "nav.html", 'smarty_include_vars' => array()));
$this->_tpl_vars = $_smarty_tpl_vars;
unset($_smarty_tpl_vars);
 ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/css/swiper.min.css" />

<link rel="stylesheet" type="text/css" href="<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/css/swiper.animate.min.css" />
<script src="<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/js/swiper.jquery.min.js"></script>
<script src="<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/js/swiper.animate.min.js"></script>

<style>
.swiper-container {width:100%; position:absolute;}
.page-screen {
	background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 320px auto;
}
.background_image {
	display: block;
    overflow: hidden;
    width: 100%;
    z-index: 0;
	position: absolute;
}
.upper_image {
	position: absolute;
}
.button_image {
	position: absolute;
}
@-webkit-keyframes right_start {
	0%,30% {opacity: 0;-webkit-transform: translate(10px, 0) rotate(-90deg);}
	60% {opacity: 1;-webkit-transform: translate(0,0) rotate(-90deg);}
	100% {opacity: 0;-webkit-transform: translate(-8px, 0) rotate(-90deg);}
}
@-moz-keyframes right_start {
	0%,30% {opacity: 0;-moz-transform: translate(10px,0) rotate(-90deg);}
	60% {opacity: 1;-moz-transform: translate(0,0) rotate(-90deg);}
	100% {opacity: 0;-moz-transform: translate(-8px,0) rotate(-90deg);}
}
@keyframes right_start {
	0%,30% {opacity: 0;transform: translate(10px,0) rotate(-90deg);}
	60% {opacity: 1;transform: translate(0,0) rotate(-90deg);}
	100% {opacity: 0;transform: translate(-8px,0) rotate(-90deg);}
}

@-webkit-keyframes botton_start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes botton_start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes botton_start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}

.bottom_arrow {
	width: 20px;
	height: 15px;
	position: absolute;
	z-index: 999;
	bottom: 10px;
	left: 50%;
	animation: botton_start 1.5s infinite ease-in-out;
	-webkit-animation: botton_start 1.5s infinite ease-in-out;
	-moz-animation: botton_start 1.5s infinite ease-in-out;
}
.right_arrow {
	width: 20px;
	height: 15px;
	position: absolute;
	z-index: 999;
	right: 10px;
    top: 50%;
	animation: right_start 1.5s infinite ease-in-out;
	-webkit-animation: right_start 1.5s infinite ease-in-out;
	-moz-animation: right_start 1.5s infinite ease-in-out;
}
.music {
	width: 30px;
	height: 30px;
	overflow: hidden;
	position: fixed;
	z-index: 999;
	background: url("<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/img/music.png") no-repeat -30px 0px;
	background-size: 60px 30px;
}
.music.left {top:2%;left:3%;}
.music.right {top:2%;right:3%;}
.music.off {background-position: 0px 0px;}
.mask {background-color:<?php echo $this->_tpl_vars['cutScreenInfo']['loading_bg_color']; ?>
;display: block;height: 100%;position: absolute;width: 100%;z-index: 200;}
.loading{position:relative;text-align:center;top:40%; color:<?php echo $this->_tpl_vars['cutScreenInfo']['loading_text_color']; ?>
;}
.loading i{font-size:30px;}
.loading p{font-size: 12px;}
.swiper-slide {overflow: hidden;}
.ks-input {
	position: fixed;
    top: 20%;
    width: 100%;
    z-index: 990;
	display: none;
}
.ks-input .join_submit_box {
	background: #f2f2f4 none repeat scroll 0 0;
    margin: 0 10px;
	padding: 22px 10px 10px;
}
.input-mask {
	background: #000 none repeat scroll 0 0;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
</style>

<div class="mask">
	<div class="loading">
	<i class="fa fa-spinner fa-pulse"></i>
	<p><span>0</span>%</p>
	</div>
</div>

<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
	<?php if ($this->_tpl_vars['cutScreenInfo']['music_url']): ?>
	<div class="music <?php if ($this->_tpl_vars['cutScreenInfo']['music_position'] == 1): ?>right<?php endif; ?>"></div>
	<?php endif; ?>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<?php $_from = $this->_tpl_vars['pageData']; if (!is_array($_from) && !is_object($_from)) { settype($_from, 'array'); }if (count($_from)):
    foreach ($_from as $this->_tpl_vars['item']):
?>
			<div class="swiper-slide" style="<?php if ($this->_tpl_vars['item']['background_color']): ?>background-color:<?php echo $this->_tpl_vars['item']['background_color']; ?>
<?php endif; ?>">
				<?php if ($this->_tpl_vars['item']['bgimage_url']): ?><img class="background_image" style="" src="<?php echo $this->_tpl_vars['item']['bgimage_url']; ?>
" ><?php endif; ?>
				
				<?php $_from = $this->_tpl_vars['item']['layers']; if (!is_array($_from) && !is_object($_from)) { settype($_from, 'array'); }if (count($_from)):
    foreach ($_from as $this->_tpl_vars['layer']):
?>
					<?php if ($this->_tpl_vars['layer']['url']): ?>
						<?php if ($this->_tpl_vars['layer']['link']): ?>
						<a href="<?php echo $this->_tpl_vars['layer']['link']; ?>
">
						<?php endif; ?>
						<?php if ($this->_tpl_vars['layer']['input_btn']): ?>
						<a class="show_input_btn" href="javascript:;">
						<?php endif; ?>
						<img class="upper_image ani" style=
						"
						width:<?php echo $this->_tpl_vars['layer']['width']; ?>
px;
						height:<?php echo $this->_tpl_vars['layer']['height']; ?>
px;
						<?php echo $this->_tpl_vars['layer']['style']; ?>

						" 
						<?php if ($this->_tpl_vars['layer']['action'] && $this->_tpl_vars['layer']['action'] != 'rest'): ?>
						swiper-animate-effect="<?php if ($this->_tpl_vars['layer']['action'] == 'up'): ?>fadeInUp<?php else: ?>fadeInRight<?php endif; ?>" 
						swiper-animate-duration="0.3s" 
						swiper-animate-delay="0.1s" 
						<?php endif; ?>
						src="<?php echo $this->_tpl_vars['layer']['url']; ?>
"
						>
						<?php if ($this->_tpl_vars['layer']['input_btn']): ?>
						</a>
						<?php endif; ?>
						<?php if ($this->_tpl_vars['layer']['link']): ?>
						</a>
						<?php endif; ?>
					<?php endif; ?>
					
					<?php if ($this->_tpl_vars['layer']['video_url']): ?>
						<iframe class="upper_image ani" width=<?php echo $this->_tpl_vars['layer']['video_width']; ?>
 height=<?php echo $this->_tpl_vars['layer']['video_height']; ?>
 src="<?php echo $this->_tpl_vars['layer']['video_url']; ?>
"
						style="<?php echo $this->_tpl_vars['layer']['style']; ?>
"
						<?php if ($this->_tpl_vars['layer']['action'] && $this->_tpl_vars['layer']['action'] != 'rest'): ?>
						swiper-animate-effect="<?php if ($this->_tpl_vars['layer']['action'] == 'up'): ?>fadeInUp<?php else: ?>fadeInRight<?php endif; ?>" 
						swiper-animate-duration="0.3s" 
						swiper-animate-delay="0.1s" 
						<?php endif; ?>
						frameborder=0 allowfullscreen></iframe>
					<?php endif; ?>
				<?php endforeach; endif; unset($_from); ?>
			</div>
			<?php endforeach; endif; unset($_from); ?>
		</div>
	</div>
	<?php if ($this->_tpl_vars['cutScreenInfo']['cut_fx'] == 'fadeInUp'): ?>
	<img class="bottom_arrow" src="<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/img/arrow.png" >
	<?php endif; ?>
	<?php if ($this->_tpl_vars['cutScreenInfo']['cut_fx'] == 'fadeInRight'): ?>
	<img class="right_arrow" src="<?php echo $this->_tpl_vars['web_cfg']['cdn']; ?>
/public/static/img/arrow.png" >
	<?php endif; ?>
</div>

<div class="ks-input">
<div class="input-mask"></div>
<div class="v_close_btn hide_input_btn" style="right:10px;"></div>
<?php $_smarty_tpl_vars = $this->_tpl_vars;
$this->_smarty_include(array('smarty_include_tpl_file' => "event_forms_template.html", 'smarty_include_vars' => array()));
$this->_tpl_vars = $_smarty_tpl_vars;
unset($_smarty_tpl_vars);
 ?>
</div>

<!--公用提示背景遮罩层-->
<div class="a_cover"></div>

<div class="v_tips_box v_tips_box2" id="error_tips_box">
    <div class="v_close_btn" id="tips_close_btn"></div>
    <p class="tips_msg" id="error_msg">错误信息</p>    
</div>

<!--活动结束提示+按钮-->
<div class="v_tips_box v_tips_box2" id="try_tips_box">
	<div class="v_close_btn" id="tips_close_btn"></div>
	<p>提交成功！</p>
    <p><a href="javascript:;" class="v2_close_btn submit_btn_style">确认</a></p>
</div>

<script>
KISSY.use('node, dom, io, gallery/xplayer/2.1.0/index', function (S, Node, DOM, IO, Xplayer) {
	S.log('image loading start');
	var $ = S.all, slide;
	//loading
	var waitLoadingImgs = <?php echo $this->_tpl_vars['waitLoadingImgs']; ?>
,
		hasLoadingTimes = 0, hasLoadingProgress = 0, loadNum = $(".mask p span");
	
	var runId, waitRunData = [];
	
	updateProgress(15, 100, 0);
	
	var avgTime = Math.round(70/waitLoadingImgs.length);
	
	for (var i = 0; i < waitLoadingImgs.length; i++) {
		var oi = new Image();
		oi.src = waitLoadingImgs[i];
		oi.onload = function () {
			++hasLoadingTimes;
			S.log('image loading ok');
			updateProgress(avgTime, 100, 0);
		};
	}
	var ID = setInterval(function () {
		if (hasLoadingTimes == waitLoadingImgs.length) {
			clearInterval(ID);
			updateProgress(15, 1000, 1);
			S.log('image loading done');
		}
		
	}, 10);
	
	function updateProgress(num, time, isDone) {
		waitRunData.push(num+'-'+time+'-'+isDone);
	}
	
	runQueue();
	
	function runQueue() {
		if (runId > 0) clearInterval(runId);
		
		var time = 0, addnum = 0, tmpnum = 1;
		
		var rundata = waitRunData.shift();
		if (S.isUndefined(rundata)) {
			rundata = '';
		}
		
		rundata = rundata.split('-');
		addnum = rundata[0];
		time = rundata[1];
		isDone = rundata[2];
		var millisec = time/addnum;
		
		runId = setInterval(function () {
			if (tmpnum > addnum) {
				if (isDone == 1) {
					clearInterval(runId);
					loadNum.html(100);
					//
					jQuery(".mask").fadeOut();
					swiperInit();
					return false;
				}
				
				//S.log('runqueue');
				runQueue();
				return;
			}
			++tmpnum;
			++hasLoadingProgress;
			if (hasLoadingProgress > 100) hasLoadingProgress = 100;
			loadNum.html(hasLoadingProgress);
		}, millisec);
	}
	
	//20s
	setTimeout(function () {
		clearInterval(runId);
		loadNum.html(100);
		swiperInit();
		$(".mask").fadeOut();
	}, 15000);
	
	
	<?php if ($this->_tpl_vars['cutScreenInfo']['music_url']): ?>
	var XiamiPlay = new Xplayer({"autoplay": false});
	XiamiPlay.load({
	    'url' : '<?php echo $this->_tpl_vars['cutScreenInfo']['music_url']; ?>
',
	});
	XiamiPlay.play();
	
	$(".music").on('click', function () {
		if ($(this).hasClass('off')) {
			$(this).removeClass('off');
			XiamiPlay.play();
		} else {
			$(this).addClass('off');
			XiamiPlay.pause();
		}
	});
	
	XiamiPlay.on("ended", function(e) {
		XiamiPlay.play();
	});
	<?php endif; ?>
	
	var screenHeight = $(window).height();
	var headerHeight = $(".wrapper-header").height();
	$(".swiper-container").height(screenHeight - headerHeight);
	
	<?php if ($this->_tpl_vars['cutScreenInfo']['cut_fx'] == 'fadeInRight'): ?>
	var direction = 'horizontal';
	<?php else: ?>
	var direction = 'vertical';
	<?php endif; ?>
	var swiper_params = {
		direction : direction // vertical \ horizontal
		, speed: 300
		, onInit: function(swiper){
		    swiperAnimateCache(swiper); 
		    swiperAnimate(swiper); 
		}
		, onSlideChangeEnd: function(swiper){
			swiperAnimate(swiper); 
			if (swiper.isEnd) {
				$('.bottom_arrow, right_arrow').hide();
			} else {
				$('.bottom_arrow, right_arrow').show();
			}
		}
	};
	
	var isSwiper = false;
	function swiperInit () {
		if (!isSwiper) {
			var swiper = new Swiper('.swiper-container', swiper_params);//start swiper
			isSwiper = true;
			slide = $(swiper.slides[swiper.activeIndex]);
		}
	}
	
	$(".bottom_arrow").width();
	
	
	function showErrorMsgBox(msg){
		$(".v_tips_box").fadeOut();
		$("#error_msg").html(msg);
		$("#error_tips_box").show();
		
	}
	
	$(".v_close_btn,.v2_close_btn").on('click', function(){
		$(".v_tips_box,.a_cover").hide();
	});
	IO.on("send",function(){
		showErrorMsg('<i class="fa fa-spinner fa-pulse"></i>');
		$('.a_cover').fadeIn();
	});
	$('#common_submit_btn', slide).on('click', function () {
		var formData = IO.serialize('#ff');
		IO.post('<?php echo $this->_tpl_vars['web_cfg']['domain']; ?>
/?c=EventsCutScreen&a=SubmitForm&events_id=<?php echo $this->_tpl_vars['cutScreenInfo']['id']; ?>
'
			, formData
			, function (data) {
				if (data.ok) {
					showOkMsg();
					$(".ks-input").fadeOut(.3);
				} else {
					showErrorMsg(data.msg);
				}
			}
			, 'json'
		);
		return false;
	});
	
	$(".show_input_btn").on('click', function () {
		$(".ks-input").fadeIn(.3);
	});
	
	$(".hide_input_btn").on('click', function () {
		$(".ks-input").fadeOut(.3);
	});
});

function showOkMsg(){
	$('.a_cover').fadeIn(200);
	$('#try_tips_box').fadeIn(200);
}
function showErrorMsg(data_msg){
	$('#tips_close_btn').show();
	$('#error_msg').html(data_msg);
	$('#error_tips_box').fadeIn(200);
	$('.a_cover').fadeIn(200);
}
</script>
<?php $_smarty_tpl_vars = $this->_tpl_vars;
$this->_smarty_include(array('smarty_include_tpl_file' => "bottom.html", 'smarty_include_vars' => array()));
$this->_tpl_vars = $_smarty_tpl_vars;
unset($_smarty_tpl_vars);
 ?>