jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat：新增加product_subcategory和product_category，两个页面，category这个页面可能要废弃了，英文官网添底部一个公共部分

Browse Source
This commit is contained in:
迷和油
2025-05-09 15:46:55 +08:00
parent 8c838accf9
commit 6ff3810bcc
14 changed files with 626 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/index/view/index/index.html
View File

@@ -255,7 +255,7 @@
{block name="script"}
<script>
$(document).ready(function () {
// 初始化 beforeafter 插件
// 图片左右移动显示全部
$('.ba-slider').beforeAfter({
startPercent: 50, // 初始分隔条位置为 50%
handle: '.handle', // 指定分隔条元素的选择器

2
app/index/view/product/category.html
View File

@@ -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
View 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
View 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}

18
app/index/view/public/footer.html
View File

@@ -1,3 +1,16 @@
<!-- 英文官网有-->
<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">
<!--中间信息-->
@@ -38,7 +51,7 @@
<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} />
<img src="{$vo.value}" {if condition="!empty($vo.extra)" }style="{$vo.extra}" {/if} />
{else/}
{$vo.value}
{/if}
@@ -54,7 +67,8 @@
<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>
<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>

15
app/index/view/public/header.html
View File

@@ -25,7 +25,8 @@
</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}>
<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>
@@ -106,8 +107,7 @@
<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>
<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>
@@ -120,14 +120,13 @@
<script>
$(document).ready(function () {
// 搜索历史记录处理
function history(keywords) {
function history (keywords) {
var history = localStorage.getItem('header_search_keywords');
if (!history) {
history = [];
} else {
history = JSON.parse(history);
}
// 记录搜索关键词
if (keywords) {
if (history.includes(keywords)) {
@@ -149,11 +148,11 @@
return history;
}
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
function handleHover($element, $content) {
function handleHover ($element, $content) {
$element.mouseenter(function () {
$content.stop(true, true).slideDown(400);
$content.stop(true, true).slideDown(600);
}).mouseleave(function () {
$content.stop(true, true).slideUp(400);
$content.stop(true, true).slideUp(600);
});
}
// 处理第一个导航项

100
public/static/index/css/category.css Normal file
View 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);
}

4
public/static/index/css/orico_footer.css
View File

@@ -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%;

1
public/static/index/css/orico_header.css
View File

@@ -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;

108
public/static/index/css/product_category.css
View File

@@ -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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 708 KiB

BIN
public/static/index/images/contact-Us.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/static/index/images/customer-service.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB