From ebb4ec7d937c2d1970f96690be4c7ee0c132ee1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 13 Dec 2024 19:10:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=86=85=E5=AE=B9=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue | 10 +----
 .../model-panel/model-panel-style.vue         | 10 +----
 .../common/subscript/subscript-styles.vue     | 10 +----
 .../model-article-list-styles.vue             | 10 +----
 .../model-article-tabs-content.vue            | 29 ++++++--------
 .../model-article-tabs-styles.vue             | 30 ++------------
 src/components/model-carousel/index.vue       | 10 +++--
 .../model-carousel/model-carousel-content.vue | 14 +++----
 .../model-carousel/model-carousel-styles.vue  | 10 +----
 .../model-custom/model-custom-styles.vue      | 10 +----
 .../magic-cube-settings/tabs-styles.vue       | 30 ++------------
 .../model-goods-list-styles.vue               | 10 +----
 .../model-goods-tabs-content.vue              | 40 ++++++-------------
 .../model-goods-tabs-styles.vue               | 30 ++------------
 .../model-notice/model-notice-styles.vue      | 10 +----
 .../model-search/model-search-styles.vue      | 10 +----
 .../model-seckill/model-seckill-styles.vue    | 20 +---------
 .../model-tabs/model-tabs-content.vue         | 13 +++++-
 .../model-tabs/model-tabs-styles.vue          | 10 +----
 src/components/page-settings/page-styles.vue  | 19 +--------
 src/config/const/carousel.ts                  |  4 ++
 src/config/const/tabs-carousel.ts             |  6 ++-
 src/views/layout/components/main/index.vue    |  8 ++++
 23 files changed, 88 insertions(+), 265 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index cb8e7164..ba04703c 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -5,15 +5,7 @@
             <el-form :model="form" label-width="70">
                 <div class="mb-12">通用</div>
                 <el-form-item label="底部背景">
-                    <div v-if="isMultBackground" class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="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.background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.background_img" :limit="1" @update:model-value="background_img_change"></upload>
-                    </div>
+                    <background-common v-if="isMultBackground" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
                     <div v-else>
                         <color-picker v-model="form.color_list[0].color"></color-picker>
                     </div>
diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index 7bcd246e..6b48f126 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -22,15 +22,7 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="背景颜色">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="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.background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.background_img" :limit="1"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
diff --git a/src/components/common/subscript/subscript-styles.vue b/src/components/common/subscript/subscript-styles.vue
index e55a32c7..dabb67a9 100644
--- a/src/components/common/subscript/subscript-styles.vue
+++ b/src/components/common/subscript/subscript-styles.vue
@@ -30,15 +30,7 @@
             </el-form-item>
         </template>
         <el-form-item label="背景">
-            <div class="flex-col gap-10 w">
-                <div class="size-12">背景色</div>
-                <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
-                <div class="flex-col gap-10 jc-sb">
-                    <div class="size-12">背景图</div>
-                    <bg-btn-style v-model="form.background_img_style"></bg-btn-style>
-                </div>
-                <upload v-model="form.background_img" :limit="1"></upload>
-            </div>
+            <background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
         </el-form-item>
         <el-form-item label="外间距">
             <margin :value="form"></margin>
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 c4171a9c..d3cc3a62 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -4,15 +4,7 @@
             <card-container>
                 <div class="mb-12">列表样式</div>
                 <el-form-item v-if="theme != '3'" label="文章背景">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.article_color_list" :type="form.article_direction" @update:value="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.article_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.article_background_img" :limit="1" @update:model-value="background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.article_color_list" v-model:direction="form.article_direction" v-model:img_style="form.article_background_img_style" v-model:img="form.article_background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="文章名称">
                     <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
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 7a083230..98cb026f 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -31,7 +31,7 @@
             <card-container>
                 <div class="mb-12">选项卡设置</div>
                 <div class="nav-list">
-                    <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
+                    <drag :data="tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col w">
                                 <el-form-item label="数据类型" class="w mb-10">
