{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 = 0;
</script>
{/block}

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

	<main id="app">
		
		<header>{include file="default/top" /}</header>

		<div id="idxSwiper">
			<div class="swiper-wrapper">
				<!-- Banner -->
				<div class="swiper-slide">
					<div class="idxOffset idx_banner" id="idxBanner">
						<div class="banner_box">
							<ul class="swiper-wrapper">
								{wst:ads code="ban_index" cache='86400' num='10' key="ks"}
								<li class="swiper-slide" classify="{$vo.adName}">
									<div class="content">
										<div class="subtitle">
											<div class="word">{$vo.ads_alt}</div>
										</div>
										<div class="title">
											<div class="word">{$vo.adName2}</div>
										</div>
										<div class="details">
											<div class="word">{$vo.adDesc}</div>
										</div>
									</div>
									<div class="images">
										<div class="img pc"><img src="/wstmart/home/view/__ROOT__/{$vo.adFile}" title="{$vo.adName}" alt="{$vo.adName}"></div>
										<div class="img mobile"><img src="/wstmart/home/view/__ROOT__/{$vo.adImg}" title="{$vo.adName}" alt="{$vo.adName}"></div>
									</div>
								</li>
								{/wst:ads}
							</ul>
						</div>
						<div class="banner_pager">
							<div class="pager"></div>
						</div>
					</div>
				</div>

				<!-- 优势 -->
				<div class="swiper-slide">
					<div class="idxOffset idx_good" id="idxGood">
						<div class="good_box">
							<div class="swiper_box">
								<ul class="swiper-wrapper">
									{volist name="aboutYw" id="val" key="k"}
									<li class="swiper-slide">
										<div class="content">
											<div class="center_box w1200">
												<div class="title">{$val.catName}</div>
												<div class="details">{$val.goodsCdesc}</div>
												<div class="info">
													{volist name="val.son" id="val2" }
													<div class="one">
														<div class="img">
															<div class="pb">
																<div class="ab"><img src="/{$val2.goodsImg2}" alt="{$val2.goodsName}" title="{$val2.goodsName}"></div>
															</div>
														</div>
														{if $val2.goodsName3}
														<div class="word">{$val2.goodsName3}</div>
														{else /}
														<div class="word">{$val2.goodsName}</div>
														{/if}
													</div>
													{/volist}
												</div>
												<div class="idx_more">
													<div class="more"><a href="/business.html#bus{$val.catId}">
															<div class="word">查看详情</div>
															<div class="icon"></div>
														</a></div>
												</div>
											</div>
										</div>
										<div class="images pc"><img src="/{$val.catImg}" alt="{$val.catName}" title="{$val.catName}"></div>
										<div class="images mobile"><img src="/{$val.catImg2}" alt="{$val.catName}" title="{$val.catName}"></div>
									</li>
									{/volist}
								</ul>
							</div>
						</div>
						<div class="sidebar_pager">
							<div class="pager_box">
								<div class="menu">
									{volist name="aboutYw" id="val" key="k"}
									<div class="item {if $k == 1} active {/if}">{$val.catName}</div>
									{/volist}
								</div>
								<div class="scrollbar">
									<div class="active"></div>
								</div>
								<div class="pager"></div>
							</div>
						</div>
					</div>
				</div>

				<!-- 产品 -->
				<div class="swiper-slide">
					<div class="idxOffset idx_product">
						<div class="center_box w1560">
							<div class="product_box">
								<div class="idx_title">
									<div class="title">{:WSTConf('CONF.data19')}</div>
									<div class="idx_more">
										<div class="more"><a href="/product.html">
												<div class="word">查看全部产品</div>
												<div class="icon"></div>
											</a></div>
									</div>
								</div>
								<div class="product_main">
									{wst:goods type="is_index" cat='0' num='5' offset="0" cache="3600*24" key="k1"}
									<div class="item">
										<a href="/wstmart/home/view/{:Url('home/product/detail','id='.$vo['goodsId'])}">
											<div class="info">
												<div class="title_box">
													<div class="title">{$vo.goodsName}</div>
													<div class="subtitle">{$vo.goodDetail}</div>
												</div>
												<div class="more">
													<div class="word">查看详情</div>
													<div class="icon"></div>
												</div>
											</div>
											<div class="img">
												<div class="pb">
													<div class="ab">
														<img src="/{$vo.goodsImg}" alt="{$vo.goodsName}" title="{$vo.goodsName}">
													</div>
												</div>
											</div>
										</a>
									</div>
									{/wst:goods}
								</div>
							</div>
						</div>
					</div>
				</div>

			
				{include file="default/demo/style1" /}

				<!-- 新闻 -->
				<div class="swiper-slide">
					<div class="idxOffset idx_news" id="idxNews">
						<div class="center_box w1560">
							<div class="news_box">
								<div class="news_center">
									<div class="idx_title">
										<div class="title">{:WSTConf('CONF.data15')}</div>
									</div>
									<div class="news_main">
										<div class="swiper_box">
											<ul class="swiper-wrapper">
												{wst:article type="is_index" cat='0' num='3' offset="0" cache="3600*24" key="k1"}
												<li class="swiper-slide">
													<a {if $vo.linkurl} href="/wstmart/home/view/{$vo.linkurl}" target="_blank" {else /} href="/wstmart/home/view/{:Url('home/news/detail','id='.$vo['articleId'])}" {/if} >
														<div class="img">
															<div class="pb">
																<div class="ab"><img src="/wstmart/home/view/__ROOT__/{$vo['coverImg']}" title="{$vo['articleTitle']}" alt="{$vo['articleTitle']}"></div>
															</div>
														</div>
														<div class="info">
															<div class="time">{$vo['ymd']}</div>
															<div class="title">{$vo['articleTitle']}</div>
															<div class="more">
																<div class="word">了解更多</div>
																<div class="icon"></div>
															</div>
														</div>
													</a>
												</li>
												{/wst:article}
											</ul>
										</div>
										<div class="content">
											<div class="menu">
												{wst:article type="is_index" cat='0' num='4' offset="3" cache="3600*24" key="k1"}
												<a class="item active" {if $vo.linkurl} href="/wstmart/home/view/{$vo.linkurl}" target="_blank" {else /} href="/wstmart/home/view/{:Url('home/news/detail','id='.$vo['articleId'])}" {/if}>
													<div class="time">{$vo['ymd']}</div>
													<div class="title">{$vo['articleTitle']}</div>
												</a>
												{/wst:article}
											</div>
											<div class="idx_more">
												<div class="more"><a href="/news.html">
														<div class="word">查看全部资讯</div>
														<div class="icon"></div>
													</a></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 底部 -->
				<div class="swiper-slide index-auto">
					<footer>{include file="default/footer" /}</footer>
				</div>
			</div>
		</div>
		<div class="idx_scrollbar" id="idxScrollbar">
			<div class="one">
				<div class="icon"><img src="/wstmart/home/view/__STYLE__/images/icon_home.png" alt="澳门人威尼斯3966光学"></div>
				<div class="number">01</div>
			</div>
			<div class="line"></div>
			<div class="number active">01</div>
		</div>
	</main>

	<!-- 视频弹窗 -->
	<div class="pop-bg"></div>
	<div class="pop pop-video">
		<div class="pop-wrap">
			<div class="close iconfont icon_close"></div>
			<div class="cont">
				
			</div>
		</div>
	</div>

	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/wow.js"></script>
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/gsap.min.js"></script>
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/ScrollTrigger.min.js"></script>
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/layui/layui.js"></script>
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/swiper.min.js"></script>
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/pack.js"></script>
	
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/jquery.countup.min.js"></script>
	<script type="text/javascript" src="/wstmart/home/view/__STYLE__/js/jquery.waypoints.min.js"></script>
	<script>
		$(function () {
			let interleaveOffset = .2,
				speed = 300;

			function idxSwiper() {
				let divBox = $('#idxSwiper'),
					barBox = $('#idxScrollbar');

				let nSize = divBox.children().children().length - 1;
				barBox.css({ '--h-size': `${100 / nSize}%` });
				barBox.find('.number.active').html(nSize < 10 ? '0' + nSize : nSize);

				const swiper = new Swiper(divBox, {
					init: window.innerWidth > 990 ? true : false,
					direction: 'vertical',
					speed: 1000,
					// initialSlide: 4,
					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;
								var innerOffset = this.width * interleaveOffset;
								var 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 () {
                    // console.log(this.activeIndex)
                    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({
                            // delay: 5,
                            time: 1600
                        });
                    }
                },
						slideChange() {
							![0, 1].includes(this.activeIndex) ? document.querySelector('header').classList.add('active') : document.querySelector('header').classList.remove('active');
							![0, 1].includes(this.activeIndex) ? barBox.addClass('active') : barBox.removeClass('active');
							barBox.css({ '--h-size': `${100 / nSize * (this.activeIndex + 1)}%` });
							barBox.find('.one .number').html(this.activeIndex < 10 ? '0' + (this.activeIndex + 1) : this.activeIndex);
						}
					},
				});
					$('html').on('click', '#backToTopBtn', function () {
					swiper.slideTo(0, 1000, false);
				})
			}
			idxSwiper();

		});
	</script>
{/block}
</body>
</html>