Compare commits
5 Commits
e648538fe5
...
caaf9966d4
| Author | SHA1 | Date | |
|---|---|---|---|
| caaf9966d4 | |||
| 999c8adc9d | |||
| ab462e88af | |||
| 31982f2486 | |||
| 1eae15631b |
@@ -1,382 +1,380 @@
|
||||
{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="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 视频宣传 -->
|
||||
{notempty name="video"}
|
||||
<div class="hotProduct">
|
||||
<div class="hotvideo">
|
||||
<iframe src="{$video.video}" title="YouTube video player" style="width:100%;height:67rem;z-index:9999;" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen id="videoElement"></iframe>
|
||||
</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">
|
||||
<div id="after"></div>
|
||||
<div id="before"></div>
|
||||
<div class="drag-circle"></div>
|
||||
</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>
|
||||
<!-- <span class="time1">2021</span> -->
|
||||
<!-- <span class="time2">2022</span> -->
|
||||
<!-- <span class="time3">2023</span> -->
|
||||
</div>
|
||||
<div class="swiper-container bs_bts">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png" alt="" />
|
||||
<img class="slideshow-btn swiper-button-prev " src="static/index/temp_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="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_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}
|
||||
<!-- 底部固定提示 -->
|
||||
<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 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="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 视频宣传 -->
|
||||
{notempty name="video"}
|
||||
<div class="hotProduct">
|
||||
<div class="hotvideo">
|
||||
<iframe src="{$video.video}" title="YouTube video player" style="width:100%;height:67rem;z-index:9999;"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen id="videoElement"></iframe>
|
||||
</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="static/index/images/indeximg1.jpg">
|
||||
<div class="resize">
|
||||
<!-- 对比后的图片 -->
|
||||
<img src="static/index/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>
|
||||
<!-- <span class="time1">2021</span> -->
|
||||
<!-- <span class="time2">2022</span> -->
|
||||
<!-- <span class="time3">2023</span> -->
|
||||
</div>
|
||||
<div class="swiper-container bs_bts">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png" alt="" />
|
||||
<img class="slideshow-btn swiper-button-prev " src="static/index/temp_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="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_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}
|
||||
<!-- 底部固定提示 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let isDragging = false;
|
||||
let startX;
|
||||
let initialLeft;
|
||||
$('.drag-circle').mousedown(function(e) {
|
||||
isDragging = true;
|
||||
startX = e.pageX;
|
||||
initialLeft = $('.drag-circle').position().left;
|
||||
});
|
||||
$(document).mousemove(function(e) {
|
||||
if (isDragging) {
|
||||
const currentX = e.pageX;
|
||||
const diffX = currentX - startX;
|
||||
let newLeft = initialLeft + diffX;
|
||||
const containerWidth = $('.beforeafter').width();
|
||||
newLeft = Math.max(20, Math.min(containerWidth - 20, newLeft));
|
||||
$('.drag-circle').css('left', newLeft);
|
||||
$('#before').width(newLeft);
|
||||
}
|
||||
});
|
||||
$(document).mouseup(function() {
|
||||
isDragging = false;
|
||||
$(document).ready(function () {
|
||||
// 图片左右移动显示全部
|
||||
$('.ba-slider').beforeAfter({
|
||||
startPercent: 50, // 初始分隔条位置为 50%
|
||||
handle: '.handle', // 指定分隔条元素的选择器
|
||||
resize: '.resize' // 指定可调整大小部分的选择器
|
||||
});
|
||||
|
||||
// 底部关闭
|
||||
$(".oficlose").on("click", function() {
|
||||
$(".oricofixd-info").hide();
|
||||
$(".oficlose").on("click", function () {
|
||||
$(".oricofixd-info").hide();
|
||||
});
|
||||
});
|
||||
$(function() {
|
||||
});
|
||||
$(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',
|
||||
},
|
||||
// 配置选项
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
// 宣传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",
|
||||
},
|
||||
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');
|
||||
}
|
||||
$(".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();
|
||||
});
|
||||
setTimeout(function () {
|
||||
$("#hotvideo").on("load", function () {
|
||||
// 视频加载完成时，显示视频元素，隐藏加载中的图片
|
||||
$("#hotvideo").show();
|
||||
$("#hotImg").hide();
|
||||
});
|
||||
}, 1000);
|
||||
// 监听视频的加载失败事件
|
||||
setTimeout(function() {
|
||||
$("#hotvideo").on("error", function() {
|
||||
// 视频加载失败时，显示加载中的图片，隐藏视频元素
|
||||
$("#hotImg").show();
|
||||
$("#videoElement").hide();
|
||||
});
|
||||
setTimeout(function () {
|
||||
$("#hotvideo").on("error", function () {
|
||||
// 视频加载失败时，显示加载中的图片，隐藏视频元素
|
||||
$("#hotImg").show();
|
||||
$("#videoElement").hide();
|
||||
});
|
||||
}, 1500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
@@ -1,6 +1,6 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
|
||||
<link rel="stylesheet" href="__CSS__/category.css" type="text/css" />
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_products">
|
||||
|
||||
59
app/index/view/product/product_category.html
Normal file
59
app/index/view/product/product_category.html
Normal file
@@ -0,0 +1,59 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
|
||||
{block name="main"}
|
||||
<div class="orico_Page_category">
|
||||
<!--首页主题内容 -->
|
||||
<div class="pageMain">
|
||||
<div class="cat">
|
||||
<div class="ori-pd-title">
|
||||
<div class="catname">Power Strip</div>
|
||||
<a class="catmore">
|
||||
<span class="tmore">View all</span>
|
||||
<img src="/static/index/images/more.png" class="catmoreImg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ori-pd-list">
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="newcp">New</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="newcp">New</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="newcp">New</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
34
app/index/view/product/product_subcategory.html
Normal file
34
app/index/view/product/product_subcategory.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
|
||||
{block name="main"}
|
||||
<div class="orico_Page_subcategory">
|
||||
<!--公共头部-->
|
||||
<iframe align="center" width="100%" height="60" src="head.html" frameborder="no" border="0" marginwidth="0"
|
||||
marginheight="0" scrolling="no"></iframe>
|
||||
<!-- 这个图片可能有可能没有-->
|
||||
<img src="/static/index/images/SSD-1920x900-CN.jpg" class="sbbanner">
|
||||
<!--首页主题内容 -->
|
||||
<div class="pageMain">
|
||||
<h1 class="ori-pd-title">Power Strip</h1>
|
||||
<div class="ori-pd-list">
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/prtest.jpg" class="prdimg prdimg-show" />
|
||||
<img src="/static/index/images/prtest1.jpg" class="prdimg" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="prd-colors">
|
||||
<div class="prdolorit on">
|
||||
<img src="/static/index/images/WH.jpg">
|
||||
</div>
|
||||
<div class="prdolorit">
|
||||
<img src="/static/index/images/BK.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
26
app/index/view/product/search.html
Normal file
26
app/index/view/product/search.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_search.css" type="text/css" />
|
||||
{block name="main"}
|
||||
<!--内容 -->
|
||||
<div class="searchMain">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-ipt">
|
||||
<input class="ssipt" placeholder="请搜索" />
|
||||
<img src="static/index/images/ssico.png" class="ssico" />
|
||||
</div>
|
||||
<!-- 搜索结果列表-->
|
||||
<ul class="seul">
|
||||
<a>
|
||||
<li class="seitme">
|
||||
<img src="static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="search-pr-img" />
|
||||
<div class="prInfp">
|
||||
<div class="txt1"><strong class="redpoint">电脑</strong>显示器支架</div>
|
||||
<div class="txt2"> ORICO-HSQ-02Q </div>
|
||||
<div class="txt3"> ORICO-HSQ-02Q </div>
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
{/block}
|
||||
@@ -10,12 +10,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/public.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_header.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_header.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
|
||||
{block name="style"}{/block}
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
|
||||
<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
|
||||
<script type="text/javascript" src="/static/index/js/before-after.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{block name="header"}
|
||||
|
||||
@@ -1,74 +1,88 @@
|
||||
<!-- 英文官网有-->
|
||||
<div class="oricoCont">
|
||||
<div class="ctitem">
|
||||
<img src="__IMAGES__/customer-service.png" class="ctimg" />
|
||||
<h3 class="cttitle">Become a Distributor</h3>
|
||||
<span class="ctdec">We are available from monday to friday to answer your questions.</span>
|
||||
</div>
|
||||
<div class="ctitem">
|
||||
<img src="__IMAGES__/contact-Us.png" class="ctimg" />
|
||||
<h3 class="cttitle">Contact US</h3>
|
||||
<span class="ctdec">Need to contact us? Just send us an e-mail at odmmarket@orico.com.cn</span>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="orico_footer">
|
||||
<div class="fotter">
|
||||
<!--中间信息-->
|
||||
<div class="footerMain">
|
||||
<!-- 上面-->
|
||||
<div class="foottxttop">
|
||||
<!--ico -->
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/bottomlogo.png" class="footerico" />
|
||||
</a>
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{:lang('footer_navigation.product_categorys')}</p>
|
||||
<ul>
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li><a href="{:url('product/category', ['id' => $vo.id])}" class="fline">{$vo.name}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{if condition="!empty($footer_navigation)"}
|
||||
{volist name="footer_navigation" id="vo"}
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{$vo.name}</p>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<ul>
|
||||
{volist name="vo.children" id="vc"}
|
||||
<li><a href="{$vc.link}" class="fline">{$vc.name}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{:lang('footer_contact')}</p>
|
||||
{if condition="!empty($contact_config)"}
|
||||
<ul>
|
||||
{volist name="contact_config" id="vo"}
|
||||
<li>
|
||||
<a href="javascript:void(0);" class="fline">
|
||||
{if condition="$vo.type == 'image'"}
|
||||
<img src="{$vo.value}" {if condition="!empty($vo.extra)"}style="{$vo.extra}"{/if} />
|
||||
{else/}
|
||||
{$vo.value}
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="foottxtbottom">
|
||||
{if condition="!empty($media_config)"}
|
||||
<div class="ftopicos">
|
||||
<ul>
|
||||
{volist name="media_config" id="vo"}
|
||||
<a href="{$vo.url.value}"><img src="{$vo.image.value}" {if condition="!empty($vo.image.extra)"}style="{$vo.image.extra}"{/if} /></a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{if condition="!empty($basic_config.website_powerby)"}
|
||||
<div class="ftcopyright">
|
||||
<span>{$basic_config.website_powerby.value}</span>
|
||||
{if condition="!empty($basic_config.website_icp)"}
|
||||
<a href="https://beian.miit.gov.cn/">（{$basic_config.website_icp.value}）</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- <div class="batext">粤公网安备 44030702002297号</div> -->
|
||||
</div>
|
||||
<div class="fotter">
|
||||
<!--中间信息-->
|
||||
<div class="footerMain">
|
||||
<!-- 上面-->
|
||||
<div class="foottxttop">
|
||||
<!--ico -->
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/bottomlogo.png" class="footerico" />
|
||||
</a>
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{:lang('footer_navigation.product_categorys')}</p>
|
||||
<ul>
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li><a href="{:url('product/category', ['id' => $vo.id])}" class="fline">{$vo.name}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{if condition="!empty($footer_navigation)"}
|
||||
{volist name="footer_navigation" id="vo"}
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{$vo.name}</p>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<ul>
|
||||
{volist name="vo.children" id="vc"}
|
||||
<li><a href="{$vc.link}" class="fline">{$vc.name}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
<div class="foootCt">
|
||||
<p class="ftitle">{:lang('footer_contact')}</p>
|
||||
{if condition="!empty($contact_config)"}
|
||||
<ul>
|
||||
{volist name="contact_config" id="vo"}
|
||||
<li>
|
||||
<a href="javascript:void(0);" class="fline">
|
||||
{if condition="$vo.type == 'image'"}
|
||||
<img src="{$vo.value}" {if condition="!empty($vo.extra)" }style="{$vo.extra}" {/if} />
|
||||
{else/}
|
||||
{$vo.value}
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="foottxtbottom">
|
||||
{if condition="!empty($media_config)"}
|
||||
<div class="ftopicos">
|
||||
<ul>
|
||||
{volist name="media_config" id="vo"}
|
||||
<a href="{$vo.url.value}"><img src="{$vo.image.value}" {if condition="!empty($vo.image.extra)"
|
||||
}style="{$vo.image.extra}" {/if} /></a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{if condition="!empty($basic_config.website_powerby)"}
|
||||
<div class="ftcopyright">
|
||||
<span>{$basic_config.website_powerby.value}</span>
|
||||
{if condition="!empty($basic_config.website_icp)"}
|
||||
<a href="https://beian.miit.gov.cn/">（{$basic_config.website_icp.value}）</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- <div class="batext">粤公网安备 44030702002297号</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,198 +1,201 @@
|
||||
<header class="header-PC">
|
||||
<div id="header">
|
||||
<!-- LOG -->
|
||||
<div class="nav1">
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/logo.png" />
|
||||
<div id="header">
|
||||
<!-- LOG -->
|
||||
<div class="nav1">
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/logo.png" />
|
||||
</a>
|
||||
</div>
|
||||
<!--顶部导航栏 -->
|
||||
<div class="nav2">
|
||||
<nav id="booNavigation" class="booNavigation">
|
||||
<ul>
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<li class="navItem">
|
||||
<a href="javascript:void(0);">{:lang('header_navigation.product_categorys')}</a>
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<ol class="navItemConten">
|
||||
<!-- 左边子菜单-->
|
||||
<ul class="navItem_cyleft">
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li class="{$key == 0 ? 'it_active' : ''}">
|
||||
<a href="javascript:void(0);">{$vo.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
<!-- 右边子菜单-->
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"
|
||||
{else/}style="display: none;" {/eq}>
|
||||
{volist name="vo.children" id="vc"}
|
||||
<dl class="nav_cyrightit">
|
||||
<dt>
|
||||
<a href="{:url('product/category', ['id' => $vc.id])}">{$vc.name}</a>
|
||||
</dt>
|
||||
{volist name="vc.children" id="vcc"}
|
||||
<dd>
|
||||
<a href="{:url('product/category', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||||
</dd>
|
||||
{/volist}
|
||||
</dl>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
</ol>
|
||||
</li>
|
||||
{/if}
|
||||
{volist name="header_navigation" id="vo"}
|
||||
<li class="navItem">
|
||||
<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<!--下拉菜单 -->
|
||||
<ol class="navItemConten1">
|
||||
{volist name="vo.children" id="voc"}
|
||||
<li>
|
||||
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ol>
|
||||
{/if}
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- 顶部搜索/国家选择/商店-->
|
||||
<div class="nav3">
|
||||
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
|
||||
<div class="choesCountry">
|
||||
<img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
|
||||
<!--国家选择 -->
|
||||
<div class="topCountry" id="top-country">
|
||||
<ul>
|
||||
<li class="closec">
|
||||
<span class="closecountrybt">×</span>
|
||||
</li>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}">
|
||||
<li>
|
||||
<div class="cico">
|
||||
<img src="{$vo.lang_icon}" class="countryimg" />
|
||||
</div>
|
||||
<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
|
||||
</li>
|
||||
</a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
<!--顶部导航栏 -->
|
||||
<div class="nav2">
|
||||
<nav id="booNavigation" class="booNavigation">
|
||||
<ul>
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<li class="navItem">
|
||||
<a href="javascript:void(0);">{:lang('header_navigation.product_categorys')}</a>
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<ol class="navItemConten">
|
||||
<!-- 左边子菜单-->
|
||||
<ul class="navItem_cyleft">
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li class="{$key == 0 ? 'it_active' : ''}">
|
||||
<a href="javascript:void(0);">{$vo.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
<!-- 右边子菜单-->
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="navItem_cyright" {eq name="idx" value="1"}style="display: block;"{else/}style="display: none;"{/eq}>
|
||||
{volist name="vo.children" id="vc"}
|
||||
<dl class="nav_cyrightit">
|
||||
<dt>
|
||||
<a href="{:url('product/category', ['id' => $vc.id])}">{$vc.name}</a>
|
||||
</dt>
|
||||
{volist name="vc.children" id="vcc"}
|
||||
<dd>
|
||||
<a href="{:url('product/category', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||||
</dd>
|
||||
{/volist}
|
||||
</dl>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
</ol>
|
||||
</li>
|
||||
{/if}
|
||||
{volist name="header_navigation" id="vo"}
|
||||
<li class="navItem">
|
||||
<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<!--下拉菜单 -->
|
||||
<ol class="navItemConten1">
|
||||
{volist name="vo.children" id="voc"}
|
||||
<li>
|
||||
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ol>
|
||||
{/if}
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- 顶部搜索/国家选择/商店-->
|
||||
<div class="nav3">
|
||||
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
|
||||
<div class="choesCountry">
|
||||
<img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
|
||||
<!--国家选择 -->
|
||||
<div class="topCountry" id="top-country">
|
||||
<ul>
|
||||
<li class="closec">
|
||||
<span class="closecountrybt">×</span>
|
||||
</li>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}">
|
||||
<li>
|
||||
<div class="cico">
|
||||
<img src="{$vo.lang_icon}" class="countryimg" />
|
||||
</div>
|
||||
<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
|
||||
</li>
|
||||
</a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 英文官网才有-->
|
||||
<a class="storetopbt"><img src="__IMAGES__/shopico.png" class="storeImgico" />Store </a>
|
||||
</div>
|
||||
<!-- 搜索弹框-->
|
||||
<div class="searchmodalMian" id="scmodal">
|
||||
<div class="searchmodalct">
|
||||
<span class="close-btn">×</span>
|
||||
<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
|
||||
<!-- 历史记录 -->
|
||||
<div class="searchhistory">
|
||||
<p class="h_title">{:lang('header_search.history')}</p>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div class="popProduct">
|
||||
<p class="h_title">{:lang('header_search.hot_product')}</p>
|
||||
<div class="popmain">
|
||||
{volist name="header_hot_products" id="vo"}
|
||||
<div class="popitem">
|
||||
<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}"
|
||||
class="popimg" /></a>
|
||||
<div class="productName">{$vo.name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索弹框-->
|
||||
<div class="searchmodalMian" id="scmodal">
|
||||
<div class="searchmodalct">
|
||||
<span class="close-btn">×</span>
|
||||
<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
|
||||
<!-- 历史记录 -->
|
||||
<div class="searchhistory">
|
||||
<p class="h_title">{:lang('header_search.history')}</p>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div class="popProduct">
|
||||
<p class="h_title">{:lang('header_search.hot_product')}</p>
|
||||
<div class="popmain">
|
||||
{volist name="header_hot_products" id="vo"}
|
||||
<div class="popitem">
|
||||
<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}" class="popimg" /></a>
|
||||
<div class="productName">{$vo.name}</div>
|
||||
<div class="produc-dec">{$vo.name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// 搜索历史记录处理
|
||||
function history(keywords) {
|
||||
var history = localStorage.getItem('header_search_keywords');
|
||||
if (!history) {
|
||||
history = [];
|
||||
} else {
|
||||
history = JSON.parse(history);
|
||||
}
|
||||
|
||||
// 记录搜索关键词
|
||||
if (keywords) {
|
||||
if (history.includes(keywords)) {
|
||||
history.splice(history.indexOf(keywords), 1);
|
||||
}
|
||||
history.unshift(keywords);
|
||||
if (history.length > 3) {
|
||||
history.pop();
|
||||
}
|
||||
localStorage.setItem('header_search_keywords', JSON.stringify(history));
|
||||
return history;
|
||||
}
|
||||
|
||||
// 回显搜索历史记录
|
||||
history.forEach(function (item) {
|
||||
$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
|
||||
});
|
||||
|
||||
return history;
|
||||
$(document).ready(function () {
|
||||
// 搜索历史记录处理
|
||||
function history (keywords) {
|
||||
var history = localStorage.getItem('header_search_keywords');
|
||||
if (!history) {
|
||||
history = [];
|
||||
} else {
|
||||
history = JSON.parse(history);
|
||||
}
|
||||
// 记录搜索关键词
|
||||
if (keywords) {
|
||||
if (history.includes(keywords)) {
|
||||
history.splice(history.indexOf(keywords), 1);
|
||||
}
|
||||
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
||||
function handleHover($element, $content) {
|
||||
$element.mouseenter(function () {
|
||||
$content.stop(true, true).slideDown(400);
|
||||
}).mouseleave(function () {
|
||||
$content.stop(true, true).slideUp(400);
|
||||
});
|
||||
history.unshift(keywords);
|
||||
if (history.length > 3) {
|
||||
history.pop();
|
||||
}
|
||||
// 处理第一个导航项
|
||||
handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
|
||||
// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
|
||||
$('.navItem_cyleft li').mouseenter(function () {
|
||||
$(this).addClass('it_active').siblings().removeClass('it_active');
|
||||
$('.navItem_cyright').hide();
|
||||
$('.navItem_cyright').eq($(this).index()).show();
|
||||
});
|
||||
// 处理第5 - 8个导航项
|
||||
for (let i = 4; i < 8; i++) {
|
||||
handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
|
||||
}
|
||||
// 点击搜索
|
||||
$('#openModalBtn').click(function () {
|
||||
$('#scmodal').toggle();
|
||||
});
|
||||
$('.close-btn').click(function () {
|
||||
$('#scmodal').hide();
|
||||
});
|
||||
// 搜索历史记录回显
|
||||
history();
|
||||
// 执行搜索
|
||||
$('#serrchinput').keydown(function (event) {
|
||||
if (event.originalEvent.keyCode == 13) {
|
||||
var keywords = $(this).val();
|
||||
if (keywords == '') {
|
||||
return false;
|
||||
}
|
||||
// 记录搜索关键词
|
||||
history(keywords);
|
||||
localStorage.setItem('header_search_keywords', JSON.stringify(history));
|
||||
return history;
|
||||
}
|
||||
|
||||
// 跳转到搜索页面
|
||||
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
||||
}
|
||||
});
|
||||
// 点击选择国家
|
||||
$('#countrycheck').click(function () {
|
||||
$('#top-country').toggle();
|
||||
});
|
||||
$('.closecountrybt').click(function () {
|
||||
$('#top-country').hide();
|
||||
});
|
||||
// 回显搜索历史记录
|
||||
history.forEach(function (item) {
|
||||
$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
|
||||
});
|
||||
|
||||
return history;
|
||||
}
|
||||
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
||||
function handleHover ($element, $content) {
|
||||
$element.mouseenter(function () {
|
||||
$content.stop(true, true).slideDown(600);
|
||||
}).mouseleave(function () {
|
||||
$content.stop(true, true).slideUp(600);
|
||||
});
|
||||
}
|
||||
// 处理第一个导航项
|
||||
handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
|
||||
// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
|
||||
$('.navItem_cyleft li').mouseenter(function () {
|
||||
$(this).addClass('it_active').siblings().removeClass('it_active');
|
||||
$('.navItem_cyright').hide();
|
||||
$('.navItem_cyright').eq($(this).index()).show();
|
||||
});
|
||||
// 处理第5 - 8个导航项
|
||||
for (let i = 4; i < 8; i++) {
|
||||
handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
|
||||
}
|
||||
// 点击搜索
|
||||
$('#openModalBtn').click(function () {
|
||||
$('#scmodal').toggle();
|
||||
});
|
||||
$('.close-btn').click(function () {
|
||||
$('#scmodal').hide();
|
||||
});
|
||||
// 搜索历史记录回显
|
||||
history();
|
||||
// 执行搜索
|
||||
$('#serrchinput').keydown(function (event) {
|
||||
if (event.originalEvent.keyCode == 13) {
|
||||
var keywords = $(this).val();
|
||||
if (keywords == '') {
|
||||
return false;
|
||||
}
|
||||
// 记录搜索关键词
|
||||
history(keywords);
|
||||
|
||||
// 跳转到搜索页面
|
||||
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
||||
}
|
||||
});
|
||||
// 点击选择国家
|
||||
$('#countrycheck').click(function () {
|
||||
$('#top-country').toggle();
|
||||
});
|
||||
$('.closecountrybt').click(function () {
|
||||
$('#top-country').hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
2
public/static/.gitignore
vendored
2
public/static/.gitignore
vendored
@@ -1,2 +1,2 @@
|
||||
*
|
||||
|
||||
!.gitignore
|
||||
1
public/static/index/css/before-after.min.css
vendored
Normal file
1
public/static/index/css/before-after.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.ba-slider{position:relative;overflow:hidden}.ba-slider img{width:100%;display:block;max-width:none}.ba-slider .resize{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}.ba-slider .handle{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(0,0,0,.5);cursor:ew-resize}.ba-slider .handle:after{position:absolute;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;content:'\21d4';color:#fff;font-weight:700;font-size:36px;text-align:center;line-height:64px;background:#ffb800;border:1px solid #e6a600;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5),inset 0 60px 50px -30px #ffd466}.ba-slider .handle.ba-draggable:after{width:48px;height:48px;margin:-24px 0 0 -24px;line-height:50px;font-size:30px}
|
||||
100
public/static/index/css/category.css
Normal file
100
public/static/index/css/category.css
Normal file
@@ -0,0 +1,100 @@
|
||||
@charset "UTF-8";
|
||||
.orico_Page_products {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.orico_Page_products .focus_image {
|
||||
padding-top: 3.75rem;
|
||||
}
|
||||
.orico_Page_products .focus_image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.orico_Page_products p, .orico_Page_products a, .orico_Page_products div, .orico_Page_products span {
|
||||
font-family: "Microsoft YaHei", "Arial", sans-serif;
|
||||
}
|
||||
.orico_Page_products .pageMain {
|
||||
width: 85%;
|
||||
padding: 50px 0 2.5rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-title {
|
||||
font-size: 1.5em;
|
||||
color: #101010;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 自动换行 */
|
||||
justify-content: flex-start; /* 水平方向均匀分布 */
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem {
|
||||
width: 24%;
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding-bottom: 1em;
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
margin-right: 1%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
margin: 25px auto;
|
||||
display: none;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg-show {
|
||||
display: block;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
|
||||
color: #101010;
|
||||
font-size: 1.125rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
|
||||
font-size: 1.125rem;
|
||||
color: #737373;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
|
||||
width: 92%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 0.65rem;
|
||||
cursor: pointer;
|
||||
margin: 0 0.3125rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit .rgb_hex {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem:hover {
|
||||
box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
@@ -28,8 +28,15 @@
|
||||
left: 9%;
|
||||
top: 53%;
|
||||
}
|
||||
.orico_Page_index .pageMain .bannerswiper .swiper-horizontal > .swiper-pagination-bullets,
|
||||
.orico_Page_index .pageMain .bannerswiper .swiper-pagination-bullets.swiper-pagination-horizontal {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.bannerswiper
|
||||
.swiper-horizontal
|
||||
> .swiper-pagination-bullets,
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.bannerswiper
|
||||
.swiper-pagination-bullets.swiper-pagination-horizontal {
|
||||
bottom: 5%;
|
||||
}
|
||||
.orico_Page_index .pageMain .bannerswiper .swiper-button-next,
|
||||
@@ -91,7 +98,12 @@
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_left {
|
||||
width: 53%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -99,47 +111,102 @@
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left p {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_left
|
||||
p {
|
||||
font-size: 2.625rem;
|
||||
line-height: 2.8125rem;
|
||||
font-weight: 600;
|
||||
height: 5.9375rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_left
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle .tpicture {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_left
|
||||
.subtitle
|
||||
.tpicture {
|
||||
width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
background: url("/static/index/images/more2.png") no-repeat;
|
||||
background: url('/static/index/images/more2.png') no-repeat;
|
||||
background-position: -26px 0px;
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_left
|
||||
.subtitle:hover {
|
||||
color: #004bfa;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover .tpicture {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_left
|
||||
.subtitle:hover
|
||||
.tpicture {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_right {
|
||||
width: 47%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_right
|
||||
img {
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
border-start-end-radius: 1.625rem;
|
||||
border-end-end-radius: 1.625rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img:hover {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme
|
||||
.ftItme_right
|
||||
img:hover {
|
||||
transform: scale(1.09);
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme:nth-child(even) .ftItme_right img {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredtopicsMain
|
||||
.ftcontent
|
||||
.ftItme:nth-child(even)
|
||||
.ftItme_right
|
||||
img {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-start-start-radius: 1.625rem;
|
||||
@@ -162,7 +229,12 @@
|
||||
margin-left: 6%;
|
||||
position: relative;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture {
|
||||
display: block;
|
||||
width: 21.875rem;
|
||||
height: 29.375rem;
|
||||
@@ -173,7 +245,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture
|
||||
.primg {
|
||||
width: 13.5rem;
|
||||
height: 12.875rem;
|
||||
display: block;
|
||||
@@ -185,14 +263,34 @@
|
||||
background-repeat: no-repeat;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture
|
||||
.primg
|
||||
img {
|
||||
width: 13.5rem;
|
||||
height: 12.875rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img:hover {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture
|
||||
.primg
|
||||
img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .fpptitle {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture
|
||||
.fpptitle {
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
@@ -206,7 +304,13 @@
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .subtitle {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
line-height: 1.125rem;
|
||||
font-size: medium;
|
||||
@@ -218,7 +322,13 @@
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .more {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiper-wrapper
|
||||
.picture
|
||||
.more {
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
@@ -233,15 +343,33 @@
|
||||
position: relative;
|
||||
height: 6.25rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swiper-container1 {
|
||||
width: 85%;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swiper-container1
|
||||
.swiper-pagination-progressbar
|
||||
.swiper-pagination-progressbar-fill {
|
||||
background-color: #555 !important;
|
||||
margin-top: 0px;
|
||||
height: 2px !important;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .slideshow-pag {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swiper-container1
|
||||
.slideshow-pag {
|
||||
width: 86%;
|
||||
right: 3%;
|
||||
top: 50%;
|
||||
@@ -256,18 +384,50 @@
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .slideshow-btn {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swi1
|
||||
.slideshow-btn {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-next,
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-prev {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swi1
|
||||
.swiper-button-next,
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swi1
|
||||
.swiper-rtl
|
||||
.swiper-button-prev {
|
||||
position: static !important;
|
||||
margin-left: 95px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-prev,
|
||||
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-next {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swi1
|
||||
.swiper-button-prev,
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.featuredProducts
|
||||
.fpSwiper
|
||||
.swiperasd
|
||||
.swi1
|
||||
.swiper-rtl
|
||||
.swiper-button-next {
|
||||
position: static !important;
|
||||
margin-left: 40px;
|
||||
margin-top: -40px;
|
||||
@@ -322,7 +482,12 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .scenetitle {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.sceneIntroduction
|
||||
.sceneitem
|
||||
.sceneInfo
|
||||
.scenetitle {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@@ -330,7 +495,7 @@
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
padding-top: 10%;
|
||||
padding-top: 5%;
|
||||
z-index: 10;
|
||||
}
|
||||
.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .subtitle {
|
||||
@@ -347,7 +512,12 @@
|
||||
-webkit-box-orient: vertical;
|
||||
z-index: 10;
|
||||
}
|
||||
.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .sceneMore {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.sceneIntroduction
|
||||
.sceneitem
|
||||
.sceneInfo
|
||||
.sceneMore {
|
||||
font-size: 1rem;
|
||||
color: #004bfa;
|
||||
text-align: center;
|
||||
@@ -392,7 +562,7 @@
|
||||
.orico_Page_index .pageMain .oricoTechnology .beforeafter {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
height: 53.75rem;
|
||||
max-height: 53.75rem;
|
||||
position: relative;
|
||||
border-radius: 1.75rem;
|
||||
}
|
||||
@@ -400,7 +570,7 @@
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-image: url("/static/index/images/indeximg1.jpg");
|
||||
background-image: url('/static/index/images/indeximg1.jpg');
|
||||
width: 100%;
|
||||
height: 53.75rem;
|
||||
background-repeat: no-repeat;
|
||||
@@ -412,7 +582,7 @@
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border-right: 0.25rem solid rgba(255, 255, 255, 0.5019607843);
|
||||
background-image: url("/static/index/images/indeximg2.jpg");
|
||||
background-image: url('/static/index/images/indeximg2.jpg');
|
||||
width: 50%;
|
||||
height: 53.75rem;
|
||||
background-repeat: no-repeat;
|
||||
@@ -428,11 +598,12 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: -24px 0 0 -24px;
|
||||
content: "";
|
||||
content: '';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff url("/static/index/images/ba-arrow.png") center center/22px 22px no-repeat;
|
||||
background: #fff url('/static/index/images/ba-arrow.png') center center/22px
|
||||
22px no-repeat;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
@@ -479,13 +650,25 @@
|
||||
margin-left: 10%;
|
||||
justify-content: center;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bstitle {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.swiper-wrapper
|
||||
.bsitem
|
||||
.bsinf
|
||||
.bstitle {
|
||||
font-size: 3rem;
|
||||
text-align: left;
|
||||
line-height: 4rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bssubtitle {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.swiper-wrapper
|
||||
.bsitem
|
||||
.bsinf
|
||||
.bssubtitle {
|
||||
font-size: 1.25rem;
|
||||
text-align: left;
|
||||
line-height: 1.575rem;
|
||||
@@ -518,11 +701,22 @@
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.bs_swiperasd
|
||||
.bs_swcontainer
|
||||
.bs_pagination {
|
||||
bottom: 3rem;
|
||||
width: 86%;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.bs_swiperasd
|
||||
.bs_swcontainer
|
||||
.bs_pagination
|
||||
.swiper-pagination-bullet {
|
||||
margin-right: 28%;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
@@ -533,7 +727,13 @@
|
||||
border: 1px solid #cccccc;
|
||||
float: left;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet-active {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.bs_swiperasd
|
||||
.bs_swcontainer
|
||||
.bs_pagination
|
||||
.swiper-pagination-bullet-active {
|
||||
background-color: #000;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer span {
|
||||
@@ -557,7 +757,12 @@
|
||||
left: 51%;
|
||||
height: 2px;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .swiper-container {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.bs_swiperasd
|
||||
.bs_swcontainer
|
||||
.swiper-container {
|
||||
width: 15%;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts {
|
||||
@@ -568,12 +773,22 @@
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-next {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.bs_swiperasd
|
||||
.bs_bts
|
||||
.swiper-button-next {
|
||||
position: static;
|
||||
margin-left: 5.9375rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-prev {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.brandStory
|
||||
.bs_swiperasd
|
||||
.bs_bts
|
||||
.swiper-button-prev {
|
||||
position: static;
|
||||
margin-left: 2.5rem;
|
||||
margin-top: -2.5rem;
|
||||
@@ -601,10 +816,16 @@
|
||||
animation: number-scroll 1s ease-in-out forwards;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem h3 {
|
||||
font-weith
|
||||
font-size: 1.25rem;
|
||||
padding-top: 0.9375rem;
|
||||
padding-top: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem:nth-child(2) {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoDataStatistics
|
||||
.odsmain
|
||||
.odsItem:nth-child(2) {
|
||||
margin: 0 18%;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoPub {
|
||||
@@ -677,22 +898,60 @@
|
||||
width: auto;
|
||||
position: absolute;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .slideshow-btn {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.slideshow-btn {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next,
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-container-rtl .swiper-button-prev {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.swiper-button-next,
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.swiper-container-rtl
|
||||
.swiper-button-prev {
|
||||
background-image: none;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next,
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-prev {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.swiper-button-next,
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.swiper-rtl
|
||||
.swiper-button-prev {
|
||||
margin-left: 4.875rem;
|
||||
margin-top: 1.5625rem;
|
||||
position: static;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-prev,
|
||||
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-next {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.swiper-button-prev,
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoPub
|
||||
.pubswiperasd
|
||||
.swiper-container
|
||||
.swiper-rtl
|
||||
.swiper-button-next {
|
||||
position: static;
|
||||
margin-left: 1.75rem;
|
||||
margin-top: -2.5rem;
|
||||
@@ -764,7 +1023,13 @@
|
||||
margin-bottom: 0.625rem;
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoFQA
|
||||
.fqaright
|
||||
ul.accordion
|
||||
li.fqali
|
||||
.fqa-question {
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -773,20 +1038,45 @@
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question .xiala {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoFQA
|
||||
.fqaright
|
||||
ul.accordion
|
||||
li.fqali
|
||||
.fqa-question
|
||||
.xiala {
|
||||
height: 1.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoFQA
|
||||
.fqaright
|
||||
ul.accordion
|
||||
li.fqali
|
||||
.fqa-answer {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
padding: 0.625rem;
|
||||
display: none;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer p {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoFQA
|
||||
.fqaright
|
||||
ul.accordion
|
||||
li.fqali
|
||||
.fqa-answer
|
||||
p {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali:last-child {
|
||||
.orico_Page_index
|
||||
.pageMain
|
||||
.oricoFQA
|
||||
.fqaright
|
||||
ul.accordion
|
||||
li.fqali:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.orico_Page_index .pageMain .oricofixd-info {
|
||||
@@ -833,3 +1123,29 @@
|
||||
float: right;
|
||||
width: 1.25rem;
|
||||
}
|
||||
.orico_Page_index .ba-slider .handle {
|
||||
background: #dcdbd9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.orico_Page_index .ba-slider .handle:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: -24px 0 0 -24px;
|
||||
content: '';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff url(../../index/images/ba-arrow.png) center center / 22px 22px
|
||||
no-repeat;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(1);
|
||||
z-index: 5;
|
||||
box-shadow: none;
|
||||
}
|
||||
.orico_Page_index .ba-slider .handle.ba-draggable:after {
|
||||
transform: scale(.8)
|
||||
}
|
||||
@@ -88,7 +88,9 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 3.5rem auto;
|
||||
padding: 3.5rem 0;
|
||||
background: transparent;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.oricoCont .ctitem {
|
||||
width: 45%;
|
||||
|
||||
@@ -160,6 +160,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
z-index:9999;
|
||||
}
|
||||
.header-PC #header .nav2 .navItem .navItemConten1 li {
|
||||
color: #fff;
|
||||
@@ -332,6 +333,9 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 30%;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .popimg,
|
||||
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .popimg {
|
||||
@@ -344,7 +348,20 @@
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName
|
||||
{
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{
|
||||
font-size: 10px;
|
||||
color: #000000;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
@@ -1,75 +1,106 @@
|
||||
@charset "UTF-8";
|
||||
.orico_Page_products {
|
||||
.orico_Page_category {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.orico_Page_products .focus_image {
|
||||
padding-top: 3.75rem;
|
||||
}
|
||||
.orico_Page_products .focus_image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.orico_Page_products p, .orico_Page_products a, .orico_Page_products div, .orico_Page_products span {
|
||||
.orico_Page_category p,
|
||||
.orico_Page_category a,
|
||||
.orico_Page_category div,
|
||||
.orico_Page_category span {
|
||||
font-family: "Microsoft YaHei", "Arial", sans-serif;
|
||||
}
|
||||
.orico_Page_products .pageMain {
|
||||
.orico_Page_category .pageMain {
|
||||
width: 85%;
|
||||
padding: 50px 0 2.5rem;
|
||||
padding: 50px 0 10px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-title {
|
||||
font-size: 1.5em;
|
||||
.orico_Page_category .pageMain .cat {
|
||||
margin-bottom: 3.75rem;
|
||||
}
|
||||
.orico_Page_category .pageMain .ori-pd-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.orico_Page_category .pageMain .ori-pd-title .catname {
|
||||
font-size: 1.5rem;
|
||||
color: #101010;
|
||||
margin-bottom: 1.25rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list {
|
||||
.orico_Page_category .pageMain .ori-pd-title .catmore {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.orico_Page_category .pageMain .ori-pd-title .catmore .tmore {
|
||||
font-size: 1rem;
|
||||
color: #444;
|
||||
}
|
||||
.orico_Page_category .pageMain .ori-pd-title .catmore .catmoreImg {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.orico_Page_category .pageMain .ori-pd-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 自动换行 */
|
||||
justify-content: flex-start; /* 水平方向均匀分布 */
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem {
|
||||
width: 24%;
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem {
|
||||
width: 18.2%;
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding-bottom: 1em;
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
margin-right: 1%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 70px;
|
||||
margin-right: 1.8125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 25rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg {
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prdimg {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
margin: 25px auto;
|
||||
display: none;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg-show {
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prdimg-show {
|
||||
display: block;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
|
||||
color: #101010;
|
||||
font-size: 1.125rem;
|
||||
padding-bottom: 0.625rem;
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prdName {
|
||||
font-size: 0.875rem;
|
||||
color: #444;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
|
||||
font-size: 1.125rem;
|
||||
color: #737373;
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prddec {
|
||||
margin-top: 3%;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .newcp {
|
||||
width: 72px;
|
||||
height: 30px;
|
||||
background: #df2c39;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prd-colors {
|
||||
width: 92%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -77,24 +108,15 @@
|
||||
justify-content: center;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 0.65rem;
|
||||
cursor: pointer;
|
||||
margin: 0 0.3125rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
|
||||
.orico_Page_category .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit .rgb_hex {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.orico_Page_products .pageMain .ori-pd-list .oripditem:hover {
|
||||
box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
|
||||
94
public/static/index/css/product_search.css
Normal file
94
public/static/index/css/product_search.css
Normal file
@@ -0,0 +1,94 @@
|
||||
.orico_Page_search {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.orico_Page_search .searchMain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
padding: 0 3.75rem;
|
||||
padding-top: 2%;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.orico_Page_search .searchMain .search-ipt {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #e3e8ec;
|
||||
align-items: center;
|
||||
}
|
||||
.orico_Page_search .searchMain .search-ipt .ssipt {
|
||||
width: 94%;
|
||||
border: none;
|
||||
background-color: #f1f1f1;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.orico_Page_search .searchMain .search-ipt .ssico {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 2%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 2%;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme {
|
||||
cursor: pointer;
|
||||
padding: 16px 0 10px 0;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme .search-pr-img {
|
||||
float: left;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid #e7e7e7;
|
||||
overflow: hidden;
|
||||
width: 140px;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme .prInfp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
margin: 11px 10px 0;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme .prInfp .txt1 {
|
||||
font-size: 1.125rem;
|
||||
color: #333;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme .prInfp .txt2 {
|
||||
font-size: 0.875rem;
|
||||
color: #737373;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme .prInfp .txt3 {
|
||||
font-size: 0.875rem;
|
||||
color: #737373;
|
||||
}
|
||||
.orico_Page_search .searchMain .seul .seitme .prInfp .redpoint {
|
||||
font-weight: bold;
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.orico_Page_search .searchMain ::placeholder {
|
||||
color: #737373;
|
||||
}
|
||||
90
public/static/index/css/product_subcategory.css
Normal file
90
public/static/index/css/product_subcategory.css
Normal file
@@ -0,0 +1,90 @@
|
||||
@charset "UTF-8";
|
||||
.orico_Page_subcategory {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.orico_Page_subcategory p, .orico_Page_subcategory a, .orico_Page_subcategory div, .orico_Page_subcategory span {
|
||||
font-family: "Microsoft YaHei", "Arial", sans-serif;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain {
|
||||
width: 85%;
|
||||
padding: 50px 0 10px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .sbbanner {
|
||||
width: 100%;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-title {
|
||||
font-size: 1.5em;
|
||||
color: #101010;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 自动换行 */
|
||||
justify-content: flex-start; /* 水平方向均匀分布 */
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem {
|
||||
width: 24%;
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding-bottom: 1em;
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
margin-right: 1%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prdimg {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
margin: 25px auto;
|
||||
display: none;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prdimg-show {
|
||||
display: block;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prdName {
|
||||
color: #101010;
|
||||
font-size: 1.125rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prddec {
|
||||
font-size: 1.125rem;
|
||||
color: #737373;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prd-colors {
|
||||
width: 92%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 0.65rem;
|
||||
cursor: pointer;
|
||||
margin: 0 0.3125rem;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem:hover {
|
||||
box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
@@ -39,7 +39,6 @@
|
||||
transition: all 0.2s linear;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
@@ -150,4 +149,10 @@ a {
|
||||
/* 滚动条的上下箭头：向下箭头 */
|
||||
*::-moz-scrollbar-button:vertical:increment {
|
||||
display: none;
|
||||
}
|
||||
div{
|
||||
display: block;
|
||||
}
|
||||
#header{
|
||||
height: 60px;
|
||||
}
|
||||
BIN
public/static/index/images/ORCIO-HSQ-02H-800-220.jpg
Normal file
BIN
public/static/index/images/ORCIO-HSQ-02H-800-220.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
public/static/index/images/SSD-1920x900-CN.jpg
Normal file
BIN
public/static/index/images/SSD-1920x900-CN.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 708 KiB |
BIN
public/static/index/images/contact-Us.png
Normal file
BIN
public/static/index/images/contact-Us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
public/static/index/images/customer-service.png
Normal file
BIN
public/static/index/images/customer-service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
public/static/index/images/ssico.png
Normal file
BIN
public/static/index/images/ssico.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
28
public/static/index/js/before-after.min.js
vendored
28
public/static/index/js/before-after.min.js
vendored
@@ -1 +1,27 @@
|
||||
!function(a){function b(b,c,d){b.on("mousedown.ba-events touchstart.ba-events",function(e){b.addClass("ba-draggable"),c.addClass("ba-resizable");var f=e.pageX?e.pageX:e.originalEvent.touches[0].pageX,g=b.outerWidth(),h=b.offset().left+g-f,i=d.offset().left,j=d.outerWidth();minLeft=i+10,maxLeft=i+j-g-10,b.parents().on("mousemove.ba-events touchmove.ba-events",function(b){var c=b.pageX?b.pageX:b.originalEvent.touches[0].pageX;leftValue=c+h-g,leftValue<minLeft?leftValue=minLeft:leftValue>maxLeft&&(leftValue=maxLeft),widthValue=100*(leftValue+g/2-i)/j+"%",a(".ba-draggable").css("left",widthValue),a(".ba-resizable").css("width",widthValue)}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events",function(){b.removeClass("ba-draggable"),c.removeClass("ba-resizable"),a(this).off(".ba-events")}),e.preventDefault()})}a.fn.beforeAfter=function(){var c=this,d=c.width()+"px";c.find(".resize img").css("width",d),b(c.find(".handle"),c.find(".resize"),c),a(window).resize(function(){var a=c.width()+"px";c.find(".resize img").css("width",a)})}}(jQuery);
|
||||
! function (a) {
|
||||
function b(b, c, d) {
|
||||
b.on("mousedown.ba-events touchstart.ba-events", function (e) {
|
||||
b.addClass("ba-draggable"), c.addClass("ba-resizable");
|
||||
var f = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX,
|
||||
g = b.outerWidth(),
|
||||
h = b.offset().left + g - f,
|
||||
i = d.offset().left,
|
||||
j = d.outerWidth();
|
||||
minLeft = i + 10, maxLeft = i + j - g - 10, b.parents().on("mousemove.ba-events touchmove.ba-events", function (b) {
|
||||
var c = b.pageX ? b.pageX : b.originalEvent.touches[0].pageX;
|
||||
leftValue = c + h - g, leftValue < minLeft ? leftValue = minLeft : leftValue > maxLeft && (leftValue = maxLeft), widthValue = 100 * (leftValue + g / 2 - i) / j + "%", a(".ba-draggable").css("left", widthValue), a(".ba-resizable").css("width", widthValue)
|
||||
}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events", function () {
|
||||
b.removeClass("ba-draggable"), c.removeClass("ba-resizable"), a(this).off(".ba-events")
|
||||
}), e.preventDefault()
|
||||
})
|
||||
}
|
||||
a.fn.beforeAfter = function () {
|
||||
var c = this,
|
||||
d = c.width() + "px";
|
||||
c.find(".resize img").css("width", d), b(c.find(".handle"), c.find(".resize"), c), a(window).resize(function () {
|
||||
var a = c.width() + "px";
|
||||
c.find(".resize img").css("width", a)
|
||||
});
|
||||
return this
|
||||
}
|
||||
}(jQuery);
|
||||
Reference in New Issue
Block a user