From 151a7799df6d49674e9de8295eae07d4317a1734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 21 Aug 2024 14:07:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E6=98=BE=E7=A4=BA=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json                    |  3 +-
 src/components/model-shop-list/index.vue      | 43 ++++++++-----------
 .../model-shop-list-styles.vue                |  7 +--
 .../components/main/default/shop-list.ts      |  6 +--
 4 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 48212252..189b82f9 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -285,6 +285,7 @@
     "watchWithFilter": true,
     "whenever": true,
     "ElMessageBox": true,
-    "ElMessage": true
+    "ElMessage": true,
+    "ElIcons": true
   }
 }
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 80f2044d..61394698 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :style="style_container">
+    <div class="oh" :style="style_container">
         <div :class="outer_class" :style="onter_style">
             <div v-for="(item, index) in list" :key="index" class="re" :class="layout_type" :style="layout_style">
                 <template v-if="product_style == '6'">
@@ -172,16 +172,12 @@ const content_img_radius = computed(() => radius_computer(new_style.value.shop_i
 const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
 // 选择的风格
 const product_style = computed(() => form.value.product_style);
-// 左右间距数量
-const content_outer_about_spacing = computed(() => new_style.value.content_outer_about_spacing );
-// 上下间距
-const flex_down_spacing = computed(() => new_style.value.content_outer_down_spacing + 'px');
-// 左右间距
-const flex_about_spacing = computed(() => content_outer_about_spacing.value + 'px');
+// 商品间距
+const content_outer_spacing = computed(() => new_style.value.content_outer_spacing );
 // 两列风格
-const two_columns = computed(() => (content_outer_about_spacing.value) + 'px' );
+const two_columns = computed(() => (content_outer_spacing.value) + 'px' );
 // 三列风格
-const three_columns = computed(() => (content_outer_about_spacing.value * 2) + 'px');
+const three_columns = computed(() => (content_outer_spacing.value * 2) + 'px');
 // 不换行显示
 const multicolumn_columns = computed(() => new_style.value.content_outer_width + 'px');
 
@@ -189,14 +185,13 @@ const multicolumn_columns = computed(() => new_style.value.content_outer_width +
 const outer_class = computed(() => {
     const flex = ['0', '2', '6'].includes(product_style.value) ? 'flex-col ' : 'flex-row ';
     const wrap = product_style.value == '5' ? '' : 'flex-wrap ';
-    const background = ['4', '6'].includes(product_style.value) ? 'bg-f ' : '';
-    return flex + wrap + background;
+    const background = ['6'].includes(product_style.value) ? 'bg-f ' : '';
+    return flex + wrap + background + 'oh';
 });
 const onter_style = computed(() => {
-    const radius = product_style.value == '4' ? content_radius.value : '';
-    const padding = product_style.value == '4' ? content_padding.value : '';
-    const gap = `column-gap: ${ flex_about_spacing.value }; row-gap: ${ flex_down_spacing.value };`;
-    return `${ radius }  ${ padding } ${ gap }`;
+    const radius = product_style.value == '6' ? content_radius.value : '';
+    const gap = `gap: ${ new_style.value.content_outer_spacing + 'px'};`;
+    return `${ radius } ${ gap }`;
 })
 
 // 不同风格下的样式
@@ -204,22 +199,22 @@ const layout_type = computed(() => {
     let class_type = '';
     switch (product_style.value) {
         case '0':
-            class_type = `flex-row bg-f`;
+            class_type = `flex-row bg-f oh`;
             break;
         case '1':
-            class_type = `flex-col two-columns bg-f`;
+            class_type = `flex-col two-columns bg-f oh`;
             break;
         case '2':
-            class_type = `flex-col bg-f`;
+            class_type = `flex-col bg-f oh`;
             break;
         case '3':
-            class_type = `flex-col three-columns bg-f`;
+            class_type = `flex-col three-columns bg-f oh`;
             break;
         case '4':
-            class_type = `flex-row two-columns bg-f`;
+            class_type = `flex-row two-columns bg-f oh`;
             break;
         case '5':
-            class_type = `flex-col multicolumn-columns bg-f`;
+            class_type = `flex-col multicolumn-columns bg-f oh`;
             break;
         default:
             break;
@@ -228,9 +223,9 @@ const layout_type = computed(() => {
 })
 
 const layout_style = computed(() => {
-    const radius = product_style.value == '4' ? '' : content_radius.value;
-    const padding = product_style.value == '0' ? content_padding.value : '';
-    return `${ radius }  ${ padding } `;
+    const radius = product_style.value == '6' ? '' : content_radius.value;
+    const padding = ['0', '4'].includes(product_style.value) ? content_padding.value : '';
+    return `${ radius } ${ padding }`;
 })
 // 内容区域的样式
 const content_style =  computed(() => {
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index d829a481..75acccab 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -15,11 +15,8 @@
                 <el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
                     <slider v-model="form.content_spacing" :max="100"></slider>
                 </el-form-item>
-                <el-form-item v-if="product_style != '5'" label="外间距">
-                    <slider v-model="form.content_outer_down_spacing" :max="100"></slider>
-                </el-form-item>
-                <el-form-item v-if="!['0', '2'].includes(product_style)" label="左右间距">
-                    <slider v-model="form.content_outer_about_spacing" :max="100"></slider>
+                <el-form-item label="商品间距">
+                    <slider v-model="form.content_outer_spacing" :max="100"></slider>
                 </el-form-item>
                 <el-form-item v-if="product_style == '5'" label="内容宽度">
                     <slider v-model="form.content_outer_width" :max="1000"></slider>
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index edec96c3..20be3eb2 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -20,8 +20,7 @@ interface DefaultProductList {
         shop_padding: internalStyle;
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
-        content_outer_down_spacing: number;
-        content_outer_about_spacing: number;
+        content_outer_spacing: number;
         content_outer_width: number;
         content_spacing: number;
         shop_title_typeface: string;
@@ -81,8 +80,7 @@ const defaultProductList: DefaultProductList = {
             radius_bottom_left: 0,
             radius_bottom_right: 0,
         },
-        content_outer_down_spacing: 10, // 内容间的上下间距
-        content_outer_about_spacing: 10, // 内容间的左右间距
+        content_outer_spacing: 10, // 商品间距
         content_spacing: 10,
         content_outer_width: 104,
         shop_title_typeface: 'normal',