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