Merge branch 'dev' of https://gitea.f2b211.com/jsasg/orico-official-website into dev

app/index/view/index/index.html

@@ -1,6 +1,8 @@
 {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">
@@ -28,7 +30,8 @@
       {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>
+        <span class="catName" {notempty name="cate.title_txt_color" }style="color:{$cate.title_txt_color};"
+          {/notempty}>{$cate.title}</span>
       </a>
       {/volist}
     </div>
@@ -100,7 +103,8 @@
     {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"
+        <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>
@@ -113,8 +117,10 @@
       {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>
+          <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>
@@ -126,10 +132,15 @@
     <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 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>
     <!-- 品牌故事 -->
@@ -143,8 +154,10 @@
               <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>
+              <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>
@@ -242,28 +255,13 @@
 {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;
+    // 图片左右移动显示全部
+    $('.ba-slider').beforeAfter({
+      startPercent: 50, // 初始分隔条位置为 50%
+      handle: '.handle', // 指定分隔条元素的选择器
+      resize: '.resize' // 指定可调整大小部分的选择器
     });
+
     // 底部关闭
     $(".oficlose").on("click", function () {
       $(".oricofixd-info").hide();

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/product/search.html

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

app/index/view/public/base.html

@@ -16,6 +16,7 @@
 		<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"}

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">
     <!--中间信息-->
@@ -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>
@@ -86,8 +87,11 @@
           </ul>
         </div>
       </div>
+      <!-- 英文官网才有-->
+      <a class="storetopbt"><img src="__IMAGES__/shopico.png" class="storeImgico" />Store </a>
     </div>
   </div>
+
   <!-- 搜索弹框-->
   <div class="searchmodalMian" id="scmodal">
     <div class="searchmodalct">
@@ -103,9 +107,9 @@
         <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>
           {/volist}
         </div>
@@ -123,7 +127,6 @@
       } else {
         history = JSON.parse(history);
       }
-
       // 记录搜索关键词
       if (keywords) {
         if (history.includes(keywords)) {
@@ -147,9 +150,9 @@
     // 封装一个函数用于处理鼠标悬停显示和隐藏内容
     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/.gitignore

@@ -1,2 +1,2 @@
-*
+
 !.gitignore

public/static/index/css/before-after.min.css

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

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/index.css

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

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

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 {
-  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);
-}

public/static/index/css/product_search.css

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

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

public/static/index/css/public.css

@@ -39,7 +39,6 @@
 	transition: all 0.2s linear;
 	-webkit-transition: all 0.2s linear;
 }
-
 body {
 	font-size: 1.2em;
 	font-weight: 400;
@@ -151,3 +150,9 @@ a {
 *::-moz-scrollbar-button:vertical:increment {
 	display: none;
 }
+div{
+    display: block;
+}
+#header{
+    height: 60px;
+}

public/static/index/js/before-after.min.js

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