{template 'include/header'}
<div class="container container-fill">

<style type='text/css'>
	#poptip { position: fixed; top:40%;left:50%;width:160px;margin-left:-80px;height: 27px;background:#000; opacity: 0.7;filter:alpha(opacity=0.7); color:#fff;z-index: 999;  border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
	#poptip_content { position: fixed; top:40%;left:50%;width:160px;margin-left:-80px; height: 27px; color:#fff;text-align:center;font-size:14px;z-index: 9909}
	.hero {background-color: #fff;}
	.menubar {overflow: hidden;padding:5px 0 10px;background: #fff;border-bottom: 1px solid #e8e5e1;margin-bottom: 8px;margin-top:-10px;clear: both;}
	.menubar .li{float: left;width:25%;text-align: center;color: #393939;font-size:12px;}
	.and_healthy {width: 42px;height:42px;background-position: -91px -82px;}
	.and_month {width: 42px;height:42px;background-position: -2px -65px;}
	.and_myrecord {width: 42px;height:42px;background-position: -91px -40px;}
	.and_start {width: 42px;height:42px;background-position: -46px -65px;}
	.and_img {display: inline-block;overflow: hidden;background-repeat: no-repeat;background-size: 137px 128px;background-image: url(<?php echo MODULE_URL;?>template/mobile/img/and_img_2_11.png);}
</style>
<script language='javascript'>
	function tip(msg,autoClose){
		var div = $("#poptip");
		var content =$("#poptip_content");
		if(div.length<=0){
			div = $("<div id='poptip'></div>").appendTo(document.body);
			content =$("<div id='poptip_content'>" + msg + "</div>").appendTo(document.body);
		}else{
			content.html(msg);
			content.show(); div.show();
		}
		if(autoClose) {
			setTimeout(function(){
				content.fadeOut(500);
				div.fadeOut(500);
			},1000);
		}
	}
	function tip_close(){
		$("#poptip").fadeOut(500);
		$("#poptip_content").fadeOut(500);
	}
</script>
<script language="javascript" src="<?php echo MODULE_URL;?>template/mobile/js/touchslider.min.js"></script>
<script language="javascript" src="<?php echo MODULE_URL;?>template/mobile/js/swipe.js"></script>

<style>
.td_a { height:7em; text-align: center}
 /* clock */
.clock{display:inline-block;float:left;height:50px;width:auto;margin:0 1px 0 4px; line-height:normal !important;color:#fff;font-family:"Lato", sans-serif;}
.clock div{position:relative;float:left;background:#08070c; color:#fff;border-radius:0px;width:15px;height:22px;line-height:24px;text-align:center;font-size:13px;margin:13px 2px 0px 0;}
.bor_btm, .bor_top, .bor_left, .bor_right{position: relative;}
.bor_btm:after, .bor_top:after, .bor_left:after, .bor_right:after{content: '';position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }
.bor_btm:after{border-bottom: 1px solid #e7e7e7;}
.bor_top:after{border-top: 1px solid #e7e7e7;}
.bor_left:after{border-left: 1px solid #e7e7e7;}
.bor_right:after{border-right: 1px solid #e7e7e7;}
.bck_btm:after{content: "";display: block;position: absolute;left: -50%;width: 200%;height: 1px;background: #e7e7e7;-webkit-transform:scale(0.5);}
.gy_footer{width: 100%;height: 50px;position: fixed;bottom: 0;left: 0;background: #fff;}
.gy_footer_li{width: 25%;text-align: center;list-style: none;float: left;}
.gy_footer_li_img{width: 22px;margin-top: 6px;}
.gy_footer_li_p{font-size: 12px;line-height: 22px;color: #000;}
.gy_footer_lic p{color: #43ac43 !important;}
.gy_logo img{height: 26px;}
.i_d_t_i{height: 36px;margin-top: 2px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
.progress-bar-warning {background-color: #43ac43 !important;}
.i_d_5_1_r .title{margin: 0 0 16px !important; overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:1;}
.i_d_5_1_l{height: 70px;overflow: hidden;border-radius: 5px;}
.i_d_5_1_l img{min-height: 100%;margin-top: 0px !important;}

.header-button{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;text-align: left;text-transform: capitalize;position: relative;display: block;width: 26px;height:46px;margin: 0;padding: 0;outline: none;border: none;cursor: pointer;background:url(<?php echo MODULE_URL;?>template/mobile/img/flcz.png) no-repeat center center #fff;background-size: 100%; margin:0 3% 0 0;text-indent: -119988px;}

#toggle-search {float: right;}
#toggle-search.open:after {top: 26px;}
#toggle-search:after {-moz-transition: top, 0.5s;-o-transition: top, 0.5s;-webkit-transition: top, 0.5s;transition: top, 0.5s;position: absolute;top: 52px;left: 50%;margin-left: -8px;content: "";border-color: transparent transparent #f2f2f2;border-style: solid;border-width: 8px 8px 12px;}
#search-form {-moz-transition: max-height, 0.5s;-o-transition: max-height, 0.5s;-webkit-transition: max-height, 0.5s;transition: max-height, 0.5s;position: absolute;top: 46px;left: 0;width: 100%;max-height: 0;overflow: hidden;background-color: #f2f2f2;z-index: 10;}
#search-form.open {max-height: 46px;}
.top_over{width: 100%;max-width: 100%;background:#f2f2f2; overflow-x:auto;font-size: 13px;height: 50px;line-height: 50px;}
.top_over1{width: 700px;}
.top_over a{padding: 12px 10px; color: #666;-webkit-text-size-adjust: none;}
.top_over a:hover{color: #43ac43;border-bottom:2px solid #43ac43;}
.top_a_hover{color: #43ac43;border-bottom:2px solid #43ac43;}
.i_d_2{background: #fff;}
.swipslider{padding-top: 50% !important;}
.swipslider .sw-slides{margin: 0 !important;}
.sw-bullet{bottom: 2% !important;}
.sun_dr_d1{width: 100%;margin: 4px 0 4px;height: 100px;overflow: hidden;display: flex;justify-content: center;align-items: center;}
.sun_dr_d1 img{min-width:100%;max-width:100%;min-height: 100px;}
</style>
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/swipeslider.css"><!-- banner轮播 -->
<link rel="stylesheet" href="<?php echo MODULE_URL;?>template/mobile/css/jquery.skippr.css">
 
	<div class="i_d_2" style="position:relative; padding-left:10px !important;">
		<div class="f_r">
			<div style="display:inline-block;float:left">累计获得</div>
			<div class='clock'></div> 份爱心
			<label id="shuzi" style="display:none;">{$total_fund}</label> 
		</div>
		<div style="clear:both"></div>
    	<div class="f_l gy_logo"><img src="{php echo tomedia($set['gy_logo']);}"></div>
     	<div class="clear"></div>
    </div>
	
	<div class="jq22-container">
		<article class="container1">
		    <section>   
		      <figure id="full_feature" class="swipslider">
		        <ul class="sw-slides">			           
					{loop $slides $slide}
						<li class="sw-slide" onclick="javascript:location.href='{$slide['slide_url']}'">
							<img src="{$_W['attachurl']}{$slide['slide_pic']}" title="{$slide['slide_title']}"/>
						</li>
					{/loop}
		        </ul>
		      </figure>
		    </section>
		</article>
	</div>

    
	
		<!--
	<div class="menubar">
		<a href="{php echo $this->createMobileUrl('agree')}">
			<div class="li">
				<div class="and_img and_healthy"></div>    
					<div>爱心条款</div>   
			</div>
		</a>
		<a href="{php echo $this->createMobileUrl('catmonth', array('class_name'=>'热点项目'));}">
			<div class="li">    
				<div class="and_img and_month"></div>     
				<div>热点项目</div>   
			</div>
		</a>   
		<a href="{php echo $this->createMobileUrl('home');}">
			<div class="li">    
				<div class="and_img and_myrecord"></div>     
				<div>善款公开</div>   
			</div>
		</a>   
		<a href="{php echo $this->createMobileUrl('founder');}">
			<div class="li">    
				<div class="and_img and_start"></div>     
				<div>发起筹款</div>   
			</div>
		</a>  
	</div>-->
	<!--推荐项目-->
	<div class="i_d_3" style="height:auto !important;">
	{loop $feature_list $fea}
     	<a href="{php echo $this->createMobileUrl('per', array('pro_id'=>$fea['pro_id']));}"> 
     		<div class="i_d_3_1" style=" border-right:1px solid #f7f7f7; ">
	     		<div class=" i_d_3_1_img" style=" width:94%;height:100px;overflow:hidden;border-radius:5px; margin:0 3% !important; box-sizing:border-box;"> 
	     			<img src="{$_W['attachurl']}{$fea['pro_feature']}" style="min-width:100%;min-height:100px;margin:0 !important; box-sizing:border-box;"/> 
	     		</div>
	      		<div class=" i_d_3_1_text" style="width:100% !important; padding-top:5px; padding-left:10px !important; box-sizing:border-box;">
	      			<span class="i_d_t_i">{$fea['pro_name']}</span>
	     			<div style="margin-top:4px;"> 共￥<span style="color:#d0021b;">{$fea['pro_fund']}</span>元爱心</div>
	     		</div>
	      		<div class="clear"></div>
      		</div>
     	</a>
	{/loop}  	
      <div class="clear"></div>
    </div>
	<div style="position:relative;background:#fff;width:100%;height:46px;margin-top:10px;" class="bck_btm">
		<div class="list-tips" style='float:left;width:50%;font-size:14px;line-height:46px; color:#565a5d;background:#fff;padding-left:3%;'>公益项目</div>&nbsp;
		<button id="toggle-search" class="header-button">分类查找</button></li>
		<div class="clearfix"></div>
		<form id="search-form" class="bck_btm" action="">
			<div class="top_over">
				<div class="top_over1">
					<a href="javascript:;" class="top_a_hover" style="margin-left:10px;color:#43ac43" id="all" onclick="proshow();">全部</a>
					{loop $classes $val}					
					<a href="javascript:;" onclick="proshow('{$val['class_id']}');" id="{$val['class_id']}" >{$val['class_name']}</a>
					{/loop}
					<div class="clearfix"></div>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src='<?php echo MODULE_URL;?>/template/mobile/js/jquery.min.js'></script>
	<script type="text/javascript" src="<?php echo MODULE_URL;?>/template/mobile/js/swipeslider.min.js"></script><!-- banner图片轮播 -->      
	<script>
		$(function() {
			new Swipe($('#banner_box')[0], {
				speed:500,
				auto:3000,
				callback: function(){
					var lis = $(this.element).next("ol").children();
					lis.removeClass("on").eq(this.index).addClass("on");
				}
			});
			var value = $("#shuzi").text().replace(/[^0-9]/ig,""); 
			for (var i = 0; i < value.length; i++) {
		   		$(".clock").append(
		   			"<div class="+"'shake shake-slow'"+">"+value[i]+"</div>"
		   		);
	   		}
		});

		//banner轮播开始
		$(window).load(function() {
	      $('#full_feature').swipeslider();
	      $('#content_slider').swipeslider({
	        transitionDuration: 600,
	        autoPlayTimeout: 10000,
	        sliderHeight: '300px'
	      });
	      $('#responsiveness').swipeslider();
	      $('#customizability').swipeslider({
	        transitionDuration: 1500, 
	        autoPlayTimeout: 4000, 
	        timingFunction: 'cubic-bezier(0.38, 0.96, 0.7, 0.07)',
	        sliderHeight: '30%'});
	    });
	    //banner轮播结束
	</script>
	<script type="text/javascript">
		(function($) {
			// Handle click on toggle search button
			$('#toggle-search').click(function() {
				$('#search-form, #toggle-search').toggleClass('open');
				return false;
			});

			// Handle click on search submit button
			$('#search-form input[type=submit]').click(function() {
				$('#search-form, #toggle-search').toggleClass('open');
				return true;
			});

			// Clicking outside the search form closes it
			$(document).click(function(event) {
				var target = $(event.target);
		  
				if (!target.is('#toggle-search') && !target.closest('#search-form').size()) {
					$('#search-form, #toggle-search').removeClass('open');
				}
			});
		})(jQuery);
		
		function proshow(id){  
			if(id=='' || id==undefined){
				$('#all').addClass('top_a_hover');
				$('#all').css('color','#43ac43');
				
				$('#all').siblings().css('color','#000');
				$('#all').siblings().removeClass('top_a_hover');
			}else{
				$('#'+id+'').css('color','#43ac43');
				$('#'+id+'').addClass('top_a_hover');
			
				$('#'+id+'').siblings().css('color','#000');
				$('#'+id+'').siblings().removeClass('top_a_hover');
			}
			
			$.ajax({
				type: "post",
				url: '{php echo $this->createMobileUrl("doWelfare",array());}',
			 	data:{'id': id},
			 	dataType: 'json',
			 	success: function(result){
					var options = '';					
					$.each(result.pro_list,function(idx,item){  
						var math = Math.round((item.pro_fund/item.pro_goal)*10000)/100;
						var url = "{php echo $this->createMobileUrl('per', array());}&pro_id="+item.pro_id;
						var src	= result.url+item.pro_feature;						
						options += '<div class="i_d_5"style=""><div class="i_d_5_1"style="padding: 16px 15px 16px 10px;"><a href="'+url+'"><div class="i_d_5_1_l"><img src="'+src+'"></div><div class="i_d_5_1_r"style="padding-right:0 !important;"><div><div><span class="title">'+item.pro_name+'</span></div></div><div style="padding:0 !important; margin:-10px 0 !important;"><div class="progress float_l"style="height:4px; width:74%; margin-top:8px; margin-bottom:15px;"><div class="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="'+item.pro_rate+'"aria-valuemin="0"aria-valuemax="100"style="width: '+item.pro_rate+'%;"></div></div><div class="float_r"style="vertical-align:bottom; width:25%; overflow:hidden; padding-top:0px; text-align:right; padding-right:0px; color:#43ac43;"><span id="bfb_show">'+math+'</span>%</div><div class="clear"></div></div><div class="clear"></div><div style="margin-top:5px;"><div class="float_l i_show_li">共<span style="color:#d0021b;">￥'+item.pro_fund+'</span>元爱心</div><div class="float_r i_show_li">目标<span style="color:#d0021b;">'+item.pro_goal+'</span>元</div></div></div><div class="clear"></div></a></div></div>';	
					})	
					$("#list_rec").html(options);
					$('#toggle-search').removeClass('open');
					$('#search-form').removeClass('open');
				}
		   	})	
		
		}
	</script>
	
	<div class="shopping-main" style="padding:0;margin-top:-20px;">
 		<div class="list" id="list_rec">
 		{loop $pro_list $list}
			<div class="i_d_5" style="">
  				<div class="i_d_5_1" style="padding: 16px 15px 16px 10px;">
   					<a href="{php echo $this->createMobileUrl('per', array('pro_id'=>$list['pro_id']));}">
    					<div class="i_d_5_1_l">
    						<img src="{$_W['attachurl']}{$list['pro_feature']}">
    					</div>
    					<div class="i_d_5_1_r" style="padding-right:0 !important;">
    						<div>
        						<div><span class="title">{$list['pro_name']}</span></div>
    						</div>
    						<div style="padding:0 !important; margin:-10px 0 !important;">
    							<div class="progress float_l" style="height:4px; width:74%; margin-top:8px; margin-bottom:15px;">
      								<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{$list['pro_rate']}" aria-valuemin="0" aria-valuemax="100" style="width: {$list['pro_rate']}%;min-width:0px;"> 
      								</div>
    							</div>
    							<div class="float_r" style="vertical-align:bottom; width:25%; overflow:hidden; padding-top:0px; text-align:right; padding-right:0px; color:#43ac43;">
    								<span id="bfb_show">{php echo round($list['pro_fund']/$list['pro_goal'],4)*100;} </span>%
    							</div>
    							<div class="clear"></div>
    						</div>
    						<div class="clear"></div>
    						<div style="margin-top:5px;">
     							<div class="float_l i_show_li">
    								共<span style="color:#d0021b;">￥{$list['pro_fund']}</span>元爱心
    							</div>
    							<div class="float_r i_show_li">
    								目标<span style="color:#d0021b;">{$list['pro_goal']}</span>元
    							</div>
    						</div>
    					</div>
    					<div class="clear"></div>
   					</a> 
  				</div>
			</div>
	  	{/loop}
	   </div>
	</div>

	<?php if(!empty($adv)) {?>
	<div class="adv" style="width:100%;text-align:center;">
		<div style="margin:10px 0 0 0;position:relative;">
			<span id="adv_close" style="display:inline-block;color:#fff;width:18px;height:18px;border-radius:50%;background-color:rgba(216,214,214,.6);position:absolute;right:1px;top:1px;cursor:pointer">X</span>
			<a href="{$adv['adv_link']}"><div class="sun_dr_d1"><img alt="{$adv['adv_title']}" src="{$_W['attachurl']}{$adv['adv_pic']}"></div></a>
		</div>
	</div>
	<?php } ?>

	<script src="<?php echo MODULE_URL;?>/template/mobile/js/jquery.skippr.min.js"></script>
	<script>
	    $(document).ready(function() {
	        $("#random").skippr();
	    });
	</script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 	{php echo register_jssdk(false);}
	<script type="text/javascript">
	    initShare();
	    function initShare(){
	        wx.ready(function () {
	            sharedata = {
	                title: "欢迎进入{$set['gy_name']}主页",
	                desc: "您的每一次善举，都会帮到更多的人，公益事业，感谢有您！",
	                link: window.location.href,
	                imgUrl: "{$_W['attachurl']}{$set['gy_logo']}",
	                success: function(){

	                },
	                cancel: function(){
	                    
	                }
	            };
	            wx.onMenuShareAppMessage(sharedata);
	            wx.onMenuShareTimeline(sharedata);
	        });
	    }
	</script>
	{template 'include/footer'}
	
</div>
    <div style="height:50px;"></div>
	<div class="gy_footer">
		<li class="gy_footer_li bor_top gy_footer_lic">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_11.png">
			<p class="gy_footer_li_p">首页</p>
		</li>
		<a href="{php echo $this->createMobileUrl('founder');}" style="color:#e7e7e7;"><li class="gy_footer_li bor_top">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_4.png">
			<p class="gy_footer_li_p">线索</p>
		</li></a>
		<a href="{php echo $this->createMobileUrl('looks');}" style="color:#e7e7e7;"><li class="gy_footer_li bor_top">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_2.png">
			<p class="gy_footer_li_p">公益天地</p>
		</li></a>
		<a href="{php echo $this->createMobileUrl('home');}" style="color:#e7e7e7;"><li class="gy_footer_li bor_top">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_3.png">
			<p class="gy_footer_li_p">我</p>
		</li></a>
	</div>
</body>
</html>