From 70105713ae7c29236ff26d4320ea183df82282be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E4=B8=B9=E5=8D=8E?=
 <14641717+yang-danhua@user.noreply.gitee.com>
Date: Wed, 28 May 2025 11:45:09 +0800
Subject: [PATCH] =?UTF-8?q?style:=E5=85=B3=E8=81=94=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8D=E4=BB=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/product/__CSS__/product_detail.css |  0
 app/index/view/mobile/product/detail.html     | 26 ++++++++++++--
 public/static/index/mobile/css/style.css      | 36 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 app/index/view/mobile/product/__CSS__/product_detail.css

diff --git a/app/index/view/mobile/product/__CSS__/product_detail.css b/app/index/view/mobile/product/__CSS__/product_detail.css
new file mode 100644
index 00000000..e69de29b
diff --git a/app/index/view/mobile/product/detail.html b/app/index/view/mobile/product/detail.html
index c60113d3..117bd79d 100644
--- a/app/index/view/mobile/product/detail.html
+++ b/app/index/view/mobile/product/detail.html
@@ -110,7 +110,16 @@
             </ul>
         </div>
         <!-- 产品图片-->
-        <div class="goods_des img-responsives" id="goods_details_Content1">{$product.detail|raw}</div>
+        <div class="goods_des img-responsives" id="description-tab">{$product.detail|raw}</div>
+        <!-- 关联产品-->
+				<div class="glcplist"  id="related-tab" style="display: none;">
+					<div class="glcpitem" >
+						<img src="indeximg/i560-800-1.png" src="glcpimg" />
+						<span class="glt1" style="margin-top: 0.68rem;color: #333;font-size: 0.58rem;">98系列
+							多盘位DAS桌面阵列存储系统</span>
+						<span class="glt2">ORICO-9858RU3</span>
+					</div>
+				</div>
         <!-- 弹窗-->
         <div class="marsk-container-detail">
             <div class="popup-quick">
@@ -196,7 +205,20 @@
         $('.business-close').click(function() {
             $('.marsk-container-detail').hide()
         })
-
+        // 产品描述和关联产品切换
+        $('.cpa li').on('click', function() {
+            $(this).siblings().removeClass('active');
+            $(this).addClass('active'); 
+            const targetTab = $(this).data('tab');
+            $('.tab-pane').hide();
+            if (targetTab === 'description') {
+              $('#description-tab').show();
+              $('#related-tab').hide();
+            } else if (targetTab === 'related') {
+              $('#related-tab').show();
+              $('#description-tab').hide();
+            }
+        });
         // 根据颜色切换图册
         $('.attr_type').find('.attr_value').click(function() {
             var index = $(this).data('index');
diff --git a/public/static/index/mobile/css/style.css b/public/static/index/mobile/css/style.css
index db9d6173..4ebe2e4e 100755
--- a/public/static/index/mobile/css/style.css
+++ b/public/static/index/mobile/css/style.css
@@ -1484,13 +1484,18 @@ video img {
   margin-top: 0rem;
 }
 .product_list_title .view_all {
-  width: 38%;
+  /* width: 38%; */
   float: right;
   text-align: right;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: -3%;
 }
 .product_list_title .icon-Double-Arrow {
   margin-left: 0.15rem;
   display: inline-block;
+  mar
 }
 
 /*产品列表*/
@@ -1694,6 +1699,8 @@ video img {
 }
 .goods_details .cpa {
   text-align: center;
+  display: flex;
+  justify-content: center;
 }
 .goods_details .cpa li {
   display: inline-block;
@@ -1745,6 +1752,33 @@ video img {
   z-index: 999;
   max-width: 750px;
 }
+.glcplist{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 3%;
+}
+.glcplist .glcpitem{
+  width: 44.5%;
+  background: #fff;
+  padding: 2%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;margin-bottom: 3%;
+}
+.glcplist .glcpitem .glt1{
+  margin-top: 0.68rem;
+  color: #333;
+  font-size: 0.58rem;  
+}
+.glcplist .glcpitem .glt2{
+  font-size: 0.43rem;
+  margin-bottom: 0.84rem;
+  margin-top: 0.35rem;
+  color: #666;
+}
 /*关联产品*/
 .goods_Related {
   padding: 0.85rem 0 1.25rem;