From 9120676301f10395e44042ea759ecb85f7cfb04c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 4 Aug 2025 15:21:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=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            |   4 +-
 .../tabs-magic-config/tabs-magic-content.vue  |   2 +-
 src/components/model-carousel/index.vue       |   8 +-
 .../model-custom/model-custom-content.vue     |   2 +-
 src/components/model-goods-magic/index.vue    |   2 +-
 src/components/model-hot-zone/index.vue       |  13 +-
 src/components/model-img-magic/index.vue      |  16 +-
 .../model-img-magic-content.vue               |  26 +++-
 .../model-img-magic-styles.vue                |   2 +-
 src/components/model-nav-group/index.vue      |  20 ++-
 .../model-nav-group-content.vue               |   4 +-
 .../model-nav-group-styles.vue                |  12 +-
 src/components/model-tabs-carousel/index.vue  |   2 +-
 src/components/model-tabs-magic/index.vue     | 141 ++++++++++++++----
 .../model-tabs-magic-content.vue              |  28 ++++
 .../model-tabs-magic-styles.vue               |  68 +++++----
 src/components/model-video/index.vue          |  13 +-
 src/config/const/tabs-magic.ts                |  64 +++++++-
 18 files changed, 314 insertions(+), 113 deletions(-)

diff --git a/src/components/base/drag/index.vue b/src/components/base/drag/index.vue
index b4ba87ff..a0b3e0a1 100644
--- a/src/components/base/drag/index.vue
+++ b/src/components/base/drag/index.vue
@@ -1,8 +1,8 @@
 <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 ${ className }`,  props.modelType == 'nav-group' && modelIndex === index ? 'nav-index-select' : '']" @click="on_click(item, index)">
-                <div class="flex-row gap-16">
+            <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)">
+                <div class="flex-1 flex-row gap-16">
                     <icon name="drag" size="16" class="cursor-move" />
                     <slot :row="item" :index="index" />
                 </div>
diff --git a/src/components/common/tabs-magic-config/tabs-magic-content.vue b/src/components/common/tabs-magic-config/tabs-magic-content.vue
index 23451524..dfd4ce67 100644
--- a/src/components/common/tabs-magic-config/tabs-magic-content.vue
+++ b/src/components/common/tabs-magic-config/tabs-magic-content.vue
@@ -9,7 +9,7 @@
     </template>
     <!-- 自定义 -->
     <template v-else-if="magicType === 'custom'"> 
-        <model-custom-content :value="form.content" :is-nest="true"></model-custom-content>
+        <model-custom-content :value="form.content" :is-subcomponent="true"></model-custom-content>
     </template>
     <!-- 商品魔方 -->
     <template v-else-if="magicType === 'goods_magic'"> 
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 673a607d..63cb3ae7 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -87,16 +87,16 @@ const props = defineProps({
             return {};
         },  
     },
-    isNest: {
+    isCommonStyle: {
         type: Boolean,
-        default: false,
+        default: true,
     },
 });
 const form = computed(() => props.value.content);
 const new_style = computed(() => props.value.style);
 // 用于样式显示
-const style_container = computed(() => !props.isNest ? common_styles_computer(new_style.value.common_style) : '');
-const style_img_container = computed(() => !props.isNest ? common_img_computer(new_style.value.common_style) : '');
+const style_container = computed(() => props.isCommonStyle ? common_styles_computer(new_style.value.common_style) : '');
+const style_img_container = computed(() => props.isCommonStyle ? common_img_computer(new_style.value.common_style) : '');
 
 const autoplay = ref<boolean | object>(false)
 // 图片的设置
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 7827d500..71bfc5e1 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -104,7 +104,7 @@ const props = defineProps({
     isSubcomponent: {
         type: Boolean,
         default: false,
-    }
+    },
 });
 // 容器宽度
 const center_width = ref(props.magicWidth);
diff --git a/src/components/model-goods-magic/index.vue b/src/components/model-goods-magic/index.vue
index 4d35e164..5d2aa555 100644
--- a/src/components/model-goods-magic/index.vue
+++ b/src/components/model-goods-magic/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <model-goods-list :value="props.value" :new-list="data_source_content_list" :is-use-auto="false"></model-goods-list>
+    <model-goods-list :value="props.value" :new-list="data_source_content_list" :is-use-auto="false" :is-common-style="isCommonStyle"></model-goods-list>
 </template>
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
diff --git a/src/components/model-hot-zone/index.vue b/src/components/model-hot-zone/index.vue
index 9f078a31..a8d91421 100644
--- a/src/components/model-hot-zone/index.vue
+++ b/src/components/model-hot-zone/index.vue
@@ -19,6 +19,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    }
 });
 const containerRef = ref<HTMLElement | null>(null);
 const hotRef = ref<HTMLElement | null>(null);
@@ -35,16 +39,17 @@ const container_ref_h = ref(0);
 const container_ref_w = ref(0);
 const hot_ref_w = ref(0);
 const hot_ref_h = ref(0);
-watch(
-    props.value,
+watch(() => props.value,
     (newVal, oldValue) => {
         const new_content = newVal?.content || {};
         const new_style = newVal?.style || {};
         img.value = new_content?.img[0];
         img_width.value = new_content?.hot.img_width || 1;
         img_height.value = new_content?.hot.img_height || 1;
-        style_container.value = common_styles_computer(new_style.common_style);
-        style_img_container.value = common_img_computer(new_style.common_style);
+        if (props.isCommonStyle) {
+            style_container.value = common_styles_computer(new_style.common_style);
+            style_img_container.value = common_img_computer(new_style.common_style);
+        }
         hot_data.value = new_content?.hot?.data || [];
         container_ref_h.value = containerRef.value?.clientHeight || 0;
         container_ref_w.value = containerRef.value?.clientWidth || 0;
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index 4b44d97d..3de69307 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -69,14 +69,14 @@ const props = defineProps({
             return {};
         },
     },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    }
 });
 // 用于页面判断显示
-const state = reactive({
-    form: props.value.content,
-    new_style: props.value.style,
-});
-// 如果需要解构，确保使用toRefs
-const { form, new_style } = toRefs(state);
+const form = computed(() => props.value.content);
+const new_style = computed(() => props.value.style);
 
 const new_style_spacing = computed(() => form.value.style_actived === 10 ? 0 : (new_style.value?.image_spacing || 0));
 const outer_spacing = computed(() => new_style_spacing.value + 'px');
@@ -139,8 +139,8 @@ const percentage = (num: number) => {
 const content_img_container = computed(() => common_styles_computer(new_style.value) + margin_computer(new_style.value.margin));
 const content_img_style_container = computed(() => common_img_computer(new_style.value) + padding_computer(new_style.value.padding));
 // 公共样式
-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));
+const style_container = computed(() => props.isCommonStyle ? common_styles_computer(new_style.value.common_style) : '');
+const style_img_container = computed(() => props.isCommonStyle ? common_img_computer(new_style.value.common_style) : '');
 </script>
 <style lang="scss" scoped>
 // 图片魔方是一个正方形，根据宽度计算高度
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 4ad23ea8..f7eb8986 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -149,14 +149,26 @@ onUnmounted(() => {
 });
 
 const handleResize = () => {
-    const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 390;
-    if (window.innerWidth <= 1560) {
-        const sales = 330 / 390;
-        cubeWidth.value = 330;
-        cubeHeight.value = height * sales;
+    if (!props.isNest) {
+        const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 390;
+        if (window.innerWidth <= 1560) {
+            const sales = 330 / 390;
+            cubeWidth.value = 330;
+            cubeHeight.value = height * sales;
+        } else {
+            cubeWidth.value = 390;
+            cubeHeight.value = height;
+        }
     } else {
-        cubeWidth.value = 390;
-        cubeHeight.value = height;
+        const height = form.value.style_actived !== 10 ? form.value.container_height : form.value.limit_size == '1' ? form.value.image_height : 296;
+        if (window.innerWidth <= 1560) {
+            const sales = 236 / 296;
+            cubeWidth.value = 236;
+            cubeHeight.value = height * sales;
+        } else {
+            cubeWidth.value = 296;
+            cubeHeight.value = height;
+        }
     }
 }
 //#endregion
diff --git a/src/components/model-img-magic/model-img-magic-styles.vue b/src/components/model-img-magic/model-img-magic-styles.vue
index 7a6f42c3..5d1a2acd 100644
--- a/src/components/model-img-magic/model-img-magic-styles.vue
+++ b/src/components/model-img-magic/model-img-magic-styles.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <card-container class="card-container">
                 <div class="mb-12">图片魔方</div>
                 <el-form-item v-if="new_content.style_actived !== 10" label="图片间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index e92af4bf..daa9364b 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -42,19 +42,16 @@ const props = defineProps({
             return {};
         },
     },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    }
 });
-
-// 用于页面判断显示
-const state = reactive({
-    form: props.value.content,
-    new_style: props.value.style,
-});
-// 如果需要解构，确保使用toRefs
-const { form, new_style } = toRefs(state);
-
+const form = computed(() => props.value.content);
+const new_style = computed(() => props.value.style);
 // 用于样式显示
-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));
+const style_container = computed(() => props.isCommonStyle ? common_styles_computer(new_style.value.common_style) : '');
+const style_img_container = computed(() => props.isCommonStyle ? common_img_computer(new_style.value.common_style) : '');
 // 图片的设置
 const img_style = computed(() => radius_computer(new_style.value));
 // 标题的样式
@@ -153,6 +150,7 @@ const nav_content_list = computed(() => {
 // 内容参数的集合
 watch(() => props.value, (val) => {
     nextTick(() => {
+
         if (!isEmpty(bannerImg.value)) {
             newHeight.value = (bannerImg.value[0]?.clientHeight || 100) + 'px';
         }
diff --git a/src/components/model-nav-group/model-nav-group-content.vue b/src/components/model-nav-group/model-nav-group-content.vue
index 8dae99d7..0a5168d7 100644
--- a/src/components/model-nav-group/model-nav-group-content.vue
+++ b/src/components/model-nav-group/model-nav-group-content.vue
@@ -43,8 +43,8 @@
                 <div class="nav-list">
                     <drag :data="form.nav_content_list" type="card" :space-col="27" model-type="nav-group" :model-index="tabs_active_index" @remove="remove" @on-sort="on_sort" @click="tabs_list_click">
                         <template #default="{ row, index}">
-                            <div class="flex-col gap-10">
-                                <div class="flex-row align-c jc-c w h">
+                            <div class="flex-1 flex-col gap-10">
+                                <div class="flex-row align-c jc-c w h is-newline">
                                     <upload v-model="row.img" :limit="1" size="72"></upload>
                                     <div class="flex-col flex-1 jc-c gap-20">
                                         <el-form-item label="标题" class="mb-0" label-width="50">
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index 2e1611b6..c09ed187 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/src/components/model-nav-group/model-nav-group-styles.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="common-style-height">
         <el-form :model="form" label-width="80">
-            <card-container>
+            <card-container class="card-container">
                 <div class="mb-12">导航组</div>
                 <el-form-item label="数据间距">
                     <slider v-model="form.space"></slider>
@@ -11,7 +11,7 @@
                 </el-form-item>
             </card-container>
             <div class="divider-line"></div>
-            <card-container>
+            <card-container class="card-container">
                 <div class="mb-12">图片样式</div>
                 <el-form-item label="图片圆角">
                     <radius :value="form"></radius>
@@ -22,7 +22,7 @@
             </card-container>
             <div class="divider-line"></div>
             <template v-if="display_style_show">
-                <card-container>
+                <card-container class="card-container">
                     <div class="mb-12">轮播设置</div>
                     <el-form-item label="自动轮播">
                         <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
@@ -40,12 +40,12 @@
                     </el-form-item>
                 </card-container>
                 <div class="divider-line"></div>
-                <card-container>
+                <card-container class="card-container">
                     <carousel-indicator :value="form"></carousel-indicator>
                 </card-container>
                 <div class="divider-line"></div>
             </template>
-            <card-container>
+            <card-container class="card-container">
                 <div class="mb-12">标题样式</div>
                 <el-form-item label="标题颜色">
                     <color-picker v-model="form.title_color" default-color="#000000"></color-picker>
@@ -55,7 +55,7 @@
                 </el-form-item>
             </card-container>
             <div class="divider-line"></div>
-            <card-container>
+            <card-container class="card-container"> 
                 <div class="mb-12">数据样式</div>
                 <el-form-item label="内边距">
                     <padding :value="form.data_padding"></padding>
diff --git a/src/components/model-tabs-carousel/index.vue b/src/components/model-tabs-carousel/index.vue
index aacd5f1f..00e55689 100644
--- a/src/components/model-tabs-carousel/index.vue
+++ b/src/components/model-tabs-carousel/index.vue
@@ -10,7 +10,7 @@
             </div>
             <div class="oh" :style="carousel_container">
                 <div class="oh" :style="carousel_img_container">
-                    <model-carousel :value="value" :is-nest="true" @slide-change="slideChange"></model-carousel>
+                    <model-carousel :value="value" :is-common-style="false" @slide-change="slideChange"></model-carousel>
                 </div>
             </div>
         </div>
diff --git a/src/components/model-tabs-magic/index.vue b/src/components/model-tabs-magic/index.vue
index c8630a77..353763e9 100644
--- a/src/components/model-tabs-magic/index.vue
+++ b/src/components/model-tabs-magic/index.vue
@@ -8,12 +8,51 @@
                     <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
                 </div>
             </div>
-
+            <div :style="magic_container">
+                <div :style="magic_img_container">
+                    <!-- 轮播 -->
+                    <template v-if="tabs_magic_type === 'carousel'"> 
+                        <model-carousel :value="tabs_magic_value" :is-common-style="false" @slide-change="slideChange"></model-carousel>
+                    </template>
+                    <!-- 导航组 -->
+                    <template v-else-if="tabs_magic_type === 'nav_group'"> 
+                        <model-nav-group :value="tabs_magic_value" :is-common-style="false"></model-nav-group>
+                    </template>
+                    <!-- 自定义 -->
+                    <template v-else-if="tabs_magic_type === 'custom'"> 
+                        <model-custom :value="tabs_magic_value" :magic-scale="magic_scale" :is-common-style="false"></model-custom>
+                    </template>
+                    <!-- 商品魔方 -->
+                    <template v-else-if="tabs_magic_type === 'goods_magic'"> 
+                        <model-goods-magic :value="tabs_magic_value" :is-common-style="false"></model-goods-magic>
+                    </template>
+                    <!-- 图片魔方 -->
+                    <template v-else-if="tabs_magic_type === 'img_magic'"> 
+                        <model-img-magic :value="tabs_magic_value" :is-common-style="false"></model-img-magic>
+                    </template>
+                    <!-- 热区 -->
+                    <template v-else-if="tabs_magic_type === 'hot_zone'"> 
+                        <model-hot-zone :value="tabs_magic_value" :is-common-style="false"></model-hot-zone>
+                    </template>
+                    <!-- 文章列表 -->
+                    <template v-else-if="tabs_magic_type === 'article_list'"> 
+                        <model-article-list :value="tabs_magic_value" :is-common-style="false"></model-article-list>
+                    </template>
+                    <!-- 商品列表 -->
+                    <template v-else-if="tabs_magic_type === 'goods_list'"> 
+                        <model-goods-list :value="tabs_magic_value" :is-common-style="false"></model-goods-list>
+                    </template>
+                    <!-- 视频 -->
+                    <template v-else-if="tabs_magic_type === 'video'"> 
+                        <model-video :value="tabs_magic_value" :is-common-style="false"></model-video>
+                    </template>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer, box_shadow_computer, border_computer } from '@/utils';
+import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer, box_shadow_computer, border_computer, border_width } from '@/utils';
 import { cloneDeep, isEmpty } from 'lodash';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -35,8 +74,15 @@ const tabs_img_container = ref('');
 // 打开滑动固定开关之后，显示的样式
 const tabs_sliding_fixed_bg = ref('');
 const is_rotating_background = ref(false);
-watch(
-    props.value,
+// 魔方内容样式
+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;
@@ -60,53 +106,82 @@ watch(
         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 form = computed(() => props.value.content);
+// 图片魔方的缩放比例
+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 typewidth = 390 - content_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.value.common_style);
+    // 获得对应宽度的比例
+    magic_scale.value = typewidth / 390;
+});
+//#region 轮播切换时更新背景信息
 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 '';
-    // }
+    if (tabs_magic_type.value == 'carousel') {
+        const style = tabs_magic_value.value.content?.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(() => {
-    // const { carousel_img, style = {} } = form.value?.carousel_list[actived_index.value] || {};
-    // // 如果是自定义的图片 判断图片是否存在
-    // if (!isEmpty(carousel_img) && style?.background_type == 'carousel') {
-    //     // 如果是使用轮播图，判断轮播图是否存在
-    //     const data = {
-    //         background_img: carousel_img,
-    //         background_img_style: style?.background_img_style || '2',
-    //     }
-    //     return background_computer(data) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
-    // } else if (!isEmpty(style?.background_img)) {
-    //     return background_computer(style) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
-    // }
+    if (tabs_magic_type.value == 'carousel') {
+        console.log(tabs_magic_value.value);
+        const { carousel_img, style = {} } = tabs_magic_value.value.content?.carousel_list[actived_index.value] || {};
+        // 如果是自定义的图片 判断图片是否存在
+        if (!isEmpty(carousel_img) && style?.background_type == 'carousel') {
+            // 如果是使用轮播图，判断轮播图是否存在
+            const data = {
+                background_img: carousel_img,
+                background_img_style: style?.background_img_style || '2',
+            }
+            return background_computer(data) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
+        } else if (!isEmpty(style?.background_img)) {
+            return background_computer(style) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
+        }
+    }
     return '';
 });
+//#endregion
 </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 e3d752fa..61792352 100644
--- a/src/components/model-tabs-magic/model-tabs-magic-content.vue
+++ b/src/components/model-tabs-magic/model-tabs-magic-content.vue
@@ -313,5 +313,33 @@ watchEffect(() => {
             width: 8rem;
         }
     }
+    .card-background {
+        padding-left: 0.5rem;
+        .gap-16 {
+            gap: 0.5rem;
+        }
+        .card-container {
+            padding: 0rem !important;
+        }
+        .el-color-picker__trigger {
+            width: 5rem;
+        }
+        .el-color-picker__trigger .el-color-picker__color .el-color-picker__color-inner .el-icon {
+            right: -2rem;
+        }
+    }
+    .flex-row.is-newline {
+        flex-direction: column !important;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    .el-radio {
+        margin-right: 1rem;
+    }
+}
+@media screen and (max-width: 1560px) {
+    .tabs-magic-content-tabs {
+        width: 100%;
+    }
 }
 </style>
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 6f4d193a..2498cbb1 100644
--- a/src/components/model-tabs-magic/model-tabs-magic-styles.vue
+++ b/src/components/model-tabs-magic/model-tabs-magic-styles.vue
@@ -65,24 +65,22 @@
                 <el-form-item label="数据间距">
                     <slider v-model="form.data_spacing" :max="100"></slider>
                 </el-form-item>
-                <template v-if="!isCommonStyle">
-                    <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>
-                    <el-form-item label="圆角">
-                        <radius :value="form.tabs_radius"></radius>
-                    </el-form-item>
-                    <el-form-item label="外边距">
-                        <margin :value="form.tabs_margin"></margin>
-                    </el-form-item>
-                    <el-form-item label="内边距">
-                        <padding :value="form.tabs_padding"></padding>
-                    </el-form-item>
-                    <!-- 边框处理 -->
-                    <border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
-                    <!-- 阴影配置 -->
-                    <shadow-config v-model="form.tabs_content"></shadow-config>
-                </template>
+                <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>
+                <el-form-item label="圆角">
+                    <radius :value="form.tabs_radius"></radius>
+                </el-form-item>
+                <el-form-item label="外边距">
+                    <margin :value="form.tabs_margin"></margin>
+                </el-form-item>
+                <el-form-item label="内边距">
+                    <padding :value="form.tabs_padding"></padding>
+                </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.tabs_content"></shadow-config>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -97,11 +95,28 @@
                     <slider v-model="form.more_icon_size" :max="100"></slider>
                 </el-form-item>
             </card-container>
+            <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" />
+                </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>
-        <template v-if="isCommonStyle">
-            <div class="divider-line"></div>
-            <common-styles :value="form.common_style" :is-floating-up="false" @update:value="common_styles_update" />
-        </template>
+        <div class="divider-line"></div>
+        <common-styles :value="form.common_style" :is-floating-up="false" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -111,10 +126,6 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
-    isCommonStyle: {
-        type: Boolean,
-        default: true,
-    },
     content: {
         type: Object,
         default: () => {},
@@ -148,5 +159,10 @@ 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/components/model-video/index.vue b/src/components/model-video/index.vue
index b841e903..807cef41 100644
--- a/src/components/model-video/index.vue
+++ b/src/components/model-video/index.vue
@@ -34,6 +34,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    }
 });
 const video_src = ref(common_store.common.config.attachment_host + `/static/diy/images/components/model-video/video.png`);
 const style = ref('');
@@ -41,8 +45,7 @@ const style_container = ref('');
 const style_img_container = ref('');
 const video_img = ref('');
 const video = ref('');
-watch(
-    props.value,
+watch(() => props.value,
     (newVal, oldValue) => {
         const new_content = newVal?.content || {};
         const new_style = newVal?.style || {};
@@ -60,8 +63,10 @@ watch(
             video_ratio = `height: 220px;`;
         }
         style.value = video_ratio;
-        style_container.value = common_styles_computer(new_style.common_style);
-        style_img_container.value = common_img_computer(new_style.common_style);
+        if (props.isCommonStyle) {
+            style_container.value = common_styles_computer(new_style.common_style);
+            style_img_container.value = common_img_computer(new_style.common_style);
+        }
     },
     { immediate: true, deep: true }
 );
diff --git a/src/config/const/tabs-magic.ts b/src/config/const/tabs-magic.ts
index d365b6b0..5e3fb5b7 100644
--- a/src/config/const/tabs-magic.ts
+++ b/src/config/const/tabs-magic.ts
@@ -94,6 +94,14 @@ 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;
     };
 }
@@ -157,7 +165,16 @@ export const magic_config = {
     goods_magic: cloneDeep(defaultGoodsMagic),
     img_magic: cloneDeep(defaultImgMagic),
     hot_zone: cloneDeep(defaultHotZone),
-    custom: cloneDeep(defaultCustom),
+    custom:{
+        ...cloneDeep(defaultCustom),
+        style: {
+            ...cloneDeep(defaultCustom.style),
+             data_content_style: {
+                ...cloneDeep(defaultCustom.style.data_content_style),
+                color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
+            }
+        }
+    },
 }
 
 const defaultTabs: defaultTabs = {
@@ -337,6 +354,51 @@ 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,
     },