From 20ee7e7fb191fea891b5a67cdd8f10e1459d08a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 5 Aug 2025 15:30:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/drag/index.vue            |   6 +-
 .../tabs-magic-config/tabs-magic-styles.vue   |  76 ++++----
 .../model-carousel/model-carousel-styles.vue  |   6 +-
 .../model-custom/model-custom-styles.vue      |  46 ++---
 .../model-img-magic-content.vue               |   8 +-
 src/components/model-tabs-magic/index.vue     | 119 ++++++------
 .../model-tabs-magic-content.vue              |  31 ++--
 .../model-tabs-magic-styles.vue               |  28 +--
 src/config/const/tabs-magic.ts                | 169 +++++++++++-------
 src/styles/index.scss                         |   5 +
 10 files changed, 268 insertions(+), 226 deletions(-)

diff --git a/src/components/base/drag/index.vue b/src/components/base/drag/index.vue
index a0b3e0a1..ef398f3b 100644
--- a/src/components/base/drag/index.vue
+++ b/src/components/base/drag/index.vue
@@ -1,7 +1,7 @@
 <template>
     <VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
         <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
-            <li v-for="(item, index) in from" :key="index" :class="[`flex-row re gap-16 ${ className }`,  props.modelType == 'nav-group' && modelIndex === index ? 'nav-index-select' : '']" @click="on_click(item, index)">
+            <li v-for="(item, index) in from" :key="index" :class="[`flex-row re gap-16 ${ className }`,  ['nav-group', 'tabs-magic'].includes(props.modelType) && modelIndex === index ? 'model-type-index-select' : '']" @click="on_click(item, index)">
                 <div class="flex-1 flex-row gap-16">
                     <icon name="drag" size="16" class="cursor-move" />
                     <slot :row="item" :index="index" />
@@ -129,10 +129,6 @@ const on_sort = () => {
     border-radius: 100%;
     line-height: 1.8rem;
 }
