From eb8cc0b4d78ca8c23c5332f355156f7d8c4b1a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 11 Nov 2024 10:53:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A7=92=E6=9D=80=E7=9A=84?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E8=83=8C=E6=99=AF=E5=92=8C=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=9B=BE=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-seckill/index.vue        | 275 +++++++++++-------
 .../model-seckill/model-seckill-content.vue   |  36 ++-
 .../model-seckill/model-seckill-setting.vue   |  15 +-
 .../model-seckill/model-seckill-styles.vue    |  42 ++-
 src/config/const/seckill.ts                   |  12 +
 5 files changed, 249 insertions(+), 131 deletions(-)

diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index 6b5ee927..82c8f6f6 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -38,62 +38,64 @@
                 </div>
                 <template v-if="form.shop_style_type != '3'">
                     <div class="flex flex-wrap" :style="`gap: ${content_outer_spacing}px;`">
-                        <div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${content_radius}; ${shop_style_type == '1' ? content_padding : ''}`">
-                            <template v-if="!isEmpty(item)">
-                                <div class="oh re" :class="`flex-img${shop_style_type}`">
-                                    <template v-if="!isEmpty(item.new_cover)">
-                                        <image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
-                                    </template>
-                                    <template v-else>
-                                        <image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
-                                    </template>
-                                    <div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
-                                        <span class="text-line-1">{{ form.subscript_text }}</span>
-                                    </div>
-                                </div>
-                            </template>
-                            <div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
-                                <div class="flex-col gap-10 w">
-                                    <!-- 标题 -->
-                                    <div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
-                                        <div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
-                                        <div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
-                                    </div>
-                                    <!-- 进度条 -->
-                                    <!-- <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
-                                        <div class="re flex-1">
-                                            <div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
-                                            <div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
-                                                <div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
-                                            </div>
-                                        </div>
-                                        <span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
-                                    </div> -->
-                                </div>
-                                <div class="flex-row align-e gap-10 jc-sb">
-                                    <div class="flex-col gap-5">
-                                        <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                            <span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
-                                            <span class="identifying">{{ item.show_price_symbol }}</span
-                                            ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                            <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
-                                        </div>
-                                        <div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
-                                            <span class="original-price text-line-1 flex-1"
-                                                >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
-                                                <template v-if="is_show('original_price_unit')">
-                                                    {{ item.show_original_price_unit }}
-                                                </template>
-                                            </span>
-                                        </div>
-                                    </div>
-                                    <div v-if="form.is_shop_show == '1'">
-                                        <template v-if="form.shop_type == 'text'">
-                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
+                        <div v-for="(item, index) in list" :key="index" :class="layout_type" :style="layout_style">
+                            <div :class="['oh w h', ['1'].includes(shop_style_type) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
+                                <template v-if="!isEmpty(item)">
+                                    <div class="oh re" :class="`flex-img${shop_style_type}`">
+                                        <template v-if="!isEmpty(item.new_cover)">
+                                            <image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
                                         </template>
                                         <template v-else>
-                                            <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                            <image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
                                         </template>
+                                        <div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
+                                            <span class="text-line-1">{{ form.subscript_text }}</span>
+                                        </div>
+                                    </div>
+                                </template>
+                                <div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
+                                    <div class="flex-col gap-10 w">
+                                        <!-- 标题 -->
+                                        <div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
+                                            <div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
+                                            <div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
+                                        </div>
+                                        <!-- 进度条 -->
+                                        <!-- <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
+                                            <div class="re flex-1">
+                                                <div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
+                                                <div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
+                                                    <div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
+                                                </div>
+                                            </div>
+                                            <span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
+                                        </div> -->
+                                    </div>
+                                    <div class="flex-row align-e gap-10 jc-sb">
+                                        <div class="flex-col gap-5">
+                                            <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                                <span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
+                                                <span class="identifying">{{ item.show_price_symbol }}</span
+                                                ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                                <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                            </div>
+                                            <div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
+                                                <span class="original-price text-line-1 flex-1"
+                                                    >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                                    <template v-if="is_show('original_price_unit')">
+                                                        {{ item.show_original_price_unit }}
+                                                    </template>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div v-if="form.is_shop_show == '1'">
+                                            <template v-if="form.shop_type == 'text'">
+                                                <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
+                                            </template>
+                                            <template v-else>
+                                                <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                            </template>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -102,62 +104,64 @@
                 </template>
                 <template v-else>
                     <swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="form.carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="content_outer_spacing" :pause-on-mouse-enter="true" :modules="modules">
-                        <swiper-slide v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${content_radius}; ${shop_style_type == '1' ? content_padding : ''}`">
-                            <template v-if="!isEmpty(item)">
-                                <div class="oh re w h">
-                                    <template v-if="!isEmpty(item.new_cover)">
-                                        <image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
-                                    </template>
-                                    <template v-else>
-                                        <image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
-                                    </template>
-                                    <div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
-                                        <span class="text-line-1">{{ form.subscript_text }}</span>
-                                    </div>
-                                </div>
-                            </template>
-                            <div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
-                                <div class="flex-col gap-10 w">
-                                    <!-- 标题 -->
-                                    <div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
-                                        <div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
-                                        <div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
-                                    </div>
-                                    <!-- 进度条 -->
-                                    <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
-                                        <div class="re flex-1">
-                                            <div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
-                                            <div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
-                                                <div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
-                                            </div>
-                                        </div>
-                                        <span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
-                                    </div>
-                                </div>
-                                <div class="flex-row align-e gap-10 jc-sb">
-                                    <div class="flex-col gap-5">
-                                        <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                            <span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
-                                            <span class="identifying">{{ item.show_price_symbol }}</span
-                                            ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                            <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
-                                        </div>
-                                        <div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
-                                            <span class="original-price text-line-1 flex-1"
-                                                >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
-                                                <template v-if="is_show('original_price_unit')">
-                                                    {{ item.show_original_price_unit }}
-                                                </template>
-                                            </span>
-                                        </div>
-                                    </div>
-                                    <div v-if="form.is_shop_show == '1'">
-                                        <template v-if="form.shop_type == 'text'">
-                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
+                        <swiper-slide v-for="(item, index) in list" :key="index" :class="layout_type" :style="layout_style">
+                            <div :class="['oh w h', ['1'].includes(shop_style_type) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
+                                <template v-if="!isEmpty(item)">
+                                    <div class="oh re w h">
+                                        <template v-if="!isEmpty(item.new_cover)">
+                                            <image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
                                         </template>
                                         <template v-else>
