{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" as="image" href="/upload/adspic/2022-08/banner02.jpg">
<link rel="preload" as="image" href="/upload/adspic/2022-08/banner01测试.jpg">
<link rel="preload" as="image" href="/upload/goods/2022-05/628f4a2379848.png">
<link rel="preload" as="image" href="/upload/goods/2022-07/62c3b2c7d323f.jpg">
<link rel="preload" as="image" href="/wstmart/home/view/default/images/bg1.jpg">
<link rel="preload" as="image" href="/wstmart/home/view/default/images/bg2.jpg">
<link rel="preload" as="image" href="/wstmart/home/view/default/images/bg3.jpg">
<link rel="preload" as="image" href="/upload/adspic/2022-08/banner01.jpg">
<link rel="preload" as="image" href="/upload/goods/2022-06/62ac4050d8f45.png">
<link rel="preload" as="image" href="/upload/goods/2022-07/62c3976ae1b7a.jpg">
<link rel="preload" as="image" href="/upload/goods/2022-05/6291e5d1ae913.png">
<link rel="preload" href="https://www.youtube.com/embed/uQtA79treiw" as="video" type="video">
{/block}
{block name="main"}
    <h1 style="display: none;">{:listSEO(999)['seo_h1']}</h1>
    <!-- banner -->
    <div class="banner swiper">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="sb"></div>
    <div class="swiper-wrapper">
        {wst:ads code="ban_index" cache='86400' num='10'}
		<div class="swiper-slide">
           
			{if $vo.adURL2}
			
			<video src="{$vo.adURL2}" muted autoplay loop></video>
			{else/}
			<div class="img">
                {if(WSTVisitModule()=='home')}
				<img src="__ROOT__/{$vo.adFile}" title="{$vo.ads_alt}" alt="{$vo.ads_alt}"  class="pc">
                {else/}
				<img src="__ROOT__/{$vo.adImg}" title="{$vo.ads_alt}" alt="{$vo.ads_alt}"class="wap">
                {/if}
			</div>
			{/if}
            {if $vo.desc}
            <div class="art art2">
                <div class="w1600">
                    <h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
                        {$vo.desc}
                    </h2>
                    <a href="{$vo.adURL}" class="btn_a ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0.15s">
                        <span>See more</span><i class="iconfont icon--op-jiantouzuo"></i>
                    </a>
                </div>
            </div>
			{else /}
			
			<div class="art art1">
			    <div class="w1600">
			        <h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
			            {$vo.adName}
			        </h2>
			        <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
			            {$vo.adName2}
			        </h3>
			        <a href="{$vo.adURL}" class="btn_a ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0.15s">
			            <span>See more</span><i class="iconfont icon--op-jiantouzuo"></i>
			        </a>
			    </div>
			</div>
			{/if}
        </div>
		
		{/wst:ads}
    </div>
</div>
    <div class="pro_index">
        <div class="w1600">
            <div class="top">
                <h2 class="h2">Product Center</h2>
                <div class="pro_taba pc">
                    {volist name="gcCat" id="vo" key="k1"}
                    <a href="javascript:;">{$vo['catName']}</a>
					{/volist}
                </div>
            </div>
            <div class="swiper pro_taba_s wap">
                <div class="swiper-wrapper">
                    {volist name="gcCat" id="vo" key="k1"}
                    <div class="swiper-slide">{$vo['catName']}</div>
					{/volist}
                </div>
            </div>
        </div>
        <div class="pro_tabb">
            <div class="w1600">
                <div class="items_box">
                    
					{volist name="gcCat" id="vo" key="k1"}
					<div class="item_s swiper">
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-wrapper">
                            {volist name="vo.goods" id="vol" key="k2"}
							<div class="swiper-slide">
                                <a href="{:Url('home/product/detail','id='.$vol['goodsId'])}">
                                    <div class="left">
                                        <h6>{$vo.catName}</h6>
                                        <h3 class="h3">{$vol.goodsName}</h3>
                                        <div class="info">
                                            {php}
											$goodsDesc =  htmlspecialchars_decode($vol['goodsDesc']);
											{/php}
											{$goodsDesc}
                                        </div>
                                        <span class="btn_a">
                                            <span>See more</span><i class="iconfont icon--op-jiantouzuo"></i>
                                        </span>
                                    </div>
                                    <div class="right">
                                        <div class="imgbox">
                                            <img src="{$vol.goodsImg}" alt="{$vol.goodsName}">
                                        </div>
                                    </div>
                                </a>
                            </div>
							{/volist}
						</div>
                    </div>
                    {/volist}
				</div>
            </div>
        </div>
    </div>
    <div class="app_index" id="app_index">
        <div class="w1600">
            <div class="top">
                <h2 class="h2">Solutions</h2>
                <div class="app_taba pc">
                    
                    {volist name="sclist" id="vo" key="k1"}
                    <div class="a">
                        <a href="javascript:;">{$vo['catName']}</a>
                        <div class="con">
                            <h4>{$vo.catName}</h4>
                            <div class="info">{$vo.goodsCdesc}</div>
                            <p class="href"></p>
                            <div class="item_a">
                                {volist name="vo.son" id="vol" key="k2"}
                                {if $k2>7}
                                {else /}
                                <a href="{:Url('home/solution/index','id='.$vo['catId'])}" data-href="{:Url('home/solution/index','id='.$vo['catId'])}">{$vol.goodsName}</a>
                                {/if}
                                {/volist}
                            </div>
                            <div class="swiper-wrapper">
                                {volist name="vo.son" id="vol" key="k2"}
                                {if $k2>7}
                                {else /}
                                <div class="swiper-slide"><a href="{$vol.addURL}"><img src="/{$vol.goodsImg}" alt="{$vol.goodsName}"></a></div>
                                {/if}
                                {/volist}
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="swiper app_taba_s wap">
                <div class="swiper-wrapper">
                    {volist name="sclist" id="vo" key="k1"}
                    <div class="swiper-slide">{$vo.catName}</div>
                    {/volist}
                </div>
            </div>
            <div class="app_tabb">
                <div class="item_s2">
                    <div class="left">
                        <a class="myapp_a" href=""><h4 class="h4" id="myapph4"></h4></a>
                        <a class="info myapp_a" href="" id="myappinfo"></a>
                        <div class="line"></div>
                        <div class="bot">
                            <div class="item_a" id="myappitem"></div>
                            <a href="" class="swiper-button-next myapp_a"></a>
                        </div>
                    </div>
                    
                    <div class="right swiper myapp_s">
                        <div class="mynum">
                            <p class="p1">01</p><p class="s1">/</p><p class="p2"></p>
                        </div>
                        <div class="swiper-wrapper" id="myappswier">
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="about_index">
        <div class="w1600">
            <div class="left">
                <div class="imgbox">
                    <iframe rel="nofollow" src="{:WSTConf('CONF.data15')}"  frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <!-- <img class="img" src="{:WSTConf('CONF.serverQrCode')}" alt="{:WSTConf('CONF.data19')}">
                    <a href="javscript:;" class="play_a play_video">
                        <img class="img1" src="__STYLE__/images/play.png" alt="{:WSTConf('CONF.data19')">
                        <img src="__STYLE__/images/play_1.png" alt="{:WSTConf('CONF.data19')">
                    </a> -->
                </div>
            </div>
            <div class="right">
                <h2 class="h2">{:WSTConf('CONF.data19')}</h2>
                <div class="info">
                   {:WSTConf('CONF.data20')}
                </div>
                <div class="btn">
                    <a href="/about.html" class="btn_a">
                        <span>See more</span><i class="iconfont icon--op-jiantouzuo"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="service_index">
        <div class="left">
            <h3>Frequently Asked Question</h3>
            <ul class="list">
                {wst:faq type="isShow" cat='0' num='99' offset="0" cache="3600*24" key="k1"}
                <li>
                    <a href="javascript:;">
                        <span>{$vo['goodsName']}</span><i class="iconfont icon-xiangxia"></i>
                    </a>
                    <div class="box">
                        {$vo['goodsDesc']}
                    </div>
                </li>
				{/wst:faq}
            </ul>
        </div>
        <div class="right">
            <h2 class="h2">{:WSTConf('CONF.data7')}</h2>
            <div class="info">
               {:WSTConf('CONF.data9')}
            </div>
            <div class="btns">
                <!-- <a class="on" href=""><span>FAQ</span></a> -->
                <a href="/download.html"><span>Download</span></a>
                <a href="/service.html"><span>Service</span></a>
            </div>
        </div>
    </div>
    <div class="news_index" style="display:none">
        <div class="w1600">
            <div class="top">
                <div class="title">
                    <h2 class="h2">{:WSTConf('CONF.data14')}</h2>
                    <div class="info">{:WSTConf('CONF.data13')}</div>
                </div>
                <div class="new_taba">
					
                    
                    {volist name="news" id="vo" key="k1"} 
					<a href="javascript:;"><span>{$vo['catName']}</span></a>
                    {/volist}
					
                </div>
            </div>
            <div class="news_tabb">
                
				{volist name="news" id="vo" key="k1"}
				<div class="item_s3">
                    <div class="swiper swiper-no-swiping">
                        <div class="swiper-wrapper">
                            
							{volist name="vo.goods" id="vol" key="k2"}
							<div class="swiper-slide">
                                <a href="{:Url('home/news/detail','id='.$vol['articleId'])}">
                                    <div class="imgbox">
                                        <img src="__ROOT__/{$vol['coverImg']}" alt="{$vol.articleTitle}">
                                    </div>
                                    <div class="art">
                                        <span class="time">{$vol.createTime}</span>
                                        <h6>{$vol.articleTitle}</h6>
                                        <p><span>See more</span><i class="iconfont icon--op-jiantouzuo"></i></p>
                                    </div>
                                </a>
                            </div>
                            {/volist}
						</div>
                    </div>
                    <div class="btn">
                        <a href="/news/{$vo.catId}.html" class="btn_a">
                            <span>See more</span><i class="iconfont icon--op-jiantouzuo"></i>
                        </a>
                    </div>
                </div>
                {/volist}
			</div>
        </div>
    </div>
    {include file="default/demo/style2" /}
   {/block}
{block name="js"}
<script>
    var banner = new Swiper('.banner', {
        // autoplay: {
        //     delay: 5000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: true,
        // },
        parallax : true,
        speed: 1000,
        navigation: {
            nextEl: '.banner .swiper-button-next',
            prevEl: '.banner .swiper-button-prev',
        },
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    })
</script>
<script>
    $('.pro_taba a').eq(0).addClass('on')
    $('.pro_tabb .item_s').eq(0).addClass('on')
    $('.pro_taba a').each(function(index){
        $(this).click(function(){
            $(this).addClass('on').siblings().removeClass('on');
            $('.pro_tabb .item_s').eq(index).addClass('on').siblings().removeClass('on');
        })
    })
    var pro_taba_s = new Swiper('.pro_taba_s', {
        slidesPerView : 'auto',
        spaceBetween: 15,
        normalizeSlideIndex: false,
        slideToClickedSlide: true,
        on: {
            slideChange: function () {
                $('.pro_tabb .item_s').eq(this.activeIndex).addClass('on').siblings().removeClass('on');
            },
        },
    })
    $(".item_s").each(function (i) {
        new Swiper($(this), {
            spaceBetween: '13%',
            parallax: true,
            speed: 1000,
            navigation: {
                nextEl: '.item_s .swiper-button-next',
                prevEl: '.item_s .swiper-button-prev',
            },
            breakpoints: {
                1720: {
                    spaceBetween: 60,
                },
                1024: {
                    spaceBetween: 30,
                },
                990: {
                    spaceBetween: 20,
                },
            },
        })
    })
</script>
<script>
    $(function(){
        $('.app_taba .a').eq(0).click();
    })
    $('.app_taba .a').each(function(i){
        $(this).click(function(){
            $(this).addClass('on').siblings().removeClass('on')
            var myapph4 = $(this).find('.con h4').text();
            var myappinfo = $(this).find('.con .info').text();
            var myappitem = $(this).find('.con .item_a').html();
            var myappswier = $(this).find('.con .swiper-wrapper').html();
            $('#myapph4').text(myapph4);
            $('#myappinfo').text(myappinfo);
            $('#myappitem').html(myappitem);
            $('#myappswier').html(myappswier);
            var myapp_s = new Swiper('.myapp_s', {
                initialSlide: 0,
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                on: {
                    init: function(){
                        if(this.slides.length < 10 ){
                            $('.mynum .p2').text('0' + this.slides.length)
                        } else{
                            $('.mynum .p2').text(this.slides.length)
                        }
                    },
                    slideChange: function () {
                        $('#myappitem a').eq(this.activeIndex).click();
                        var mynum = this.activeIndex + 1;
                        if(mynum < 10 ){
                            $('.mynum .p1').text('0' + mynum)
                        } else{
                            $('.mynum .p1').text(mynum)
                        }
                    },
                },
            })
            $('.mynum .p1').text('01')
            myapp_s.slideTo(0);
            $('#myappitem a').each(function(o){
                $(this).click(function(){
                    $(this).addClass('on').siblings().removeClass('on');
                    var myapphref = $(this).data('href');
                    $(this).parent().siblings().attr('href',myapphref)
                    myapp_s.slideTo(o);
                })
            })
            $('#myappitem a').eq(0).click();
        })
    })
    var app_taba_s = new Swiper('.app_taba_s', {
        slidesPerView : 'auto',
        spaceBetween: 15,
        normalizeSlideIndex: false,
        slideToClickedSlide: true,
        on: {
            slideChange: function () {
                $('.app_taba .a').eq(this.activeIndex).click();
            },
        },
    })
</script>
<script>
    // $('.play_video').click(function(){
    //      var that = this
    //      var myvideo = $(that).siblings('.playvideo');
    //      myvideo.show();
    //      $(that).hide();
    //  })
</script>
<script>
    $('.service_index .list li').click(function(){
        $(this).toggleClass('on').siblings().removeClass('on')
    })
    $(function(){
        $('.service_index .list li').eq(0).click();
    })
</script>
<script>
    $('.new_taba a').eq(0).addClass('on')
    $('.news_tabb .item_s3').eq(0).addClass('on')
    $('.new_taba a').each(function(index){
        $(this).click(function(){
            $(this).addClass('on').siblings().removeClass('on')
            $('.news_tabb .item_s3').eq(index).addClass('on').siblings().removeClass('on')
        })
    })
    $(".item_s3 .swiper").each(function (i) {
        new Swiper($(this), {
            slidesPerView : 3,
            spaceBetween: 50,
            noSwiping: true,
            breakpoints: {
                1440: {
                    spaceBetween: 30,
                },
                990: {
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView : 1.5,
                    spaceBetween: 15,
                    noSwiping: false,
                },
            },
        })
    })
</script>
<script>
    $(".qtwy-header > .w1600 > .right > .nav > li:eq(0)").addClass('on').siblings().removeClass('on');
    $(".h_nav > li:eq(0)").addClass('on').siblings().removeClass('on');
</script>
{/block}