{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']}">
{/block}

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

    <!-- Header头部内容 -->
    <div id="header" class="header header-white-bg">{include file="default/top" /}</div>
    <!-- Main内容 -->
    <main id="main" class="wrapper">
        <!-- banner -->
        <div class="idx-banner">
            <ul class="swiper-wrapper">
                {wst:ads code="ban_index" cache='86400' num='10'}
                <li class="swiper-slide">
                    <div class="innerbox" >
                        <div class="info">
                            <div class="container">
                                <p class="title bold font60">{$vo.adName}
                                </p>
                                <p class="sec-title font24">{$vo.adName2}</p>
                                {if $vo.adName}
                                <div class="public-idx-more">
                                    <a href="{$vo.adURL}">Learn more <img src="__STYLE__/images/more-icon.png" alt=""></a>
                                </div>
                                {/if}
                            </div>
                        </div>
                        <a class="image" {if $vo.adURL} href="{$vo.adURL}" {/if}>
                            <img src="__ROOT__/{$vo.adFile}" title="{$vo.ads_alt}" alt="{$vo.ads_alt}" class="pc-img">
                            <img src="__ROOT__/{$vo.adImg}" title="{$vo.ads_alt}" alt="{$vo.ads_alt}" class="mobile-img">
                        </a>

                    </div>
                </li>
                {/wst:ads}
               
            </ul>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev">
                <img src="__STYLE__/images/prev-icon.png" alt="">
            </div>
            <div class="swiper-button-next">
                <img src="__STYLE__/images/next-icon.png" alt="">

            </div>
        </div>

        <!-- 产品中心 -->
        <div class="idx-product-center">
            <div class="publicbg s-animate-up" data-time="150">
                <div class="tablist">
                    {volist name="gcCat" id="val" key="ks"}
                    <div class="item {if $ks == 1} active {/if}">
                        <img src="/{$val.catImg2}" alt="{$val.catName}" class="front icon">
                        <span class="tabval font20">
                            {$val.catName}
                            <img src="/{$val.catImg2}" alt="{$val.catName}"  class="behind icon">
                            <img src="__STYLE__/images/more-icon.png" alt="" class="more-icon">
                        </span>
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="firstContainer">
                <ul class="swiper-wrapper">
                    {volist name="gcCat" id="val" key="ks"}
                    <li class="swiper-slide">
                        <div class="tabcontent">
                            <div class="image">
                                <img src="__STYLE__/images/product-center-bg.jpg" alt="">
                            </div>
                            <div class="info">

                                {include file="default/demo/style3" /}
                                    
                                <div class="slideball s-animate-up" data-time="150">
                                    <img src="__STYLE__/images/prev-icon.png" alt="" class="prebtn">
                                    <span datatype="p">|</span>
                                    <img src="__STYLE__/images/next-icon.png" alt="" class="nextbtn">
                                </div>
                                <div class="secondContainer s-animate-up" data-time="200">
                                    <ul class="swiper-wrapper">
                                        {volist name="val.son" id="val2" key="ks2"}
                                        <li class="swiper-slide">
                                            <div class="innerbox">
                                                <div class="swiperitem">
                                                    <div class="swiper-image">
                                                        <img src="/{$val2.catImg}" alt="{$val2.catName}" title="{$val2.catName}">
                                                    </div>
                                                    <div class="swiper-info">
                                                        <p class="p-title font36 bold black1">{$val2.catName}</p>
                                                        <p class="p-emerge bold black1 font20">{$val2.catName1}</p>
                                                        <p class="p-intro font18 black3">{$val2.goodsCdesc}</p>
                                                        <a class="public-idx-more" href="{:Url('home/product/selection','id='.$val2['catId'])}">
                                                            <span>Learn more <img src="__STYLE__/images/more-active.png"
                                                                    alt=""></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        {/volist}
                                    </ul>
                                    <div class="swiper-pagination"></div>

                                </div>
                                <div class="girdlist">
                                    {volist name="val.son" id="val2" key="ks2"}
                                    <div class="item {if $ks2 == 1} active {/if} s-animate-up" data-time="{($ks2+3)*5}0">
                                        <span class="p-icon">
                                            <img src="/{$val2.catImg}" alt="{$val2.catName}" title="{$val2.catName}">
                                        </span>
                                        {$val2.catName}
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                        </div>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>

        <!-- 产品震撼上线 -->
        <div class="idx-product-online">
            <div class="container">
                <div class="innerbox">
                    <ul class="swiper-wrapper">
                        {wst:goods type="is_index" cat='0' num='3' offset="0" cache="3600*24" key="k1"}
                        <li class="swiper-slide">
                            <div class="image">
                                <img src="/{$vo.goodsImg}" alt="{$vo.goodsName}" title="{$vo.goodsName}">
                            </div>
                            <div class="info">
                                <div class="public-idx-more s-animate-up" data-time="50">
                                    <a href="{:Url('home/product/detail','id='.$vo['goodsId'])}" >{$vo.catName} </a>
                                </div>
                                <p class="title font42 bold s-animate-up" data-time="100">{$vo.goodsName3}</p>
                                <p class="sec-title s-animate-up" data-time="150">{$vo.goodsName2}</p>
                                <p class="more black6 s-animate-up" data-time="200">
                                    <img src="__STYLE__/images/more-icon-grey.png" alt="" class="front"> <a href="">Learn more <img
                                            src="__STYLE__/images/more-icon-grey.png" alt="" class="behind"></a>
                                </p>
                            </div>
                        </li>
                        {/wst:goods}
                    </ul>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        
        {include file="default/demo/style4" /}
        <!-- 新闻动态 -->
        <div class="idx-news-wrap">
            <div class="container">

                <div class="news-top">
                    <div class="nt-left">
                        <p class="title font42 bold black1 s-animate-up" data-time="50">News</p>
                        <p class="sec-title font18 s-animate-up" data-time="100"></p>
                    </div>
                    <div class="public-idx-more s-animate-up" data-time="150">
                        <a href="/news.html">Learn more <img src="__STYLE__/images/more-icon.png" alt=""></a>
                    </div>
                </div>

                <div class="news-bottom">
                    {wst:article type="is_index" cat='0' num='1' offset="0" cache="3600*24" key="k1"}
                    <div class="nb-left s-animate-up" data-time="200">
                        <div class="image">
                            <img src="__ROOT__/{$vo['coverImg']}" title="{$vo['articleTitle']}" alt="{$vo['articleTitle']}">
                        </div>
                        <a class="info" href="{:Url('home/news/detail','id='.$vo['articleId'])}" >
                            <p class="time black6">{$vo['ymd']}</p>
                            <p class="title font22 black1">{$vo['articleTitle']}</p>
                            <p class="sec-title black6">
                                {$vo['desc']}</p>
                        </a>
                    </div>
                    {/wst:article}
                    <div class="nb-right newslist">
                        {wst:article type="is_index" cat='0' num='3' offset="1" cache="3600*24" key="k1"}
                        <div class="item s-animate-up" data-time="{($k1+4)*5}0">
                            <div class="i-left">
                                <p class="time black6">{$vo['ymd']}</p>
                                <p class="title black1">{$vo['articleTitle']}</p>
                                <p class="more black6">
                                    <a href="{:Url('home/news/detail','id='.$vo['articleId'])}">Learn more <img src="__STYLE__/images/more-icon-grey.png" alt=""></a>
                                </p>
                            </div>
                            <div class="i-right">
                                <img src="__ROOT__/{$vo['coverImg']}" title="{$vo['articleTitle']}" alt="{$vo['articleTitle']}">
                            </div>
                        </div>
                        {/wst:article}
                    </div>

                       
                     
                </div>
            </div>
        </div>

        <!-- 解决方案 -->
        
        {include file="default/demo/style5" /}
        <!-- 视频弹窗 -->
        <div id="hi-video-pop">
            <div href="javascript:;" class="hi-close"></div>
            <div class="hi-video-box">
                <div class="hi-video-wrap">
                    <!-- <video src="" controls preload="none" webkit-playsinline="true" playsinline="true"></video> -->
                    <!--<video src="" controls="" autoplay="true" preload="true" webkit-playsinline="true"-->
                    <!--    playsinline="true"></video>-->
                    <iframe src="" controls="" autoplay="true" preload="true" webkit-playsinline="true"
                        playsinline="true" allowfullscreen></iframe>
                    

                </div>
            </div>
        </div>


    </main>

    <!-- Footer尾部内容 -->
    <div id="footer">{include file="default/footer" /}</div>
    
    <!-- JavaScript语言 -->
    {include file="default/js" /}

    <script>
        function indexSlide() {
            var slide = new Swiper('.idx-banner', {
                speed:1000, effect: 'fade', fadeEffect: { crossFade: true, },
                autoplay: { delay: 5000, waitForTransition: false, disableOnInteraction: false, },
                preventLinksPropagation: false, // 阻止点击事件冒泡
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.idx-banner .swiper-button-next',
                    prevEl: '.idx-banner .swiper-button-prev',
                },

            });
        }
        indexSlide();



        //   首页-产品上线 
        function proOnlineSlide() {
            var slide = new Swiper('.idx-product-online .innerbox', {
                autoplay: true,
                speed: 3000,

                effect: 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                preventLinksPropagation: false, // 阻止点击事件冒泡
                pagination: {
                    el: '.idx-product-online .swiper-pagination',
                    clickable: true,
                },


            });
        }
        proOnlineSlide();

    </script>

    <script>
        // 首页关于我们视频弹窗--video
        // $(function () {
        //     $("#playvideo").click(function () {
        //         var src = $(this).data("src");
        //         $(" #hi-video-pop").find("video").attr("src",src);
        //         $(" #hi-video-pop").css("display", "block")
        //     })
        //     $(".hi-close").click(function () {
        //         $(" #hi-video-pop").css("display", "none")
        //     })
        // });
        
        // 
        
        // 首页关于我们视频弹窗--iframe外部链接
        $(function () {
            $("#playvideo").click(function () {
                var src = $(this).data("src");
                $(" #hi-video-pop").find("iframe").attr("src",src);
                $(" #hi-video-pop").css("display", "block")
            })
            $(".hi-close").click(function () {
                $(" #hi-video-pop").css("display", "none")
            })
        });
        
        

    </script>
    
    <script>
        //首页关于我们-卡屏效果

        // 屏幕尺寸小于640时自动轮播
        if(window.screen.width > 480 ){
                ScrollTrigger.create({
                trigger: '.idx-about-map-wrap .about-section',
                start: 'top top',
                // end: headerHeight.offsetHeight, // 固定距离为当前元素高度
                // end: "850px", // 固定距离为当前元素高度
                pin: true, // 固定
                delay: 5,
                pinSpacing: false, // 不设置间距
                scrub: true,
                animation: gsap.timeline()
                    .to('.idx-about-map-wrap .about-section', { opacity: 0.7 })
            });
        }

      


    </script>
  {/block}