feat：新增加product_subcategory和product_category，两个页面，category这个页面可能要废弃了，英文官网添底部一个公共部分
This commit is contained in:
@@ -255,7 +255,7 @@
|
||||
{block name="script"}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// 初始化 beforeafter 插件
|
||||
// 图片左右移动显示全部
|
||||
$('.ba-slider').beforeAfter({
|
||||
startPercent: 50, // 初始分隔条位置为 50%
|
||||
handle: '.handle', // 指定分隔条元素的选择器
|
||||
|
||||
@@ -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}
|
||||
@@ -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,202 +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>
|
||||
<!-- 英文官网才有-->
|
||||
<a class="storetopbt"><img src="__IMAGES__/shopico.png" class="storeImgico" />Store </a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 英文官网才有-->
|
||||
<a class="storetopbt"><img src="__IMAGES__/shopico.png" class="storeImgico" />Store </a>
|
||||
</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 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>
|
||||
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);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
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 |
Reference in New Issue
Block a user