@@ -86,6 +86,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
 import { get_math, tabs_style } from '@/utils';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -138,16 +139,6 @@ const base_list = reactive({
         { name: '选择文章', value: '0' },
         { name: '筛选文章', value: '1' },
     ],
-    // article_category_list: [] as select_1[],
-    // sort_list: [
-    //     { name: '综合', value: '0' },
-    //     { name: '时间', value: '1' },
-    //     { name: '浏览量', value: '2' },
-    // ],
-    // order_by_rule_list: [
-    //     { name: '降序（desc）', value: '0' },
-    //     { name: '升序（asc）', value: '1' },
-    // ],
     field_show_list: [
         { name: '文章标题', value: '3' },
         { name: '日期时间', value: '0' },
@@ -157,12 +148,6 @@ const base_list = reactive({
 });
 const emits = defineEmits(['theme_change']);
 onMounted(() => {
-    // nextTick(() => {
-    //     // 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
-    //     if (common_store.common.article_category.length > 0) {
-    //         base_list.article_category_list = common_store.common.article_category;
-    //     }
-    // });
     // 如果历史数据没有操作，则修改默认值
     const { content_img_width = '', content_img_height = '' } = styles;
     // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
@@ -173,6 +158,16 @@ onMounted(() => {
         }
     }
 });
+
+const tabs_list = computed(() => {
+    return form.tabs_list.map((item: any) => ({
+        ...item,
+        tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
+        tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
+        tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
+    }));
+});
+
 // 监听tabs_theme_list的变化
 const article_theme_change = (val: any) => {
     if (val == '3' || val == '4') {
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 d7fd06f9..7fc6214b 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -44,15 +44,7 @@
                     <slider v-model="form.tabs_spacing" :max="100"></slider>
                 </el-form-item>
                 <el-form-item label="选项卡背景">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_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.tabs_bg_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.tabs_radius"></radius>
@@ -65,15 +57,7 @@
             <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.article_content_color_list" :type="form.article_content_direction" @update:value="article_content_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.article_content_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.article_content_background_img" :limit="1" @update:model-value="article_content_background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.article_content_color_list" v-model:direction="form.article_content_direction" v-model:img_style="form.article_content_background_img_style" v-model:img="form.article_content_background_img" @mult_color_picker_event="article_content_mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.article_content_radius"></radius>
@@ -92,15 +76,7 @@
             <card-container>
                 <div class="mb-12">文章样式</div>
                 <el-form-item v-if="theme != '3'" label="文章背景">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.article_color_list" :type="form.article_direction" @update:value="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.article_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.article_background_img" :limit="1" @update:model-value="background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.article_color_list" v-model:direction="form.article_direction" v-model:img_style="form.article_background_img_style" v-model:img="form.article_background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="文章名称">
                     <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.article_theme == '4' && data.name_float == '1' ? 60 : 40">
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index e0967348..77e0fb38 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -1,6 +1,7 @@
 <template>
-    <div :style="style_container + swiper_bg_style">
-        <div class="re" :style="style_img_container + swiper_bg_img_style">
+    <div class="re" :style="style_container + swiper_bg_style">
+        <div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
+        <div class="re" :style="style_img_container">
             <div ref="swiperSize" class="swiper-container w h oh">
                 <swiper
                     :key="carouselKey"
@@ -296,8 +297,9 @@ const swiper_bg_style = computed(() => {
             } catch (error) {
                 return '';
             }
+        } else {
+            return '';
         }
-        return '';
     }
     return '';
 });
@@ -307,7 +309,7 @@ const swiper_bg_img_style = computed(() => {
         return '';
     }
     if (!isEmpty(form.value.carousel_list[actived_index.value]?.style?.background_img)) {
-        return background_computer(form.value.carousel_list[actived_index.value].style);
+        return background_computer(form.value.carousel_list[actived_index.value].style) + `filter: blur(${form.value.carousel_list[actived_index.value]?.style?.background_img_blur || 0}px);`;
     }
     return '';
 });
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index 034eaff0..15342755 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/src/components/model-carousel/model-carousel-content.vue
@@ -57,14 +57,10 @@
                             </el-tab-pane>
                             <el-tab-pane label="样式设置" name="styles">
                                 <el-form-item label-width="0">
