{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}" src="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('index.view_all')} ></span>
              <div class="tpicture"></div>
            </div>
          </div>
          {else/}
          <div class="ftItme_left">
            <p>{$topic.title}</p>
            <div class="subtitle">
              <span>{:lang('index.view_all')}</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('index.featured_products')}</p>
      <div class="swiper fpSwiper">
        <div class="swiper-wrapper">
          {volist name="featured_products" id="product"}
          <div class="swiper-slide picture">
            <a class="primg">
              <img src="{$product.cover_image}" />
            </a>
            <div class="fpptitle">{$product.name}</div>
            <div class="subtitle">{$product.short_name}</div>
            <a class="more">{:lang('index.learn_more')} ></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">
        <div class="sceneInfo">
          <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('index.learn_more')} ></a>
        </div>
        <div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
      </div>
      {/volist}
    </div>
    {/notempty}
    <!-- orico科技 -->
    <div class="oricoTechnology">
      <p class="ottitle">{:lang('index.orico_technology')}</p>
      <span class="otsbtitle">{:lang('index.orico_technology_desc')}</span>
      <div class="beforeafter ba-slider">
        <!-- 对比前的图片 -->
        <img src="__IMAGES__/indeximg1.jpg">
        <div class="resize">
          <!-- 对比后的图片 -->
          <img src="__IMAGES__/indeximg2.jpg">
        </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('index.learn_more')} ></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/index', ['id' => $article.id])}">
              <img src="{$article.image}" class="pubimg" />
            </a>
            <a class="pubinfo">
              <span>{$article.title}</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('index.faq')}</h1>
        <p class="dec">{:lang('index.faq_short_desc')}</p>
        <p class="sudec">{:lang('index.faq_desc')}</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}