From ce5d0244c080977e4a3dd7c8bd16a3015ef7a632 Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Thu, 15 May 2025 18:07:38 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BA=A7=E5=93=81=E5=88=86?= =?UTF-8?q?=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index/controller/Product.php | 132 +++++++++++++-- .../model/SysBannerProdCateMappingModel.php | 15 ++ app/index/route/route.php | 2 + app/index/view/product/category.html | 138 ++++++++------- app/index/view/product/product_category.html | 59 ------- .../view/product/product_subcategory.html | 34 ---- app/index/view/product/subcategory.html | 86 ++++++++++ app/index/view/public/header.html | 7 +- public/static/index/css/OEMandODM.css | 153 ----------------- public/static/index/css/category.css | 115 ------------- public/static/index/css/product_category.css | 17 +- .../static/index/css/product_subcategory.css | 22 ++- public/static/index/css/product_xc.css | 159 ------------------ 13 files changed, 331 insertions(+), 608 deletions(-) create mode 100644 app/index/model/SysBannerProdCateMappingModel.php delete mode 100644 app/index/view/product/product_category.html delete mode 100644 app/index/view/product/product_subcategory.html create mode 100644 app/index/view/product/subcategory.html delete mode 100755 public/static/index/css/OEMandODM.css delete mode 100644 public/static/index/css/category.css delete mode 100755 public/static/index/css/product_xc.css diff --git a/app/index/controller/Product.php b/app/index/controller/Product.php index 3a9625ca..dc2270b8 100644 --- 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) { // 当分类数不只一个时，当前分类下有子分类，移除当前分类，只输出子分类 @@ -70,8 +178,8 @@ class Product extends Common $categorys_data = $categorys_data->toArray(); $products = ProductModel::field([ - 'id', - 'category_id', + 'id', + 'category_id', 'spu', 'name', 'short_name', @@ -151,7 +259,7 @@ class Product extends Common } View::assign('categorys_data', $categorys_data); - return View::fetch('category'); + return View::fetch('subcategory'); } /** @@ -399,7 +507,7 @@ class Product extends Common $m = $map[$pro['category_id']]; $pro_map[$m['path']][] = $pro; } - + // 获取二级分类下的产品信息 foreach ($categorys as $val) { if ($val['level'] != 2) { @@ -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, diff --git a/app/index/model/SysBannerProdCateMappingModel.php b/app/index/model/SysBannerProdCateMappingModel.php new file mode 100644 index 00000000..54050b5c --- /dev/null +++ b/app/index/model/SysBannerProdCateMappingModel.php @@ -0,0 +1,15 @@ + -{/block} -{block name="main"} -
- {notempty name="focus_image"} -
- {volist name="focus_image" id="fimg"} - - {/volist} -
- {/notempty} - -
- {notempty name="categorys_data"} - {volist name="categorys_data" id="vo"} -
- {$vo.name} - {eq name="vo.level" value="2"} - 查看更多 - {/eq} -
- {notempty name="vo.products"} -
- {volist name="vo.products" id="vp"} - -
- {volist name="vp.sku" id="vs" key="vs_idx"} - - {/volist} -
-
{$vp.name}
-
{$vp.spu}
- {notempty name="vp.colors"} -
- {volist name="vp.colors" id="vc" key="vc_idx"} -
- {assign name="color_type" value=":rgb_or_image($vc.attr_value)" /} - {eq name="color_type" value="IMAGE"} - - {elseif condition="$color_type == 'RGB'" /} - $vc.attr_value])}> - {/eq} -
- {/volist} -
- {/notempty} - - {/volist} -
- {/notempty} - {/volist} - {/notempty} -
-
-{/block} -{block name="script"} - +{extend name="public/base" /} +{block name="style"} + +{/block} +{block name="main"} +
+ + {notempty name="focus_image"} +
+ {volist name="focus_image" id="fi"} + + + + {/volist} +
+ {/notempty} + +
+ {volist name="list" id="vo"} +
+
+
{$vo.name}
+ + {:lang('product_newpro.view_all')} + + +
+ {notempty name="vo.products"} +
+ {volist name="vo.products" id="pro"} + +
+ +
+
{$pro.name}
+
{$pro.spu}
+ {eq name="pro.is_new" value="1"} +
New
+ {/eq} + + {/volist} +
+ {/notempty} +
+ {/volist} +
+
+{/block} +{block name="script"} + {/block} \ No newline at end of file diff --git a/app/index/view/product/product_category.html b/app/index/view/product/product_category.html deleted file mode 100644 index cbff7f93..00000000 --- a/app/index/view/product/product_category.html +++ /dev/null @@ -1,59 +0,0 @@ -{extend name="public/base" /} -{block name="style"} - -{block name="main"} -
- -
-
-
-
Power Strip
- - View all - - -
-
- -
- -
-
ORICO 5 in 1 Travel Power Strip
-
ORICO-AP3-2A3U
-
New
- - -
- -
-
ORICO 5 in 1 Travel Power Strip
-
ORICO-AP3-2A3U
-
New
- - -
- -
-
ORICO 5 in 1 Travel Power Strip
-
ORICO-AP3-2A3U
- - -
- -
-
ORICO 5 in 1 Travel Power Strip
-
ORICO-AP3-2A3U
- - -
- -
-
ORICO 5 in 1 Travel Power Strip
-
ORICO-AP3-2A3U
-
New
- -
-
-
-
-{/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 deleted file mode 100644 index 681ac0f1..00000000 --- a/app/index/view/product/product_subcategory.html +++ /dev/null @@ -1,34 +0,0 @@ -{extend name="public/base" /} -{block name="style"} - -{block name="main"} -
- - - - - -
-

Power Strip

-
- -
- - -
-
ORICO 5 in 1 Travel Power Strip
-
ORICO-AP3-2A3U
-
-
- -
-
- -
-
- -
-
-
-{/block} \ No newline at end of file diff --git a/app/index/view/product/subcategory.html b/app/index/view/product/subcategory.html new file mode 100644 index 00000000..6e878fb6 --- /dev/null +++ b/app/index/view/product/subcategory.html @@ -0,0 +1,86 @@ +{extend name="public/base" /} +{block name="style"} + +{/block} +{block name="main"} +
+ {notempty name="focus_image"} +
+ {volist name="focus_image" id="fi"} + + + + {/volist} +
+ {/notempty} + +
+ {notempty name="categorys_data"} + {volist name="categorys_data" id="vo"} +
+ {$vo.name} +
+ {notempty name="vo.products"} +
+ {volist name="vo.products" id="vp"} + +
+ {volist name="vp.sku" id="vs" key="vs_idx"} + + {/volist} +
+
{$vp.name}
+
{$vp.spu}
+ {notempty name="vp.colors"} +
+ {volist name="vp.colors" id="vc" key="vc_idx"} +
+ {assign name="color_type" value=":rgb_or_image($vc.attr_value)" /} + {eq name="color_type" value="IMAGE"} + + {elseif condition="$color_type == 'RGB'" /} + $vc.attr_value])}> + {/eq} +
+ {/volist} +
+ {/notempty} + + {/volist} +
+ {/notempty} + {/volist} + {/notempty} +
+
+{/block} +{block name="script"} + +{/block} \ No newline at end of file diff --git a/app/index/view/public/header.html b/app/index/view/public/header.html index 59c2385c..5b5c9d95 100644 --- a/app/index/view/public/header.html +++ b/app/index/view/public/header.html @@ -25,16 +25,15 @@ {volist name="header_categorys" id="vo" key="idx"} -
+
{volist name="vo.children" id="vc"}
- {$vc.name} + {$vc.name}
{volist name="vc.children" id="vcc"}
- {$vcc.name} + {$vcc.name}
{/volist}
diff --git a/public/static/index/css/OEMandODM.css b/public/static/index/css/OEMandODM.css deleted file mode 100755 index 8f61ac59..00000000 --- a/public/static/index/css/OEMandODM.css +++ /dev/null @@ -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; -} diff --git a/public/static/index/css/category.css b/public/static/index/css/category.css deleted file mode 100644 index 0a7382bc..00000000 --- a/public/static/index/css/category.css +++ /dev/null @@ -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); -} diff --git a/public/static/index/css/product_category.css b/public/static/index/css/product_category.css index c5acaa9c..6684ac6b 100755 --- 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; diff --git a/public/static/index/css/product_subcategory.css b/public/static/index/css/product_subcategory.css index d14feccf..05923ae6 100644 --- 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); diff --git a/public/static/index/css/product_xc.css b/public/static/index/css/product_xc.css deleted file mode 100755 index e6e5ede7..00000000 --- a/public/static/index/css/product_xc.css +++ /dev/null @@ -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; -}