@extends('layouts/home/app_new')

@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 style='width:100%;'>
<!--  <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 class="sy-img" data-v="{{$v['link_url']}}" style="cursor:pointer;width:100%;height:100%" src='{{$v['pic_url']}}' >
    @endforeach
    </div>
</div>
<div id='index-cen'>
	<div id='left' class='card' style='width:30%'>
		<ul>
         <li><a href='{{URL('/service/design-hub')}}'><img class='left-img' data=1 src='/images/home/before1.png' ></a></li>
		<li><a href='{{URL('/service/photography')}}'><img class='left-img' data=2 src='/images/home/before2.png' ></a></li>
		<li><a href='{{URL('/service/video')}}'><img class='left-img' data=3 src='/images/home/before3.png' ></a></li>
		<li><a href='{{URL('/service/floorplans')}}'><img class='left-img' data=4  src='/images/home/before4.png' ></a></li>
		<li><a href='{{URL('/service/signboard')}}'><img class='left-img' data=5 src='/images/home/before5.png' ></a></li>
		<li><a href='{{URL('/service/printing')}}'><img class='left-img' data=6 src='/images/home/before6.png' ></a></li>
		<li><a href='{{URL('/service/creative-services')}}'><img class='left-img' data=7 src='/images/home/before7.png' ></a></li>
		</ul>
	</div>
	<div id='right' style='width:69%'>
		<div class='s-left card' style='' >
			<a href='{{$ads_img_1['link_url']}}'><img src='{{$ads_img_1['pic_url']}}' style='width:100%;height:100%'></a>
		</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 style='height:5px;clear:both'></div>

@if(!empty($content['content']))
<div id='txt' style='width:1200px;margin:20px 0'>
{!! $content['content'] !!}
</div>
@endif
<div style='' 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;margin-top:5px;margin-bottom:15px' class=''>
<img class=''  src='{{$ads_img_4['pic_url']}}' style='width:100%;height:140px;'>
</div>
@endif


</div>

<div style='clear:both'></div>
<script>
$(function(){
	 $('#slides').slidesjs({
	        width: 1423,
	        height: 468,
	        play: {
	          active: true,
	          auto: true,
	          interval: 6000,
	          swap: true
	        }
	      });
	
	$('.slidesjs-stop').css('display','none')
	$('.slidesjs-navigation').css('display','none')
	$('.slidesjs-play').remove()
	var h = $('.slidesjs-container').height();
	var top = (h+60)+'px';
	$('.slidesjs-pagination').css('top',top);

	onresize = function(){
		var h = $('.slidesjs-container').height();
		var top = (h+60)+'px';
		$('.slidesjs-pagination').css('top',top);
	}
})

$('#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')
	})

$('.sy-img').click(function(){
    var url = $(this).attr("data-v")
    window.open(url,"_blank")
})
</script>
{{--@extends('layouts/home/tawk')--}}
@endsection