feat(goodsDetail): 商品详情样式调整

src/views/goodsDetails/index.vue

@@ -8,6 +8,8 @@
       @showShare="showShare"
       ref="sideBar"
     ></Sidebar>
+    <div class="product-body">
+      <div class="product-container">
         <!-- 面包屑 -->
         <div class="mianbao">
           <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -75,11 +77,14 @@
                       "
                       style="margin-right: 20px"
                     >
-                  业绩:{{ goodDetail.goodsAchive | toThousandthAndKeepDecimal }}
+                      业绩:{{
+                        goodDetail.goodsAchive | toThousandthAndKeepDecimal
+                      }}
                     </div>
                     <div
                       v-show="
-                    goodDetail.specialArea == 31 && userInfo.isMakerSpace == 0
+                        goodDetail.specialArea == 31 &&
+                        userInfo.isMakerSpace == 0
                       "
                       style="margin-right: 20px"
                     >
@@ -89,7 +94,8 @@
                     </div>
                     <div
                       v-show="
-                    goodDetail.specialArea == 10 || goodDetail.specialArea == 11
+                        goodDetail.specialArea == 10 ||
+                        goodDetail.specialArea == 11
                       "
                     >
                       {{ "积分可抵扣" }}:{{
@@ -193,7 +199,8 @@
             <!-- {{ '服务承诺' }} -->
             <div
               v-if="
-            goodDetail.ensureLabelList && goodDetail.ensureLabelList.length > 0
+                goodDetail.ensureLabelList &&
+                goodDetail.ensureLabelList.length > 0
               "
               class="dis_flex fw"
             >
@@ -208,6 +215,35 @@
               </div>
             </div>
           </div>
+        </div>
+        <div class="menuList">
+          <div
+            :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
+            @click="isMenu = 0"
+          >
+            商品介绍
+          </div>
+          <div
+            :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
+            @click="isMenu = 1"
+          >
+            售后保障
+          </div>
+        </div>
+        <div class="xian"></div>
+        <div class="allDetail">
+          <div
+            v-show="isMenu == 0"
+            class="allDetail_i"
+            v-html="goodDetail.details"
+          ></div>
+          <div
+            v-show="isMenu == 1"
+            class="allDetail_i"
+            v-html="goodDetail.afterGuarantee"
+          ></div>
+        </div>
+      </div>
       <!-- 推荐 -->
       <!-- 商品列表 -->
       <div class="goodList">
@@ -242,35 +278,6 @@
         </div>
       </div>
     </div>
-
-    <div class="menuList">
-      <div
-        :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
-        @click="isMenu = 0"
-      >
-        商品介绍
-      </div>
-      <div
-        :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
-        @click="isMenu = 1"
-      >
-        售后保障
-      </div>
-    </div>
-    <div class="xian"></div>
-    <div class="allDetail">
-      <div
-        v-show="isMenu == 0"
-        class="allDetail_i"
-        v-html="goodDetail.details"
-      ></div>
-      <div
-        v-show="isMenu == 1"
-        class="allDetail_i"
-        v-html="goodDetail.afterGuarantee"
-      ></div>
-    </div>
-
     <selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
   </div>
 </template>
@@ -968,10 +975,32 @@ export default {
   margin-top: 30px;
 }
 
-.details_t {
+.dis_flex {
+  display: flex;
+  align-items: center;
+}
+
+.dis_flex1 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.just {
+  justify-content: space-between;
+}
+
+.m10 {
+  margin-top: 10px;
+}
+.product-body {
+  display: flex;
+  .product-container {
+    flex: 1;
+    .details_t {
       display: flex;
       justify-content: space-between;
-  padding: 0 60px;
+      padding: 0 0 0px 60px;
       margin-top: 40px;
       .details_c {
         flex: 1;
@@ -999,34 +1028,14 @@ export default {
           }
         }
       }
-}
+    }
-
+  }
-.dis_flex {
+  .goodList {
-  display: flex;
-  align-items: center;
-}
-
-.dis_flex1 {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.just {
-  justify-content: space-between;
-}
-
-.m10 {
-  margin-top: 10px;
-}
-
-.goodList {
     width: 320px; /* Define a fixed width for the sticky column */
-  position: sticky;
-  top: 20px; /* Adjust as needed based on header/breadcrumb height */
     align-self: flex-start; /* Prevent stretching vertically with flex items */
     padding-bottom: 20px; /* Add some padding at the bottom */
-
+    padding-top: 80px;
+    margin-right: 60px;
     .tited {
       font-size: 18px;
       font-weight: 600;
@@ -1060,6 +1069,7 @@ export default {
       border-radius: 10px 10px 0px 0px;
       display: block;
     }
+  }
 }
 
 .disFlex {
@@ -1273,6 +1283,7 @@ export default {
   height: 5px;
   background: rgba(0, 0, 0, 0.05);
   margin-top: -5px;
+  width: calc(100% - 60px);
 }
 
 .allDetail {