-.nav-index-select {
-    box-shadow: 0rem 0 0rem 0.1rem #409eff;
-    /* border: 1px solid #409eff; */
-}
 .multiple-icon-class {
     padding: 0.5rem 1rem;
     background: #f7f7f7;
diff --git a/src/components/common/tabs-magic-config/tabs-magic-styles.vue b/src/components/common/tabs-magic-config/tabs-magic-styles.vue
index c22fe657..14602fef 100644
--- a/src/components/common/tabs-magic-config/tabs-magic-styles.vue
+++ b/src/components/common/tabs-magic-config/tabs-magic-styles.vue
@@ -1,40 +1,44 @@
 <template>
-    <!-- 轮播 -->
-    <template v-if="magicType === 'carousel'">
-        <model-carousel-styles :value="form.style" :content="form.content" :is-common-style="false"></model-carousel-styles>
-    </template>
-    <!-- 导航组 -->
-    <template v-else-if="magicType === 'nav_group'"> 
-        <model-nav-group-styles :value="form.style" :content="form.content" :is-common-style="false"></model-nav-group-styles>
-    </template>
-    <!-- 自定义 -->
-    <template v-else-if="magicType === 'custom'"> 
-        <model-custom-styles :value="form.style" :content="form.content" :is-common-style="false" ></model-custom-styles>
-    </template>
-    <!-- 商品魔方 -->
-    <template v-else-if="magicType === 'goods_magic'"> 
-        <model-goods-magic-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-magic-styles>
-    </template>
-    <!-- 图片魔方 -->
-    <template v-else-if="magicType === 'img_magic'"> 
-        <model-img-magic-styles :value="form.style" :content="form.content" :is-common-style="false"></model-img-magic-styles>
-    </template>
-    <!-- 热区 -->
-    <template v-else-if="magicType === 'hot_zone'"> 
-        <model-hot-zone-styles :value="form.style" :is-common-style="false"></model-hot-zone-styles>
-    </template>
-    <!-- 文章列表 -->
-    <template v-else-if="magicType === 'article_list'"> 
-        <model-article-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-article-list-styles>
-    </template>
-    <!-- 商品列表 -->
-    <template v-else-if="magicType === 'goods_list'"> 
-        <model-goods-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-list-styles>
-    </template>
-    <!-- 视频 -->
-    <template v-else-if="magicType === 'video'"> 
-        <model-video-styles :value="form.style" :content="form.content" :is-common-style="false"></model-video-styles>
-    </template>
+    <div>
+        <!-- 轮播 -->
+        <template v-if="magicType === 'carousel'">
+            <model-carousel-styles :value="form.style" :content="form.content" :is-common-style="false" :is-tabs-magic="true"></model-carousel-styles>
+        </template>
+        <!-- 导航组 -->
+        <template v-else-if="magicType === 'nav_group'"> 
+            <model-nav-group-styles :value="form.style" :content="form.content" :is-common-style="false"></model-nav-group-styles>
+        </template>
+        <!-- 自定义 -->
+        <template v-else-if="magicType === 'custom'"> 
+            <model-custom-styles :value="form.style" :content="form.content" :is-common-style="false" :is-tabs-magic="true"></model-custom-styles>
+        </template>
+        <!-- 商品魔方 -->
+        <template v-else-if="magicType === 'goods_magic'"> 
+            <model-goods-magic-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-magic-styles>
+        </template>
+        <!-- 图片魔方 -->
+        <template v-else-if="magicType === 'img_magic'"> 
+            <model-img-magic-styles :value="form.style" :content="form.content" :is-common-style="false"></model-img-magic-styles>
+        </template>
+        <!-- 热区 -->
+        <template v-else-if="magicType === 'hot_zone'"> 
+            <model-hot-zone-styles :value="form.style" :is-common-style="false"></model-hot-zone-styles>
+        </template>
+        <!-- 文章列表 -->
+        <template v-else-if="magicType === 'article_list'"> 
+            <model-article-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-article-list-styles>
+        </template>
+        <!-- 商品列表 -->
+        <template v-else-if="magicType === 'goods_list'"> 
+            <model-goods-list-styles :value="form.style" :content="form.content" :default-config="data_config" :is-common-style="false"></model-goods-list-styles>
+        </template>
+        <!-- 视频 -->
+        <template v-else-if="magicType === 'video'"> 
+            <model-video-styles :value="form.style" :content="form.content" :is-common-style="false"></model-video-styles>
+        </template>
+        <!-- 公共样式 -->
+        <tabs-magic-common :value="form.style"></tabs-magic-common>
+    </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index 1d1bc1f0..6f9be27c 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="common-style-height">
         <el-form :model="form" label-width="75">
-            <template v-if="!isCommonStyle">
+            <template v-if="!isCommonStyle && !isTabsMagic">
                 <card-container class="card-container">
                     <div class="mb-12">内容设置</div>
                     <el-form-item label="内容背景">
@@ -139,6 +139,10 @@ const props = defineProps({
     isCommonStyle: {
         type: Boolean,
         default: true
+    },
+    isTabsMagic: {
+        type: Boolean,
+        default: false
     }
 });
 
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index ff35c493..52ed010b 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -54,26 +54,28 @@
                 <!-- 阴影配置 -->
                 <shadow-config v-model="form.data_style" @operation_end="operation_end"></shadow-config>
             </card-container>
-            <div class="divider-line data-tabs-line" />
-            <card-container class="card-container">
-                <div class="mb-12">内容样式</div>
-                <el-form-item label="背景">
-                    <background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" @operation_end="operation_end" />
-                </el-form-item>
-                <el-form-item label="外间距">
-                    <margin :value="form.data_content_style" @operation_end="operation_end"></margin>
-                </el-form-item>
-                <el-form-item label="内间距">
-                    <padding :value="form.data_content_style" @operation_end="operation_end"></padding>
-                </el-form-item>
-                <el-form-item label="圆角">
-                    <radius :value="form.data_content_style" @operation_end="operation_end"></radius>
-                </el-form-item>
-                <!-- 边框处理 -->
-                <border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size" @operation_end="operation_end"></border-config>
-                <!-- 阴影配置 -->
-                <shadow-config v-model="form.data_content_style" @operation_end="operation_end"></shadow-config>
-            </card-container>
+            <template v-if="!isTabsMagic">
+                <div class="divider-line data-tabs-line" />
+                <card-container class="card-container">
+                    <div class="mb-12">内容样式</div>
+                    <el-form-item label="背景">
+                        <background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" @operation_end="operation_end" />
+                    </el-form-item>
+                    <el-form-item label="外间距">
+                        <margin :value="form.data_content_style" @operation_end="operation_end"></margin>
+                    </el-form-item>
+                    <el-form-item label="内间距">
+                        <padding :value="form.data_content_style" @operation_end="operation_end"></padding>
+                    </el-form-item>
+                    <el-form-item label="圆角">
+                        <radius :value="form.data_content_style" @operation_end="operation_end"></radius>
+                    </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size" @operation_end="operation_end"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form.data_content_style" @operation_end="operation_end"></shadow-config>
+                </card-container>
+            </template>
         </el-form>
         <template v-if="isCommonStyle">
             <div class="divider-line data-tabs-line" />
@@ -98,6 +100,10 @@ const props = defineProps({
     isCommonStyle: {
         type: Boolean,
         default: true,
+    },
+    isTabsMagic: {
+        type: Boolean,
+        default: false
     }
 });
 const state = reactive({
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index f7eb8986..44fff9bb 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -160,13 +160,13 @@ const handleResize = () => {
             cubeHeight.value = height;
         }
     } else {
-        const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 296;
+        const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 280;
         if (window.innerWidth <= 1560) {
-            const sales = 236 / 296;
-            cubeWidth.value = 236;
+            const sales = 220 / 280;
+            cubeWidth.value = 220;
             cubeHeight.value = height * sales;
         } else {
-            cubeWidth.value = 296;
+            cubeWidth.value = 280;
             cubeHeight.value = height;
         }
     }
diff --git a/src/components/model-tabs-magic/index.vue b/src/components/model-tabs-magic/index.vue
index 0f23e0e2..8fe7009e 100644
--- a/src/components/model-tabs-magic/index.vue
+++ b/src/components/model-tabs-magic/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="re" :style="style_container + swiper_bg_style">
+    <div class="re" :style="style_container + style_active_container + swiper_bg_style">
         <div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
-        <div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
+        <div class="flex-col oh" :style="style_img_container + style_active_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
             <div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
                 <div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
                 <div class="oh re z-deep" :style="tabs_img_container">
@@ -73,72 +73,41 @@ const tabs_container = ref('');
 const tabs_img_container = ref('');
 // 打开滑动固定开关之后，显示的样式
 const tabs_sliding_fixed_bg = ref('');
-const is_rotating_background = ref(false);
-// 魔方内容样式
-const magic_container = ref('');
-const magic_img_container = ref('');
-// 样式信息数据
-const new_style = computed(() => props.value.style);
 // 当前选中的选项卡对应的type类型
-const tabs_magic_type = computed(() => tabs_list.value.content.tabs_list[tabs_active_index.value].magic_type)
-const tabs_magic_value = computed(() => tabs_list.value.content.tabs_list[tabs_active_index.value][tabs_magic_type.value])
-watch(() => props.value,
-    (val) => {
-        let new_data = cloneDeep(val);
-        const { home_data, is_tabs_safe_distance = '0', rotating_background } = new_data.content;
-        const new_style = new_data?.style;
-        // 选项卡背景设置
-        const tabs_data = {
-            color_list: new_style.tabs_bg_color_list,
-            direction: new_style.tabs_bg_direction,
-            background_img_style: new_style.tabs_bg_background_img_style,
-            background_img: new_style.tabs_bg_background_img,
-        }
-        // 选项卡是否开启了安全距离
-        const is_general_safe_distance = common_store.is_general_safe_distance && is_tabs_safe_distance == '1';
-        const new_tabs_padding = {
-            ...new_style.tabs_padding,
-            padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
-        }
-        // 是否开启轮播图背景设置
-        is_rotating_background.value = rotating_background == '1';
-        // 选项卡滑动固定背景
-        tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
-        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
-        tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
-        // 魔方区域背景设置
-        const magic_content_data = {
-            color_list: new_style.magic_content_color_list,
-            direction: new_style.magic_content_direction,
-            background_img_style: new_style.magic_content_background_img_style,
-            background_img: new_style.magic_content_background_img,
-        }
-        magic_container.value = gradient_computer(magic_content_data) + margin_computer(new_style.magic_content_margin) + radius_computer(new_style.magic_content_radius) + border_computer(new_style.magic_content) + box_shadow_computer(new_style.magic_content);
-        magic_img_container.value = background_computer(magic_content_data) + padding_computer(new_style.magic_content_padding);
-        // 处理数据
-        new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
-        tabs_list.value = new_data;
-        // 当前选中的内容
-        tabs_active_index.value = new_data.content.tabs_active_index;
-
-    },
-    { immediate: true, deep: true }
-);
-
-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 active_tabs_value = computed(() => tabs_list.value.content.tabs_list[tabs_active_index.value]);
+// 获取选中的类型
+const tabs_magic_type = computed(() => active_tabs_value.value.magic_type)
+// 获取选中的魔方数据
+const tabs_magic_value = computed(() => active_tabs_value.value[tabs_magic_type.value]);
+// 判断是否开启轮播图背景设置
+const is_rotating_background = computed(() => active_tabs_value.value.rotating_background == '1');
+// 选中的公共样式
+const style_active_container = computed(() => tabs_magic_value.value.style.magic_common.is_show == '1' ? gradient_computer(tabs_magic_value.value.style.magic_common) : '');
+const style_active_img_container = computed(() => tabs_magic_value.value.style.magic_common.is_show == '1' ? background_computer(tabs_magic_value.value.style.magic_common) : '');
+// 选中的内容区域样式
+const magic_container = computed(() => common_styles_computer(tabs_magic_value.value.style.magic_content));
+const magic_img_container = computed(() => common_img_computer(tabs_magic_value.value.style.magic_content));
+//#region 图片魔方的缩放比例
+const new_style = computed(() => props.value.style);
 // 图片魔方的缩放比例
 const magic_scale = ref(1);
 watchEffect(() => {
-    const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
-    const magic_content_margin = new_style.value.magic_content_margin;
-    const magic_content_padding = new_style.value.magic_content_padding;
-    const content_width = magic_content_margin.margin_left + magic_content_margin.margin_right + magic_content_padding.padding_left + magic_content_padding.padding_right + border_width(new_style.value.magic_content);
+    // 获取公共样式的数据
+    const common_data = new_style.value.common_style;
+    const common_width = common_data.margin_left + common_data.margin_right + common_data.padding_left + common_data.padding_right + border_width(common_data);
+
+    const { margin_left, margin_right, padding_left, padding_right } = tabs_magic_value.value.style.magic_content;
+    const content_width = margin_left + margin_right + padding_left + padding_right + border_width(tabs_magic_value.value.style.magic_content);
     // 根据容器宽度来计算内部大小
-    const typewidth = 390 - content_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.value.common_style);
+    const typewidth = 390 - content_width - common_width;
     // 获得对应宽度的比例
     magic_scale.value = typewidth / 390;
 });
+//#endregion
+// 全局公共样式
+const style_container = computed(() => common_styles_computer(new_style.value.common_style));
+const style_img_container = computed(() => `${common_img_computer(new_style.value.common_style)};gap:${new_style.value.data_spacing}px;`);
 //#region 轮播切换时更新背景信息
 const actived_index = ref(0);
 const slideChange = (index: number) => {
@@ -182,5 +151,35 @@ const swiper_bg_img_style = computed(() => {
     return '';
 });
 //#endregion
+watch(() => props.value,
+    (val) => {
+        let new_data = cloneDeep(val);
+        const { home_data, is_tabs_safe_distance = '0' } = new_data.content;
+        const new_style = new_data?.style;
+        // 选项卡背景设置
+        const tabs_data = {
+            color_list: new_style.tabs_bg_color_list,
+            direction: new_style.tabs_bg_direction,
+            background_img_style: new_style.tabs_bg_background_img_style,
+            background_img: new_style.tabs_bg_background_img,
+        }
+        // 选项卡是否开启了安全距离
+        const is_general_safe_distance = common_store.is_general_safe_distance && is_tabs_safe_distance == '1';
+        const new_tabs_padding = {
+            ...new_style.tabs_padding,
+            padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
+        }
+        // 选项卡滑动固定背景
+        tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
+        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
+        tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
+        // 处理数据
+        new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
+        tabs_list.value = new_data;
+        // 当前选中的内容
+        tabs_active_index.value = new_data.content.tabs_active_index;
+    },
+    { immediate: true, deep: true }
+);
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/model-tabs-magic/model-tabs-magic-content.vue b/src/components/model-tabs-magic/model-tabs-magic-content.vue
index 61792352..e347ac85 100644
--- a/src/components/model-tabs-magic/model-tabs-magic-content.vue
+++ b/src/components/model-tabs-magic/model-tabs-magic-content.vue
@@ -33,16 +33,12 @@
                     <el-switch v-model="form.is_tabs_safe_distance" class="mr-10" active-value="1" inactive-value="0" />
                     <tooltip content="选项卡是否支持安全距离"></tooltip>
                 </el-form-item>
-                <el-form-item label="轮播背景">
-                    <el-switch v-model="form.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
-                    <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
-                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
                 <div class="mb-12">选项卡设置</div>
                 <div class="flex-col gap-x-20">
-                    <div class="card-background box-shadow-sm ptb-25 flex-row gap-16 re align-c" @click="tabs_list_click('home', 0)">
+                    <div :class="`card-background box-shadow-sm ptb-25 flex-row gap-16 re align-c radius-sm ${ form.tabs_active_index == 0 ? 'model-type-index-select' : ''}`" @click="tabs_list_click('home', 0)">
                         <el-icon class="iconfont icon-jinzhi size-16 cursor-move" />
                         <div class="flex-col gap-10 w" style="width: calc(100% - 32px)">
                             <el-form-item label="显示类型" class="w mb-0">
@@ -61,24 +57,28 @@
                             </el-form-item>
                             <sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
                             <template v-if="form.tabs_active_index == 0">
-                                <el-form-item label="魔方内容" class="w">
-                                    <el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change(0)">
+                                <el-form-item label="魔方内容" class="w mb-0">
+                                    <el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change()">
                                         <el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
                                     </el-select>
                                 </el-form-item>
+                                <el-form-item v-if="form.home_data.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
+                                    <el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
+                                    <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
+                                </el-form-item>
                                 <!-- 魔方内容设置 -->
                                 <el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
                                     <el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
                                         <tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
                                     </el-tab-pane>
-                                    <el-tab-pane v-if="!['video', 'hot_zone'].includes(form.home_data.magic_type)" label="样式设置" name="styles" class="tabs-magic-content">
+                                    <el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
                                         <tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
                                     </el-tab-pane>
                                 </el-tabs>
                             </template>
                         </div>
                     </div>
-                    <drag :data="form.tabs_list" type="card" :space-col="25" @click="tabs_list_click" @remove="remove" @on-sort="on_sort">
+                    <drag :data="form.tabs_list" type="card" model-type="tabs-magic" :model-index="form.tabs_active_index - 1" :space-col="25" @click="tabs_list_click" @remove="remove" @on-sort="on_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col align-c jc-s gap-20 flex-1 w" style="width: calc(100% - 32px)">
                                 <el-form-item label="数据类型" class="w mb-0">
@@ -112,11 +112,15 @@
                                         </template>
                                     </el-form-item>
                                     <!-- 魔方内容显示页面 -->
-                                    <el-form-item label="魔方内容" class="w">
-                                        <el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change(index + 1)">
+                                    <el-form-item label="魔方内容" class="w mb-0">
+                                        <el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change()">
                                             <el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
                                         </el-select>
                                     </el-form-item>
+                                    <el-form-item v-if="row.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
+                                        <el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
+                                        <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
+                                    </el-form-item>
                                     <!-- 魔方内容设置 -->
                                     <el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
                                         <el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
@@ -198,6 +202,7 @@ const add = () => {
         micro_page_list: {},
         category_list: {},
         magic_type: 'carousel',
+        rotating_background: '0',
         ...cloneDeep(magic_config),
     });
     form.value.tabs_active_index = form.value.tabs_list.length;
@@ -252,8 +257,8 @@ const sliding_fixed_change = (val: string | number | boolean, index: number, typ
 }
 //#region 选项卡魔方内容
 const tabs_name = ref('content');
-const magic_type_change = (index: number) => {
-
+const magic_type_change = () => {
+    tabs_name.value = 'content';
 }
 //#endregion
 // 选项卡是否设置安全距离
diff --git a/src/components/model-tabs-magic/model-tabs-magic-styles.vue b/src/components/model-tabs-magic/model-tabs-magic-styles.vue
index 2498cbb1..d01b17b9 100644
--- a/src/components/model-tabs-magic/model-tabs-magic-styles.vue
+++ b/src/components/model-tabs-magic/model-tabs-magic-styles.vue
@@ -62,9 +62,6 @@
                 <el-form-item label="左右间距">
                     <slider v-model="form.tabs_spacing" :max="100"></slider>
                 </el-form-item>
-                <el-form-item label="数据间距">
-                    <slider v-model="form.data_spacing" :max="100"></slider>
-                </el-form-item>
                 <el-form-item label="选项卡背景">
                     <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>
@@ -95,24 +92,12 @@
                     <slider v-model="form.more_icon_size" :max="100"></slider>
                 </el-form-item>
             </card-container>
+            <div class="divider-line"></div>
             <card-container>
-                <div class="mb-12">内容样式</div>
-                <el-form-item label="内容背景">
-                    <background-common v-model:color_list="form.magic_content_color_list" v-model:direction="form.magic_content_direction" v-model:img_style="form.magic_content_background_img_style" v-model:img="form.magic_content_background_img" @mult_color_picker_event="magic_content_mult_color_picker_event" />
+                <div class="mb-12">间距设置</div>
+                <el-form-item label="数据间距">
+                    <slider v-model="form.data_spacing" :max="100"></slider>
                 </el-form-item>
-                <el-form-item label="圆角">
-                    <radius :value="form.magic_content_radius"></radius>
-                </el-form-item>
-                <el-form-item label="外间距">
-                    <margin :value="form.magic_content_margin"></margin>
-                </el-form-item>
-                <el-form-item label="内间距">
-                    <padding :value="form.magic_content_padding"></padding>
-                </el-form-item>
-                <!-- 边框处理 -->
-                <border-config v-model:show="form.magic_content.border_is_show" v-model:color="form.magic_content.border_color" v-model:style="form.magic_content.border_style" v-model:size="form.magic_content.border_size"></border-config>
-                <!-- 阴影配置 -->
-                <shadow-config v-model="form.magic_content"></shadow-config>
             </card-container>
         </el-form>
         <div class="divider-line"></div>
@@ -159,10 +144,5 @@ const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.tabs_bg_color_list = arry;
     form.value.tabs_bg_direction = type.toString();
 };
-// 魔方内容背景渐变设置
-const magic_content_mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.value.magic_content_color_list = arry;
-    form.value.magic_content_direction = type.toString();
-};
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/config/const/tabs-magic.ts b/src/config/const/tabs-magic.ts
index 5e3fb5b7..b34eb351 100644
--- a/src/config/const/tabs-magic.ts
+++ b/src/config/const/tabs-magic.ts
@@ -34,6 +34,7 @@ interface tabs_page {
     micro_page_list: object;
     category_list: object;
     magic_type: string;
+    rotating_background: string,
     carousel: object;
     video: object;
     nav_group: object;
@@ -48,7 +49,6 @@ interface defaultTabs {
     content: {
         content_top: object;
         justification: string,
-        rotating_background: string;
         show_more: string,
         tabs_theme: string;
         tabs_adorn_icon: string;
@@ -94,17 +94,58 @@ interface defaultTabs {
         more_icon_color: string;
         more_icon_size: number;
         data_spacing: number;
-        magic_content_direction: string;
-        magic_content_color_list: color_list[];
-        magic_content_background_img_style: string;
-        magic_content_background_img: string[];
-        magic_content_radius: radiusStyle;
-        magic_content_margin: marginStyle;
-        magic_content_padding: paddingStyle;
-        magic_content: object;
         common_style: object;
     };
 }
+const magic_common_config = {
+    // 魔方内容设置
+    magic_content: {
+        direction: '90deg',
+        color_list: [{ color: '', color_percentage: undefined }],
+        background_img_style: '2',
+        background_img: [],
+        radius: 0,
+        radius_top_left: 0,
+        radius_top_right: 0,
+        radius_bottom_left: 0,
+        radius_bottom_right: 0,
+        margin: 0,
+        margin_top: 0,
+        margin_bottom: 0,
+        margin_left: 0,
+        margin_right: 0,
+        padding: 0,
+        padding_top: 0,
+        padding_bottom: 10,
+        padding_left: 10,
+        padding_right: 10,
+        // 边框样式
+        border_is_show: '0',
+        border_color: '#FF3F3F',
+        border_style: 'solid',
+        border_size: {
+            padding: 1,
+            padding_top: 1,
+            padding_right: 1,
+            padding_bottom: 1,
+            padding_left: 1,
+        },
+        // 阴影
+        box_shadow_color: '',
+        box_shadow_x: 0,
+        box_shadow_y: 0,
+        box_shadow_blur: 0,
+        box_shadow_spread: 0,
+    },
+    // 通用样式
+    magic_common: {
+        is_show: '0',
+        direction: '90deg',
+        color_list: [{ color: '', color_percentage: undefined }],
+        background_img_style: '2',
+        background_img: [],
+    },
+}
 // 魔方配置
 export const magic_config = {
     carousel: {
@@ -156,20 +197,64 @@ export const magic_config = {
                 box_shadow_blur: 0,
                 box_shadow_spread: 0,
             },
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    video: {
+        content: cloneDeep(defaultVideo.content),
+        style: {
+            ...cloneDeep(defaultVideo.style),
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    nav_group: {
+        content: cloneDeep(defaultNavGroup.content),
+        style: {
+            ...cloneDeep(defaultNavGroup.style),
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    article_list: {
+        content: cloneDeep(defaultArticleList.content),
+        style: {
+            ...cloneDeep(defaultArticleList.style),
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    goods_list: {
+        content: cloneDeep(defaultGoodsList.content),
+        style: {
+            ...cloneDeep(defaultGoodsList.style),
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    goods_magic: {
+        content: cloneDeep(defaultGoodsMagic.content),
+        style: {
+            ...cloneDeep(defaultGoodsMagic.style),
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    img_magic: {
+        content: cloneDeep(defaultImgMagic.content),
+        style: {
+            ...cloneDeep(defaultImgMagic.style),
+            ...cloneDeep(magic_common_config)
+        }
+    },
+    hot_zone: {
+        content: cloneDeep(defaultHotZone.content),
+        style: {
+            ...cloneDeep(defaultHotZone.style),
+            ...cloneDeep(magic_common_config)
         }
     },
-    video: cloneDeep(defaultVideo),
-    nav_group: cloneDeep(defaultNavGroup),
-    article_list: cloneDeep(defaultArticleList),
-    goods_list: cloneDeep(defaultGoodsList),
-    goods_magic: cloneDeep(defaultGoodsMagic),
-    img_magic: cloneDeep(defaultImgMagic),
-    hot_zone: cloneDeep(defaultHotZone),
     custom:{
         ...cloneDeep(defaultCustom),
         style: {
             ...cloneDeep(defaultCustom.style),
-             data_content_style: {
+            ...cloneDeep(magic_common_config),
+            data_content_style: {
                 ...cloneDeep(defaultCustom.style.data_content_style),
                 color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
             }
@@ -186,7 +271,6 @@ const defaultTabs: defaultTabs = {
         show_more: '1',
         // 选项卡风格
         tabs_theme: '0',
-        rotating_background: '0',
         // 选中装饰图标
         tabs_adorn_icon: 'checked-smooth',
         tabs_adorn_img: [],
@@ -211,6 +295,7 @@ const defaultTabs: defaultTabs = {
             micro_page_list: {}, 
             category_list: {},
             magic_type: 'carousel',
+            rotating_background: '0',
             ...cloneDeep(magic_config),
         },
         tabs_list: [
@@ -228,6 +313,7 @@ const defaultTabs: defaultTabs = {
                 micro_page_list: {},
                 category_list: {},
                 magic_type: 'carousel',
+                rotating_background: '0',
                 ...cloneDeep(magic_config),
             },
             { 
@@ -244,6 +330,7 @@ const defaultTabs: defaultTabs = {
                 micro_page_list: {}, 
                 category_list: {},
                 magic_type: 'carousel',
+                rotating_background: '0',
                 ...cloneDeep(magic_config),
             },
             { 
@@ -260,6 +347,7 @@ const defaultTabs: defaultTabs = {
                 micro_page_list: {}, 
                 category_list: {},
                 magic_type: 'carousel',
+                rotating_background: '0',
                 ...cloneDeep(magic_config),
             },
         ],
@@ -354,51 +442,6 @@ const defaultTabs: defaultTabs = {
         more_icon_size: 14,
         // 选项卡与轮播之间的间距
         data_spacing: 0,
-        // 魔方内容设置
-        magic_content_direction: '90deg',
-        magic_content_color_list: [{ color: '', color_percentage: undefined }],
-        magic_content_background_img_style: '2',
-        magic_content_background_img: [],
-        magic_content_radius: {
-            radius: 0,
-            radius_top_left: 0,
-            radius_top_right: 0,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
-        },
-        magic_content_margin: {
-            margin: 0,
-            margin_top: 0,
-            margin_bottom: 0,
-            margin_left: 0,
-            margin_right: 0,
-        },
-        magic_content_padding: {
-            padding: 0,
-            padding_top: 0,
-            padding_bottom: 10,
-            padding_left: 10,
-            padding_right: 10,
-        },
-        magic_content: {
-            // 边框样式
-            border_is_show: '0',
-            border_color: '#FF3F3F',
-            border_style: 'solid',
-            border_size: {
-                padding: 1,
-                padding_top: 1,
-                padding_right: 1,
-                padding_bottom: 1,
-                padding_left: 1,
-            },
-            // 阴影
-            box_shadow_color: '',
-            box_shadow_x: 0,
-            box_shadow_y: 0,
-            box_shadow_blur: 0,
-            box_shadow_spread: 0,
-        },
         // 公共样式
         common_style: defaultCommon,
     },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 68981c6f..5a4a5456 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -329,4 +329,9 @@ p {
         margin-bottom: 1rem;
         margin-top: 1rem;
     }
+}
+
+.model-type-index-select {
+    box-shadow: 0rem 0 0rem 0.1rem #409eff;
+    /* border: 1px solid #409eff; */
 }
\ No newline at end of file