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

app/index/view/index/index.html

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

app/index/view/product/category.html

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

app/index/view/product/product_category.html

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

app/index/view/product/product_subcategory.html

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

app/index/view/public/footer.html

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

app/index/view/public/header.html

@@ -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}"
+            <a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}" class="popimg" /></a>
-                                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);
       });
     }
     // 处理第一个导航项

public/static/index/css/category.css

@@ -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);
+}

public/static/index/css/orico_footer.css

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

public/static/index/css/orico_header.css

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

public/static/index/css/product_category.css

@@ -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 {
+.orico_Page_category p,
-  padding-top: 3.75rem;
+.orico_Page_category a,
-}
+.orico_Page_category div,
-.orico_Page_products .focus_image img {
+.orico_Page_category span {
-  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 {
+.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 {
+.orico_Page_category .pageMain .cat {
-  font-size: 1.5em;
+  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 {
+.orico_Page_category .pageMain .ori-pd-list .oripditem {
-  width: 24%;
+  width: 18.2%;
   float: left;
   background: #fff;
-  padding-bottom: 1em;
   margin-top: 15px;
   position: relative;
-  margin-right: 1%;
+  margin-right: 1.8125rem;
-  padding-top: 30px;
-  padding-bottom: 70px;
   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 {
+.orico_Page_category .pageMain .ori-pd-list .oripditem .prdName {
-  color: #101010;
+  font-size: 0.875rem;
-  font-size: 1.125rem;
+  color: #444;
-  padding-bottom: 0.625rem;
 }
-.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
+.orico_Page_category .pageMain .ori-pd-list .oripditem .prddec {
-  font-size: 1.125rem;
+  margin-top: 3%;
-  color: #737373;
+  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);
-}

public/static/index/css/product_subcategory.css

@@ -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);
+}