{extend name="default/base" /}

{block name="meta"}
<title>{:listSEO(999)['stitle']}</title>
<meta name="description" content="{:listSEO(999)['sdesc']}">
<meta name="Keywords" content="{:listSEO(999)['skeyword']}">

<link rel="preload" href="/application/home/view/default/images/img7.png" as="image">
<link rel="preload" href="/upload/ztyImg/2022-07/62d14c371a30f.jpg" as="image">
<link rel="preload" href="/upload/ztyImg/2022-07/62d14c2aacee8.jpg" as="image">
<link rel="preload" href="/upload/ztyImg/2022-07/62d14c4600754.jpg" as="image">
<link rel="preload" href="/upload/adspic/2022-07/62c92bbcd808c.jpg" as="image">
<link rel="preload" href="/upload/adspic/2022-07/62cff91e5ab22.jpg" as="image">
<link rel="preload" href="/upload/adspic/2022-07/62cff91b01056.jpg" as="image">

{/block}


{block name="main"}
<h1 style="width: 0;height: 0;overflow: hidden;">{:listSEO(999)['seo_h1']}</h1>

<div class="content">

	<!-- banner -->
	<div class="banner">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				
				{wst:ads code="ban_index" cache='86400' num='10'}
				<div class="swiper-slide">
					<img src="__ROOT__/{$vo.adFile}" title="{$vo.ads_alt}" alt="{$vo.ads_alt}" class="bj pc">
					<img src="__ROOT__/{$vo.adImg}" title="{$vo.ads_alt}" alt="{$vo.ads_alt}" class="bj app">
					{if $vo.adName}
					<div class="foot-container pc">
						<div class="rq">
							<div class="rq1">
								<p class="p1">{$vo.adName}</p>
								<p class="p2">{$vo.adName2}</p>
							</div>

							<div class="rq2">
								<span class="p3">{$vo.adName3}</span>
								<div></div>
								<span class="p4">{$vo.adDesc}</span>
							</div>
						</div>
					</div>
					{/if}
				</div>
				{/wst:ads}
				
			</div>
			<div class="swiper-button-prev pc"></div>
			<div class="swiper-button-next pc"></div>
			<div class="swiper-pagination"></div>
		</div>
	</div>


	{include file="default/demo/style1" /}
	
	<div class="content4">
		<div class="foot-container">
			<div class="rq">
				<div class="rq1 fd" data-aos="fade-up" data-aos-delay="100">

                    {volist name="xilie" id="vol" key="ks"}
					<div {if $ks == 1}class="an"{/if}>
						<img datatype="img" src="/{$vol.itemImg}" alt="{$vol.itemName}">
					</div>
					{/volist}
				</div>
                {volist name="xilie" id="vol" key="ks"}
				<div class="rq2 {if $ks == 1}xs{/if} fd" data-aos="fade-up" data-aos-delay="200">
					<div class="rq3">

                        {volist name="vol.son" id="val" key="ks2"}
						<div class="mk {if $ks2 == 1}on2{/if}">
							<p><img datatype="img" src="/{$val.catImg}" alt="{$val.catName}">{$val.catName}</p>
						</div>
						{/volist}

					</div>
					<div class="rq4">
						{volist name="vol.son" id="val" key="ks2"}

                              {volist name="val.list" id="vols" key="ks3"}
                              {if $ks3 == 1}
                              <a href="{:Url('home/product/detail','id='.$vols.goodsId)}" class="{if $ks2 == 1}on{/if}">
                              <img src="/{$vols.goodsImg2}" title="{$vols.goodsName}" alt="{$vols.goodsName}" class="{if $ks3 == 1}on{/if}">
                              </a>
                              {/if}
                              {/volist}

                        {/volist}
					</div>
					<div class="rq5">
						<div class="div">
							<p class="p3" datatype="p">{$vol.itemName2}</p>
							{$vol.itemDesc}
						</div>
					</div>
				</div>
                {/volist}

				<div class="rq3 rq33">
					<img src="/application/home/view/default/images/img25.png" alt="" class="lef">
					<span>more</span>
					<img src="/application/home/view/default/images/img26.png" alt="" class="rig">
				</div>
			</div>
		</div>
	</div>


    {include file="default/demo/style6" /}
	<!-- 视频弹窗 -->
	<div class="msg-box-bg" id="msg-box-bg" style="display: none;">
		<div class="msg-box" style="top: -50%;">
			<div class="close-box" id="close-box"></div>
			<iframe src="" frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>
		</div>
	</div>
	
	<!-- content6 -->
	<div class="content6">
		<div class="foot-container">
			<p class="bt" data-aos="fade-up" data-aos-delay="100">{:WSTConf('CONF.data20')}</p>
			<p class="fbt" data-aos="fade-up" data-aos-delay="200">{:WSTConf('CONF.data19')} <a href="{:Url('home/news/index')}">More +</a></p>
			<div class="rq fd">
				{wst:article type="is_index" cat='0' num='4' offset="0" cache="3600*24" key="k1"}
				<div class="rq1" data-aos="fade-up" data-aos-delay="{$k1*1+2}00">
					<a href="{:Url('home/news/detail','id='.$vo['articleId'])}">
						<div class="top"><img src="__ROOT__/{if($vo['coverImg2'])}{$vo['coverImg2']}{else/}{$vo['coverImg']}{/if}" title="{$vo['articleTitle']}" alt="{$vo['articleTitle']}"></div>
						<div class="bot">
							<p class="p1">{$vo['articleTitle']}</p>
							<p class="p2">{$vo['ymd']}</p>
						</div>
					</a>
				</div>
				{/wst:article}
			</div>
		</div>
	</div>


</div>
{/block}
{block name="js"}
  <!-- 底部 -->


  <script type="text/javascript" src="__STYLE__/js/jquery-1.11.3.js"></script>
  <script type="text/javascript" src="__STYLE__/js/aos.js"></script>
  <script type="text/javascript" src="__STYLE__/js/wow.min.js"></script>
  <script type="text/javascript" src="__STYLE__/js/base.min.js"></script>
  <script type="text/javascript" src="__STYLE__/js/js.js"></script>
  <script type="text/javascript" src="__STYLE__/js/tankuan.js"></script>
  <script type="text/javascript" src="__STYLE__/js/smoothScroll.js"></script>
  <script type="text/javascript" src="__STYLE__/js/jquery.share.min.js"></script>
  <script type="text/javascript" src="__STYLE__/js/swiper.min.js"></script>
  <script type="text/javascript" src="__STYLE__/js/index.js"></script>
  <script>

    // 导航动画
    $(function () {
      var top1 = 0;
      $(".header").addClass("header2");
      $(window).scroll(function () {
        var top2 = $(window).scrollTop();
        if (top2 > top1) {
          $(".header").removeClass("header2")
          $(".header").removeClass("header3")
        } else {
          $(".header").addClass("header2")
          $(".header").addClass("header3")
        }
        if (top2 == 0) {
          $(".header").removeClass("header3")
        }
        top1 = top2;
      })
    })



    var mySwiper = new Swiper('.banner .swiper-container', {
      effect: 'fade',
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      loop: true,
      speed: 1500,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })


    // 视频弹窗1
    $('.video_pic').click(function () {
      console.log(11);
      var SRC
      SRC = $(this).attr('data-src')
      $('#msg-box-bg').stop(true, false).fadeIn()
      $('#msg-box-bg .msg-box').stop(true, false).animate({
        'top': '50%',
      }, 800)
      $('#msg-box-bg').find('iframe').attr('src', SRC)
      // $('body').css({'overflow':'hidden'});//弹框后禁止浏览器滚动
    })
    $('#close-box').click(function () {
      $('#msg-box-bg').stop(true, false).fadeOut()
      $('#msg-box-bg .msg-box').stop(true, false).animate({
        'top': '-50%',
      }, 300)
      $('#msg-box-bg').find('iframe').attr('src', '')
      // $('body').css({'overflow':'auto'});
    });


    // content3
    var mySwiper = new Swiper('.content3 .swiper-container', {
      //autoplay: true,//可选选项，自动滑动
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })


    $(".content4 .mk").each((index, item) => {
      $(".content4 .mk").eq(index).hover(() => {
        $(".content4 .rq2 .rq4 img").eq(index).addClass('on').siblings().removeClass('on');
        $(".content4 .mk").eq(index).addClass('on2').siblings().removeClass('on2');
      })
    })

    var a = 0;
    $(".content4 .rq1 div").each((index, item) => {
      $(".content4 .rq1 div").eq(index).click(() => {
        $(".content4 .rq2").eq(index).addClass('xs').siblings().removeClass('xs');
        $(".content4 .rq1 div").eq(index).addClass('an').siblings().removeClass('an');
        a = index;
      })
    })

    $(".rq3 .lef").click(() => {
      a--;
      if (a < 0) {
        a = 5;
      }
      $(".content4 .rq2").eq(a).addClass('xs').siblings().removeClass('xs');
      $(".content4 .rq1 div").eq(a).addClass('an').siblings().removeClass('an');
    })
    $(".rq3 .rig").click(() => {
      a++;
      if (a > 5) {
        a = 0;
      }
      $(".content4 .rq2").eq(a).addClass('xs').siblings().removeClass('xs');
      $(".content4 .rq1 div").eq(a).addClass('an').siblings().removeClass('an');
      console.log(a)
    })


  </script>
{/block}