{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/before-after.min.css" />

{/block}
{block name="main"}
<div class="orico_Page_index">
	<div class="pageMain">
		<!-- banner -->
		{notempty name="focus_images"}
		<div class="swiper-container bannerswiper">
			<div class="swiper-wrapper">
				{volist name="focus_images" id="focus"}
				<div class="swiper-slide">
					<a href="{$focus.link}" target="_blank"><img src="{$focus.image}" alt="{$focus.title}"></a>
				</div>
				{/volist}
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
		{/notempty}
		<!-- 产品分类信息 -->
		{notempty name="product_categorys"}
		<div class="catMain">
			{volist name="product_categorys" id="cate"}
			<a class="catit" href="{$cate.link}">
				<img src="{$cate.image}" class="catIcoImg" />
				<span class="catName" {notempty name="cate.title_txt_color" }style="color:{$cate.title_txt_color};" {/notempty}>{$cate.title}</span>
			</a>
			{/volist}
		</div>
		{/notempty}
		<!-- 特色专题及公司实力 -->
		{notempty name="featured_topics"}
		<div class="featuredtopicsMain">
			<div class="ftcontent">
				{volist name="featured_topics" id="topic" mod="2"}
				<a class="ftItme" href="{$topic.link}">
					{if condition="$mod == '1'"}
					<div class="ftItme_right">
						<img src="{$topic.image}" />
					</div>
					<div class="ftItme_left">
						<p>{$topic.title}</p>
						<div class="subtitle">
							<span>{:lang_i18n('查看所有')}</span>
							<div class="tpicture"></div>
						</div>
					</div>
					{else/}
					<div class="ftItme_left">
						<p>{$topic.title}</p>
						<div class="subtitle">
							<span>{:lang_i18n('查看所有')}</span>
							<div class="tpicture"></div>
						</div>
					</div>
					<div class="ftItme_right">
						<img src="{$topic.image}" />
					</div>
					{/if}
				</a>
				{/volist}
			</div>
		</div>
		{/notempty}
		<!-- 明星产品/热点产品 -->
		{notempty name="featured_products"}
		<div class="featuredProducts">
			<p class="biaoti">{:lang_i18n('明星产品/热点产品')}</p>
			<div class="swiper fpSwiper">
				<div class="swiper-wrapper">
					{volist name="featured_products" id="product"}
					<div class="swiper-slide picture">
						<a class="primg" href="{:url('product/detail', ['id' => $product.id])}">
							<img src="{$product.cover_image}" />
						</a>
						<div class="fpptitle">{$product.name}</div>
						<div class="subtitle">{$product.short_name}</div>
						<a class="more" href="{:url('product/detail', ['id' => $product.id])}">{:lang_i18n('了解更多')} ></a>
					</div>
					{/volist}
				</div>
				<div class="swiperasd">
					<div class="swiper-container1">
						<div class="slideshow-pag swiper-pagination"></div>
					</div>
					<div class="swiper-container swi1">
						<img class="slideshow-btn swiper-button-next" src="__IMAGES__/rightcheck.png">
						<img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
					</div>
				</div>
			</div>
		</div>
		{/notempty}
		<!-- 视频宣传 -->
		{notempty name="video"}
		<div class="hotProduct">
			<div class="hotvideo">
				<video poster="{$video.image}" src="{$video.video}" style="max-height:50rem;z-index:9999;width: 100%;object-fit: cover;" autoplay loop controls id="oricoVideo"></video>
			</div>
			<!-- <img src="{$video.image}" class="hotImg" /> -->
		</div>
		{/notempty}
		<!-- 场景介绍 -->
		{notempty name="scenes"}
		<div class="sceneIntroduction">
			{volist name="scenes" id="scene"}
			<div class="sceneitem">
				<a class="sceneInfo" href="{$scene.link}">
					<!-- <p class="scenetitle" {notempty name="scene.title_txt_color" }style="color:{$scene.title_txt_color};" {/notempty}>{$scene.title}</p>
					<p class="subtitle" {notempty name="scene.desc_txt_color" }style="color:{$scene.desc_txt_color};" {/notempty}>
						{$scene.desc|raw}</p>
					<a class="sceneMore" href="{$scene.link}">{:lang_i18n('了解更多')} ></a> -->
					<div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
				</a>
			</div>
			{/volist}
		</div>
		{/notempty}
		<!-- orico科技 -->
		<div class="oricoTechnology">
			<p class="ottitle">{:lang_i18n('ORICO 技术')}</p>
			<span class="otsbtitle">{:lang_i18n('强大功能、简单使用')}</span>
			<div class="beforeafter ba-slider">
				<!-- 对比前的图片 -->
				<img src="__IMAGES__/indeximg1.webp">
				<div class="resize">
					<!-- 对比后的图片 -->
					<img src="__IMAGES__/indeximg2.webp">
				</div>
				<!-- 可拖动的分隔条 -->
				<span class="handle"></span>
			</div>
		</div>
		<!-- 品牌故事 -->
		{notempty name="brand_story"}
		<div class="brandStory">
			<div class="swiper brandStoryswiper">
				<div class="swiper-wrapper">
					{volist name="brand_story" id="story"}
					<div class="swiper-slide bsitem">
						<div class="itmImg">
							<img src="{$story.image}" class="bsImg" />
						</div>
						<div class="bsinf">
							<div class="bstitle" {notempty name="story.title_txt_color" }style="color:{$story.title_txt_color};" {/notempty}>{$story.title}</div>
							<div class="bssubtitle" {notempty name="story.desc_txt_color" }style="color:{$story.desc_txt_color};" {/notempty}>{$story.desc|raw}</div>
							<a class="bsmore" href="{$story.link}">{:lang_i18n('了解更多')} ></a>
						</div>
					</div>
					{/volist}
				</div>
				<div class="swiperasd bs_swiperasd" id="timeline">
					<div class="bs_swcontainer">
						<div class="swiper-pagination bs_pagination"></div>
						<hr>
						{volist name="brand_story" id="story" key="k"}
						<span class="time">{$story.year}</span>
						{/volist}
					</div>
					<div class="swiper-container bs_bts">
						<img class="slideshow-btn  swiper-button-next" src="__IMAGES__/rightcheck.png" alt="" />
						<img class="slideshow-btn  swiper-button-prev " src="__IMAGES__/lefta.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		{/notempty}
		<!-- 数据统计-->
		{notempty name="data_statistics"}
		<div class="oricoDataStatistics">
			<div class="odsmain">
				{volist name="data_statistics" id="ods"}
				<div class="odsItem">
					<h1 {notempty name="ods.desc_txt_color" }style="color:{$ods.desc_txt_color};" {/notempty}>{$ods.desc|raw}</h1>
					<h3 {notempty name="ods.title_txt_color" }style="color:{$ods.title_txt_color};" {/notempty}>{$ods.title}</h3>
				</div>
				{/volist}
			</div>
		</div>
		{/notempty}
		<!-- 文章轮播 -->
		{notempty name="recommend_articles"}
		<div class="oricoPub">
			<div class="swiper pubswiper">
				<div class="swiper-wrapper">
					{volist name="recommend_articles" id="article"}
					<div class="swiper-slide  pubSwitem">
						<a class="pubimgdiv" href="{:url('article/detail', ['id' => $article.id])}">
							<img src="{$article.image}" class="pubimg" />
						</a>
						<a class="pubinfo">
							<span>{$article.title|raw}</span>
						</a>
					</div>
					{/volist}
				</div>
				<div class="swiperasd pubswiperasd">
					<div class="swiper-container">
						<img class="slideshow-btn swiper-button-next" src="__IMAGES__/rightcheck.png">
						<img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
					</div>
				</div>
			</div>
		</div>
		{/notempty}
		<!-- FAQ-->
		{notempty name="recommend_faq"}
		<div class="oricoFQA">
			<div class="fqaleft">
				<h1 class="title">{:lang_i18n('常见问题')}</h1>
				<p class="dec">{:lang_i18n('回答您最关心的问题')}</p>
				<p class="sudec">{:lang_i18n('客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内')}</p>
			</div>
			<div class="fqaright">
				<ul class="accordion">
					{volist name="recommend_faq" id="faq"}
					<li class="fqali">
						<div class="fqa-question">
							<h3>{$faq.question} </h3>
							<span class="xiala">+</span>
						</div>
						<div class="fqa-answer">
							<p>{$faq.answer|raw}</p>
						</div>
					</li>
					{/volist}
				</ul>
			</div>
		</div>
		{/notempty}
		<!-- 底部固定提示 -->
		{eq name="Request.cookie.think_lang" value="en-us"}
		<div class="oricofixd-info">
			<div class="ofiinfo">We use cookies to ensure you get the best experience on our website. By
				continuing to browse, you agree to our use of cookies.</div>
			<div class="ofibt"><button>OK,got it!</button></div>
			<div class="oficlose"><span class="close-btn">×</span></div>
		</div>
		{/eq}
	</div>
</div>
{/block}
{block name="script"}
<script>
	$(document).ready(function () {
		// 图片左右移动显示全部
		$('.ba-slider').beforeAfter({
			startPercent: 50, // 初始分隔条位置为 50%
			handle: '.handle', // 指定分隔条元素的选择器
			resize: '.resize' // 指定可调整大小部分的选择器
		});

		// 底部关闭
		$(".oficlose").on("click", function () {
			$(".oricofixd-info").hide();
		});
		// 视频
		const video = $('#oricoVideo');
		const videoContainer = $('.hotvideo');
		const img = $('.hotImg');
		// 监听视频加载完成事件
		video.on('canplaythrough', function () {
			// 显示视频容器，隐藏图片
			videoContainer.css('display', 'block');
			img.hide();
			console.log('视频可以流畅播放');
		});
		// 处理视频加载失败（可选）
		video.on('error', function () {
			// 可在此添加失败提示，如显示错误信息或保留图片
			img.show();
			videoContainer.css('display', 'none');
			console.log('视频加载或播放出错');
		});
	});
	$(function () {
		// banner轮播
		var mySwiper = new Swiper('.bannerswiper', {
			// 配置选项
			loop: true,
			autoplay: {
				delay: 3000,
			},
			pagination: {
				el: '.swiper-pagination',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});
		var fpSwiper = new Swiper(".fpSwiper", {
			slidesPerView: 3,
			spaceBetween: 30,
			slidesPerGroup: 1,
			loop: true,
			autoplay: {
				delay: 5000,
				pauseOnMouseEnter: true,
				disableOnInteraction: false,
			},
			slidesPerView: "auto",
			centeredSlides: true,
			loopFillGroupWithBlank: true,
			loopAdditionalSlides: 3,
			pagination: {
				el: ".swiper-pagination",
				type: "progressbar",
			},
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
		});
		//品牌故事轮播
		var brandStoryswiper = new Swiper(".brandStoryswiper", {
			pagination: {
				el: ".swiper-pagination",
			},
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
		});
		// 计算品牌故事轮播个数样式调整
		function calculateDisplayValue(n) {
			return 8 - n;
		}
		// 动态调整分页点和年份位置
		function adjustTimeline() {
			const slideCount = brandStoryswiper.slides.length; // 获取轮播项个数
			if (slideCount === 0) return;
			// 计算分页点间距
			const bulletMargin = ((100 / slideCount) - 2) + "%";
			$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet").css("margin-right", bulletMargin);
			// 最后一个分页点的 margin-right 设为 0
			$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet:last-child").css("margin-right", "0");
			// 计算年份位置（固定间隔21%）
			const timeSpans = $(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time");
			var tag = 0
			var percent = 0
			var basenum = calculateDisplayValue(slideCount)
			timeSpans.each(function (index) {
				if (index == 1) {
					tag = ((100 / slideCount)) * index - (index > 0 ? basenum : 0)
					percent = tag
				}
				if (index > 1) {
					percent = tag * index
				}
				$(this).css("left", `${percent}%`);
			});
		}
		// 初始化时调用
		adjustTimeline();
		// 窗口Resize时重新计算（可选）
		$(window).on("resize", adjustTimeline);
		// 宣传banner
		var pubswiper = new Swiper(".pubswiper", {
			loop: true,
			autoplay: {
				delay: 5000,
				pauseOnMouseEnter: true,
				disableOnInteraction: false,
			},
			//slidesPerView: 1,
			slidesPerView: "auto",
			centeredSlides: true,
			spaceBetween: 32,
			pagination: {
				el: ".swiper-pagination",
				click: true
			},
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
		});
		// FAQ问答展开收起
		$(".fqali").on('click', function () {
			if ($(this).children("div.fqa-answer").is(':visible')) {
				$(".fqali").removeClass('active');
				$(".fqa-answer").hide();
				$(".text-name").addClass('text-hidden');
				$(".xiala").text('+');
			} else {
				$(".fqali").removeClass('active');
				$(".fqa-answer").hide();
				$(".text-name").addClass('text-hidden')
				$(".xiala").text('+');
				$(this).addClass('active');
				$(this).children('div.fqa-answer').show();
				$(this).children('div.fqa-question').find('span').text('-');
				$(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
			}
		})
		// 首先隐藏视频元素和加载中的图片  要放开注释
		$("#hotvideo").hide();
		// 监听视频的加载事件
		setTimeout(function () {
			$("#hotvideo").on("load", function () {
				// 视频加载完成时，显示视频元素，隐藏加载中的图片
				$("#hotvideo").show();
				$("#hotImg").hide();
			});
		}, 1000);
		// 监听视频的加载失败事件
		setTimeout(function () {
			$("#hotvideo").on("error", function () {
				// 视频加载失败时，显示加载中的图片，隐藏视频元素
				$("#hotImg").show();
				$("#videoElement").hide();
			});
		}, 1500);
	});
</script>
{/block}