@extends('layouts/home/app')

@section('title')
{{trans('common.title_index')}}
@endsection

@section('content')
        <!-- 图片-->

<!-- 图片-->
<style>
 #slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(images/home/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
    
	.card ul li{border-bottom:2px solid #e9e9e9}


</style>

<div class='' style='position:relative;'>



</div> 
<!-- 首页轮播 -->
<div style=''>
<!--  <div class='lb-item'>
	<img class='it1' src='images/home/lb1.jpg' style='width:100%;height:80%'>
	<img class='it2' src='images/home/lb2.jpg' style='width:100%;height:80%;display:none'>
	<img class='it3' src='images/home/lb3.jpg' style='width:100%;height:80%;display:none'>
	<img class='it4' src='images/home/lb4.jpg' style='width:100%;height:80%;display:none'> -->
	<!--     <img id='close' src='/images/home/close.png' style='position:absolute;z-index:9999;left:95%;width:60px;max-width:80px;cursor:pointer'>
	--> 
	<div id="slides" style='background:#f9f9f9'>
     	
	@foreach($b_images as $k=>$v)
	<img src='{{$v['pic_url']}}'>
    @endforeach
    </div>
</div>
<div>

</div>



    
<!-- 图片end-->


<!-- 介绍栏 -->
<div id='desc'>

<div class='container'>
<div class='main' style='width:100%'>

<div id='left' class='card' style='width:30%'>
<ul>
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=1 src='/images/home/before1.png' ></a></li>	
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=2 src='/images/home/before2.png' ></a></li>
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=3 src='/images/home/before3.png' ></a></li>
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=4  src='/images/home/before4.png' ></a></li>
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=5 src='/images/home/before5.png' ></a></li>
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=6 src='/images/home/before6.png' ></a></li>
<li><a href='{{URL('/article')}}/{{$v['id']}}'><img class='left-img' data=7 src='/images/home/before7.png' ></a></li>
</ul>

</div>

<div id='right' style=''>

<div class='s-left card' style='' >
<img src='{{$ads_img_1['pic_url']}}' style='width:100%;height:100%'>
</div>

<div class='s-right card' style=''>
	<ul style=''>
		<li style='padding-top:13%'><span>LATEST</span></li>
		@foreach($cen_list as $k=>$v)
		<li>
			<p style='color:gray;'>{{date('d M Y',strtotime($v['created_at']))}}</p>
			<p ><a style='color:#fff' href='{{URL('article/news')}}/{{$v['id']}}'>{{$v['title']}}</a></p>
		</li>
		@endforeach
	</ul>
</div>

<div class='s-bottom card' style=''>
<a href='{{$ads_img_2['link_url']}}'><img class='card' src='{{$ads_img_2['pic_url']}}'  style='width:100%;height:100%'> </a>
</div>



</div>

</div>

<div style='width:100%;float:left' class='ad-items'>
@foreach($dis_cen_list as $k=>$v)
<div class='ad-item card' @if($k%4 == 3) style='margin-right:0px'  @endif>
	<a href='{{$v['link_url']}}'><img class='card' src='{{$v['pic_url']}}' style=""></a>
</div>
@endforeach

</div>

@if(isset($ads_img_4['pic_url']))
<div style='width:100%;float:left' class='gg card'>
<a href='{{$v['link_url']}}'><img class='card' src='{{$ads_img_4['pic_url']}}' style='width:100%;height:140px'></a>
</div>
@endif	
</div>
</div>	
<!-- 介绍栏end -->

<!-- 展示栏 -->
@if(count($dis_img_list)>0)
<div id='display'>
		<!-- <p style='font-size:18px;text-align:center;font-weight:bold;margin-top:20px'>DISPLAY DEMO</p> -->
		<div class='display'>
			<a href='{{$dis_img_list[0]['link_url']}}'><img src='{{$dis_img_list[0]['pic_url']}}'></a>
		</div>
		
	
</div>
@endif
<!-- 展示栏end -->


<!-- 资讯栏-->
<!-- <div id='con'  style='color:#fff;background:url({{$back_list[0]['pic_url']}})'>
    <div class='container'>
        @foreach($categorys as $ak=>$av)
        
        <div class='@if($ak ==0) njx @else  jx @endif' style=''>
                <h4 >{{$av['name']}} </h4>
                @foreach($av['articles'] as $k=>$v)
                <p style='color:#fff'>- <a style='color:#fff' href="{{URL('article')}}/{{$v['id']}}">{{$v['title']}}</a></p>
				@endforeach
            </div>
        
        @endforeach  
    </div>
    </div> -->
    <!-- 资讯栏end-->
 <script>

$(function(){


	$('#left li img').mouseover(function(){
		var i = $(this).attr('data');
		
		$(this).attr('src','/images/home/after'+i+'.png');
		//$(this).siblings().attr('src','/images/home/before.jpg')
	});

	$('#left li img').mouseout(function(){
		var i = $(this).attr('data');
		
		$(this).attr('src','/images/home/before'+i+'.png')
	})

	$('#close').click(function(){
		$('#slides').hide(1000);
	})

	setInterval(function(){
		$('.it1').fadeOut("3000");
		$('.it2').fadeIn("3000");
	},'2000')
	
	 $('#slides').slidesjs({
	        width: 940,
	        height: 320,
	        play: {
	          active: true,
	          auto: true,
	          interval: 6000,
	          swap: true
	        }
	      });
	
	$('.slidesjs-stop').css('display','none')
	$('.slidesjs-navigation').css('display','none')
	$('.slidesjs-play').remove()
})
</script>

@endsection