diff --git a/app/index/view/index/index.html b/app/index/view/index/index.html
index 5e276dbd..9b56b029 100644
--- a/app/index/view/index/index.html
+++ b/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', // 指定分隔条元素的选择器
diff --git a/app/index/view/product/category.html b/app/index/view/product/category.html
index ee4afe74..581c8ee3 100644
--- a/app/index/view/product/category.html
+++ b/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">
diff --git a/app/index/view/product/product_category.html b/app/index/view/product/product_category.html
new file mode 100644
index 00000000..cbff7f93
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/app/index/view/product/product_subcategory.html b/app/index/view/product/product_subcategory.html
new file mode 100644
index 00000000..681ac0f1
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/app/index/view/public/footer.html b/app/index/view/public/footer.html
index 7c861df3..6c2a0bd9 100644
--- a/app/index/view/public/footer.html
+++ b/app/index/view/public/footer.html
@@ -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>
\ No newline at end of file
diff --git a/app/index/view/public/header.html b/app/index/view/public/header.html
index 8efd8500..10d319e6 100644
--- a/app/index/view/public/header.html
+++ b/app/index/view/public/header.html
@@ -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 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 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>
\ No newline at end of file
diff --git a/public/static/index/css/category.css b/public/static/index/css/category.css
new file mode 100644
index 00000000..b4fc50a7
--- /dev/null
+++ b/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);
+}
diff --git a/public/static/index/css/orico_footer.css b/public/static/index/css/orico_footer.css
index 9a2e3a12..eefacfc7 100755
--- a/public/static/index/css/orico_footer.css
+++ b/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%;
diff --git a/public/static/index/css/orico_header.css b/public/static/index/css/orico_header.css
index 3b8c82f0..ef786445 100755
--- a/public/static/index/css/orico_header.css
+++ b/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;
diff --git a/public/static/index/css/product_category.css b/public/static/index/css/product_category.css
index b4fc50a7..0403c537 100755
--- a/public/static/index/css/product_category.css
+++ b/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);
-}
diff --git a/public/static/index/css/product_subcategory.css b/public/static/index/css/product_subcategory.css
new file mode 100644
index 00000000..f4de3b1f
--- /dev/null
+++ b/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);
+}
diff --git a/public/static/index/images/SSD-1920x900-CN.jpg b/public/static/index/images/SSD-1920x900-CN.jpg
new file mode 100644
index 00000000..4a6566a5
Binary files /dev/null and b/public/static/index/images/SSD-1920x900-CN.jpg differ
diff --git a/public/static/index/images/contact-Us.png b/public/static/index/images/contact-Us.png
new file mode 100644
index 00000000..d572106f
Binary files /dev/null and b/public/static/index/images/contact-Us.png differ
diff --git a/public/static/index/images/customer-service.png b/public/static/index/images/customer-service.png
new file mode 100644
index 00000000..275c0334
Binary files /dev/null and b/public/static/index/images/customer-service.png differ