-                                            <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                            <image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
                                         </template>
+                                        <div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
+                                            <span class="text-line-1">{{ form.subscript_text }}</span>
+                                        </div>
+                                    </div>
+                                </template>
+                                <div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
+                                    <div class="flex-col gap-10 w">
+                                        <!-- 标题 -->
+                                        <div v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="`gap: ${ new_style.title_simple_desc_spacing }px;`">
+                                            <div v-if="is_show('title')" :style="trends_config('title', 'title')" class="text-line-2">{{ item.title }}</div>
+                                            <div v-if="is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc', 'desc')">{{ item.simple_desc }}</div>
+                                        </div>
+                                        <!-- 进度条 -->
+                                        <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
+                                            <div class="re flex-1">
+                                                <div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
+                                                <div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
+                                                    <div class="slide-top-icon round" :style="`background: ${new_style.progress_button_color}`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div>
+                                                </div>
+                                            </div>
+                                            <span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
+                                        </div>
+                                    </div>
+                                    <div class="flex-row align-e gap-10 jc-sb">
+                                        <div class="flex-col gap-5">
+                                            <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                                <span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
+                                                <span class="identifying">{{ item.show_price_symbol }}</span
+                                                ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                                <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                            </div>
+                                            <div v-if="is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
+                                                <span class="original-price text-line-1 flex-1"
+                                                    >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                                    <template v-if="is_show('original_price_unit')">
+                                                        {{ item.show_original_price_unit }}
+                                                    </template>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div v-if="form.is_shop_show == '1'">
+                                            <template v-if="form.shop_type == 'text'">
+                                                <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
+                                            </template>
+                                            <template v-else>
+                                                <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                            </template>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -392,19 +396,65 @@ const layout_type = computed(() => {
     let class_type = '';
     switch (shop_style_type.value) {
         case '1':
-            class_type = `flex-row bg-f oh multicolumn-columns`;
+            class_type = `oh multicolumn-columns`;
             break;
         case '2':
-            class_type = `flex-col bg-f oh multicolumn-columns`;
+            class_type = `multicolumn-columns`;
             break;
         case '3':
-            class_type = `flex-col bg-f oh roll-columns`;
+            class_type = `roll-columns`;
             break;
         default:
             break;
     }
     return class_type;
 });
