From a5b125dac10b446a9b79a32b204729991e53a46f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sun, 3 Nov 2024 18:17:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-article-list/index.vue   | 57 +++++++++++++---
 .../model-article-list-content.vue            | 21 +++---
 .../model-article-list-setting.vue            |  8 +--
 .../model-article-list-styles.vue             | 10 ++-
 .../model-article-tabs-content.vue            | 21 +++---
 .../model-article-tabs-setting.vue            |  8 +--
 .../model-article-tabs-styles.vue             | 10 ++-
 src/components/model-goods-list/index.vue     | 68 ++++++++++++++-----
 .../model-goods-list-content.vue              | 26 ++++---
 .../model-goods-list-setting.vue              |  7 +-
 .../model-goods-list-styles.vue               | 10 ++-
 .../model-goods-tabs-content.vue              | 25 ++++---
 .../model-goods-tabs-setting.vue              |  7 +-
 .../model-goods-tabs-styles.vue               | 10 ++-
 src/config/const/article-list.ts              |  6 +-
 src/config/const/article-tabs.ts              |  6 +-
 src/config/const/goods-list.ts                |  6 +-
 src/config/const/goods-tabs.ts                |  7 +-
 18 files changed, 222 insertions(+), 91 deletions(-)

diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index c3c15d53..2c0e6a8c 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -10,7 +10,7 @@
                             </template>
                             <template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
                         </template>
-                        <div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : ''">
+                        <div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : 'width: 0;'">
                             <div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
                                 <div class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
                                 <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
@@ -118,7 +118,7 @@ const content_padding = ref('');
 const content_spacing = ref('');
 // 文章间距
 const article_spacing = ref('');
