{extend name="public/base"/}
{block name="main"}
<div class="oricoEGapp">
    <!--首页 -->
    <div class="oricoEGapp-index">
        <!-- banner-->
        <div class="oidx-banner">
            <div class="swiper-container bannerswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="indeximg/banne1.png" alt="图片1">
                    </div>
                    <div class="swiper-slide">
                        <img src="indeximg/banne2.png" alt="图片1">
                    </div>
                    <div class="swiper-slide">
                        <img src="indeximg/banne3.png" alt="图片1">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 四大分类-->
        <div class="oidx-cate">
            <div class="cateit">
                <img src="indeximg/sjcc.png" />
                <span>数据存储</span>
            </div>
            <div class="cateit">
                <img src="indeximg/zhcc.png" />
                <span>智慧存储</span>
            </div>
            <div class="cateit">
                <img src="indeximg/znjj.png" />
                <span>智能家具</span>
            </div>
            <div class="cateit">
                <img src="indeximg/3cpz.png" />
                <span>3C配件</span>
            </div>
        </div>
        <!-- 广告-->
        <div class="oidx-gg">
            <div class="index-img">
                <img src="indeximg/yi-1.jpg">
                <div class="Innew-text wow animated bounceInLeft animated">
                    <p class="title">固态存储</p>
                    <div class="more">
                        <a href="https://www.orico.cc/usmobile/product/subcatelists/id/167" target="_blank">
                            查看所有 <i class="icon-right-svg"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="index-img">
                <img src="indeximg/yi-1.jpg">
                <div class="Innew-text wow animated bounceInLeft animated">
                    <p class="title">固态存储</p>
                    <div class="more">
                        <a href="https://www.orico.cc/usmobile/product/subcatelists/id/167" target="_blank">
                            查看所有 <i class="icon-right-svg"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 明星产品/热点产品-->
        <div class="oidx-FP">
            <div class="Inpro-text">
                <p class="title"> 明星产品/热点产品</p>
            </div>
            <div class="m_Container">
                <div class="swiper-container FPswiper">
                    <div class="swiper-wrapper text_center">
                        <div class="swiper-slide inproimg ">
                            <a><img src="indeximg/pt.jpg" alt="" /></a>
                            <div class="inprotext">
                                <p class="text_center title">M.2 2230 磁吸硬盘盒</p>
                                <p class="t-f16"></p>
                                <p class="timeblue">
                                    <a href="http://www.orico.cc/usmobile/product/detail/id/8375"> 了解更多 <img
                                            src="indeximg/more-r.png">
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="swiper-slide inproimg ">
                            <a><img src="indeximg/pt.jpg" alt="" /></a>
                            <div class="inprotext">
                                <p class="text_center title">M.2 2230 磁吸硬盘盒</p>
                                <p class="t-f16"></p>
                                <p class="timeblue">
                                    <a href="http://www.orico.cc/usmobile/product/detail/id/8375"> 了解更多 <img
                                            src="indeximg/more-r.png">
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="swiper-slide inproimg ">
                            <a><img src="indeximg/pt.jpg" alt="" /></a>
                            <div class="inprotext">
                                <p class="text_center title">M.2 2230 磁吸硬盘盒</p>
                                <p class="t-f16"></p>
                                <p class="timeblue">
                                    <a href="http://www.orico.cc/usmobile/product/detail/id/8375"> 了解更多 <img
                                            src="indeximg/more-r.png">
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="swiper-slide inproimg ">
                            <a><img src="indeximg/pt.jpg" alt="" /></a>
                            <div class="inprotext">
                                <p class="text_center title">M.2 2230 磁吸硬盘盒</p>
                                <p class="t-f16"></p>
                                <p class="timeblue">
                                    <a href="http://www.orico.cc/usmobile/product/detail/id/8375"> 了解更多 <img
                                            src="indeximg/more-r.png">
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="swiper-slide inproimg ">
                            <a><img src="indeximg/pt.jpg" alt="" /></a>
                            <div class="inprotext">
                                <p class="text_center title">M.2 2230 磁吸硬盘盒</p>
                                <p class="t-f16"></p>
                                <p class="timeblue">
                                    <a href="http://www.orico.cc/usmobile/product/detail/id/8375"> 了解更多 <img
                                            src="indeximg/more-r.png">
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="swiper-slide inproimg ">
                            <a><img src="indeximg/pt.jpg" alt="" /></a>
                            <div class="inprotext">
                                <p class="text_center title">M.2 2230 磁吸硬盘盒</p>
                                <p class="t-f16"></p>
                                <p class="timeblue">
                                    <a href="http://www.orico.cc/usmobile/product/detail/id/8375"> 了解更多 <img
                                            src="indeximg/more-r.png">
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!--专题图片展示-->
        <div class="oidx-ztpictureshow">
            <!--视频-->
            <div class="vedio_in">
                <img src="indeximg/mobile-video.jpg">
                <iframe class="margin-top-20" width="100%" style="z-index:9999;"
                    src="https://www.youtube.com/embed/MgTbmc1amfQ" title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen="" id="videoElement"></iframe>
            </div>
            <div class="indocking">
                <a><img src="indeximg/Office-2.jpg"></a>
                <div class="position_a text_center wow animated bounceInLeft">
                    <p class="f_weight_500 timetitle">5合1便携插座 </p>
                    <p class=" margin-top-14 f_weight_100 timedesin">小巧玲珑，匠心独蕴。</p>
                    <p class=" margin-top-20 f_weight_100">
                        <a class="timeblue"> 了解更多 <img src="indeximg/more-r.png"></a>
                    </p>
                </div>
            </div>
            <div class="indocking">
                <a><img src="indeximg/Office-2.jpg"></a>
                <div class="position_a text_center wow animated bounceInLeft">
                    <p class="f_weight_500 timetitle">5合1便携插座 </p>
                    <p class=" margin-top-14 f_weight_100 timedesin">小巧玲珑，匠心独蕴。</p>
                    <p class=" margin-top-20 f_weight_100">
                        <a class="timeblue"> 了解更多 <img src="indeximg/more-r.png"></a>
                    </p>
                </div>
            </div>
        </div>
        <!--orico技术-->
        <div class="oidx-tcly">
            <div class="Tech-text">
                <h3>Orico 技术</h3>
                <p>强大功能、简单使用</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="indeximg/back-img01.jpg">
                            <div class="resize">
                                <img src="indeximg/back-img02.jpg" style="width: 390px;">
                            </div>
                            <span class="handle"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--时间轴效果-->
        <div class="oidx-times">
            <section class="cd-horizontal-timeline loaded">
                <div class="events-content">
                    <ul>
                        <li class="selected">
                            <img src="indeximg/about-1.jpg">
                            <div class="position_a text_center">
                                <p class=" timetitle">关于我们 </p>
                                <p class=" margin-top-14 f_weight_100 timedesin">
                                    深圳市奥睿科科技有限公司成立于2009年，是一家具有自主知识产权、自主品牌、自主柔性生产链的新型互联网制造企业。因其强大的专业能力，严谨的合作态度，高水准的产品而受到业内伙伴的一致认可。
                                </p>
                                <p class=" margin-top-20 f_weight_100">
                                    <span class="  timeblue">
                                        <a> 了解更多 <img src="indeximg/more-r.png">
                                        </a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <img src="indeximg/about-2.jpg">
                            <div class="position_a text_center">
                                <p class=" timetitle">全新使命</p>
                                <p class=" margin-top-14 f_weight_100 timedesin">
                                    未来，Orico将依托NAS，拓展坞，快闪U盘，数据线等系列产品线和全面的产品组合，满足全球市场的个性化的数据存储、传输、同步需求。我们也将承担社会责任，实现可持续发展和绿色创新。
                                </p>
                                <p class=" margin-top-20 f_weight_100">
                                    <span class="  timeblue">
                                        <a> 了解更多 <img src="indeximg/more-r.png">
                                        </a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <img src="indeximg/about-2.jpg">
                            <div class="position_a text_center">
                                <p class=" timetitle">全新使命</p>
                                <p class=" margin-top-14 f_weight_100 timedesin">
                                    未来，Orico将依托NAS，拓展坞，快闪U盘，数据线等系列产品线和全面的产品组合，满足全球市场的个性化的数据存储、传输、同步需求。我们也将承担社会责任，实现可持续发展和绿色创新。
                                </p>
                                <p class=" margin-top-20 f_weight_100">
                                    <span class="  timeblue">
                                        <a> 了解更多 <img src="indeximg/more-r.png">
                                        </a>
                                    </span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- .events-content -->
                <div class="timeline">
                    <div class="events-wrapper">
                        <div class="events">
                            <ol>
                                <li>
                                    <a class="selected">2021</a>
                                </li>
                                <li>
                                    <a>2022</a>
                                </li>
                                <li>
                                    <a>2023</a>
                                </li>
                            </ol>
                            <span class="filling-line"></span>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!--number-->
        <div class="oidx-total">
            <div class="num-bg clearfix">
                <ul>
                    <li>
                        <h3>200000000</h3>
                        <p>三年内订单</p>
                    </li>
                    <li>
                        <h3>20</h3>
                        <p>国际荣誉</p>
                    </li>
                    <li>
                        <h3>70</h3>
                        <p>畅销国家</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 图片切换 -->
        <div class="oidx-imgqh">
            <div class="swiper-container imgqhswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a>
                            <div class="title pos-text">ORICO DataMatrix Crowdfunding Will Kick off July 2 on
                                Kickstarter, 1st Real-Time Hybrid Storage for Post-Production</div>
                            <img src="indeximg/1 - 副本.png" alt="图片1">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a>
                            <div class="title pos-text">ORICO DataMatrix Crowdfunding Will Kick off July 2 on
                                Kickstarter, 1st Real-Time Hybrid Storage for Post-Production</div>
                            <img src="indeximg/1 - 副本.png" alt="图片1">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a>
                            <div class="title pos-text">ORICO DataMatrix Crowdfunding Will Kick off July 2 on
                                Kickstarter, 1st Real-Time Hybrid Storage for Post-Production</div>
                            <img src="indeximg/1 - 副本.png" alt="图片1">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a>
                            <div class="title pos-text">ORICO DataMatrix Crowdfunding Will Kick off July 2 on
                                Kickstarter, 1st Real-Time Hybrid Storage for Post-Production</div>
                            <img src="indeximg/1 - 副本.png" alt="图片1">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a>
                            <div class="title pos-text">ORICO DataMatrix Crowdfunding Will Kick off July 2 on
                                Kickstarter, 1st Real-Time Hybrid Storage for Post-Production</div>
                            <img src="indeximg/1 - 副本.png" alt="图片1">
                        </a>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 常见问题-->
        <div class="oidx-fqa">
            <div class="faq">
                <div class="faq-title ">
                    <h3>常见问题</h3>
                    <h5>回答您最关心的问题</h5>
                    <p>客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内</p>
                </div>
                <dl>
                    <dt class="cursor_p">同行产品品牌对比<i class="rotate icon-add-svg"></i>
                    </dt>
                    <dd>您好：orico都是采用的进口控制芯片，IC，原器件，自己研发的PCBA电路板，以及所有模具外观均是ORICO研发，生产!这种便宜的产品不是使用控制芯片，而是使用一种叫邦定的技术一个PCBA，如果使用邦定，成本很低，但是用个十来天，就会出现问题!ORICO全部使用贴片元器件所以，从用料上，完全不一样!
                    </dd>
                </dl>
                <dl>
                    <dt class="cursor_p">同行产品品牌对比<i class="rotate icon-add-svg"></i>
                    </dt>
                    <dd>您好：orico都是采用的进口控制芯片，IC，原器件，自己研发的PCBA电路板，以及所有模具外观均是ORICO研发，生产!这种便宜的产品不是使用控制芯片，而是使用一种叫邦定的技术一个PCBA，如果使用邦定，成本很低，但是用个十来天，就会出现问题!ORICO全部使用贴片元器件所以，从用料上，完全不一样!
                    </dd>
                </dl>
                <dl>
                    <dt class="cursor_p">同行产品品牌对比<i class="rotate icon-add-svg"></i>
                    </dt>
                    <dd>您好：orico都是采用的进口控制芯片，IC，原器件，自己研发的PCBA电路板，以及所有模具外观均是ORICO研发，生产!这种便宜的产品不是使用控制芯片，而是使用一种叫邦定的技术一个PCBA，如果使用邦定，成本很低，但是用个十来天，就会出现问题!ORICO全部使用贴片元器件所以，从用料上，完全不一样!
                    </dd>
                </dl>
                <dl>
                    <dt class="cursor_p">同行产品品牌对比<i class="rotate icon-add-svg"></i>
                    </dt>
                    <dd>您好：orico都是采用的进口控制芯片，IC，原器件，自己研发的PCBA电路板，以及所有模具外观均是ORICO研发，生产!这种便宜的产品不是使用控制芯片，而是使用一种叫邦定的技术一个PCBA，如果使用邦定，成本很低，但是用个十来天，就会出现问题!ORICO全部使用贴片元器件所以，从用料上，完全不一样!
                    </dd>
                </dl>
                <dl>
                    <dt class="cursor_p">同行产品品牌对比<i class="rotate icon-add-svg"></i>
                    </dt>
                    <dd>您好：orico都是采用的进口控制芯片，IC，原器件，自己研发的PCBA电路板，以及所有模具外观均是ORICO研发，生产!这种便宜的产品不是使用控制芯片，而是使用一种叫邦定的技术一个PCBA，如果使用邦定，成本很低，但是用个十来天，就会出现问题!ORICO全部使用贴片元器件所以，从用料上，完全不一样!
                    </dd>
                </dl>
            </div>
        </div>
    </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}