+// 容器样式
+const layout_style = computed(() => {
+    const radius = content_radius.value;
+    const gradient = gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction);
+    return `${radius} ${ gradient }`;
+});
+// 容器图片样式
+const layout_img_style = computed(() => {
+    const padding = ['1'].includes(shop_style_type.value) ? content_padding.value : '';
+    const data = {
+        background_img_style: new_style.value.shop_background_img_style,
+        background_img: new_style.value.shop_background_img,
+    }
+    return padding + background_computer(data);
+});
+const shop_style_type_list= [
+    { name: '单列', value: '1', width: 110, height: 120 },
+    { name: '双列', value: '2', width: 180, height: 180 },
+    { name: '横向滑动', value: '3', 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 = shop_style_type_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 = shop_style_type_list.filter(item => item.value == form.value.theme);
+        if (list.length > 0) {
+            return list[0].height + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
 // 根据传递的参数，从对象中取值
 const trends_config = (key: string, type?: string) => {
     return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
@@ -525,13 +575,12 @@ const corner_marker = computed(() => {
     min-width: v-bind(multicolumn_columns_width) !important;
 }
 .flex-img1 {
-    min-height: 11rem;
-    max-height: 12rem;
-    width: 11rem;
+    width: v-bind(goods_img_width);
+    height: v-bind(goods_img_height);
 }
 .flex-img2 {
     width: 100%;
-    height: 18rem;
+    height: v-bind(goods_img_height);
 }
 .flex-img3 {
     background: #f4fcff;
diff --git a/src/components/model-seckill/model-seckill-content.vue b/src/components/model-seckill/model-seckill-content.vue
index c6748870..b6afc310 100644
--- a/src/components/model-seckill/model-seckill-content.vue
+++ b/src/components/model-seckill/model-seckill-content.vue
@@ -118,11 +118,21 @@ const props = defineProps({
 
 const form = ref(props.value);
 const data = ref(props.styles);
-
-watchEffect(() => {
-    form.value = props.value;
+onBeforeMount(() => {
+    init();
 });
-
+const init = () => {
+    // 如果历史数据没有操作，则修改默认值
+    const { content_img_width = '', content_img_height = '' } = data.value;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3'].includes(form.value.shop_style_type)) {
+        const list = base_list.shop_style_type_list.filter(item => item.value == form.value.shop_style_type);
+        if (list.length > 0) {
+            emit('shop_style_change', list[0].width, list[0].height);
+        }
+    }
+};
+const emit = defineEmits(['update:change-theme', 'shop_style_change']);
 const base_list = {
     themeList: [
         { id: '1', name: '风格1', url: common_store.common.config.attachment_host + `/static/diy/images/components/model-seckill/theme-1.png` },
@@ -131,9 +141,9 @@ const base_list = {
         { id: '4', name: '风格4', url: common_store.common.config.attachment_host + `/static/diy/images/components/model-seckill/theme-4.png` },
     ],
     shop_style_type_list: [
-        { name: '单列', value: '1' },
-        { name: '双列', value: '2' },
-        { name: '横向滑动', value: '3' },
+        { name: '单列', value: '1', width: 110, height: 120 },
+        { name: '双列', value: '2', width: 180, height: 180 },
+        { name: '横向滑动', value: '3', width: 0, height: 0 },
     ],
     list_show_list: [
         { name: '商品名称', value: 'title' },
@@ -179,11 +189,19 @@ const change_style = (val: any): void => {
             data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
         }
     }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.shop_style_type_list.filter(item => item.value == form.value.shop_style_type);
+    if (list.length > 0) {
+        emit('shop_style_change', list[0].width, list[0].height);
+    }
 };
-
-const emit = defineEmits(['update:change-theme']);
 const themeChange = (val: string) => {
     emit('update:change-theme', val);
 };
+
+watchEffect(() => {
+    form.value = props.value;
+    init();
+});
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/model-seckill/model-seckill-setting.vue b/src/components/model-seckill/model-seckill-setting.vue
index fc6609e9..0c59ad43 100644
--- a/src/components/model-seckill/model-seckill-setting.vue
+++ b/src/components/model-seckill/model-seckill-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-seckill-content :value="form.content" :styles="form.style" :default-config="data_config" @update:change-theme="change_theme"></model-seckill-content>
+            <model-seckill-content :value="form.content" :styles="form.style" :default-config="data_config" @update:change-theme="change_theme" @shop_style_change="shop_style_change"></model-seckill-content>
         </template>
         <template v-if="type == '2'">
             <model-seckill-styles :value="form.style" :content="form.content" :default-config="data_config"></model-seckill-styles>
@@ -56,6 +56,10 @@ onBeforeMount(async () => {
             header_background_direction: '180deg',
             header_background_img_style: '2',
             header_background_img: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
+            shop_direction: '90deg',
+            shop_color_list: [{ color: '#fff', color_percentage: undefined }],
+            shop_background_img_style: '0',
+            shop_background_img: [],
             shop_radius: {
                 radius: 8,
                 radius_top_left: 8,
@@ -81,7 +85,7 @@ onBeforeMount(async () => {
             content_spacing: 10,
             content_outer_height: 232,
             shop_title_typeface: '500',
-            shop_title_size: 14,    
+            shop_title_size: 14,  
             shop_title_color: "#333333",
             shop_price_typeface: '500',
             shop_price_size: 18,
@@ -178,10 +182,17 @@ const form = ref(props.value);
 // 切换风格的时候会将对应风格的默认数据合并到form中
 const change_theme = (val: string) => {
     if (val) {
+        // 将默认数据样式合并到form中
         form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data.style), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
+        // 将默认数据样式合并到form中
         form.value.content = Object.assign({}, form.value.content, cloneDeep(default_data.content), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
     }
 };
+
+const shop_style_change = (width: number, height: number) => {
+    form.value.style.content_img_width = width;
+    form.value.style.content_img_height = height;
+};
 </script>
 <style lang="scss" scoped>
 </style>
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index 5a9f05f1..b8560077 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -38,6 +38,17 @@
             </template>
             <card-container>
                 <div class="mb-12">商品样式</div>
+                <el-form-item label="商品背景">
+                    <div class="flex-col gap-10 w">
+                        <div class="size-12">背景色</div>
+                        <mult-color-picker :value="form.shop_color_list" :type="form.shop_direction" @update:value="shop_mult_color_picker_event"></mult-color-picker>
+                        <div class="flex-row jc-sb align-c">
+                            <div class="size-12">背景图</div>
+                            <bg-btn-style v-model="form.shop_background_img_style"></bg-btn-style>
+                        </div>
+                        <upload v-model="form.shop_background_img" :limit="1" @update:model-value="shop_background_img_change"></upload>
+                    </div>
+                </el-form-item>
                 <el-form-item label="商品名称">
                     <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
@@ -70,9 +81,11 @@
                 <el-form-item label="内容圆角">
                     <radius :value="form.shop_radius"></radius>
                 </el-form-item>
-                <el-form-item label="图片圆角">
-                    <radius :value="form.shop_img_radius"></radius>
-                </el-form-item>
+                <template v-if="data.shop_style_type == '3'">
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.content_outer_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
                 <el-form-item label="内间距">
                     <padding :value="form.shop_padding"></padding>
                 </el-form-item>
@@ -82,9 +95,15 @@
                 <el-form-item label="商品间距">
                     <slider v-model="form.content_outer_spacing" :max="100"></slider>
                 </el-form-item>
-                <template v-if="data.shop_style_type == '3'">
-                    <el-form-item label="内容高度">
-                        <slider v-model="form.content_outer_height" :max="1000"></slider>
+                <el-form-item label="图片圆角">
+                    <radius :value="form.shop_img_radius"></radius>
+                </el-form-item>
+                <template v-if="data.shop_style_type !== '3'">
+                    <el-form-item v-if="data.shop_style_type == '1'" 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>
             </card-container>
@@ -173,7 +192,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
-
+console.log(form);
 let clone_form = cloneDeep(props.value);
 
 const base_list = {
@@ -202,6 +221,15 @@ const countdown_color_picker_event = (arry: color_list[], type: number) => {
     form.value.countdown_bg_color_list = arry;
     form.value.countdown_direction = type.toString();
 };
+// 商品背景渐变设置
+const shop_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.shop_color_list = arry;
+    form.value.shop_direction = type.toString();
+};
+// 商品背景图片设置
+const shop_background_img_change = (arry: uploadList[]) => {
+    form.value.shop_background_img = arry;
+};
 // 进度条选中的设置
 const progress_color_picker_event = (arry: color_list[], type: number) => {
     form.value.progress_actived_color_list = arry;
diff --git a/src/config/const/seckill.ts b/src/config/const/seckill.ts
index 3004910d..27b85b0d 100644
--- a/src/config/const/seckill.ts
+++ b/src/config/const/seckill.ts
@@ -36,12 +36,18 @@ interface DefaultSeckill {
         header_background_img_style: string;
         header_background_img: uploadList[];
         seckill_head_padding: paddingStyle;
+        shop_direction: string,
+        shop_color_list: color_list[],
+        shop_background_img_style: string,
+        shop_background_img: uploadList[],
         shop_radius: radiusStyle;
         shop_img_radius: radiusStyle;
         shop_padding: paddingStyle;
         content_outer_spacing: number;
         content_spacing: number;
         content_outer_height: number;
+        content_img_width: number | undefined;
+        content_img_height: number | undefined;
         shop_title_color: string;
         shop_title_typeface: string;
         shop_title_size: number;
@@ -127,6 +133,10 @@ const defaultSeckill: DefaultSeckill = {
             padding_left: 13,
             padding_right: 13,
         },
+        shop_direction: '90deg',
+        shop_color_list: [{ color: '#fff', color_percentage: undefined }],
+        shop_background_img_style: '0',
+        shop_background_img: [],
         // 商品内容圆角
         shop_radius: {
             radius: 8,
@@ -156,6 +166,8 @@ const defaultSeckill: DefaultSeckill = {
         content_spacing: 10,
         // 商品高度
         content_outer_height: 232,
+        content_img_width: undefined,
+        content_img_height: undefined,
         shop_title_typeface: '500',
         shop_title_size: 14,
         shop_title_color: '#333333',