{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>

<style>
    .titlesFc{
        white-space: break-spaces;
    }
</style>
{/block}
{block name="main"}
<h1 style="width: 0;height: 0;overflow: hidden;">{:listSEO(999)['seo_h1']}</h1>


	<div class="openAnimation" id="openAnimation">
		<div class="maskBox">
			<div class="bgBox" style="--size: 10%;"></div>
			<div class="wave">
				<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="-250 -250 1500 1500" preserveaspectratio="xMidYMid slice">
					<path style="fill:none;stroke:rgba(255, 255, 255, 0.4);" d="M309.4,340.1c42.4-50.5,103-82.1,168.7-87.8c65.7-5.7,130.9,14.8,181.4,57.2s82.1,103,87.8,168.7c5.7,65.7-14.8,130.9-57.2,181.4s-103,82.1-168.7,87.8c-65.7,5.7-130.9-14.8-181.4-57.2s-82.1-103-87.8-168.7C246.4,455.8,267,390.6,309.4,340.1L309.4,340.1z"></path>
					<path style="fill:none;stroke:rgba(255, 255, 255, 0.6);" d="M339.2,365.2c35.7-42.6,86.9-69.2,142.2-74c55.4-4.8,110.4,12.5,152.9,48.2c42.6,35.7,69.2,86.9,74,142.2s-12.5,110.4-48.2,152.9c-35.7,42.6-86.9,69.2-142.2,74c-55.4,4.8-110.4-12.5-152.9-48.2c-42.6-35.7-69.2-86.9-74-142.2C286.2,462.7,303.5,407.7,339.2,365.2L339.2,365.2z"></path>
					<path style="fill:none;stroke:rgba(255, 255, 255, 0.8);" d="M368.1,389.4c29.3-34.9,71.3-56.8,116.7-60.7c45.4-4,90.5,10.3,125.5,39.6c34.9,29.3,56.8,71.3,60.7,116.7c4,45.4-10.3,90.5-39.6,125.5c-29.3,34.9-71.3,56.8-116.7,60.7c-45.4,4-90.5-10.3-125.5-39.6c-34.9-29.3-56.8-71.3-60.7-116.7C324.5,469.4,338.7,424.3,368.1,389.4L368.1,389.4z"></path>
					<path style="fill:none;stroke:rgba(255, 255, 255, 1);" d="M396.5,413.2c23-27.4,55.9-44.5,91.5-47.6c35.6-3.1,71,8,98.4,31c27.4,23,44.5,55.9,47.6,91.5c3.1,35.6-8,71-31,98.4c-23,27.4-55.9,44.5-91.5,47.6c-35.6,3.1-71-8-98.4-31c-27.4-23-44.5-55.9-47.6-91.5C362.3,476,373.5,440.6,396.5,413.2L396.5,413.2z"></path>
				</svg>
			</div>
		</div>
	</div>
	<main id="app">
		<!-- 头部 -->
		<header>{include file="default/top" /}</header>

		<div id="idxSwiper">
			<div class="swiper-wrapper">
                {wst:ads code="ban_index" cache='86400' num='1'}
				{$vo.goodsDescmkh}
                {/wst:ads}
			
				
				
                <div class="swiper-slide">
                    <div class="idxOffset idx_product" >
                        <div class="selectBox">
                            {volist name="gcCat" id="val" key="ks2"}
                            <div class="item {if $ks2 == 1} active {/if}">{$val.catName1}</div>
                             {/volist}
                        </div>
                        <div class="content1">
                            <ul class="swiper-wrapper">
                                 {volist name="gcCat" id="val" key="ks2"}
                                <li class="swiper-slide">
                                    <div class="centerInfo">
                                        <div class="wordBox w1640">
                                            <div class="t1 font48 wowUpOn titlesFc" data-delay=".5s">{$val.catName2}</div>
                                            <div class="t2 font16 wowUpOn" data-delay=".6s">{$val.goodsCdesc2}</div>
                                            <div class="item_box  wowUpOn" data-delay=".7s">
                                                 {volist name="val.son" id="val2" key="ks3"}
                                                <div class="item {if $ks3 == 1} active {/if}">{$val2.catName}</div>
                                                {/volist}
                                            </div>
                                            <div class="swiper_info">
                                                <div class="swiper_img">
                                                    <div class="swiper-wrapper">
                                                         {volist name="val.son" id="val2" key="ks3"}
                                                        <div class="swiper-slide">
                                                            <a class="img" href="/product.html#pro{$val2.catId}"><div class="pb"><div class="ab"><img src="/{$val2.catImg}" alt="{$val2.catName}"></div></div></a>
                                                        </div>
                                                        {/volist}
                                                    </div>
                                                </div>
                                                <div class="prev swiperBtn">
                                                    <i class="iconfont icon-jiantou_liebiaoxiangzuo"></i>
                                                </div>
                                                <div class="next swiperBtn">
                                                    <i class="iconfont icon-jiantou_liebiaoxiangyou"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="img_w100"><img src="/{$val.catImg}" alt="{$val.catName}"></div>
                                    </div>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                    </div>
				</div>
                
                
                
                {include file="default/demo/style2" /}
				
                <div class="swiper-slide">
                    <div class="idxOffset idx_new">
                        <div class="w1640 center_box">
                            <div class="contentBox">
                                <div class="topBox">
                                    <div class="idx_title">
                                        <div class="t1 wowUp" data-delay=".5s">Latest Updates </div>
                                    </div>
                                    <div class="icon"><a href="/news.html" class="more"><img src="__STYLE__/images/icon.png" alt=""> View All News</a></div>
                                </div>
                                <div class="item_box">
                                    {wst:article type="is_index" cat='0' num='2' offset="0" cache="3600*24" key="k1"}
                                    <a class="item {if $k1 == 1} grid2 {/if} wowUp" href="{:Url('home/news/detail','id='.$vo['articleId'])}"  data-delay=".{$k1+6}s" {if $k1 == 0} style="--color: #FFFFFF;" {else } style="--color: #000000; " {/if}>
                                        <div class="wh100" {if $k1 == 1} style="position: absolute;" {/if}><img {if $vo.coverImg2} src="__ROOT__/{$vo['coverImg2']}"  {else /} src="__ROOT__/{$vo['coverImg']}" {/if} title="{$vo['articleTitle']}" alt="{$vo['articleTitle']}"></div>
                                        <div class="word">
                                            <div class="t1 font14">Release time：{$vo.ymd}</div>
                                            <div class="t2 {if $k1 == 1} font30 {else /} font20 {/if}">{$vo['articleTitle']}</div>
                                            {if $k1 == 1} 
                                            <div class="t2 font15">{$vo.desc} </div>
                                            {/if}
                                        </div>
                                    </a>
                                    {/wst:article}
                                   
                                    <div class="item flexBox wowUp" data-delay=".8s">
                                        {wst:article type="is_index" cat='0' num='2' offset="2" cache="3600*24" key="k1"}
                                        <a class="one" {if $k1 == 0} style="--wid:3.63rem; --color: #FFFFFF;" {else /} style="--wid:2.7rem; --color: #FFFFFF;" {/if} href="{:Url('home/news/detail','id='.$vo['articleId'])}" >
                                            <div class="wh100"><img {if $vo.coverImg2} src="__ROOT__/{$vo['coverImg2']}"  {else /} src="__ROOT__/{$vo['coverImg']}" {/if} title="{$vo['articleTitle']}" alt="{$vo['articleTitle']}"></div>
                                            <div class="word">
                                                <div class="t1 font14">发布时间：{$vo.ymd}</div>
                                                <div class="t2 font20">{$vo.articleTitle}</div>
                                            </div>
                                        </a>
                                        {/wst:article}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
				<div class="swiper-slide">
					{include file="default/footer" /}
				</div>
            </div>
        </div>
    </main>

    {include file="default/js" /}
	<script type="text/javascript">
		$(function () {
		});
	</script>
	<script>
		$(function () {
			let interleaveOffset = .2, speed = 300;

			function idxSwiper() {
				let divBox = $('#idxSwiper');
				let nSize = divBox.children().children().length - 1;
				const swiper = new Swiper(divBox, {
					init: window.innerWidth > 990 ? true : false, 
                    direction: 'vertical', speed: 1000, slidesPerView: 'auto',
					slideActiveClass: 'active', mousewheel: { releaseOnEdges: true, }, watchSlidesProgress: true, mousewheelControl: true, keyboardControl: true,
					on: {
						init() {  },
						progress() {
							for (var i = 0; i < this.slides.length; i++) {
								var slideProgress = this.slides[i].progress, innerOffset = this.width * interleaveOffset, innerTranslate = slideProgress * innerOffset;
								this.slides.eq(i).find('.idxOffset').css({ 'transform': `translate3d(0, ${innerTranslate}px, 0)` });
							}
						},
						touchStart() {
							for (var i = 0; i < this.slides.length; i++) { this.slides.eq(i).css({ 'transition': '' }); }
						},
						setTransition(speed) {
							for (var i = 0; i < this.slides.length; i++) {
								this.slides.eq(i).css({ 'transition': `${speed}ms` }); this.slides.eq(i).find('.idxOffset').css({ 'transition': `${speed}ms` });
							}
						},
						slideChangeTransitionEnd: function () {
							var d = this.activeIndex;
							if (d == 3) {
								$('.about_number .item .number .beat').each(function () { var _this_width = $(this).width(); $(this).width(_this_width); });
								$('.about_number .item .number .beat').countUp({ time: 1600 });
							}
						},
					},
				});
				$('html').on('click', '#backToTopBtn', function () {
					swiper.slideTo(0, 1000, false);
				})
				$('html').on('click', '#to-top', function () {
					swiper.slideTo(0, 1000, false);
				})
			    
			}
			idxSwiper();
            
             function indexProduct(){
                 // 锂电装备 / 固态电池切换
                 var divBox = $('.idx_product'),
                     itemOne = divBox.find(".selectBox .item"),
                     contentbox = divBox.find(".content1"),
                     num = contentbox.find(".centerInfo"),
                     prev = divBox.find('.prev'), next = divBox.find('.next');
                if(divBox){
                    const swiper_dc = new Swiper(contentbox, {
                        slidesPerView: 1,
                        speed: 800,
                        allowTouchMove: false,
                        effect: 'fade',
                        fadeEffect: {
                            crossFade: true,
                        },
                        navigation: { nextEl: next, prevEl: prev, }, 
                        on: {
                            slideChangeTransitionStart:function(){
                                var index = this.realIndex;
                                itemOne.eq(index).addClass("active").siblings().removeClass("active")
                            },
                            
                        },
                    });
                    itemOne.hover(function(){
                        var index = $(this).index();
                        swiper_dc.slideTo(index)
                        $(this).addClass("active").siblings().removeClass("active")
                    })
                    // 里层循环
                    num.each(function (e) {
					var _this = $(this),swiper_infolist = _this.find('.swiper_img'),list = _this.find(".wordBox .item_box .item");
					var s2 = new Swiper(swiper_infolist, {
						slidesPerView: 1,
						speed: 800,
						initialSlide: 0,
						effect: 'fade',
						fadeEffect: {
							crossFade: true,
						},
						
						breakpoints: {
							768: {
								allowTouchMove: true,
							},
						},
						on: {
							slideChangeTransitionStart: function () {
								var index = this.activeIndex;
								list.removeClass("active").eq(index).addClass("active");
							},
						},
						
					})
					list.hover(function () {
						var index = $(this).index();
						s2.slideTo(index)
					})
				
					
				})
                }
               
            }

            indexProduct()

		});
	</script>
    <script>
        $(".idx_banner .item_box .item").hover(function(){
            $(this).find(".wowLeft").css("display","flex");
        })
         $(".idx_banner .item_box .item").mouseleave(function(){
            $(this).find(".wowLeft").css("display","none");
        })
        
        
    </script>
    
    
    
    
{/block}