refactor: 产品分类

2025-05-15 18:07:38 +08:00
parent c510e6bc4c
commit ce5d0244c0
13 changed files with 331 additions and 608 deletions
--- a/app/index/controller/Product.php
+++ b/app/index/controller/Product.php
@@ -13,6 +13,7 @@ use app\index\model\ProductRelatedModel;
 use app\index\model\ProductSkuAttrModel;
 use app\index\model\ProductSkuModel;
 use app\index\model\SysBannerModel;
+use app\index\model\SysBannerProdCateMappingModel;
 use app\index\validate\ProductInquiryValidate;
 use think\facade\View;
 use think\helper\Arr;
@@ -22,21 +23,25 @@ use think\helper\Arr;
 */
 class Product extends Common
 {
-    // 产品分类
-    public function category()
+    // 获取分类页的banner图焦点横幅
+    private function getCategoryBanner($category_id)
    {
-        // 参数
-        $param = request()->param(['id']);
-
        $focus_image = [];
        // 获取产品分类页焦点横幅
-        $banner = SysBannerModel::with(['items' => function($query) {
+        $banner = SysBannerModel::with(['items' => function($query) use($category_id) {
                $query->withoutField([
                        'status',
                        'created_at',
                        'updated_at',
                        'deleted_at'
                    ])
+                    ->whereExists(function($q) use($category_id) {
+                        $r = $q->getModel()->getTable();
+                        $m = new SysBannerProdCateMappingModel;
+                        $q->model($m)->name($m->getName())
+                            ->where("banner_item_id = $r.id")
+                            ->where('product_category_id' , '=', $category_id);
+                    })
                    ->where('status', '=', 1)
                    ->order(['sort' => 'asc', 'id' => 'desc']);
            }])
@@ -51,7 +56,109 @@ class Product extends Common
            }
            $focus_image = data_get($banner_map, 'BANNER_6808abd813d78')?->items->toArray();
        }
-        View::assign('focus_image', $focus_image);
+        return $focus_image;
+    }
+    // 产品分类 - 查看顶层分类
+    public function category()
+    {
+        // 参数
+        $param = request()->param(['id']);
+
+        // 获取产品分类页焦点横幅
+        View::assign('focus_image', $this->getCategoryBanner($param['id']));
+
+        // 获取分类及产品信息
+        $categorys_data = ProductCategoryModel::field(['id', 'pid', 'name', 'path', 'level'])
+            ->language($this->lang_id)
+            ->displayed(true)
+            ->children($param['id'])
+            ->order(['pid' => 'asc', 'sort' => 'asc', 'id' => 'desc'])
+            ->select()
+            ->toArray();
+
+        $list = [];
+        if (!empty($categorys_data)) {
+            // 分组分类
+            $list = array_filter($categorys_data, fn($it) => $it['level'] == 2);
+            foreach ($list as &$it) {
+                $it['children'] = array_column(array_filter($categorys_data, fn($v) => in_array($it['id'], explode(',', $v['path']))), 'id');
+            }
+            unset($it);
+
+            // 获取分类下的产品信息
+            if (!empty($list)) {
+                $product_model = new ProductModel;
+                $sql           = $product_model->field([
+                        'id',
+                        'category_id',
+                        'spu',
+                        'name',
+                        'cover_image',
+                        'is_new',
+                        '(' . $list[0]['id'] . ')' => 'group_mark'
+                    ])
+                    ->byCategory(data_get($list[0], 'children'))
+                    ->language($this->lang_id)
+                    ->enabled(true)
+                    ->onSale(true)
+                    ->onShelves(true)
+                    ->append(['p' => $list[0]['id']])
+                    ->order(['sort' => 'asc', 'id' => 'desc'])
+                    ->limit(5)
+                    ->buildSql();
+                $query = \think\facade\Db::table("($sql) as a");
+                foreach ($list as $it) {
+                    $query = $query->union(function($query) use($product_model, $it) {
+                        $query->model($product_model)
+                        ->name($product_model->getName())
+                        ->field([
+                            'id',
+                            'category_id',
+                            'spu',
+                            'name',
+                            'cover_image',
+                            'is_new',
+                            '(' . $it['id'] . ')' => 'group_mark'
+                        ])
+                        ->byCategory($it['children'])
+                        ->language($this->lang_id)
+                        ->enabled(true)
+                        ->onSale(true)
+                        ->onShelves(true)
+                        ->order(['sort' => 'asc', 'id' => 'desc'])
+                        ->limit(5);
+                    });
+                }
+                $pros = $query->select();
+                if (!empty($pros)) {
+                    $pros_map = [];
+                    foreach ($pros as $pro) {
+                        $pros_map[$pro['group_mark']][] = $pro;
+                    }
+                    foreach ($list as $k => &$it) {
+                        unset($it['children']);
+                        if (!isset($pros_map[$it['id']])) {
+                            unset($list[$k]);
+                            continue;
+                        }
+                        $it['products'] = $pros_map[$it['id']];
+                    }
+                    unset($it);
+                }
+            }
+        }
+        View::assign('list', $list);
+        
+        return View::fetch('category');
+    }
+    // 产品分类 - 查看子类
+    public function subcategory()
+    {
+        // 参数
+        $param = request()->param(['id']);
+
+        // 获取产品分类页焦点横幅
+        View::assign('focus_image', $this->getCategoryBanner($param['id']));

        // 获取分类及产品信息
        $categorys_data = ProductCategoryModel::field(['id', 'name', 'level'])
@@ -60,6 +167,7 @@ class Product extends Common
            ->child($param['id'], true)
            ->order(['sort' => 'asc', 'id' => 'desc'])
            ->select();
+
        if (!$categorys_data->isEmpty()) {
            if ($categorys_data->count() > 1) {
                // 当分类数不只一个时，当前分类下有子分类，移除当前分类，只输出子分类
@@ -151,7 +259,7 @@ class Product extends Common
        }
        View::assign('categorys_data', $categorys_data);

-        return View::fetch('category');
+        return View::fetch('subcategory');
    }

    /**
@@ -407,7 +515,7 @@ class Product extends Common
                    }
                    
                    foreach ($pro_map as $k => $pro) {
-                        if (in_array($val['id'], explode(',', $k))) {
+                        if (in_array($val['id'], explode(',', strval($k)))) {
                            $newpros[] = [
                                'category' => $val,
                                'products' => $pro,
--- a/app/index/model/SysBannerProdCateMappingModel.php
+++ b/app/index/model/SysBannerProdCateMappingModel.php
@@ -0,0 +1,15 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysBannerProdCateMappingBaseModel;
+
+/**
+ * banner与产品分类关联表模型
+ * @mixin \think\Model
+ */
+class SysBannerProdCateMappingModel extends SysBannerProdCateMappingBaseModel
+{
+    //
+}
--- a/app/index/route/route.php
+++ b/app/index/route/route.php
@@ -16,6 +16,8 @@ Route::get('/', 'Index/index');
 Route::group('product', function () {
    // 产品分类页
    Route::get('category/:id', 'Product/category');
+    // 产品分类 - 查看子类
+    Route::get('subcategory/:id', 'Product/subcategory');
    // 产品详情页
    Route::get('detail/:id', 'Product/detail');
    // 产品询盘
--- a/app/index/view/product/category.html
+++ b/app/index/view/product/category.html
@@ -1,71 +1,69 @@
 {extend name="public/base" /}
 {block name="style"}
-<link rel="stylesheet" href="__CSS__/category.css" type="text/css" />
+<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
 {/block}
 {block name="main"}
-<div class="orico_Page_products">
+<div class="orico_Page_category">
+	<!-- banner轮播 -->
 	{notempty name="focus_image"}
-    <div class="focus_image">
-        {volist name="focus_image" id="fimg"}
-        <a {notempty name="fimg.link"}href="{$fimg.link}"{/notempty}><img src="{$fimg.image}" alt="" /></a>
-        {/volist}
-    </div>
-    {/notempty}
-    <!-- 首页主题内容 -->
-    <div class="pageMain">
-        {notempty name="categorys_data"}
-        {volist name="categorys_data" id="vo"}
-        <div class="ori-pd-title">
-            <span>{$vo.name}</span>
-            {eq name="vo.level" value="2"}
-            <a href="{:url('product/category', ['id' => $vo.id])}">查看更多</a>
-            {/eq}
-        </div>
-        {notempty name="vo.products"}
-        <div class="ori-pd-list">
-            {volist name="vo.products" id="vp"}
-            <a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
-                <div>
-                    {volist name="vp.sku" id="vs" key="vs_idx"}
-                    <img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
-                    {/volist}
-                </div>
-                <div class="prdName">{$vp.name}</div>
-                <div class="prddec">{$vp.spu}</div>
-                {notempty name="vp.colors"}
-                <div class="prd-colors">
-                    {volist name="vp.colors" id="vc" key="vc_idx"}
-                    <div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
-                        {assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
-                        {eq name="color_type" value="IMAGE"}
-                        <img src="{$vc.attr_value}" />
-                        {elseif condition="$color_type == 'RGB'" /}
-                        <span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
-                        {/eq}
-                    </div>
-                    {/volist}
-                </div>
-                {/notempty}
+	<div class="opdBanner">
+		{volist name="focus_image" id="fi"}
+		<a {notempty name="fi.link" }href="{$fi.link}" {/notempty}>
+			<img src="{$fi.image}" class="opdbannerImg" />
 		</a>
 		{/volist}
 	</div>
 	{/notempty}
+	<!--分类/产品内容 -->
+	<div class="pageMain">
+		{volist name="list" id="vo"}
+		<div class="cat">
+			<div class="ori-pd-title">
+				<div class="catname">{$vo.name}</div>
+				<a class="catmore" href="{:url('product/subcategory', ['id' => $vo.id])}">
+					<span class="tmore">{:lang('product_newpro.view_all')}</span>
+					<img src="/static/index/images/more.png" class="catmoreImg" />
+				</a>
+			</div>
+			{notempty name="vo.products"}
+			<div class="ori-pd-list">
+				{volist name="vo.products" id="pro"}
+				<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
+					<div>
+						<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
+					</div>
+					<div class="prdName">{$pro.name}</div>
+					<div class="prddec">{$pro.spu}</div>
+					{eq name="pro.is_new" value="1"}
+					<div class="newcp">New</div>
+					{/eq}
+				</a>
 				{/volist}
+			</div>
 			{/notempty}
 		</div>
+		{/volist}
+	</div>
 </div>
 {/block}
 {block name="script"}
 <script type="text/javascript">
  $(function () {
-        $('.prd-colors .prdolorit').click(function(event) {
-            event.stopPropagation();
-            event.preventDefault();
-
-            var sku_id = $(this).data('sku_id');
-            $('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
-            $(this).addClass('on').siblings().removeClass('on');
+    // 显示第一张图片
+    $('.opdbannerImg').eq(0).show();
+    let currentIndex = 0;
+    const imgCount = $('.opdbannerImg').length;
+    setInterval(() => {
+      // 淡出当前图片
+      $('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
+        // 隐藏当前图片
+        $('.opdbannerImg').eq(currentIndex).hide();
+        // 计算下一张图片的索引
+        currentIndex = (currentIndex + 1) % imgCount;
+        // 显示并淡入下一张图片
+        $('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
+      });
+    }, 10000);
  });
-    })
 </script>
 {/block}
--- a/app/index/view/product/product_category.html
+++ b/app/index/view/product/product_category.html
@@ -1,59 +0,0 @@
-{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}
--- a/app/index/view/product/product_subcategory.html
+++ b/app/index/view/product/product_subcategory.html
@@ -1,34 +0,0 @@
-{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}
--- a/app/index/view/product/subcategory.html
+++ b/app/index/view/product/subcategory.html
@@ -0,0 +1,86 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
+{/block}
+{block name="main"}
+<div class="orico_Page_subcategory">
+    {notempty name="focus_image"}
+    <div class="opdBanner">
+        {volist name="focus_image" id="fi"}
+        <a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
+            <img src="{$fi.image}" alt="" class="opdbannerImg" />
+        </a>
+        {/volist}
+    </div>
+    {/notempty}
+    <!-- 首页主题内容 -->
+    <div class="pageMain">
+        {notempty name="categorys_data"}
+        {volist name="categorys_data" id="vo"}
+        <div class="ori-pd-title">
+            <span>{$vo.name}</span>
+        </div>
+        {notempty name="vo.products"}
+        <div class="ori-pd-list">
+            {volist name="vo.products" id="vp"}
+            <a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
+                <div>
+                    {volist name="vp.sku" id="vs" key="vs_idx"}
+                    <img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
+                    {/volist}
+                </div>
+                <div class="prdName">{$vp.name}</div>
+                <div class="prddec">{$vp.spu}</div>
+                {notempty name="vp.colors"}
+                <div class="prd-colors">
+                    {volist name="vp.colors" id="vc" key="vc_idx"}
+                    <div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
+                        {assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
+                        {eq name="color_type" value="IMAGE"}
+                        <img src="{$vc.attr_value}" />
+                        {elseif condition="$color_type == 'RGB'" /}
+                        <span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
+                        {/eq}
+                    </div>
+                    {/volist}
+                </div>
+                {/notempty}
+            </a>
+            {/volist}
+        </div>
+        {/notempty}
+        {/volist}
+        {/notempty}
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(function () {
+        // 显示第一张图片
+        $('.opdbannerImg').eq(0).show();
+        let currentIndex = 0;
+        const imgCount = $('.opdbannerImg').length;
+        setInterval(() => {
+        // 淡出当前图片
+        $('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
+            // 隐藏当前图片
+            $('.opdbannerImg').eq(currentIndex).hide();
+            // 计算下一张图片的索引
+            currentIndex = (currentIndex + 1) % imgCount;
+            // 显示并淡入下一张图片
+            $('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
+        });
+        }, 10000);
+
+        $('.prd-colors .prdolorit').click(function(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            var sku_id = $(this).data('sku_id');
+            $('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
+            $(this).addClass('on').siblings().removeClass('on');
+        });
+    })
+</script>
+{/block}
--- a/app/index/view/public/header.html
+++ b/app/index/view/public/header.html
@@ -25,16 +25,15 @@
              </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>
-                    <a href="{:url('product/category', ['id' => $vc.id])}">{$vc.name}</a>
+                    <a href="{:url('product/subcategory', ['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>
+                    <a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
                  </dd>
                  {/volist}
                </dl>
--- a/public/static/index/css/OEMandODM.css
+++ b/public/static/index/css/OEMandODM.css
@@ -1,153 +0,0 @@
-.orico_Page_OEMandODM {
-  width: 100%;
-  position: relative;
-  height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: #f2f2f2;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .bdimg1 {
-  width: 100%;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw {
-  width: 100%;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotbt1 {
-  font-size: 2rem;
-  font-family: Montserrat-Bold, Montserrat;
-  padding-bottom: 4.0625rem;
-  padding-top: 5.5rem;
-  font-weight: 700;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 {
-  width: 75%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-bottom: 6.25rem;
-  align-items: baseline;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item {
-  width: 21rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbic1 {
-  width: 6.25rem;
-  height: 6.25rem;
-  margin-bottom: 1.25rem;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbtp1 {
-  font-size: 18px;
-  font-family: Montserrat-Bold, Montserrat;
-  font-weight: bold;
-  padding-bottom: 18px;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbts1 {
-  text-align: center;
-  font-size: 16px;
-  font-family: Montserrat-Medium, Montserrat;
-  color: #9e9e9f;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 {
-  padding-bottom: 5.625rem;
-  background: #fff;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .iotbt1 {
-  font-size: 32px;
-  font-family: Montserrat-Bold, Montserrat;
-  padding-bottom: 65px;
-  padding-top: 88px;
-  font-weight: 700;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs {
-  width: 70%;
-  padding-bottom: 1.25rem;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div {
-  width: 20rem;
-  height: 15.9375rem;
-  text-align: center;
-  background: #fff;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div .fdimgs-div-span {
-  position: absolute;
-  bottom: 0px;
-  z-index: 9999;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(200, 200, 200, 0.1));
-  height: 45px;
-  width: 100%;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div .fdtitle {
-  font-size: 18px;
-  font-weight: bold;
-  z-index: 9999;
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  right: 0;
-  color: #fff;
-  line-height: 45px;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .iotbt1 {
-  font-size: 32px;
-  font-family: Montserrat-Bold, Montserrat;
-  padding-bottom: 65px;
-  padding-top: 88px;
-  font-weight: 700;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .fdimgs {
-  width: 70%;
-  padding-bottom: 110px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .fdimgs img {
-  border-style: none;
-  font-size: 0;
-}
--- a/public/static/index/css/category.css
+++ b/public/static/index/css/category.css
@@ -1,115 +0,0 @@
-@charset "UTF-8";
-.orico_Page_products {
-  width: 100%;
-  position: relative;
-  min-height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: #f9f9f9;
-}
-.oricoCont{
-   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 span{
-  font-size: 24px;
-}
-.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: 7.5rem 0 2.5rem;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding-top: 6.2rem;
-}
-.orico_Page_products .pageMain .ori-pd-title {
-  font-size: 1.5em;
-  color: #101010;
-  margin-bottom: 1.25rem;
-  font-weight: 400;
-}
-.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: 0.875em;
-  padding-bottom: 0.625rem;
-  width:80%;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
-  font-size: 0.875em;
-  color: #737373;
-  width:80%;
-  text-align: center;
-}
-.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);
-}
--- a/public/static/index/css/product_category.css
+++ b/public/static/index/css/product_category.css
@@ -2,7 +2,7 @@
 .orico_Page_category {
  width: 100%;
  position: relative;
-  height: 100vh;
+  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f9f9f9;
@@ -13,6 +13,21 @@
 .orico_Page_category span {
  font-family: "Microsoft YaHei", "Arial", sans-serif;
 }
+.orico_Page_category .opdBanner {
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+.orico_Page_category .opdBanner .opdbannerImg {
+  width: 100%;
+  height: auto;
+  display: none;
+  object-fit: cover;
+  transition: opacity 1s ease-in-out;
+}
+.orico_Page_category .opdbanner > a:first-child {
+  display: block;
+}
 .orico_Page_category .pageMain {
  width: 85%;
  padding: 7.5rem 0 10px;
--- a/public/static/index/css/product_subcategory.css
+++ b/public/static/index/css/product_subcategory.css
@@ -2,7 +2,7 @@
 .orico_Page_subcategory {
  width: 100%;
  position: relative;
-  height: 100vh;
+  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f9f9f9;
@@ -10,6 +10,21 @@
 .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 .opdBanner {
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+.orico_Page_subcategory .opdBanner .opdbannerImg {
+  width: 100%;
+  height: auto;
+  display: none;
+  object-fit: cover;
+  transition: opacity 1s ease-in-out;
+}
+.orico_Page_subcategory .opdbanner > a:first-child {
+  display: block;
+}
 .orico_Page_subcategory .pageMain {
  width: 85%;
  padding: 7.5rem 0 10px;
@@ -84,6 +99,11 @@
  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_subcategory .pageMain .ori-pd-list .oripditem:hover {
  box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
  transform: translate3d(0, -2px, 0);
--- a/public/static/index/css/product_xc.css
+++ b/public/static/index/css/product_xc.css
@@ -1,159 +0,0 @@
-.orico_Page_productxc {
-  width: 100%;
-  position: relative;
-  height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: #f2f2f2;
-}
-.orico_Page_productxc .productxcMain {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.orico_Page_productxc .productxcMain p {
-  font-family: inherit;
-}
-.orico_Page_productxc .productxcMain .culture_top {
-  background: #f2f2f2;
-  display: flex;
-  flex-direction: column;
-}
-.orico_Page_productxc .productxcMain .culture_top img {
-  height: auto;
-  max-width: 100%;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con {
-  max-width: 101.25rem;
-  width: 80%;
-  background: #f2f2f2;
-  overflow: hidden;
-  display: flex;
-  margin: 0 auto;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div {
-  width: 29%;
-  height: 597px;
-  background: #fff;
-  overflow: hidden;
-  text-align: center;
-  margin-left: 6%;
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-  border-radius: 1rem;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .iconimg {
-  display: flex;
-  justify-content: center;
-  margin-top: 3.125rem;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .iconimg img {
-  height: auto;
-  max-width: 100%;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  font-family: Montserrat-Bold, Montserrat;
-  margin-top: 2rem;
-  width: 90%;
-  margin-left: 5%;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .subtitle {
-  width: 80%;
-  font-size: 0.875rem;
-  color: #707070;
-  font-family: Montserrat-Medium, Montserrat;
-  margin-top: 1.375rem;
-  margin-left: 10%;
-}
-.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div:first-child {
-  margin-left: 0;
-}
-.orico_Page_productxc .productxcMain .culture_vision {
-  background-color: #fff;
-  overflow: hidden;
-  width: 100%;
-}
-.orico_Page_productxc .productxcMain .culture_vision .subtitle {
-  font-size: 1.25rem;
-  color: #101010;
-  line-height: 2em;
-  margin-bottom: 2%;
-  font-weight: 600;
-  font-family: Montserrat-Bold, Montserrat;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container {
-  width: 80%;
-  margin: 0 auto;
-  max-width: 101.25rem;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .title {
-  font-size: 3em;
-  font-weight: 600;
-  color: #101010;
-  text-align: center;
-  padding-top: 2.3%;
-  padding-bottom: 2%;
-  line-height: 2em;
-  font-family: "LATO-MEDIUM";
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table {
-  margin-bottom: 4%;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row {
-  display: table-row;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .left {
-  width: 46.7%;
-  text-align: center;
-  vertical-align: middle;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .left img {
-  border-radius: 1rem;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right {
-  width: 46.7%;
-  text-align: center;
-  vertical-align: middle;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right p {
-  margin-left: 5%;
-  text-align: left;
-  display: inline-block;
-  width: 90%;
-  font-size: 1.25rem;
-  color: #101010;
-  line-height: 2em;
-  margin-bottom: 2%;
-  font-family: Montserrat-Bold, Montserrat;
-  margin-right: 10%;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right .des {
-  font-size: 16px;
-  color: #737373;
-  line-height: 1.6rem;
-  font-family: Montserrat-Medium, Montserrat;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .Table-Cell {
-  display: table-cell;
-  margin: 0;
-  padding: 0;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .center {
-  width: 6.6%;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des {
-  font-size: 1rem;
-  color: #737373;
-  line-height: 1.6rem;
-  font-family: Montserrat-Medium, Montserrat;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des,
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .subtitle {
-  text-align: left;
-}
-.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 img {
-  border-radius: 1rem;
-}