315 lines
13 KiB
HTML
315 lines
13 KiB
HTML
{extend name="public/base"/}
|
||
{block name="style"}
|
||
<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
|
||
{/block}
|
||
{block name="main"}
|
||
<div class="oricoEGapp">
|
||
<!--首页 -->
|
||
<div class="oricoEGapp-index">
|
||
<!-- banner-->
|
||
<div class="oidx-banner">
|
||
{notempty name="focus_images"}
|
||
<div class="swiper-container bannerswiper">
|
||
<div class="swiper-wrapper">
|
||
{volist name="focus_images" id="fi"}
|
||
<div class="swiper-slide">
|
||
<a href="{$fi.link}"><img src="{$fi.image}" alt="{$fi.title}"></a>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
<!-- 如果需要分页器 -->
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
<!-- 四大分类 -->
|
||
{notempty name="product_categorys"}
|
||
<div class="oidx-cate">
|
||
{volist name="product_categorys" id="pct"}
|
||
<div class="cateit">
|
||
<a href="{$pct.link}">
|
||
<img src="{$pct.image}" />
|
||
<span {:style(['color'=>$pct['title_txt_color']])}>{$pct.title}</span>
|
||
</a>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
{/notempty}
|
||
<!-- 特色专题及公司实力 -->
|
||
{notempty name="featured_topics"}
|
||
<div class="oidx-gg">
|
||
{volist name="featured_topics" id="ft"}
|
||
<div class="index-img">
|
||
<img src="{$ft.image}">
|
||
<div class="Innew-text wow animated bounceInLeft animated">
|
||
<p class="title">{$ft.title}</p>
|
||
<div class="more">
|
||
<a href="{$ft.link}" target="_blank">
|
||
{:lang('查看所有')} <i class="icon-right-svg"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
{/notempty}
|
||
<!-- 明星产品/热点产品 -->
|
||
{notempty name="featured_products"}
|
||
<div class="oidx-FP">
|
||
<div class="Inpro-text">
|
||
<p class="title">{:lang('明星产品/热点产品')}</p>
|
||
</div>
|
||
<div class="m_Container">
|
||
<div class="swiper-container FPswiper">
|
||
<div class="swiper-wrapper text_center">
|
||
{volist name="featured_products" id="fp"}
|
||
<div class="swiper-slide inproimg ">
|
||
<a href="{:url('product/detail',['id'=>$fp.id])}"><img src="{$fp.cover_image}" alt="" /></a>
|
||
<div class="inprotext">
|
||
<p class="text_center title">{$fp.name}</p>
|
||
<p class="t-f16"></p>
|
||
<p class="timeblue">
|
||
<a href="{:url('product/detail',['id'=>$fp.id])}">
|
||
{:lang('了解更多')} <img src="__IMAGES__/more-r.png">
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
<!-- 如果需要分页器 -->
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
<!-- 专题图片展示 -->
|
||
<div class="oidx-ztpictureshow">
|
||
<!-- 视频 -->
|
||
{notempty name="video"}
|
||
<div class="vedio_in">
|
||
<img src="{$video.image}" />
|
||
<iframe class="margin-top-20" width="100%" style="z-index:9999;"
|
||
src="{$video.video}" title="YouTube video player" frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen="" id="videoElement"></iframe>
|
||
</div>
|
||
{/notempty}
|
||
{notempty name="scenes"}
|
||
{volist name="scenes" id="sc"}
|
||
<div class="indocking">
|
||
<a href="{$sc.link}"><img src="{$sc.image}" /></a>
|
||
<div class="position_a text_center wow animated bounceInLeft">
|
||
<p class="f_weight_500 timetitle" {:style(['color'=>$sc['title_txt_color']])}>{$sc.title}</p>
|
||
<p class=" margin-top-14 f_weight_100 timedesin" {:style(['color'=>$sc['desc_txt_color']])}>{$sc.desc}</p>
|
||
<p class=" margin-top-20 f_weight_100">
|
||
<a href="{$sc.link}" class="timeblue"> {:lang('了解更多')} <img src="__IMAGES__/more-r.png"></a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
{/notempty}
|
||
</div>
|
||
<!-- orico技术 -->
|
||
<div class="oidx-tcly">
|
||
<div class="Tech-text">
|
||
<h3>{:lang('Orico 技术')}</h3>
|
||
<p>{:lang('强大功能、简单使用')}</p>
|
||
</div>
|
||
<div class="section section-blends section-full">
|
||
<div class="section-stack section-stack--center ">
|
||
<div class="section-stack__main">
|
||
<div class="before-after shadow text-custom ba-slider">
|
||
<img src="__IMAGES__/back-img01.jpg">
|
||
<div class="resize">
|
||
<img src="__IMAGES__/back-img02.jpg" style="width: 390px;">
|
||
</div>
|
||
<span class="handle"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 品牌故事 -->
|
||
{notempty name="brand_story"}
|
||
<div class="oidx-times">
|
||
<section class="cd-horizontal-timeline loaded">
|
||
<div class="events-content">
|
||
<ul>
|
||
{volist name="brand_story" id="bs" key="k"}
|
||
<li class="{eq name='k' value='1'}selected{/eq}">
|
||
<img src="{$bs.image}">
|
||
<div class="position_a text_center">
|
||
<p class=" timetitle" {:style(['color'=>$bs['title_txt_color']])}>{$bs.title} </p>
|
||
<p class=" margin-top-14 f_weight_100 timedesin" {:style(['color'=>$bs['desc_txt_color']])}>{$bs.desc}</p>
|
||
<p class=" margin-top-20 f_weight_100">
|
||
<span class=" timeblue">
|
||
<a href="{$bs.link}">{:lang('了解更多')}<img src="__IMAGES__/more-r.png"></a>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="events-wrapper">
|
||
<div class="events">
|
||
<ol>
|
||
{volist name="brand_story" id="bs" key="k"}
|
||
<li>
|
||
<a class="{eq name='k' value='1'}selected{/eq}">{$bs.year}</a>
|
||
</li>
|
||
{/volist}
|
||
</ol>
|
||
<span class="filling-line"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
{/notempty}
|
||
<!-- 数据统计 -->
|
||
{notempty name="data_statistics"}
|
||
<div class="oidx-total">
|
||
<div class="num-bg clearfix">
|
||
<ul>
|
||
{volist name="data_statistics" id="ds"}
|
||
<li>
|
||
<h3 {:style(['color'=>$ds['desc_txt_color']])}>{$ds.desc|raw}</h3>
|
||
<p {:style(['color'=>$ds['title_txt_color']])}>{$ds.title}</p>
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
<!-- 文章轮播 -->
|
||
{notempty name="recommend_articles"}
|
||
<div class="oidx-imgqh">
|
||
<div class="swiper-container imgqhswiper">
|
||
<div class="swiper-wrapper">
|
||
{volist name="recommend_articles" id="ra"}
|
||
<div class="swiper-slide">
|
||
<a href="{:url('article/detail', ['id' => $ra.id])}">
|
||
<div class="title pos-text">{$ra.title|raw}</div>
|
||
<img src="{$ra.image}" alt="" />
|
||
</a>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
<!-- 如果需要分页器 -->
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
<!-- 常见问题 -->
|
||
{notempty name="recommend_faq"}
|
||
<div class="oidx-fqa">
|
||
<div class="faq">
|
||
<div class="faq-title ">
|
||
<h3>{:lang('常见问题')}</h3>
|
||
<h5>{:lang('回答您最关心的问题')}</h5>
|
||
<p>{:lang('客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内')}</p>
|
||
</div>
|
||
{volist name="recommend_faq" id="rq"}
|
||
<dl>
|
||
<dt class="cursor_p">
|
||
{$rq.question}<i class="rotate icon-add-svg"></i>
|
||
</dt>
|
||
<dd>{$rq.answer|raw}</dd>
|
||
</dl>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script src="__JS__/before-after.min.js" type="text/javascript"></script>
|
||
<script type="text/javascript">
|
||
//banner轮播
|
||
var bannerswiper = new Swiper('.bannerswiper', {
|
||
// 配置选项
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
}
|
||
});
|
||
// 分类轮播
|
||
var FPswiper = new Swiper(".FPswiper", {
|
||
loop: true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
|
||
slidesPerView: 2, // 设置显示一张
|
||
centeredSlides: true, //使当前图片居中显示
|
||
centeredSlidesBounds: true, //使左右两边的图片始终贴合边缘
|
||
autoplay: true, //可选选项，自动滑动
|
||
initialSlide: 0, //默认显示第二张图片索引从0开始
|
||
speed: 2000, //设置过度时间
|
||
autoplay: false,
|
||
});
|
||
// 图片切换
|
||
var imgqhswiper = new Swiper('.imgqhswiper', {
|
||
loop: true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
|
||
effect: 'coverflow', //轮播效果，coverflow覆盖流效果
|
||
slidesPerView: 2,
|
||
centeredSlides: true,
|
||
slidesOffsetBefore: 0, //偏移，使第一张图片向右偏移150px */
|
||
autoplay: true, //可选选项，自动滑动
|
||
speed: 2000, //设置过度时间
|
||
autoplay: true,
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
dynamicBullets: true,
|
||
},
|
||
});
|
||
$(function() {
|
||
//视频播放
|
||
var videos = $(".vedio_in");
|
||
videos.on("click", function() {
|
||
var elm = $(this),
|
||
conts = elm.contents(),
|
||
le = conts.length,
|
||
ifr = null;
|
||
for (var i = 0; i < le; i++) {
|
||
if (conts[i].nodeType == 8) ifr = conts[i].textContent;
|
||
}
|
||
elm.addClass("player").html(ifr);
|
||
elm.off("click");
|
||
});
|
||
// 图片覆盖左右移动
|
||
$('.before-after').beforeAfter();
|
||
// 为日期链接添加点击事件处理函数
|
||
$('.events a').on('click', function() {
|
||
// 移除所有日期链接的 selected 类
|
||
$('.events a').removeClass('selected');
|
||
// 移除所有内容列表项的 selected 类
|
||
$('.events-content li').removeClass('selected');
|
||
// 为当前点击的日期链接添加 selected 类
|
||
$(this).addClass('selected');
|
||
// 获取当前点击链接的索引
|
||
var index = $('.events a').index(this);
|
||
// 为对应的内容列表项添加 selected 类
|
||
$('.events-content li').eq(index).addClass('selected');
|
||
});
|
||
// fqa
|
||
// 为所有带有 cursor_p 类的 dt 元素添加点击事件处理函数
|
||
$('.cursor_p').on('click', function() {
|
||
// 切换对应的 dd 元素的显示和隐藏状态
|
||
$(this).next('dd').slideToggle(400);
|
||
// 获取当前 dt 元素内的图标元素
|
||
var icon = $(this).find('i');
|
||
// 切换图标类名
|
||
if (icon.hasClass('icon-add-svg')) {
|
||
icon.removeClass('icon-add-svg').addClass('icon-jian-svg');
|
||
} else {
|
||
icon.removeClass('icon-jian-svg').addClass('icon-add-svg');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{/block} |