-                                    <div class="flex-col gap-10 w">
-                                        <div class="size-12">背景色</div>
-                                        <mult-color-picker :value="item.style.color_list" :type="item.style.direction" @update:value="(...value: [color_list[],  number]) => carousel_tabs_mult_color_picker_event(...value, index)"></mult-color-picker>
-                                        <div class="flex-row jc-sb align-c">
-                                            <div class="size-12">背景图</div>
-                                            <bg-btn-style v-model="item.style.background_img_style"></bg-btn-style>
-                                        </div>
-                                        <upload v-model="item.style.background_img" :limit="1" @update:model-value="carousel_tabs_background_img_change($event, index)"></upload>
+                                    <background-common v-model:color_list="item.style.color_list" v-model:direction="item.style.direction" v-model:img_style="item.style.background_img_style" v-model:img="item.style.background_img" :tooltip-content="'1.背景图的优先级比背景色的优先级高<br/>2.覆盖通用背景样式'" @mult_color_picker_event="(...value: [color_list[],  number]) => carousel_tabs_mult_color_picker_event(...value, index)" />
+                                    <div class="flex-col w gap-10">
+                                        <div class="size-12">背景图模糊</div>
+                                        <slider v-model="item.style.background_img_blur" :min="0" :max="100"></slider>
                                     </div>
                                 </el-form-item>
                             </el-tab-pane>
@@ -100,6 +96,7 @@ const carousel_list = computed(() => {
                 color_list: [{ color: '', color_percentage: undefined }],
                 background_img_style: '2',
                 background_img: [],
+                background_img_blur: 0,
             }
         }
     });
@@ -117,6 +114,7 @@ const add = () => {
             color_list: [{ color: '', color_percentage: undefined }],
             background_img_style: '2',
             background_img: [],
+            background_img_blur: 0,
         }
     });
 };
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index 1503df3d..aebb55d2 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -5,15 +5,7 @@
                 <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.carousel_content_color_list" :type="form.carousel_content_direction" @update:value="carousel_content_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.carousel_content_background_img_style"></bg-btn-style>
-                            </div>
-                            <upload v-model="form.carousel_content_background_img" :limit="1" @update:model-value="carousel_content_background_img_change"></upload>
-                        </div>
+                        <background-common v-model:color_list="form.carousel_content_color_list" v-model:direction="form.carousel_content_direction" v-model:img_style="form.carousel_content_background_img_style" v-model:img="form.carousel_content_background_img" @mult_color_picker_event="carousel_content_mult_color_picker_event" />
                     </el-form-item>
                     <el-form-item label="圆角">
                         <radius :value="form.carousel_content_radius"></radius>
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index 1d47c39c..3f1df080 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -28,15 +28,7 @@
             <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.data_style.color_list" :type="form.data_style.direction" @update:value="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.data_style.background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.data_style.background_img" :limit="1"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.data_style.color_list" v-model:direction="form.data_style.direction" v-model:img_style="form.data_style.background_img_style" v-model:img="form.data_style.background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="外间距">
                     <margin :value="form.data_style"></margin>
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
index e241d442..784634af 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
@@ -68,15 +68,7 @@
         <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 :key="form.carouselKey" :value="form.data_color_list" :type="form.data_direction" @update:value="data_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.data_background_img_style"></bg-btn-style>
-                    </div>
-                    <upload v-model="form.data_background_img" :limit="1"></upload>
-                </div>
+                <background-common :key="form.carouselKey" v-model:color_list="form.data_color_list" v-model:direction="form.data_direction" v-model:img_style="form.data_background_img_style" v-model:img="form.data_background_img" @mult_color_picker_event="data_mult_color_picker_event" />
             </el-form-item>
             <el-form-item v-if="tabs_content.data_type == 'custom'" label="外间距">
                 <margin :key="form.carouselKey" :value="form.data_chunk_margin" @update:value="data_chunk_margin_change"></margin>
@@ -143,15 +135,7 @@
                 </template>
             </template>
             <el-form-item label="背景">
-                <div class="flex-col gap-10 w">
-                    <div class="size-12">背景色</div>
-                    <mult-color-picker :key="form.carouselKey" :value="form.goods_color_list" :type="form.goods_direction" @update:value="goods_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.goods_background_img_style"></bg-btn-style>
-                    </div>
-                    <upload v-model="form.goods_background_img" :limit="1"></upload>
-                </div>
+                <background-common :key="form.carouselKey" v-model:color_list="form.goods_color_list" v-model:direction="form.goods_direction" v-model:img_style="form.goods_background_img_style" v-model:img="form.goods_background_img" @mult_color_picker_event="goods_mult_color_picker_event" />
             </el-form-item>
             <el-form-item label="内间距">
                 <padding :key="form.carouselKey" :value="form.goods_chunk_padding" @update:value="goods_chunk_padding_change"></padding>