-const article_item_height = ref('183');
+const article_item_height = ref('155');
 
 const article_style = ref({});
 const default_data_list: ArticleList = {
@@ -229,7 +229,43 @@ const article_name_line_height_computer = computed(() => {
     return new_style.value.name_size * 1.2 + 'px';
 });
 // 轮播高度
-const carousel_height_computer = computed(() => new_style.value.article_height + 'px');
+const carousel_height_computer = computed(() => {
+    return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
+});
+
+const theme_list = [
+    { name: '单列展示', value: '0', width:110, height: 83 },
+    { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+    { name: '大图展示', value: '2', width:0, height: 180 },
+    { name: '无图模式', value: '3', width:0, height: 0 },
+    { name: '左右滑动展示', value: '4', width:0, height: 0 },
+]
+// 宽度和高度为空的时候，修改默认值
+const article_img_width = computed(() => {
+    if (typeof new_style.value.content_img_width == 'number') {
+        return new_style.value.content_img_width + 'px';
+    } else {
+        const list = theme_list.filter(item => item.value == new_content.value.theme);
+        if (list.length > 0) {
+            return list[0].width + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
+// 宽度和高度为空的时候，修改默认值
+const article_img_height = computed(() => {
+    if (typeof new_style.value.content_img_height == 'number') {
+        return new_style.value.content_img_height + 'px';
+    } else {
+        const list = theme_list.filter(item => item.value == new_content.value.theme);
+        if (list.length > 0) {
+            return list[0].height + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
 // 监听value数据变化
 watch(
     () => props.value,
@@ -325,23 +361,27 @@ const article_carousel_list = computed(() => {
 .style1 {
     .item {
         width: 100%;
-        height: v-bind(carousel_height_computer);
         .img {
-            height: 100%;
-            width: 11rem;
+            height: v-bind(article_img_height);
+            width: v-bind(article_img_width);
         }
     }
 }
 .style2 {
     .item {
         width: calc(50% - 0.5rem);
-        height: v-bind(carousel_height_computer);
+        .img {
+            height: v-bind(article_img_height);
+        }
     }
 }
 .style3 {
     .item {
         width: 100%;
-        height: v-bind(carousel_height_computer);
+        .img {
+            width: 100%;
+            height: v-bind(article_img_height);
+        }
     }
 }
 .style4 {
@@ -356,7 +396,6 @@ const article_carousel_list = computed(() => {
     .item {
         width: v-bind(multicolumn_columns_width);
         min-width: v-bind(multicolumn_columns_width);
-        height: v-bind(carousel_height_computer);
         .img {
             width: 100%;
             max-height: v-bind(article_item_height);
diff --git a/src/components/model-article-list/model-article-list-content.vue b/src/components/model-article-list/model-article-list-content.vue
index e3be9326..45df150d 100644
--- a/src/components/model-article-list/model-article-list-content.vue
+++ b/src/components/model-article-list/model-article-list-content.vue
@@ -102,11 +102,11 @@ const state = reactive({
 const { form, data } = toRefs(state);
 const base_list = reactive({
     theme_list: [
-        { name: '单列展示', value: '0', height: 103 },
-        { name: '两列展示（纵向）', value: '1', height: 245 },
-        { name: '大图展示', value: '2', height: 245 },
-        { name: '无图模式', value: '3', height: 0 },
-        { name: '左右滑动展示', value: '4', height: 183 },
+        { name: '单列展示', value: '0', width:110, height: 83 },
+        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+        { name: '大图展示', value: '2', width:0, height: 180 },
+        { name: '无图模式', value: '3', width:0, height: 0 },
+        { name: '左右滑动展示', value: '4', width:0, height: 0 },
     ],
     carousel_col_list: [
         { name: '单列展示', value: '0' },
@@ -144,10 +144,12 @@ onMounted(() => {
         }
     });
     // 如果历史数据没有操作，则修改默认值
-    if (data.value.article_height == 155 && form.value.theme != '4') {
+    const { content_img_width = '', content_img_height = '' } = data.value;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.value.theme)) {
         const list = base_list.theme_list.filter(item => item.value == form.value.theme);
         if (list.length > 0) {
-            emits('theme_change', list[0].height);
+            emits('theme_change', list[0].width, list[0].height);
         }
     }
 });
@@ -175,9 +177,10 @@ const theme_change = (val: any) => {
             data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
         }
     }
-    const list = base_list.theme_list.filter(item => item.value == val);
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.theme_list.filter(item => item.value == form.value.theme);
     if (list.length > 0) {
-        emits('theme_change', list[0].height);
+        emits('theme_change', list[0].width, list[0].height);
     }
 };
 // 移除
diff --git a/src/components/model-article-list/model-article-list-setting.vue b/src/components/model-article-list/model-article-list-setting.vue
index dda1ff74..5db382da 100644
--- a/src/components/model-article-list/model-article-list-setting.vue
+++ b/src/components/model-article-list/model-article-list-setting.vue
@@ -30,9 +30,9 @@ const data_config = reactive({
     img_radius_1: 0,
 });
 const form = ref(props.value);
-const theme_change = (val: number) => {
-    if (val) {
-        form.value.style.article_height = val;
-    }
+
+const theme_change = (width: number, height: number) => {
+    form.value.style.content_img_width = width;
+    form.value.style.content_img_height = height;
 };
 </script>
diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue
index b22ba3fa..f0294334 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -40,7 +40,15 @@
                         <slider v-model="form.article_spacing"></slider>
                     </el-form-item>
                 </template>
-                <template v-if="theme != '3'">
+                <template v-if="!['3', '4'].includes(theme)">
+                    <el-form-item v-if="['0'].includes(theme)" label="图片宽度">
+                        <slider v-model="form.content_img_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="图片高度">
+                        <slider v-model="form.content_img_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="theme == '4'">
                     <el-form-item label="内容高度">
                         <slider v-model="form.article_height" :max="1000"></slider>
                     </el-form-item>
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 1f863b77..2e7d70b9 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -132,11 +132,11 @@ const base_list = reactive({
         { name: '样式四', value: '3' },
     ],
     article_theme_list: [
-        { name: '单列展示', value: '0', height: 103 },
-        { name: '两列展示（纵向）', value: '1', height: 245 },
-        { name: '大图展示', value: '2', height: 245 },
-        { name: '无图模式', value: '3', height: 0 },
-        { name: '左右滑动展示', value: '4', height: 183 },
+        { name: '单列展示', value: '0', width:110, height: 83 },
+        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+        { name: '大图展示', value: '2', width:0, height: 180 },
+        { name: '无图模式', value: '3', width:0, height: 0 },
+        { name: '左右滑动展示', value: '4', width:0, height: 0 },
     ],
     carousel_col_list: [
         { name: '单列展示', value: '0' },
@@ -173,10 +173,12 @@ onMounted(() => {
         }
     });
     // 如果历史数据没有操作，则修改默认值
-    if (styles.article_height == 155 && form.value.theme != '4') {
-        const list = base_list.article_theme_list.filter(item => item.value == form.value.theme);
+    const { content_img_width = '', content_img_height = '' } = styles;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.theme)) {
+        const list = base_list.article_theme_list.filter(item => item.value == form.theme);
         if (list.length > 0) {
-            emits('theme_change', list[0].height);
+            emits('theme_change', list[0].width, list[0].height);
         }
     }
 });
@@ -204,9 +206,10 @@ const article_theme_change = (val: any) => {
             styles.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
         }
     }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
     const list = base_list.article_theme_list.filter(item => item.value == val);
     if (list.length > 0) {
-        emits('theme_change', list[0].height);
+        emits('theme_change', list[0].width, list[0].height);
     }
 };
 
diff --git a/src/components/model-article-tabs/model-article-tabs-setting.vue b/src/components/model-article-tabs/model-article-tabs-setting.vue
index 4232c3a7..6d5a359e 100644
--- a/src/components/model-article-tabs/model-article-tabs-setting.vue
+++ b/src/components/model-article-tabs/model-article-tabs-setting.vue
@@ -30,9 +30,9 @@ const data_config = reactive({
     img_radius_1: 0,
 });
 const form = ref(props.value);
-const theme_change = (val: number) => {
-    if (val) {
-        form.value.style.article_height = val;
-    }
+
+const theme_change = (width: number, height: number) => {
+    form.value.style.content_img_width = width;
+    form.value.style.content_img_height = height;
 };
 </script>
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index 010135a8..dfa8dc4f 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -60,7 +60,15 @@
                         <slider v-model="form.article_spacing"></slider>
                     </el-form-item>
                 </template>
-                <template v-if="theme != '3'">
+                <template v-if="!['3', '4'].includes(theme)">
+                    <el-form-item v-if="['0'].includes(theme)" label="图片宽度">
+                        <slider v-model="form.content_img_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="图片高度">
+                        <slider v-model="form.content_img_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="theme == '4'">
                     <el-form-item label="内容高度">
                         <slider v-model="form.article_height" :max="1000"></slider>
                     </el-form-item>
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index b9436e0d..910b3c5a 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -329,19 +329,19 @@ const layout_type = computed(() => {
     let class_type = '';
     switch (theme.value) {
         case '0':
-            class_type = `flex-row goods-height bg-f oh`;
+            class_type = `flex-row bg-f oh`;
             break;
         case '1':
-            class_type = `flex-col goods-height two-columns bg-f oh`;
+            class_type = `flex-col two-columns bg-f oh`;
             break;
         case '2':
-            class_type = `flex-col goods-height bg-f oh`;
+            class_type = `flex-col bg-f oh`;
             break;
         case '3':
-            class_type = `flex-col goods-height three-columns bg-f oh`;
+            class_type = `flex-col three-columns bg-f oh`;
             break;
         case '4':
-            class_type = `flex-row goods-height two-columns bg-f oh`;
+            class_type = `flex-row two-columns bg-f oh`;
             break;
         case '5':
             class_type = `flex-col multicolumn-columns bg-f oh`;
@@ -366,7 +366,9 @@ const content_style = computed(() => {
     } else {
         spacing = content_padding.value;
     }
-
+    if (['4'].includes(theme.value)) {
+        spacing += `width: 0;`;
+    }
     return `${spacing}`;
 });
 // 显示除标题外的其他区域
@@ -448,6 +450,41 @@ const multicolumn_columns_width = computed(() => {
     return `calc(${100 / carousel_col.value}% - ${gap}px)`;
 });
 const content_outer_height = computed(() => new_style.value.content_outer_height + 'px');
+const product_style_list = [
+    { name: '单列展示', value: '0', width: 110, height: 120 },
+    { name: '大图展示', value: '2', width: 166, height: 166 },
+    { name: '无图模式', value: '6', width: 0, height: 0 },
+    { name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
+    { name: '两列展示(横向)', value: '4', width: 70, height: 70 },
+    { name: '三列展示', value: '3', width: 116, height: 114 },
+    { name: '左右滑动展示', value: '5', width: 0, height: 0 },
+]
+// 宽度和高度为空的时候，修改默认值
+const goods_img_width = computed(() => {
+    if (typeof new_style.value.content_img_width == 'number') {
+        return new_style.value.content_img_width + 'px';
+    } else {
+        const list = product_style_list.filter(item => item.value == form.value.theme);
+        if (list.length > 0) {
+            return list[0].width + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
+// 宽度和高度为空的时候，修改默认值
+const goods_img_height = computed(() => {
+    if (typeof new_style.value.content_img_height == 'number') {
+        return new_style.value.content_img_height + 'px';
+    } else {
+        const list = product_style_list.filter(item => item.value == form.value.theme);
+        if (list.length > 0) {
+            return list[0].height + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
 interface nav_list {
     split_list: data_list[];
 }
@@ -539,30 +576,25 @@ watchEffect(() => {
     min-width: v-bind(multicolumn_columns_width);
     height: v-bind(content_outer_height);
 }
-.goods-height {
-    height: v-bind(content_outer_height);
-}
 .flex-img0 {
-    height: 100%;
-    // min-height: 11rem;
-    // max-height: 12rem;
-    width: 11rem;
+    height: v-bind(goods_img_height);
+    width: v-bind(goods_img_width);
 }
 .flex-img1 {
     width: 100%;
-    height: 100%;
+    height: v-bind(goods_img_height);
 }
 .flex-img2 {
     width: 100%;
-    height: 100%;
+    height: v-bind(goods_img_height);
 }
 .flex-img3 {
     width: 100%;
-    height: 100%;
+    height: v-bind(goods_img_height);
 }
 .flex-img4 {
-    width: 7rem;
-    min-height: 100%;
+    height: v-bind(goods_img_height);
+    width: v-bind(goods_img_width);
 }
 .flex-img5 {
     width: 100%;
diff --git a/src/components/model-goods-list/model-goods-list-content.vue b/src/components/model-goods-list/model-goods-list-content.vue
index a271384c..6a894f7b 100644
--- a/src/components/model-goods-list/model-goods-list-content.vue
+++ b/src/components/model-goods-list/model-goods-list-content.vue
@@ -65,6 +65,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from "lodash";
 import { get_math } from '@/utils';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -96,13 +97,13 @@ const { form, data } = toRefs(state);
 
 const base_list = reactive({
     product_style_list: [
-        { name: '单列展示', value: '0', height: 142 },
-        { name: '大图展示', value: '2', height: 308 },
-        { name: '无图模式', value: '6', height: 0 },
-        { name: '两列展示(纵向)', value: '1', height: 302 },
-        { name: '两列展示(横向)', value: '4', height: 94 },
-        { name: '三列展示', value: '3', height: 204 },
-        { name: '左右滑动展示', value: '5', height: 232 },
+        { name: '单列展示', value: '0', width: 110, height: 120 },
+        { name: '大图展示', value: '2', width: 166, height: 166 },
+        { name: '无图模式', value: '6', width: 0, height: 0 },
+        { name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
+        { name: '两列展示(横向)', value: '4', width: 70, height: 70 },
+        { name: '三列展示', value: '3', width: 116, height: 114 },
+        { name: '左右滑动展示', value: '5', width: 0, height: 0 },
     ],
     product_list: [
         { name: '指定商品', value: '0' },
@@ -135,10 +136,12 @@ onBeforeMount(() => {
         }, 1000);
     });
     // 如果历史数据没有操作，则修改默认值
-    if (data.value.content_outer_height == 232 && form.value.theme != '5') {
+    const { content_img_width = '', content_img_height = '' } = data.value;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['5', '6'].includes(form.value.theme)) {
         const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
         if (list.length > 0) {
-            emits('theme_change', list[0].height);
+            emits('theme_change', list[0].width, list[0].height);
         }
     }
 });
@@ -211,9 +214,10 @@ const change_style = (val: string | number | boolean | undefined): void => {
             data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
         }
     }
-    const list = base_list.product_style_list.filter(item => item.value == val);
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
     if (list.length > 0) {
-        emits('theme_change', list[0].height);
+        emits('theme_change', list[0].width, list[0].height);
     }
 };
 const is_revise = ref(false);
diff --git a/src/components/model-goods-list/model-goods-list-setting.vue b/src/components/model-goods-list/model-goods-list-setting.vue
index 9bcf2faa..6231ae80 100644
--- a/src/components/model-goods-list/model-goods-list-setting.vue
+++ b/src/components/model-goods-list/model-goods-list-setting.vue
@@ -25,10 +25,9 @@ const data_config = reactive({
     img_radius_1: 0,
 });
 const form = ref(props.value);
-const theme_change = (val: number) => {
-    if (val) {
-        form.value.style.content_outer_height = val;
-    }
+const theme_change = (width: number, height: number) => {
+    form.value.style.content_img_width = width;
+    form.value.style.content_img_height = height;
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-goods-list/model-goods-list-styles.vue b/src/components/model-goods-list/model-goods-list-styles.vue
index c3bc2de7..448c6254 100644
--- a/src/components/model-goods-list/model-goods-list-styles.vue
+++ b/src/components/model-goods-list/model-goods-list-styles.vue
@@ -43,7 +43,15 @@
                     <el-form-item label="商品间距">
                         <slider v-model="form.content_outer_spacing" :max="100"></slider>
                     </el-form-item>
-                    <template v-if="theme != '6'">
+                    <template v-if="!['5', '6'].includes(theme)">
+                        <el-form-item v-if="['0', '4'].includes(theme)" label="图片宽度">
+                            <slider v-model="form.content_img_width" :max="1000"></slider>
+                        </el-form-item>
+                        <el-form-item label="图片高度">
+                            <slider v-model="form.content_img_height" :max="1000"></slider>
+                        </el-form-item>
+                    </template>
+                    <template v-if="theme == '5'">
                         <el-form-item label="内容高度">
                             <slider v-model="form.content_outer_height" :max="1000"></slider>
                         </el-form-item>
diff --git a/src/components/model-goods-tabs/model-goods-tabs-content.vue b/src/components/model-goods-tabs/model-goods-tabs-content.vue
index 180a3895..fd5f8873 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -136,13 +136,13 @@ const base_list = reactive({
         { name: '样式五', value: '4' },
     ],
     product_style_list: [
-        { name: '单列展示', value: '0', height: 142 },
-        { name: '大图展示', value: '2', height: 308 },
-        { name: '无图模式', value: '6', height: 0 },
-        { name: '两列展示(纵向)', value: '1', height: 302 },
-        { name: '两列展示(横向)', value: '4', height: 94 },
-        { name: '三列展示', value: '3', height: 204 },
-        { name: '左右滑动展示', value: '5', height: 232 },
+        { name: '单列展示', value: '0', width: 110, height: 120 },
+        { name: '大图展示', value: '2', width: 166, height: 166 },
+        { name: '无图模式', value: '6', width: 0, height: 0 },
+        { name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
+        { name: '两列展示(横向)', value: '4', width: 70, height: 70 },
+        { name: '三列展示', value: '3', width: 116, height: 114 },
+        { name: '左右滑动展示', value: '5', width: 0, height: 0 },
     ],
     product_list: [
         { name: '指定商品', value: '0' },
@@ -179,10 +179,12 @@ onBeforeMount(() => {
         }, 1000);
     });
     // 如果历史数据没有操作，则修改默认值
-    if (styles.value.content_outer_height == 232 && form.value.theme != '5') {
+    const { content_img_width = '', content_img_height = '' } = styles.value;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['5', '6'].includes(form.value.theme)) {
         const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
         if (list.length > 0) {
-            emits('theme_change', list[0].height);
+            emits('theme_change', list[0].width, list[0].height);
         }
     }
 });
@@ -297,9 +299,10 @@ const change_style = (val: any): void => {
             styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
         }
     }
-    const list = base_list.product_style_list.filter(item => item.value == val);
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
     if (list.length > 0) {
-        emits('theme_change', list[0].height);
+        emits('theme_change', list[0].width, list[0].height);
     }
 };
 const is_revise = ref(false);
diff --git a/src/components/model-goods-tabs/model-goods-tabs-setting.vue b/src/components/model-goods-tabs/model-goods-tabs-setting.vue
index 2076a619..4ba8ea70 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-setting.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-setting.vue
@@ -26,10 +26,9 @@ const data_config = reactive({
     img_radius_1: 0,
 });
 const form = ref(props.value);
-const theme_change = (val: number) => {
-    if (val) {
-        form.value.style.content_outer_height = val;
-    }
+const theme_change = (width: number, height: number) => {
+    form.value.style.content_img_width = width;
+    form.value.style.content_img_height = height;
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-goods-tabs/model-goods-tabs-styles.vue b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
index b80571ad..b1a3371a 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -50,7 +50,15 @@
                     <el-form-item label="商品间距">
                         <slider v-model="form.content_outer_spacing" :max="100"></slider>
                     </el-form-item>
-                    <template v-if="theme != '6'">
+                    <template v-if="!['5', '6'].includes(theme)">
+                        <el-form-item v-if="['0', '4'].includes(theme)" label="图片宽度">
+                            <slider v-model="form.content_img_width" :max="1000"></slider>
+                        </el-form-item>
+                        <el-form-item label="图片高度">
+                            <slider v-model="form.content_img_height" :max="1000"></slider>
+                        </el-form-item>
+                    </template>
+                    <template v-if="theme == '5'">
                         <el-form-item label="内容高度">
                             <slider v-model="form.content_outer_height" :max="1000"></slider>
                         </el-form-item>
diff --git a/src/config/const/article-list.ts b/src/config/const/article-list.ts
index 1f461a01..757feb87 100644
--- a/src/config/const/article-list.ts
+++ b/src/config/const/article-list.ts
@@ -42,6 +42,8 @@ interface DefaultArticleList {
         article_spacing: number;
         content_spacing: number;
         article_height: number;
+        content_img_width: number;
+        content_img_height: number;
         interval_time: number; //滚动时间
         is_roll: number;
         common_style: object;
@@ -101,7 +103,9 @@ const defaultArticleList: DefaultArticleList = {
         },
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
-        article_height: 103, // 文章高度
+        article_height: 155, // 文章高度
+        content_img_width: 110,
+        content_img_height: 83,
         interval_time: 3, //滚动时间
         is_roll: 1, // 是否轮播
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index 925fc289..78d183fd 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -59,6 +59,8 @@ interface DefaultArticleTabs {
         article_spacing: number;
         content_spacing: number;
         article_height: number;
+        content_img_width: number;
+        content_img_height: number;
         interval_time: number; //滚动时间
         is_roll: number;
         common_style: object;
@@ -133,7 +135,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
         },
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
-        article_height: 103, // 文章高度
+        article_height: 155, // 文章高度
+        content_img_width: 110,
+        content_img_height: 83,
         interval_time: 3, //滚动时间
         is_roll: 1, // 是否轮播
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index e8e32d4a..8c632832 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -31,6 +31,8 @@ interface DefaultProductList {
         shop_radius: radiusStyle;
         content_outer_spacing: number;
         content_outer_height: number;
+        content_img_width: number;
+        content_img_height: number;
         is_roll: string,
         interval_time: number,
         content_spacing: number;
@@ -124,7 +126,9 @@ const defaultProductList: DefaultProductList = {
         // 商品内间距
         content_spacing: 10,
         // 商品高度
-        content_outer_height: 142,
+        content_outer_height: 232,
+        content_img_width: 110,
+        content_img_height: 120,
         // 是否滚动
         is_roll: '1',
         interval_time: 3,
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 906accbc..79f910a5 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -50,6 +50,8 @@ interface DefaultProductList {
         shop_radius: radiusStyle;
         content_outer_spacing: number;
         content_outer_height: number;
+        content_img_width: number;
+        content_img_height: number;
         is_roll: string;
         interval_time: number;
         content_spacing: number;
@@ -156,7 +158,10 @@ const defaultProductList: DefaultProductList = {
         // 商品内间距
         content_spacing: 10,
         // 商品高度
-        content_outer_height: 142,
+        content_outer_height: 232,
+        // 商品图片宽度和高度
+        content_img_width: 110,
+        content_img_height: 120,
         // 轮播处理
         is_roll: '1',
         interval_time: 3,