From acbed6c8139688c79757bb4e5c2b8d74186000fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 12 Dec 2024 17:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BD=AE=E6=92=AD=E5=92=8C?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E6=96=B0=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/filter-form/index.vue   |   2 +-
 src/components/common/tabs-view/index.vue     |  16 ++-
 src/components/model-carousel/index.vue       |  47 +++++--
 .../model-carousel/model-carousel-content.vue | 115 ++++++++++++++----
 .../components/custom-dialog/index.vue        |   2 +-
 .../model-custom/model-custom-content.vue     |   2 +-
 .../model-goods-tabs-styles.vue               |  10 ++
 src/components/model-tabs-carousel/index.vue  |  38 +++++-
 .../model-tabs/model-tabs-content.vue         |  13 +-
 src/components/page-settings/page-styles.vue  |  14 +--
 src/config/const/carousel.ts                  |  30 ++++-
 src/config/const/goods-tabs.ts                |  10 ++
 src/config/const/tabs-carousel.ts             |  26 +++-
 src/config/const/tabs.ts                      |   2 +-
 src/utils/index.ts                            |   6 +-
 src/views/layout/components/main/index.vue    |  28 +++--
 16 files changed, 287 insertions(+), 74 deletions(-)

diff --git a/src/components/common/filter-form/index.vue b/src/components/common/filter-form/index.vue
index 8e71dbca..073c4fc9 100644
--- a/src/components/common/filter-form/index.vue
+++ b/src/components/common/filter-form/index.vue
@@ -100,7 +100,7 @@ onBeforeMount(() => {
             // 获取到默认值
             const old_defalut = new_dataInterface.value[item.form_name];
             // 默认值不为空的时候，进行处理查看当前数据是否存在默认值数据
-            if (old_defalut !== '' && old_defalut !== undefined && ['select', 'radio', 'checkout'].includes(item.type)) {
+            if (old_defalut !== '' && old_defalut != null && ['select', 'radio', 'checkout'].includes(item.type)) {
                 if (item.type == 'select' && +item?.config?.is_level == 1) { // 如果是级联的效果
                     const result = contains_value(options_list, item, [], item?.config?.children || '');
                     new_dataInterface.value[item.form_name] = result;
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 030fd902..e02da25d 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -4,10 +4,10 @@
             <template v-for="(item, index) in form.tabs_list" :key="index">
                 <div class="item nowrap flex-col jc-c" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="`row-gap: ${new_style.tabs_sign_spacing}px;`">
                     <template v-if="!isEmpty(item.img)">
-                        <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                        <image-empty v-model="item.img[0]" class="img" :style="top_img_style('data')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
                     </template>
                     <template v-else>
-                        <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                        <image-empty class="img" :style="top_img_style('noData')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
                     </template>
                     <template v-if="item.tabs_type == '1'">
                         <template v-if="!isEmpty(item.tabs_icon)">
@@ -131,6 +131,12 @@ const img_style = () => {
     return style;
 };
 
+const top_img_style = (type: string) => {
+    const tabs_top_img_height = new_style.value?.tabs_top_img_height || 39;
+    const tabs_top_img_radius = new_style.value?.tabs_top_img_radius || { radius: 100, radius_top_left: 100, radius_top_right: 100, radius_bottom_left: 100, radius_bottom_right: 100}
+    return `height: ${tabs_top_img_height}px; width: ${ type == 'noData' ? tabs_top_img_height + 'px;' : '100%;' }` + radius_computer(tabs_top_img_radius);
+};
+
 const padding_bottom = computed(() => {
     let bottom = 0;
     if (form.value.tabs_theme == '0') {
@@ -195,9 +201,9 @@ const icon_tabs_check = () => {
             display: none;
         }
         .img {
-            width: 3.9rem;
-            height: 3.9rem;
-            border-radius: 100%;
+            // width: 3.9rem;
+            // height: 3.9rem;
+            // border-radius: 100%;
             border: 0.1rem solid transparent;
             display: none;
         }
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 75f31d63..b4055af4 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :style="style_container">
-        <div class="re" :style="style_img_container">
+    <div :style="style_container + swiper_bg_style">
+        <div class="re" :style="style_img_container + swiper_bg_img_style">
             <div ref="swiperSize" class="swiper-container w h oh">
                 <swiper
                     :key="carouselKey"
@@ -73,7 +73,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer, common_img_computer } from '@/utils';
+import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer, common_img_computer, background_computer } from '@/utils';
 import { isEmpty, cloneDeep, throttle } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay, EffectCoverflow } from 'swiper/modules';
@@ -153,7 +153,7 @@ const indicator_location_style = computed(() => {
 });
 //#endregion
 const seat_list = computed(() => {
-    if (form.value.carousel_list.length > 3) {
+    if (form.value.carousel_list.length > 3 || form.value.carousel_type !== 'card') {
         return [];
     } else {
         let seat_list = [];
@@ -282,19 +282,50 @@ watch(() => new_style.value.common_style, () => {
     })
 }, {deep: true});
 
+const swiper_bg_style = computed(() => {
+    if (!props.isCommon) {
+        return '';
+    }
+    const style = form.value?.carousel_list?.[actived_index.value]?.style;
+    if (style && !isEmpty(style.color_list)) {
+        const color_list = style.color_list;
+        const list = color_list.filter((item: { color: string }) => !isEmpty(item.color));
+        if (list.length > 0) {
+            try {
+                return gradient_computer(style);
+            } catch (error) {
+                return '';
+            }
+        }
+        return '';
+    }
+    return '';
+});
+
+const swiper_bg_img_style = computed(() => {
+    if (!props.isCommon) {
+        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 '';
+});
+const emit = defineEmits(['slideChange']);
 const slideChange = (swiper: { realIndex: number }) => {
-    if (swiper.realIndex > form.value.carousel_list.length - 1) {
+    if (swiper.realIndex > form.value.carousel_list.length - 1 && form.value.carousel_type == 'card') {
         const seat_length = seat_list.value.length;
         if (seat_length == 2 && swiper.realIndex == 3) {
             actived_index.value = 1;
-        } else if (seat_length == 3) {
-            actived_index.value = 0;
         } else {
-            actived_index.value = swiper.realIndex - seat_list.value.length;
+            actived_index.value = 0;
         }
     } else {
         actived_index.value = swiper.realIndex;
     }
+    if (!props.isCommon) {
+        emit('slideChange', actived_index.value);
+    }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index 9f21a097..034eaff0 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/src/components/model-carousel/model-carousel-content.vue
@@ -31,27 +31,44 @@
             <div class="divider-line"></div>
             <card-container>
                 <div class="mb-12">内容设置</div>
-                <div class="tips mt-10 mb-20 size-12">最多添加{{ form.carousel_list.length }}张图片，建议尺寸750*300px</div>
+                <div class="tips mt-10 mb-20 size-12">最多添加{{ carousel_list.length }}张图片，建议尺寸750*300px</div>
                 <div class="flex-col gap-20">
-                    <div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re">
-                        <div class="flex-col align-c jc-c gap-20 w">
-                            <div class="upload_style">
-                                <upload v-model="item.carousel_img" :limit="1" size="100%">
-                                    <span class="upload-text">上传图片</span>
-                                </upload>
-                            </div>
-                            <el-form-item label="图片链接" class="w">
-                                <url-value v-model="item.carousel_link"></url-value>
-                            </el-form-item>
-                            <div class="upload_style">
-                                <upload v-model="item.carousel_video" :limit="1" type="video" size="100%">
-                                    <span class="upload-text">上传视频</span>
-                                </upload>
-                            </div>
-                            <el-form-item v-if="item.carousel_video.length > 0" label="按钮名称" class="w">
-                                <el-input v-model="item.video_title" placeholder="请输入视频按钮名称" clearable></el-input>
-                            </el-form-item>
-                        </div>
+                    <div v-for="(item, index) in carousel_list" :key="index" class="card-background box-shadow-sm re">
+                        <el-tabs v-model="item.tabs_name" class="content-tabs">
+                            <el-tab-pane label="内容设置" name="content">
+                                <div class="flex-col align-c jc-c gap-20 w">
+                                    <div class="upload_style">
+                                        <upload v-model="item.carousel_img" :limit="1" size="100%">
+                                            <span class="upload-text">上传图片</span>
+                                        </upload>
+                                    </div>
+                                    <el-form-item label="图片链接" class="w">
+                                        <url-value v-model="item.carousel_link"></url-value>
+                                    </el-form-item>
+                                    <div class="upload_style">
+                                        <upload v-model="item.carousel_video" :limit="1" type="video" size="100%">
+                                            <span class="upload-text">上传视频</span>
+                                        </upload>
+                                    </div>
+                                    <el-form-item v-if="item.carousel_video.length > 0" label="按钮名称" class="w">
+                                        <el-input v-model="item.video_title" placeholder="请输入视频按钮名称" clearable></el-input>
+                                    </el-form-item>
+                                </div>
+                            </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>
+                                    </div>
+                                </el-form-item>
+                            </el-tab-pane>
+                        </el-tabs>
                         <el-icon class="iconfont icon-close-fillup size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
                     </div>
                 </div>
@@ -61,6 +78,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from "lodash";
 const props = defineProps({
     value: {
         type: Object,
@@ -72,24 +90,56 @@ const state = reactive({
     form: props.value,
 });
 const { form } = toRefs(state);
+
+const carousel_list = computed(() => {
+    form.value.carousel_list.forEach((item: any) => {
+        item.tabs_name = "content";
+        if (isEmpty(item.style)) {
+            item.style = {
+                direction: '90deg',
+                color_list: [{ color: '', color_percentage: undefined }],
+                background_img_style: '2',
+                background_img: [],
+            }
+        }
+    });
+    return form.value.carousel_list;
+});
+
 const add = () => {
     form.value.carousel_list.push({
         carousel_img: [],
         carousel_video: [],
         carousel_link: {},
-        video_title: "视频名称"
+        video_title: "视频名称",
+        style: {
+            direction: '90deg',
+            color_list: [{ color: '', color_percentage: undefined }],
+            background_img_style: '2',
+            background_img: [],
+        }
     });
 };
 const remove = (index: number) => {
     form.value.carousel_list.splice(index, 1);
 };
+
+// 内容区域背景渐变设置
+const carousel_tabs_mult_color_picker_event = (arry: color_list[], type: number, index: number) => {
+    form.value.carousel_list[index].style.color_list = arry;
+    form.value.carousel_list[index].style.direction = type.toString();
+};
+// 内容区域背景图片设置
+const carousel_tabs_background_img_change = (arry: uploadList[], index: number) => {
+    form.value.carousel_list[index].style.background_img = arry;
+};
 </script>
 <style lang="scss" scoped>
 .card-background {
     background: #fff;
     padding-left: 1.6rem;
     padding-right: 2rem;
-    padding-top: 4.6rem;
+    // padding-top: 4.6rem;
     padding-bottom: 1.6rem;
     :deep(.el-form-item) {
         margin-bottom: 0;
@@ -108,4 +158,25 @@ const remove = (index: number) => {
     text-align: left;
     font-style: normal;
 }
+
+:deep(.el-tabs.content-tabs) {
+    .el-tabs__header.is-top {
+        background: #fff;
+        margin: 0;
+        padding-top: 2rem;
+        padding-bottom: 1rem;
+    }
+    .el-tabs__item.is-top {
+        padding: 0;
+        align-items: center;
+        width: 10rem;
+        font-size: 1.4rem;
+    }
+    .el-tabs__content {
+        overflow: visible;
+    }
+    .el-tabs__active-bar{
+        width: 100%;
+    }
+}
 </style>
diff --git a/src/components/model-custom/components/custom-dialog/index.vue b/src/components/model-custom/components/custom-dialog/index.vue
index 29ff7763..c816bf93 100644
--- a/src/components/model-custom/components/custom-dialog/index.vue
+++ b/src/components/model-custom/components/custom-dialog/index.vue
@@ -86,7 +86,7 @@ const init_data = () => {
         // 获取所有的选中数据的长度
         const all_length = select_data.value.length;
         // 将没有data_key的值取出来
-        const list = select_data.value.filter((item: any) => item[props.dataListKey] == undefined );
+        const list = select_data.value.filter((item: any) => item[props.dataListKey] == null );
         if (list.length == 0) {
            return true;
         } else {
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 70a4bc0b..a8f4db42 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -290,7 +290,7 @@ const filter_data_handling = (type: string = 'old') => {
         }
         // 历史数据的话，需要判断一下，如果历史数据没有，那么就使用默认数据
         if (type == 'old') {
-            staging_data[item.form_name] = form.value.data_source_content[item.form_name] == undefined ? value : form.value.data_source_content[item.form_name];
+            staging_data[item.form_name] = form.value.data_source_content[item.form_name] == null ? value : form.value.data_source_content[item.form_name];
         } else {
             staging_data[item.form_name] = value;
         }
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 74f39173..4765592c 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -22,6 +22,16 @@
                 <el-form-item label="未选图标">
                     <color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
                 </el-form-item>
+                <el-form-item v-if="['4'].includes(data.tabs_theme)" label="标题上图">
+                    <div class="flex-col gap-10 w">
+                        <el-form-item label="圆角" label-width="40">
+                            <radius :value="form.tabs_top_img_radius"></radius>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="40">
+                            <slider v-model="form.tabs_top_img_height" :max="200"></slider>
+                        </el-form-item>
+                    </div>
+                </el-form-item>
                 <el-form-item label="图片设置">
                     <div class="flex-col gap-10 w">
                         <template v-if="['2', '4'].includes(data.tabs_theme)">
diff --git a/src/components/model-tabs-carousel/index.vue b/src/components/model-tabs-carousel/index.vue
index 01c63a58..11672b9c 100644
--- a/src/components/model-tabs-carousel/index.vue
+++ b/src/components/model-tabs-carousel/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :style="style_container">
-        <div class="flex-col oh" :style="style_img_container">
+    <div :style="style_container + swiper_bg_style">
+        <div class="flex-col oh" :style="style_img_container + swiper_bg_img_style">
             <div class="oh" :style="tabs_container">
                 <div class="oh" :style="tabs_img_container">
                     <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
@@ -8,7 +8,7 @@
             </div>
             <div class="oh" :style="carousel_container">
                 <div class="oh" :style="carousel_img_container">
-                    <model-carousel :value="value" :is-common="false"></model-carousel>
+                    <model-carousel :value="value" :is-common="false" @slide-change="slideChange"></model-carousel>
                 </div>
             </div>
         </div>
@@ -16,7 +16,7 @@
 </template>
 <script setup lang="ts">
 import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer } from '@/utils';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -67,5 +67,35 @@ watch(
 
 const style_container = computed(() => `${common_styles_computer(props.value.style.common_style)};`);
 const style_img_container = computed(() => `${common_img_computer(props.value.style.common_style)};gap:${props.value.style.data_spacing}px`);
+
+const form = computed(() => props.value.content);
+const actived_index = ref(0);
+const slideChange = (index: number) => {
+    actived_index.value = index;
+};
+
+const swiper_bg_style = computed(() => {
+    const style = form.value?.carousel_list?.[actived_index.value]?.style;
+    if (style && !isEmpty(style.color_list)) {
+        const color_list = style.color_list;
+        const list = color_list.filter((item: { color: string }) => !isEmpty(item.color));
+        if (list.length > 0) {
+            try {
+                return gradient_computer(style);
+            } catch (error) {
+                return '';
+            }
+        }
+        return '';
+    }
+    return '';
+});
+
+const swiper_bg_img_style = computed(() => {
+    if (!isEmpty(form.value?.carousel_list[actived_index.value]?.style?.background_img)) {
+        return background_computer(form.value.carousel_list[actived_index.value].style);
+    }
+    return '';
+});
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index 6739812d..0f3e1ace 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -11,8 +11,8 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="滑动置顶">
-                    <el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0"></el-switch>
-                    <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="滑动置顶仅手机端有效" raw-content placement="top">
+                    <el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
+                    <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
                         <icon name="miaosha-hdgz" size="12" color="#999"></icon>
                     </el-tooltip>
                 </el-form-item>
@@ -80,6 +80,8 @@
 </template>
 <script setup lang="ts">
 import { get_math, tabs_style } from '@/utils';
+import { commonStore } from '@/store';
+const common_store = commonStore();
 
 const props = defineProps({
     value: {
@@ -123,6 +125,13 @@ const on_sort = (new_list: nav_group[]) => {
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
+// 选项卡是否可以滑动置顶
+const is_immersion_model = computed(() => common_store.is_immersion_model);
+watchEffect(() => {
+    if (is_immersion_model.value) {
+        form.value.tabs_top_up = '0';
+    }
+});
 </script>
 <style lang="scss" scoped>
 .cursor-move {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index a5a23021..8ed9485f 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -30,7 +30,7 @@
                 </el-form-item>
                 <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
                     <div class="flex-row align-c gap-10">
-                        <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
+                        <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" @change="change_immersive_style"></el-switch>
                         <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
                             <icon name="miaosha-hdgz" size="12" color="#999"></icon>
                         </el-tooltip>
@@ -185,10 +185,6 @@ const props = defineProps({
         default: () => {},
     },
 });
-const is_have_tabs = computed(() => {
-    return common_store.is_have_tabs;
-});
-
 const emit = defineEmits(['update:value']);
 const state = reactive({
     form: props.value,
@@ -210,10 +206,10 @@ const header_background_type_change_event = (val: any) => {
         common_store.set_is_immersion_model(false);
     } else {
         // 没有tabs的情况下，默认开启沉浸模式
-        if (!common_store.is_have_tabs) {
-            form.value.immersive_style = '1';
-            common_store.set_is_immersion_model(true);
-        }
+        // if (!common_store.is_have_tabs) {
+        form.value.immersive_style = '1';
+        common_store.set_is_immersion_model(true);
+        // }
     }
 };
 
diff --git a/src/config/const/carousel.ts b/src/config/const/carousel.ts
index 2dfae500..f5afd036 100644
--- a/src/config/const/carousel.ts
+++ b/src/config/const/carousel.ts
@@ -6,6 +6,12 @@ interface carousel_list {
     carousel_video: uploadList[];
     carousel_link: object;
     video_title: string;
+    style: {
+        direction: string;
+        color_list: color_list[];
+        background_img_style: string;
+        background_img: uploadList[];
+    }
 }
 interface defaultSearch {
     content: {
@@ -61,19 +67,37 @@ const defaultSearch: defaultSearch = {
                 carousel_img: [],
                 carousel_video: [],
                 carousel_link: {},
-                video_title: '视频名称'
+                video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                }
             },
             {
                 carousel_img: [],
                 carousel_video: [],
                 carousel_link: {},
-                video_title: '视频名称'
+                video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                }
             },
             {
                 carousel_img: [],
                 carousel_video: [],
                 carousel_link: {},
-                video_title: '视频名称'
+                video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                }
             }
         ]
     },
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 0d6cb9c9..bc58ef85 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -59,6 +59,8 @@ interface DefaultProductList {
         tabs_icon_color: string,
         tabs_icon_size: number,
         is_tabs_img_background: string,
+        tabs_top_img_radius: radiusStyle;
+        tabs_top_img_height: number;
         tabs_img_radius: radiusStyle,
         tabs_img_height: number,
         tabs_spacing: number;
@@ -181,6 +183,14 @@ const defaultProductList: DefaultProductList = {
         tabs_icon_size_checked: 14,
         tabs_icon_color: 'rgba(51,51,51,1)',
         tabs_icon_size: 14,
+        tabs_top_img_radius: {
+            radius: 100,
+            radius_top_left: 100,
+            radius_top_right: 100,
+            radius_bottom_left: 100,
+            radius_bottom_right: 100,
+        },
+        tabs_top_img_height: 39,
         is_tabs_img_background: '0',
         tabs_img_radius: {
             radius: 0,
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index abace3e2..b684dbb0 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -18,6 +18,12 @@ interface carousel_list {
     carousel_video: uploadList[];
     carousel_link: object;
     video_title: string;
+    style: {
+        direction: string;
+        color_list: color_list[];
+        background_img_style: string;
+        background_img: uploadList[];
+    }
 }
 interface defaultTabs {
     content: {
@@ -104,7 +110,7 @@ const defaultTabs: defaultTabs = {
         // 选项卡风格
         tabs_theme: '0',
         // 是否置顶
-        tabs_top_up: '1',
+        tabs_top_up: '0',
         // 选项卡数据
         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: [
@@ -126,18 +132,36 @@ const defaultTabs: defaultTabs = {
                 carousel_video: [],
                 carousel_link: {},
                 video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                }
             },
             {
                 carousel_img: [],
                 carousel_video: [],
                 carousel_link: {},
                 video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                }
             },
             {
                 carousel_img: [],
                 carousel_video: [],
                 carousel_link: {},
                 video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                }
             },
         ],
         // 轮播高度
diff --git a/src/config/const/tabs.ts b/src/config/const/tabs.ts
index efeec766..273d629b 100644
--- a/src/config/const/tabs.ts
+++ b/src/config/const/tabs.ts
@@ -49,7 +49,7 @@ interface defaultTabs {
 const defaultTabs: defaultTabs = {
     content: {
         tabs_theme: '0',
-        tabs_top_up: '1',
+        tabs_top_up: '0',
         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: {} },
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6d322220..3ab02585 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -388,11 +388,11 @@ export const percentage_count = (num: number, container_size: number) => {
  * @returns boolean true表示相等，false表示不相等
  */
 export const areAllEqual = (a: number, b: number, c: number, d: number) => {
-    if (a === null || a === undefined || b === null || b === undefined || c === null || c === undefined || d === null || d === undefined) {
-      return false;
+    if (a == null || b == null || c == null || d == null) {
+        return false;
     }
     return a === b && b === c && c === d;
-  }
+}
 
 /**
  * 计算当前偏移量
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 08bef743..248fc3f0 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -159,7 +159,11 @@ const outer_container_padding = ref(0);
 const bottom_navigation_show = ref(true);
 // 更新数据第一个的安全距离
 const set_padding_top_value = () => {
-    if (diy_data.value.length > 0) {
+    if (tabs_data.value.length > 0) {
+        tabs_data.value.forEach((item: any) => {
+            item.com_data.style.common_style.padding_top_safe_value = common_store.header_height;
+        });
+    } else if (diy_data.value.length > 0) {
         // 初始数据为0
         let padding_top_index = 0;
         // 如果前几个为悬浮按钮，则加一，找到不是悬浮按钮的第一个处理
@@ -263,12 +267,10 @@ const show_model_border = ref(true);
 const draggable_click = (item: componentsData) => {
     const type_data = ['tabs', 'tabs-carousel'];
     if (type_data.includes(item.key)) {
-        
-        if (common_store.is_immersion_model) {
-            ElMessage.error('开启沉浸样式下不可以添加该组件');
-            return;
-        }
-
+        // if (common_store.is_immersion_model) {
+        //     ElMessage.error('开启沉浸样式下不可以添加该组件');
+        //     return;
+        // }
         if (isEmpty(tabs_data.value)) {
             // 添加tabs组件
             tabs_data.value.push({
@@ -281,7 +283,7 @@ const draggable_click = (item: componentsData) => {
                 key: item.key,
                 com_data: cloneDeep((defaultSettings as any)[item.key.replace(/-/g, '_')]),
             });
-            common_store.set_is_have_tabs(true);
+            // common_store.set_is_have_tabs(true);
             set_tabs_event(true);
         } else if (!isEmpty(tabs_data.value)) {
             if (tabs_data.value[0].key == item.key) {
@@ -292,11 +294,11 @@ const draggable_click = (item: componentsData) => {
         }
     }
 };
-watchEffect(() => {
-    if (tabs_data.value.length <= 0) {
-        common_store.set_is_have_tabs(false);
-    }
-});
+// watchEffect(() => {
+//     if (tabs_data.value.length <= 0) {
+//         common_store.set_is_have_tabs(false);
+//     }
+// });
 
 // 复制
 const clone_item_com_data = (item: commonComponentData) => {