@@ -165,15 +149,7 @@
     <card-container class="mb-8">
         <div class="mb-12">通用样式</div>
         <el-form-item label="底部背景">
-            <div class="flex-col gap-10 w">
-                <div class="size-12">背景色</div>
-                <mult-color-picker :key="form.carouselKey" :value="form.color_list" :type="form.direction" @update:value="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.background_img_style"></bg-btn-style>
-                </div>
-                <upload v-model="form.background_img" :limit="1"></upload>
-            </div>
+            <background-common :key="form.carouselKey" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
         </el-form-item>
         <el-form-item v-if="tabs_content.data_type != 'custom'" label="内间距">
             <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
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 2adb4b5b..3aa892ee 100644
--- a/src/components/model-goods-list/model-goods-list-styles.vue
+++ b/src/components/model-goods-list/model-goods-list-styles.vue
@@ -4,15 +4,7 @@
             <card-container>
                 <div class="mb-12">商品样式</div>
                 <el-form-item v-if="theme != '6'" 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="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="background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <template v-if="data.is_show.includes('title')">
                     <el-form-item label="商品名称">
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 38b398f2..f487825f 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -34,7 +34,7 @@
             <card-container>
                 <div class="mb-12">选项卡设置</div>
                 <div class="nav-list">
-                    <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
+                    <drag :data="tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col w">
                                 <el-form-item label="数据类型" class="w mb-10">
@@ -81,6 +81,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
 import { get_math, tabs_style } from '@/utils';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -131,36 +132,9 @@ const base_list = reactive({
         { name: '指定商品', value: '0' },
         { name: '筛选商品', value: '1' },
     ],
-    // product_category_list: [] as select_1[],
-    // product_brand_list: [] as select_1[],
-    // sort_list: [
-    //     { name: '综合', value: '0' },
-    //     { name: '销量', value: '1' },
-    //     { name: '热度', value: '2' },
-    //     { name: '价格', value: '3' },
-    //     { name: '最新', value: '4' },
-    // ],
-    // order_by_rule_list: [
-    //     { name: '降序（desc）', value: '0' },
-    //     { name: '升序（asc）', value: '1' },
-    // ],
-    // list_show_list: [
-    //     { name: '日期时间', value: '0' },
-    //     { name: '浏览量', value: '1' },
-    // ],
 });
 const emits = defineEmits(['theme_change']);
 onBeforeMount(() => {
-    // nextTick(() => {
-    //     // 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
-    //     const interval = setInterval(() => {
-    //         if (common_store.common.goods_category.length > 0 || common_store.common.brand_list.length > 0) {
-    //             base_list.product_category_list = common_store.common.goods_category;
-    //             base_list.product_brand_list = common_store.common.brand_list;
-    //             clearInterval(interval);
-    //         }
-    //     }, 1000);
-    // });
     // 如果历史数据没有操作，则修改默认值
     const { content_img_width = '', content_img_height = '' } = styles.value;
     // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
@@ -171,6 +145,16 @@ onBeforeMount(() => {
         }
     }
 });
+
+const tabs_list = computed(() => {
+    return form.value.tabs_list.map((item: any) => ({
+        ...item,
+        tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
+        tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
+        tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
+    }));
+});
+
 const tabs_list_click = (item: any, index: number) => {
     form.value.tabs_active_index = index;
 };
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 4765592c..d20e2866 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -54,15 +54,7 @@
                     <slider v-model="form.tabs_spacing" :max="100"></slider>
                 </el-form-item>
                 <el-form-item label="选项卡背景">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_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.tabs_bg_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.tabs_radius"></radius>
@@ -75,15 +67,7 @@
             <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_content_color_list" :type="form.shop_content_direction" @update:value="shop_content_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_content_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.shop_content_background_img" :limit="1" @update:model-value="shop_content_background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.shop_content_color_list" v-model:direction="form.shop_content_direction" v-model:img_style="form.shop_content_background_img_style" v-model:img="form.shop_content_background_img" @mult_color_picker_event="shop_content_mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.shop_content_radius"></radius>
