diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 34239060..2d2f03b5 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -47,7 +47,7 @@ const text_title = computed(() => {
 });
 
 const text_style = computed(() => {
-    let style = `font-size: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
+    let style = `font-size: ${ form.text_size }px;line-height: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
     if (form.text_weight == 'italic') {
         style += `font-style: italic`;
     } else if (form.text_weight == '500') {
diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
index b6d2b710..e3df2977 100644
--- a/src/components/model-data-magic/components/magic-carousel.vue
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -5,7 +5,7 @@
                 <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
             </template>
             <template v-else>
-                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
+                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="contentImgRadius"></product-list-show>
             </template>
         </el-carousel-item>
     </el-carousel>
@@ -17,18 +17,19 @@ interface Props {
     contentImgRadius: string;
     type: string;
     actived: number;
+    goodStyle?: any;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    goodStyle: {},
+});
+
+const form = computed(() => props.value);
 
-const form = ref(props.value);
 const emits = defineEmits(['carousel_change']);
 const carousel_change = (index: number) => {
     emits('carousel_change', index);
 };
-watchEffect(() => {
-    form.value = props.value;
-});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index 5df2c225..8b8d5b3b 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -10,8 +10,8 @@
                         <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying">
+                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
                             <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
@@ -29,14 +29,14 @@
                         <template v-else>
                             <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                         </template>
-                        <div v-if="isShow.includes('price')" class="price-suspension text-line-1">
+                        <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
                             {{ item.show_price_symbol }}{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 {{ item.show_price_unit }}
                             </template>
                         </div>
                     </div>
-                    <div v-if="isShow.includes('title')" class="text-line-1 size-14 shop-title tl w" style="overflow: inherit;">{{ item.title }}</div>
+                    <div v-if="isShow.includes('title')" class="text-line-1 size-14 shop-title tl w" style="overflow: inherit;" :style="goodStyle.goods_title_style">{{ item.title }}</div>
                 </div>
             </template>
             <template v-else>
@@ -48,8 +48,8 @@
                         <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying">
+                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
                             <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
@@ -71,8 +71,8 @@
                         <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying">
+                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
                             <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
@@ -98,6 +98,7 @@ interface Props {
     actived: number;
     isShow: Array<string>;
     chunkPadding: paddingStyle;
+    goodStyle: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -105,11 +106,8 @@ const props = withDefaults(defineProps<Props>(), {
     outerflex: 'row',
     flex: 'row',
 });
-const split_list = ref(props.value);
 
-watchEffect(() => {
-    split_list.value = props.value;
-})
+const split_list = computed(() => props.value || {});
 </script>
 
 <style lang="scss" scoped>
@@ -123,13 +121,10 @@ watchEffect(() => {
         width: 4rem !important;
     }
 }
-.identifying {
-    font-size: 1.4rem;
-    color: #EA3323;
-    .num {
-        font-size: 0.9rem;
-    }
+.identifying .num {
+    font-size: 0.9rem;
 }
+
 .price-suspension {
     width: calc(100% - 0.8rem);
     margin: 0 0.4rem;
@@ -148,7 +143,4 @@ watchEffect(() => {
 .half-width {
     width: 50%;
 }
-.shop-title {
-    line-height: 2rem;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index cdad8d91..1a2af617 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -40,6 +40,16 @@
         </template>
     </card-container>
     <div class="bg-f5 divider-line" />
+    <card-container v-if="tabs_content.data_type === 'goods'">
+        <div class="mb-12">商品样式</div>
+        <el-form-item label="商品名称">
+            <color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
+        </el-form-item>
+        <el-form-item label="商品价格">
+            <color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
+        </el-form-item>
+    </card-container>
+    <div class="bg-f5 divider-line" />
     <card-container>
         <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
     </card-container>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 20bd246c..52c5207a 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -6,7 +6,7 @@
                 <template v-if="form.style_actived == 7">
                     <div class="flex-row align-c jc-c style-size flex-wrap">
                         <div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
-                            <div class="w h" :style="`${ item.data_style.background_style }`">
+                            <div class="w h" :style="`${ item.data_style.background_img_style }`">
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
                                         <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
@@ -14,7 +14,7 @@
                                             <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                         </div>
                                         <div class="w h">
-                                            <magic-carousel :value="item" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                            <magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                         </div>
                                     </div>
                                 </template>
@@ -37,7 +37,7 @@
                 </template>
                 <template v-else>
                     <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
-                        <div class="w h" :style="`${ item.data_style.background_style }`">
+                        <div class="w h" :style="`${ item.data_style.background_img_style }`">
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div :class="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
                                     <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
@@ -45,7 +45,7 @@
                                         <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h">
-                                        <magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                        <magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                     </div>
                                 </div>
                             </template>
@@ -239,12 +239,7 @@ const commodity_list = (list: any[], num: number) => {
         return [{ split_list: Array(num).fill(default_list)}];
     }
 }
-const background_style = (item: any) => {
-    return gradient_computer(item);
-};
-const background_img_style = (item: any) => {
-    return background_computer(item);
-};
+
 const old_list = ref<any>({});
 const data_magic_list = ref<data_magic[]>([]);
 watch(props.value.content, (val) => {
@@ -257,8 +252,11 @@ watch(props.value.content, (val) => {
         item.actived_index = 0;
         // 指示器样式
         data_style.indicator_styles = indicator_style(data_style);
-        data_style.background_style = background_style(data_style);
-        data_style.background_img_style = background_img_style(data_style);
+        data_style.background_style = gradient_computer(data_style);
+        data_style.background_img_style = background_computer(data_style);
+        // 商品名称和价格样式
+        data_style.goods_title_style = goods_trends_config(item.data_style, 'title');
+        data_style.goods_price_style = goods_trends_config(item.data_style, 'price');
 
         const { is_roll, rotation_direction, interval_time } = data_style;
         const { goods_list, images_list } = data_content;
@@ -301,6 +299,9 @@ const carousel_change = (index: number, key: number) => {
     }
 }
 // 根据传递的参数，从对象中取值
+const goods_trends_config = (style: any, key: string) => {
+    return text_style(style[`goods_${key}_typeface`], style[`goods_${key}_size`], style[`goods_${key}_color`]);
+}
 const trends_config = (style: any, key: string) => {
     return text_style(style[`${key}_typeface`], style[`${key}_size`], style[`${key}_color`]);
 }
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index b65cbb6a..e3705521 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -70,6 +70,12 @@ const data_style = {
     subtitle_color: '#FF852A',
     subtitle_typeface: '400',
     subtitle_size: 14,
+    goods_title_typeface: '500',
+    goods_title_size: 14,    
+    goods_title_color: "#333333",
+    goods_price_typeface: '500',
+    goods_price_size: 18,
+    goods_price_color: "#EA3323;",
     chunk_padding: {
         padding: 0,
         padding_top: 20, 
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index c823b1a3..0837cd6f 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -107,7 +107,7 @@ const up_slide_style = computed(() => {
 const up_slide_img_style = computed(() => {
     let style = ``;
     if (props.scollTop > 0) {
-        const { up_slide_background_img, up_slide_background_img_style } = new_style.value;
+        const { up_slide_background_img = '', up_slide_background_img_style = '' } = new_style.value;
         // 背景图
         const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
         style += background_computer(back);
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 5bc16244..8a0b4258 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -19,7 +19,7 @@
                         </template>
                     </div>
                 </el-form-item>
-                <el-form-item label="功能按钮">
+                <el-form-item label="状态栏">
                     <el-radio-group v-model="form.function_buttons_type">
                         <el-radio value="0">黑色</el-radio>
                         <el-radio value="1">白色</el-radio>
@@ -41,7 +41,7 @@
                 </el-form-item>
                 <el-form-item label="上滑背景">
                     <div class="w h flex-col gap-10">
-                        <mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
+                        <mult-color-picker :value="form?.up_slide_background_color_list || []" :type="form?.up_slide_background_direction || '180deg'" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
                         <div class="flex-row jc-sb align-c">
                             <div class="size-12">背景图</div>
                             <bg-btn-style v-model="form.up_slide_background_img_style"></bg-btn-style>
@@ -106,6 +106,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, search_content } = toRefs(state);
+console.log(form);
 
 const header_background_type_change_event = (val: any) => {
     if (val === 'color_image') {
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 812aee82..1ae50ce3 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -181,16 +181,19 @@ watchEffect(() => {
 
 // 已选组件逻辑处理
 const drawer_selected = ref(false);
+const is_show_drawer = ref(true);
 watchEffect(() => {
-    if (diy_data.value.length > 0 || tabs_data.value.length > 0) {
+    if ((diy_data.value.length > 0 || tabs_data.value.length > 0) && is_show_drawer.value) {
         drawer_selected.value = true;
     } else {
         drawer_selected.value = false;
     }
 });
 const toggle_drawer = () => {
+    is_show_drawer.value = !is_show_drawer.value;
     drawer_selected.value = !drawer_selected.value;
 };
+
 // 父组件调用的方法
 const emits = defineEmits(['rightUpdate', 'import', 'export', 'clear']);
 const activeNames = reactive(['base', 'plugins', 'tool']);
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 686b090f..548c3845 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -133,7 +133,14 @@ const init = () => {
     if (get_id()) {
         DiyAPI.getInit({ id: get_id() }).then((res: any) => {
             if (res.data) {
-                form.value = form_data_transfor_diy_data(res.data);
+                let data = form_data_transfor_diy_data(res.data);
+                // 默认数据合并
+                data.header.com_data = default_merge(data.header.com_data, 'header_nav');
+                data.footer.com_data = default_merge(data.footer.com_data, 'footer_nav');
+                data.diy_data = data_merge(data.diy_data);
+                data.tabs_data = data_merge(data.tabs_data);
+
+                form.value = data;
             } else {
                 is_empty.value = true;
             }
@@ -146,6 +153,19 @@ const init = () => {
         loading_event();
     }
 };
+// 数据合并
+const data_merge = (list: string[]) => {
+    list.forEach((item: any) => {
+        item.com_data = default_merge(item.com_data, item.key);;
+    });
+    return list;
+};
+// 浅层数据合并
+const default_merge = (data: any, key: string) => {
+    data.style = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).style, data.style);
+    data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]), data.content);
+    return data;
+};
 
 // 初始化公共数据
 const common_init = () => {