@{layout layout}
@set header{
	
	@}
@set body{
    <div class="banner">
        @var m is d.GenMod("banner"){
        <div class="brandd" @{m.Attrs}>
            <a class="btnleft amn3"></a>
            <ul class="pic" >
                @for n in m.Items{
                <li style="background-image: url(@{n.Image})"></li>
                @}
            </ul>
            <a class="btnright amn3"></a>
        </div>
        @}
    </div>
    <script type="text/javascript">
        var picnum=0;
        var BannerTime=4000;
        $(function(){
            BannerTimer = setTimeout(BanliAuto,BannerTime);
            $('.btnright').click(function(){
                clearTimeout(BannerTimer);
                picnum++;
                BanliShow();
                BannerTimer = setTimeout(BanliAuto,BannerTime);
            })
            $('.btnleft').click(function(){
                clearTimeout(BannerTimer);
                picnum--;
                BanliShow();
                BannerTimer = setTimeout(BanliAuto,BannerTime);
            })
        })
        function BanliAuto(){
            picnum++;
            BanliShow();
            BannerTimer = setTimeout(BanliAuto,BannerTime);
        }
        function BanliShow(){
            if(picnum>3)
            {
            $('.banner .pic').css('left',0);
            picnum=1;
            }
            if(picnum<0)
            {
            $('.banner .pic').css('left',-5760);
            picnum=2;
            }
            $(".banner .pic").animate({ left: -picnum * 1920 }, 500);
        }
    </script>
<div class="box1">
		@var m is d.GenMod("index_about"){
		<div class="w1200" style="position: relative;" @{m.Attrs}>
			<div class="box1left">
				<img src="@{m.Items[0].Image}">
			</div>
			<div class="box1right">
				<div class="title">
					<h1>COMPANY PRIFILE</h1>
					<h2>公司简介</h2>
				</div>
				<div class="cont" >
					<h1>@{m.Items[1].Text}</h1>
					<h2>@{m.Items[2].Text}</h2>
					<span>@{m.Items[3].Text}</span>
					<a href="@{m.Items[4].URL}">查看更多</a>
				</div>
			</div>
		</div>
		@}
	</div>
	<div class="box2">
		
	</div>
	<div class="box3">
		<div class="w1200">
			<div class="box-title">
				<h1>产品中心</h1>
				<span>PRODUCT CENTER</span>
			</div> 
            @var m is d.CateMod("index_prodnav"){
			<ul class="prodnav" @{m.Attrs}>
				@for n in m.Items{
				<a href="@{n.URL}">@{n.Text}</a>
				@}
			</ul>
			@}
			@var m is d.ProductMod("index_prodlsit"){
			<div class="brand" @{m.Attrs}>
				<ul class="prodlist amn3" id="List">
					@for n in m.Items{
					<li>
						<a href="@{n.URL}">
						<img src="@{n.Image}">
						<h1 class="title">@{n.Text}</h1>
						<span>@{cut n.Introduce,12}......</span>
						</a>
					</li>
					@}
				</ul>
				<ul class="btn">
					<li class="prev" id="Prev"></li>
					<li class="next" id="Next"></li>
				</ul>
			</div>
			@}
		</div>
		<script type="text/javascript">
			$(function(){
				var prodtotal;
				var	prodnum=0;
				prodtotal=$("#List li").length;
				$("#List").css("width",310*prodtotal);
				$("#Prev").click(function(){
					prodnum--;
					if(prodnum<0)
					 {prodnum=0;}
					$('#List').css('left',prodnum*-300);
				})
				$("#Next").click(function(){
					prodnum++;
					if(prodnum>(prodtotal-4))
					 {prodnum=prodtotal-4;}
					$('#List').css('left',prodnum*-300);
				})
			})

		</script>
	</div>
	<div class="box4">
		<div class="w1200">
			<div class="box-title">
				<h1>关于华海</h1>
				<span>ABOUT HUAHAI</span>
			</div>
			<ul class="aboutlist">
			@var m is d.GenMod("index_gsry"){
				<li @{m.Attrs}>
					<a href="@{m.Items[0].URL}">
						<img src="@{m.Items[1].Image}">
						<h1>@{m.Items[2].Text}</h1>
						<span>@{m.Items[3].Text}</span>
					</a>
				</li>
			@}
			@var m is d.GenMod("index_cjsb"){
				<li @{m.Attrs}>
					<a href="@{m.Items[0].URL}">
						<img src="@{m.Items[1].Image}">
						<h1>@{m.Items[2].Text}</h1>
						<span>@{m.Items[3].Text}</span>
					</a>
				</li>
			@}
			@var m is d.GenMod("index_qywh"){
				<li @{m.Attrs}>
					<a href="@{m.Items[0].URL}">
						<img src="@{m.Items[1].Image}">
						<h1>@{m.Items[2].Text}</h1>
						<span>@{m.Items[3].Text}</span>
					</a>
				</li>
			@}
			</ul>
		</div>
	</div>
	<div class="box5">
		
	</div>
	<div class="box6">
		<div class="w1200">
			<div class="indexbo1">
				<dl class="index-title">
					<dt>
						<span class="sp1">企业新闻</span>
						<span class="sp2">Company news</span>
					</dt>
					<dd><a href="/news/企业新闻/">MORE></a></dd>
				</dl>
				<div style="width: 590px;height: 491px;position: relative;overflow: hidden;margin-top:31px">
				@var m is d.NewsMod("index_qyxw"){
				<ul class="newslist" @{m.Attrs} style="position: absolute;top: 0;left: 0;margin-top:0px" id="List1">
					@for n in m.Items{	
					<li>
						<a href="@{n.URL}">
						<img src="@{n.Image}">
						<h1>@{n.Text}</h1>
						<span>@{n.Introduce}</span>
						</a>
					</li>
					@}
				</ul>
				@}
				</div>
			</div>
			<script>
				 $("#List1").css({top:-165});
					prodmove=setInterval(prodrun_left,3000);
					function prodrun_left(){
                    $("#List1").stop().animate({top:-330},function(){
                        $("#List1").css({top:-165})
                        $("#List1 li:last").after($("#List1 li:first"))
                        })
                    }
			</script>
			<div class="indexbo2">
				<dl class="index-title">
					<dt>
						<span class="sp1">行业动态</span>
						<span class="sp2">Industry dynamics</span>
					</dt>
					<dd><a href="/news/行业动态/">MORE></a></dd>
				</dl>
				<div class="indexbox2-cont">
					<div style="width: 550px;height: 362px;">
						<img src="@{d.SkinPath}/static/images/newspic.jpg">
					</div>
					<div style="width: 100%;height: 120px;position: relative;overflow: hidden;margin-top: 18px;">
						@var m is d.NewsMod("index_hydt"){
						<ul class="newslist2" @{m.Attrs} id="List2"  style="position: absolute;top: 0;left: 0;margin-top:0px">
							@for n in m.Items{
							<li><a href="@{n.URL}">@{n.Text}</a></li>
							@}
						</ul>
						@}
					</div>
					
				</div>
			</div>
			<script>
				$("#List2").css({top:-40});
				   prodmovea=setInterval(prodrun_lefta,3000);
				   function prodrun_lefta(){
				   $("#List2").stop().animate({top:-80},function(){
					   $("#List2").css({top:-40})
					   $("#List2 li:last").after($("#List2 li:first"))
					   })
				   }
		   </script>
		</div>
	</div>
	<div id="con_one_2" class="district" style="height:auto;width:1257px;margin:0 auto">
                            <h3 style="font-weight: normal; color: #666;cursor:pointer;margin-bottom:20px" onclick="" >地区分站</h3>
                      @for m in d.SiteAreas {
                            <a  href="@{m.URL}" title="@{m.Text}" style="margin-right:30px">@{m.Text}</a>
                        @}
    </div>
    <div style="font-weight: normal; color: #666;cursor:pointer;">
    	友情链接：
    	<a href="http://www.tjlvban.com" target="_blank">花纹铝板</a> 
    	<a href="http://www.jstlgwt.com" target="_blank">合金管</a> 
    </div>
	@}