@@ -102,15 +86,7 @@
             <card-container>
                 <div class="mb-12">商品样式</div>
                 <el-form-item v-if="theme != '6'" 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="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="background_img_change"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <template v-if="data.is_show.includes('title')">
                     <el-form-item label="商品名称">
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index 012f1e9f..98fb54fa 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -60,15 +60,7 @@
                     </el-form-item>
                 </template>
                 <el-form-item label="容器背景">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.container_color_list" :type="form.container_direction" @update:value="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.container_background_img_style"></bg-btn-style>
-                        </div>
-                        <upload v-model="form.container_background_img" :limit="1"></upload>
-                    </div>
+                    <background-common v-model:color_list="form.container_color_list" v-model:direction="form.container_direction" v-model:img_style="form.container_background_img_style" v-model:img="form.container_background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
                 <el-form-item label="容器圆角">
                     <radius :value="form.container_radius"></radius>
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 43513f01..72829a64 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -17,15 +17,7 @@
                         <color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
                     </el-form-item>
                     <el-form-item v-if="content.search_type != 'img'" label="背景设置">
-                        <div class="flex-col gap-10 w">
-                            <div class="size-12">背景色</div>
-                            <mult-color-picker :value="form.search_botton_color_list" :type="form.search_botton_direction" @update:value="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.search_botton_background_img_style"></bg-btn-style>
-                            </div>
-                            <upload v-model="form.search_botton_background_img" :limit="1"></upload>
-                        </div>
+                        <background-common v-model:color_list="form.search_botton_color_list" v-model:direction="form.search_botton_direction" v-model:img_style="form.search_botton_background_img_style" v-model:img="form.search_botton_background_img" @mult_color_picker_event="mult_color_picker_event" />
                     </el-form-item>
                     <el-form-item label="按钮圆角">
                         <radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index bc6527b9..13678ed7 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -20,15 +20,7 @@
                         <color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :default-color="clone_form.head_button_color" :type-list="['color', 'size']"></color-text-size-group>
                     </el-form-item>
                     <el-form-item label="头部背景">
-                        <div class="flex-col gap-10">
-                            <div class="size-12">背景色</div>
-                            <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="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.header_background_img_style"></bg-btn-style>
-                            </div>
-                            <upload v-model="form.header_background_img" :limit="1"></upload>
-                        </div>
+                        <background-common v-model:color_list="form.header_background_color_list" v-model:direction="form.header_background_direction" v-model:img_style="form.header_background_img_style" v-model:img="form.header_background_img" @mult_color_picker_event="mult_color_picker_event" />
                     </el-form-item>
                     <el-form-item label="圆角">
                         <radius :value="form.seckill_head_radius"></radius>
@@ -42,15 +34,7 @@
             <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>
+                    <background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="shop_mult_color_picker_event" />
                 </el-form-item>
                 <template v-if="data.is_show.includes('title')">
                     <el-form-item label="商品名称">
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index c615ae75..be03faf6 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -38,7 +38,7 @@
                             </div>
                         </el-form-item>
                     </div>
-                    <drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
+                    <drag :data="tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
                         <template #default="scoped">
                             <div class="flex-col align-c jc-s gap-20 flex-1 w">
                                 <el-form-item label="数据类型" class="w mb-0">
@@ -80,6 +80,7 @@
 </template>
 <script setup lang="ts">
 import { get_math, tabs_style } from '@/utils';
+import { isEmpty } from 'lodash';
 import { commonStore } from '@/store';
 const common_store = commonStore();
 
@@ -99,6 +100,16 @@ const state = reactive({
     styles: props.tabStyle,
 });
 const { form, styles } = toRefs(state);
+
+const tabs_list = computed(() => {
+    return form.value.tabs_list.map((item: any) => ({
+        ...item,
+        tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
+        tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
+        tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
+    }));
+});
+
 const add = () => {
     form.value.tabs_list.push({
         id: get_math(),
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index acd379aa..344d4862 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -45,15 +45,7 @@
                 </el-form-item>
                 <template v-if="!isCommon">
                     <el-form-item label="选项卡背景">
-                        <div class="flex-col gap-10 w">
-                            <div class="size-12">背景色</div>
-                            <mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_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.tabs_bg_background_img_style"></bg-btn-style>
-                            </div>
-                            <upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
-                        </div>
+                        <background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
                     </el-form-item>
                     <el-form-item label="圆角">
                         <radius :value="form.tabs_radius"></radius>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 8ed9485f..b9aa6fb0 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -52,14 +52,7 @@
                         <upload v-model="form.up_slide_logo" :limit="1"></upload>
                     </el-form-item>
                     <el-form-item label="上滑背景">
-                        <div class="w h flex-col gap-10">
-                            <mult-color-picker :value="form?.up_slide_background_color_list || []" :type="form?.up_slide_background_direction || '180deg'" @update:value="up_slide_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.up_slide_background_img_style"></bg-btn-style>
-                            </div>
-                            <upload v-model="form.up_slide_background_img" :limit="1"></upload>
-                        </div>
+                        <background-common v-model:color_list="form.up_slide_background_color_list" v-model:direction="form.up_slide_background_direction" v-model:img_style="form.up_slide_background_img_style" v-model:img="form.up_slide_background_img" @mult_color_picker_event="up_slide_mult_color_picker_event" />
                     </el-form-item>
                 </template>
                 <el-form-item label="返回颜色">
@@ -77,15 +70,7 @@
                 <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.location_color_list" :type="form.location_direction" @update:value="location_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.location_background_img_style"></bg-btn-style>
-                            </div>
-                            <upload v-model="form.location_background_img" :limit="1" @update:model-value="location_background_img_change"></upload>
-                        </div>
+                        <background-common v-model:color_list="form.location_color_list" v-model:direction="form.location_direction" v-model:img_style="form.location_background_img_style" v-model:img="form.location_background_img" @mult_color_picker_event="location_mult_color_picker_event" />
                     </el-form-item>
                     <el-form-item label="定位颜色">
                         <color-picker v-model="form.location_color" default-color="#333"></color-picker>
diff --git a/src/config/const/carousel.ts b/src/config/const/carousel.ts
index f5afd036..7e9cd837 100644
--- a/src/config/const/carousel.ts
+++ b/src/config/const/carousel.ts
@@ -11,6 +11,7 @@ interface carousel_list {
         color_list: color_list[];
         background_img_style: string;
         background_img: uploadList[];
+        background_img_blur: 0,
     }
 }
 interface defaultSearch {
@@ -73,6 +74,7 @@ const defaultSearch: defaultSearch = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
+                    background_img_blur: 0,
                 }
             },
             {
@@ -85,6 +87,7 @@ const defaultSearch: defaultSearch = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
+                    background_img_blur: 0,
                 }
             },
             {
@@ -97,6 +100,7 @@ const defaultSearch: defaultSearch = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
+                    background_img_blur: 0,
                 }
             }
         ]
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index b684dbb0..2282aeb6 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -23,6 +23,7 @@ interface carousel_list {
         color_list: color_list[];
         background_img_style: string;
         background_img: uploadList[];
+        background_img_blur: number;
     }
 }
 interface defaultTabs {
@@ -114,7 +115,7 @@ const defaultTabs: defaultTabs = {
         // 选项卡数据
         home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '',  title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
             { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
             { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         ],
@@ -137,6 +138,7 @@ const defaultTabs: defaultTabs = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
+                    background_img_blur: 0,
                 }
             },
             {
@@ -149,6 +151,7 @@ const defaultTabs: defaultTabs = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
+                    background_img_blur: 0,
                 }
             },
             {
@@ -161,6 +164,7 @@ const defaultTabs: defaultTabs = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
+                    background_img_blur: 0,
                 }
             },
         ],
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index a3c8b575..8976fee2 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -163,7 +163,15 @@ const set_padding_top_value = () => {
         tabs_data.value.forEach((item: any) => {
             item.com_data.style.common_style.padding_top_safe_value = common_store.header_height;
         });
+        // 处理另外一个数组的时候，将所有的padding_top_safe_value设置为0
+        diy_data.value.forEach((item: any) => {
+            item.com_data.style.common_style.padding_top_safe_value = 0;
+        });
     } else if (diy_data.value.length > 0) {
+        // 处理另外一个数组的时候，将所有的padding_top_safe_value设置为0
+        tabs_data.value.forEach((item: any) => {
+            item.com_data.style.common_style.padding_top_safe_value = 0;
+        });
         // 初始数据为0
         let padding_top_index = 0;
         // 如果前几个为悬浮按钮，则加一，找到不是悬浮按钮的第一个处理