diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 497079d4..d1756ef2 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tabs flex-row oh">
-        <template v-for="(item, index) in tabs.content.tabs_list" :key="index">
+        <template v-for="(item, index) in form.tabs_list" :key="index">
             <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
                 <template v-if="!isEmpty(item.img)">
                     <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
@@ -8,10 +8,10 @@
                 <template v-else>
                     <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                 </template>
-                <div class="title" :style="index == 0 ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</div>
-                <div class="desc">{{ item.desc }}</div>
-                <icon name="checked-1" class="icon"></icon>
-                <div class="bottom_line" :style="tabs_theme_style.tabs_check"></div>
+                <div class="title" :style="title_style(index)">{{ item.title }}</div>
+                <div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
+                <icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
+                <div class="bottom_line" :style="tabs_check"></div>
             </div>
         </template>
     </div>
@@ -26,40 +26,72 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-const tabs = ref(props.value);
+// const tabs = ref(props.value);
+// 用于页面判断显示
+const state = reactive({
+    form: props.value.content,
+    new_style: props.value.style,
+});
+// 如果需要解构，确保使用toRefs
+const { form, new_style } = toRefs(state);
+
+// 选中的值
+const tabs_theme_index = computed(() => form.value.tabs_theme);
+//选中的样式
 const tabs_theme = computed(() => {
     let tabs_theme = '';
-    if (tabs.value.content.tabs_theme == '1') {
+    if (form.value.tabs_theme == '1') {
         tabs_theme = 'tabs-style-2';
-    } else if (tabs.value.content.tabs_theme == '2') {
+    } else if (form.value.tabs_theme == '2') {
         tabs_theme = 'tabs-style-3';
-    } else if (tabs.value.content.tabs_theme == '3') {
+    } else if (form.value.tabs_theme == '3') {
         tabs_theme = 'tabs-style-4';
-    } else if (tabs.value.content.tabs_theme == '4') {
+    } else if (form.value.tabs_theme == '4') {
         tabs_theme = 'tabs-style-5';
     } else {
         tabs_theme = 'tabs-style-1';
     }
     return tabs_theme;
 });
-const tabs_theme_style = computed(() => {
+// 选中的背景渐变色样式
+const tabs_check = computed(() => {
     const new_gradient_params = {
-        color_list: tabs.value.style.tabs_checked,
-        direction: tabs.value.style.tabs_direction,
+        color_list: new_style.value.tabs_checked,
+        direction: new_style.value.tabs_direction,
     };
-    const new_style = {
-        tabs_check: gradient_computer(new_gradient_params),
-        tabs_title_checked: 'font-weight:' + tabs.value.style.tabs_weight_checked + ';' + 'font-size:' + tabs.value.style.tabs_size_checked + 'px;' + 'color:' + tabs.value.style.tabs_color_checked,
-        tabs_title: 'font-weight:' + tabs.value.style.tabs_weight + ';' + 'font-size:' + tabs.value.style.tabs_size + 'px;' + 'color:' + tabs.value.style.tabs_color,
-    };
-    return new_style;
+    return gradient_computer(new_gradient_params);
 });
+
+// 选中的内部样式
+const tabs_theme_style = computed(() => {
+    return {
+        tabs_title_checked: `font-weight: ${ new_style.value.tabs_weight_checked };font-size: ${ new_style.value.tabs_size_checked}px;color:${ new_style.value.tabs_color_checked };`,
+        tabs_title: `font-weight: ${ new_style.value.tabs_weight };font-size: ${ new_style.value.tabs_size}px;color:${ new_style.value.tabs_color };`,
+    };
+});
+
+const title_style = (index: number) => {
+    // 默认是未选中的状态
+    let style = `${ tabs_theme_style.value.tabs_title }`;
+    if (index == 0) {
+        let checked_style = tabs_theme_style.value.tabs_title_checked;
+        if (['2', '4'].includes(tabs_theme_index.value)) {
+            checked_style += tabs_check.value;
+        }
+        style = checked_style;
+    }
+    return style;
+};
+// icon的渐变色处理
+const icon_tabs_check = () => {
+    return `${ tabs_check.value };line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
+}
 </script>
 <style lang="scss" scoped>
 .tabs {
     max-width: 39rem;
     .item {
-        padding: 0.5rem 0;
+        padding: 0 0 0.5rem 0;
         margin: 0 1rem;
         position: relative;
         &:first-of-type {
@@ -115,7 +147,7 @@ const tabs_theme_style = computed(() => {
         &.tabs-style-2 {
             &.active {
                 .desc {
-                    background: red;
+                    background: #FF5E5E;
                     color: #fff;
                 }
             }
@@ -128,7 +160,7 @@ const tabs_theme_style = computed(() => {
         &.tabs-style-3 {
             &.active {
                 .title {
-                    background: red;
+                    background: #FF2222;
                     border-radius: 2rem;
                     padding: 0.2rem 1.2rem;
                     color: #fff;
@@ -139,10 +171,10 @@ const tabs_theme_style = computed(() => {
             padding-bottom: 1.8rem;
             &.active {
                 .title {
-                    color: red;
+                    color: #FF2222;
                 }
                 .icon {
-                    color: red;
+                    color: #FF2222;
                     display: block;
                 }
             }
@@ -152,13 +184,13 @@ const tabs_theme_style = computed(() => {
             &.active {
                 .title {
                     font-size: 1.1rem;
-                    background: red;
+                    background: #FF5E5E;
                     border-radius: 2rem;
                     padding: 0.2rem 0.7rem;
                     color: #fff;
                 }
                 .img {
-                    border-color: red;
+                    border-color: #FF5E5E;
                 }
             }
             .img {
diff --git a/src/components/common/text-size-type/index.vue b/src/components/common/text-size-type/index.vue
index cb43df99..18e57a9f 100644
--- a/src/components/common/text-size-type/index.vue
+++ b/src/components/common/text-size-type/index.vue
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 const typeface = defineModel('typeface', {
     type: String,
-    default: 'normal'
+    default: '400'
 });
 const size = defineModel('size', {
     type: Number,
@@ -19,7 +19,7 @@ const size = defineModel('size', {
 
 const font_weight = [
     { name: '加粗', value: '500' },
-    { name: '正常', value: 'normal' },
+    { name: '正常', value: '400' },
 ];
 </script>
 
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index f1f1c2a0..43b4343c 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡风格">
-                    <el-radio-group v-model="form.tabs_theme">
+                    <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
@@ -84,7 +84,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from '@/utils';
+import { get_math, tabs_style } from '@/utils';
 import ArticleAPI from '@/api/article';
 import { articleStore } from '@/store/article';
 const article_store = articleStore();
@@ -93,6 +93,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    }
 });
 const form = reactive(props.value);
 const base_list = reactive({
@@ -210,6 +214,11 @@ const url_value_dialog_call_back = (item: any[]) => {
         });
     });
 };
+
+const styles = reactive(props.tabStyle);
+const tabs_theme_change = (val: string | number | boolean | undefined):void => {
+    styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
+};
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-article-tabs/model-article-tabs-setting.vue b/src/components/model-article-tabs/model-article-tabs-setting.vue
index fd0beb59..4a3db026 100644
--- a/src/components/model-article-tabs/model-article-tabs-setting.vue
+++ b/src/components/model-article-tabs/model-article-tabs-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="setting-content">
         <template v-if="type == '1'">
-            <model-article-tabs-content :value="value.content"></model-article-tabs-content>
+            <model-article-tabs-content :value="value.content" :tab-style="value.style"></model-article-tabs-content>
         </template>
         <template v-else-if="type == '2'">
             <model-article-tabs-styles :value="value.style" :content="value.content"></model-article-tabs-styles>
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index 9762d32e..0a3ea543 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -7,26 +7,16 @@
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
                 <el-form-item label="选中文字">
-                    <el-radio-group v-model="form.tabs_weight_checked">
-                        <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="字号">
-                    <slider v-model="form.tabs_size_checked"></slider>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color_checked"></color-picker>
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
+                    </div>
                 </el-form-item>
                 <el-form-item label="未选文字">
-                    <el-radio-group v-model="form.tabs_weight">
-                        <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="字号">
-                    <slider v-model="form.tabs_size"></slider>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color"></color-picker>
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color" default-color="rgba(51,51,51,1)"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
+                    </div>
                 </el-form-item>
             </card-container>
             <card-container class="mb-8">
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 8b7e90f9..b9acf91c 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -116,7 +116,7 @@ const seat_list = computed(() => {
     }
 })
 // 轮播图自适应高度 
-const newHeight = computed(() => form.value.height + 'px');
+const newHeight = computed(() => new_style.value.height + 'px');
 // 轮播图样式
 const interval_type = ref('');
 // 轮播图key值
@@ -139,8 +139,8 @@ const interval_types = computed(() => interval_type.value == 'card' );
 // 监听参数的使用
 watchEffect(() => {
     //#region 轮播图设置
-    const time = (new_style.value?.interval_time || 2) * 1000;
-    const display_is_roll = new_style.value.is_roll;
+    const time = (form.value?.interval_time || 2) * 1000;
+    const display_is_roll = form.value.is_roll;
     const type = form.value.carousel_type;
     const carousel_length = form.value.carousel_list.length;
     // 判断跟历史的是否相等，不相等更新组件时间
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index 2180ac9f..589f8787 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/src/components/model-carousel/model-carousel-content.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="auxiliary-line common-content-height">
-        <el-form :model="form" label-width="60">
+        <el-form :model="form" label-width="70">
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="样式设置">
@@ -16,8 +16,11 @@
                         <el-radio value="cover">等比剪切</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item label="高度设置">
-                    <slider v-model="form.height" :max="1000"></slider>
+                <el-form-item label="自动轮播">
+                    <el-switch v-model="form.is_roll" />
+                </el-form-item>
+                <el-form-item label="间隔时间">
+                    <slider v-model="form.interval_time" :max="100"></slider>
                 </el-form-item>
             </card-container>
             <card-container class="mb-8">
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index 520be12d..ea16f946 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -9,11 +9,8 @@
             </card-container>
             <card-container class="mb-8">
                 <div class="mb-12">轮播设置</div>
-                <el-form-item label="自动轮播">
-                    <el-switch v-model="form.is_roll" />
-                </el-form-item>
-                <el-form-item label="间隔时间">
-                    <slider v-model="form.interval_time" :max="100"></slider>
+                <el-form-item label="高度设置">
+                    <slider v-model="form.height" :max="1000"></slider>
                 </el-form-item>
             </card-container>
             <card-container class="mb-8">
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 73c39977..b0ea362f 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -9,7 +9,7 @@
                     </el-select>
                     <div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
                         <div class="re flex align-c">
-                            <image-empty v-model="form.source_list[img_key]" style="width: 10rem; height: 10rem;"></image-empty>
+                            <image-empty v-model="form.source_list[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
                             <div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
                         </div>
                         <div class="flex-1 size-14 text-line-3">{{ form.source_list.title ||  form.source_list.name }}</div>
@@ -40,7 +40,7 @@
                 </div>
             </div>
         </Dialog>
-        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="dialog_type" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[ form.data_source ]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -81,6 +81,8 @@ const getCustominit = () => {
         const { data_source } = res.data;
         options.value = data_source;
         data_source_store.set_data_source(data_source);
+        // 数据处理
+        processing_data(form.data_source);
     });
 }
 
@@ -95,6 +97,7 @@ onBeforeMount(() => {
     }
 });
 // 处理显示的图片和传递到下去的数据结构
+const model_data_source = ref<data_list[]>([])
 const processing_data = (key: string) => {
     const list = options.value.filter(item => item.type == key);
     if (list.length > 0) {
@@ -103,14 +106,11 @@ const processing_data = (key: string) => {
         const field_list = list[0].data.filter(item => item.type == 'images');
         // 取出图片的key
         if (field_list.length > 0) {
-            img_key.value = field_list[0].field;
+            form.img_key = field_list[0].field;
         }
     } else {
         model_data_source.value = [];
     }
-    if (!isEmpty(key)) {
-        dialog_type.value = [ key ];
-    }
 };
 //#endregion
 //#region 自定义编辑的内部处理逻辑
@@ -152,9 +152,6 @@ const accomplish = () => {
 };
 //#endregion
 //#region 数据源更新逻辑处理
-const model_data_source = ref<data_list[]>([])
-const dialog_type = ref<string[]>([]);
-const img_key = ref('');
 // 打开弹出框
 const url_value_dialog_visible = ref(false);
 const changeDataSource = (key: string) => {
@@ -181,7 +178,7 @@ const url_value_close = () => {
 }
 // 替换数据
 const replace_data = () => {
-    if (!isEmpty(dialog_type.value)) {
+    if (!isEmpty(form.data_source)) {
         url_value_dialog_visible.value = true;
     }
 }
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index c965a0ca..75af1c91 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -149,6 +149,57 @@ const percentage = (num: number) => {
 };
 //#endregion
 //#region 组装页面显示的数据
+// 指示器的样式
+const indicator_style = (item: any) => {
+    let styles = '';
+    if (!isEmpty(item.indicator_radius)) {
+        styles += radius_computer(item.indicator_radius)
+    }
+    const size = item?.indicator_size || 5;
+    if (item.indicator_style == 'num') {
+        styles += `color: ${item?.color || '#DDDDDD'};`;
+        styles += `font-size: ${size}px;`;
+    } else if (item.indicator_style == 'elliptic') {
+        styles += `background: ${item?.color || '#DDDDDD'};`;
+        styles += `width: ${size * 3}px; height: ${size}px;`;
+    } else {
+        styles += `background: ${item?.color || '#DDDDDD'};`;
+        styles += `width: ${size}px; height: ${size}px;`;
+    }
+    return styles;
+};
+const background_style = (item: any) => {
+    return gradient_computer(item) + background_computer(item);
+};
+const style_actived_color = (item: any, index: number) => {
+   return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
+}
+/*
+** 组装产品的数据
+** @param {Array} list 商品列表
+** @param {Number} num 显示数量
+** @return {Array}
+*/
+const commodity_list = (list: any[], num: number) => {
+    if (list.length > 0) {
+        // 深拷贝一下，确保不会出现问题
+        const goods_list = cloneDeep(list).map((item: any) => ({
+            ...item.data,
+            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+            new_cover: item.new_cover,
+        }));
+        // 存储数据显示
+        let nav_list = [];
+        // 拆分的数量
+        const split_num = Math.ceil(goods_list.length / num);
+        for (let i = 0; i < split_num; i++) {
+            nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
+        }
+        return nav_list;
+    } else {
+        return [];
+    }
+}
 const old_list = ref<any>({});
 const data_magic_list = ref<data_magic[]>([]);
 watch(props.value.content, (val) => {
@@ -195,33 +246,7 @@ watch(props.value.content, (val) => {
         }
     });
     data_magic_list.value = data;
-})
-
-const background_style = (item: any) => {
-    return gradient_computer(item) + background_computer(item);
-};
-// 指示器的样式
-const indicator_style = (item: any) => {
-    let indicator_styles = '';
-    if (!isEmpty(item.indicator_radius)) {
-        indicator_styles += radius_computer(item.indicator_radius)
-    }
-    const size = item?.indicator_size || 5;
-    if (item.indicator_style == 'num') {
-        indicator_styles += `color: ${item?.color || '#DDDDDD'};`;
-        indicator_styles += `font-size: ${size}px;`;
-    } else if (item.indicator_style == 'elliptic') {
-        indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
-    } else {
-        indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size}px; height: ${size}px;`;
-    }
-    return indicator_styles;
-};
-const style_actived_color = (item: any, index: number) => {
-   return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
-}
+}, {immediate: true, deep: true})
 //#endregion
 const carousel_change = (index: number, key: number) => {
     if (data_magic_list.value[key]) {
@@ -235,32 +260,7 @@ const trends_config = (style: any, key: string) => {
 const text_style = (typeface: string, size: number, color: string) => {
     return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
 } 
-/*
-** 组装产品的数据
-** @param {Array} list 商品列表
-** @param {Number} num 显示数量
-** @return {Array}
-*/
-const commodity_list = (list: any[], num: number) => {
-    if (list.length > 0) {
-        // 深拷贝一下，确保不会出现问题
-        const goods_list = cloneDeep(list).map((item: any) => ({
-            ...item.data,
-            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
-            new_cover: item.new_cover,
-        }));
-        // 存储数据显示
-        let nav_list = [];
-        // 拆分的数量
-        const split_num = Math.ceil(goods_list.length / num);
-        for (let i = 0; i < split_num; i++) {
-            nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
-        }
-        return nav_list;
-    } else {
-        return [];
-    }
-}
+
 // 不属于第9个，并且第9个的第一个和第二个
 const spacing_processing = (index: number) => {
     return form.value.style_actived !== 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
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 1b62c20a..641a8071 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="auxiliary-line common-content-height">
-        <el-form :model="form" label-width="60">
+        <el-form :model="form" label-width="80">
             <card-container class="mb-8">
                 <div class="mb-12">展示风格</div>
                 <el-form-item label="选择风格">
@@ -63,10 +63,10 @@ const data_style = {
     rotation_direction: 'horizontal',
     interval_time: 2,
     heading_color: '#000',
-    heading_typeface: 'normal',
+    heading_typeface: '400',
     heading_size: 20,
     subtitle_color: '#FF852A',
-    subtitle_typeface: 'normal',
+    subtitle_typeface: '400',
     subtitle_size: 14,
     chunk_padding: {
         padding: 0,
diff --git a/src/components/model-data-magic/model-data-magic-styles.vue b/src/components/model-data-magic/model-data-magic-styles.vue
index cfc04e93..8e430ebe 100644
--- a/src/components/model-data-magic/model-data-magic-styles.vue
+++ b/src/components/model-data-magic/model-data-magic-styles.vue
@@ -2,8 +2,8 @@
     <div class="w">
         <el-form :model="form" label-width="70">
             <card-container class="mb-8">
-                <div class="mb-12">图片魔方</div>
-                <el-form-item label="图片间距">
+                <div class="mb-12">数据魔方</div>
+                <el-form-item label="数据间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
                 </el-form-item>
                 <el-form-item label="数据圆角">
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 27987794..8697b3e9 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -2,8 +2,8 @@
     <div :style="style_container">
         <el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll" @change="carousel_change">
             <el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
-                <div ref="bannerImg" class="flex flex-wrap">
-                    <div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c mt-12">
+                <div ref="bannerImg" class="flex flex-wrap gap-x-10">
+                    <div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c">
                         <div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
                             <image-empty v-model="item1.nav_image[0]" :style="img_style"></image-empty>
                         </div>
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index 268efd97..3b456ae9 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -20,9 +20,7 @@
             <div class="news-card flex-col gap-10">
                 <div class="flex-row w jc-sb">
                     <template v-if="form.title_type == 'img'">
-                        <div v-if="!isEmpty(form.img_src)" >
-                            <image-empty v-model="form.img_src[0]" :style="img_style"></image-empty>
-                        </div>
+                        <image-empty v-model="form.img_src[0]" :style="img_style" error-img-style="width:1.6rem;height:1.6rem;"></image-empty>
                     </template>
                     <template v-else>
                         <div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div>
@@ -90,7 +88,9 @@ const notice_list = computed(() => {
 // 内容参数的集合
 watchEffect(() => {
     //#region 标题设置
-    if (!isEmpty(form.value.img_src)) {
+    if (form.value.notice_style == 'card') {
+        img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
+    } else if (!isEmpty(form.value.img_src)) {
         img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
     }
     //#endregion
@@ -141,6 +141,10 @@ watchEffect(() => {
 .one3 {
     color: #FFC300;
 }
+.two-style {
+    width: 2.4rem;
+    height: 2.4rem;
+}
 .break {
     word-break: break-word;
     overflow-wrap: break-word;
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 749ebcbc..3877ff98 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -22,7 +22,7 @@
                     <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
                         <div class="flex-col gap-10 top-title">
                             <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
-                            <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5">
+                            <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
                                 <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
                             </div>
                         </div>
@@ -151,13 +151,36 @@ const default_list = {
     title: '测试商品标题',
     min_original_price: '41.2',
     show_original_price_symbol: '￥',
+    show_original_price_unit: '/ 台',
     min_price: '51',
     show_price_symbol: '￥',
-    show_price_unit: '',
+    show_price_unit: '/ 台',
     sales_count: '1000',
     images: '',
     new_cover: [],
-    plugins_view_icon_data: []
+    plugins_view_icon_data: [
+        {
+            name: '满减活动',
+            bg_color: '#EA3323',
+            br_color: '',
+            color: '#fff',
+            url: ''
+        },
+        {
+            name: '包邮',
+            bg_color: '',
+            br_color: '#EA3323',
+            color: '#EA3323',
+            url: ''
+        },
+        {
+            name: '领劵',
+            bg_color: '',
+            br_color: '#EA9223',
+            color: '#EA9223 ',
+            url: ''
+        }
+    ]
 };
 const list = ref<data_list[]>([]);
 
@@ -331,6 +354,8 @@ const icon_style = (item: { bg_color: string; color: string; br_color: string; }
     let style = `background: ${item.bg_color};color: ${item.color};`;
     if (!isEmpty(item.br_color)) {
         style += `border: 1px solid ${item.br_color};`
+    } else {
+        style += `border: 1px solid ${item.bg_color};`
     }
     return style;
 }
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index bc884280..afd2f40c 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡风格">
-                    <el-radio-group v-model="form.tabs_style">
+                    <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
@@ -83,7 +83,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from '@/utils';
+import { get_math, tabs_style } from '@/utils';
 import ShopAPI from '@/api/shop';
 import { shopStore } from '@/store';
 const shop_store = shopStore();
@@ -93,12 +93,17 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    }
 });
 const state = reactive({
     form: props.value,
+    styles: props.tabStyle,
 });
 // 如果需要解构，确保使用toRefs
-const { form } = toRefs(state);
+const { form, styles } = toRefs(state);
 
 const base_list = reactive({
     tabs_style_list: [
@@ -217,6 +222,10 @@ const url_value_dialog_call_back = (item: any[]) => {
         });
     });
 };
+
+const tabs_theme_change = (val: string | number | boolean | undefined):void => {
+    styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
+};
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
     form.value.theme = val;
diff --git a/src/components/model-shop-tabs/model-shop-tabs-setting.vue b/src/components/model-shop-tabs/model-shop-tabs-setting.vue
index 499a767a..a06a8e75 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-setting.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-shop-tabs-content :value="value.content"></model-shop-tabs-content>
+            <model-shop-tabs-content :value="value.content" :tab-style="value.style"></model-shop-tabs-content>
         </template>
         <template v-if="type == '2'">
             <model-shop-tabs-styles :value="value.style" :content="value.content"></model-shop-tabs-styles>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index 4e07a592..5b1a6fe0 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -7,16 +7,16 @@
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
                 <el-form-item label="选中文字">
-                    <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
+                    </div>
                 </el-form-item>
                 <el-form-item label="未选文字">
-                    <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color" default-color="rgba(51,51,51,1)"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
+                    </div>
                 </el-form-item>
             </card-container>
             <card-container class="mb-8">
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index 885a4d1d..df929db7 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
-                    <el-radio-group v-model="form.tabs_style" class="ml-4">
+                    <el-radio-group v-model="form.tabs_theme" class="ml-4" @change="tabs_theme_change">
                         <el-radio value="0">样式一</el-radio>
                         <el-radio value="2">样式二</el-radio>
                         <el-radio value="3">样式三</el-radio>
@@ -44,19 +44,24 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from '@/utils';
+import { get_math, tabs_style } from '@/utils';
 
 const props = defineProps({
     value: {
         type: Object,
         default: () => {},
     },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    }
 });
 
 const state = reactive({
-    form: props.value
+    form: props.value,
+    styles: props.tabStyle
 });
-const { form } = toRefs(state);
+const { form, styles } = toRefs(state);
 const add = () => {
     form.value.tabs_list.push({
         id: get_math(),
@@ -75,6 +80,9 @@ const remove = (index: number) => {
 const on_sort = (new_list: nav_group[]) => {
     form.value.tabs_list = new_list;
 }
+const tabs_theme_change = (val: string | number | boolean | undefined):void => {
+    styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
+};
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/components/model-tabs/model-tabs-setting.vue b/src/components/model-tabs/model-tabs-setting.vue
index 891442c5..f68cc4c2 100644
--- a/src/components/model-tabs/model-tabs-setting.vue
+++ b/src/components/model-tabs/model-tabs-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="setting-content">
         <template v-if="type == '1'">
-            <model-tabs-content :value="value.content"></model-tabs-content>
+            <model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
         </template>
         <template v-if="type == '2'">
             <model-tabs-styles :value="value.style"></model-tabs-styles>
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index 8eb5a99b..95b39348 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -6,17 +6,17 @@
                 <el-form-item label="选中装饰">
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
-                <el-form-item label="选中文字">
-                    <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
+                <el-form-item label="选中文字" class="">
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
+                    </div>
                 </el-form-item>
                 <el-form-item label="未选文字">
-                    <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color" default-color="rgba(51,51,51,1)"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
+                    </div>
                 </el-form-item>
             </card-container>
         </el-form>
diff --git a/src/layout/components/main/default/article-tabs.ts b/src/layout/components/main/default/article-tabs.ts
index c76881a3..ed4c8c72 100644
--- a/src/layout/components/main/default/article-tabs.ts
+++ b/src/layout/components/main/default/article-tabs.ts
@@ -117,7 +117,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
         article_spacing: 10, // 文章间距
         article_width: 155, // 文章宽度
         article_height: 155, // 文章宽度
-        common_style: { ...defaultCommon, padding_left: 10, padding_right: 10, padding_bottom: 10 },
+        common_style: { ...defaultCommon, padding:10, padding_top:10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
     },
 };
 
diff --git a/src/layout/components/main/default/carousel.ts b/src/layout/components/main/default/carousel.ts
index afeaea46..324ef52d 100644
--- a/src/layout/components/main/default/carousel.ts
+++ b/src/layout/components/main/default/carousel.ts
@@ -10,7 +10,8 @@ interface defaultSearch {
         carousel_type: string;
         carousel_list: carousel_list[];
         img_fit: string,
-        height: number,
+        is_roll: boolean;
+        interval_time: number;
     };
     style: {
         radius: number;
@@ -19,8 +20,7 @@ interface defaultSearch {
         radius_bottom_left: number;
         radius_bottom_right: number;
         is_show: boolean;
-        is_roll: boolean;
-        interval_time: number;
+        height: number,
         indicator_style: string;
         indicator_location: string;
         indicator_size: number;
@@ -34,7 +34,8 @@ const defaultSearch: defaultSearch = {
     content: {
         carousel_type: 'inherit',
         img_fit: 'contain',
-        height: 300,
+        is_roll: true,
+        interval_time: 2,
         carousel_list: [
             {
                 carousel_img: [],
@@ -57,8 +58,7 @@ const defaultSearch: defaultSearch = {
         radius_bottom_left: 0,
         radius_bottom_right: 0,
         is_show: true,
-        is_roll: true,
-        interval_time: 2,
+        height: 300,
         indicator_style: 'dot',
         indicator_location: 'center',
         indicator_size: 5,
diff --git a/src/layout/components/main/default/custom.ts b/src/layout/components/main/default/custom.ts
index a3c330bd..7dab387a 100644
--- a/src/layout/components/main/default/custom.ts
+++ b/src/layout/components/main/default/custom.ts
@@ -3,6 +3,7 @@ import defaultCommon from "./index";
 interface defaultSearch {
     content: {
         height: number;
+        img_key: string;
         data_source: string;
         source_list: string[];
         custom_list: string[];
@@ -14,6 +15,7 @@ interface defaultSearch {
 const defaultSearch: defaultSearch = {
     content: {
         height: 390,
+        img_key: '',
         source_list: [],
         data_source:'',
         custom_list: []
diff --git a/src/layout/components/main/default/notice.ts b/src/layout/components/main/default/notice.ts
index 8dec7eb4..ff65e7e5 100644
--- a/src/layout/components/main/default/notice.ts
+++ b/src/layout/components/main/default/notice.ts
@@ -54,8 +54,8 @@ const defaultSearch: defaultSearch = {
     },
     style: {
         news_color: '#000',
-        news_typeface: 'normal',
-        news_size: 15,
+        news_typeface: '400',
+        news_size: 12,
         topic_color_list: [
             {
                 color: '',
@@ -67,8 +67,8 @@ const defaultSearch: defaultSearch = {
             },
         ],
         topic_color: '#000',
-        topic_typeface: 'normal',
-        topic_size: 15,
+        topic_typeface: '400',
+        topic_size: 14,
         topic_width: 24,
         topic_height: 24,
         button_color: '#999',
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index d499526b..766d2217 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -70,44 +70,44 @@ const defaultProductList: DefaultProductList = {
             padding_right: 10,
         },
         shop_img_radius: {
-            radius: 0,
-            radius_top_left: 0,
-            radius_top_right: 0,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
-        },
-        shop_radius: {
-            radius: 0,
+            radius: 4,
             radius_top_left: 4,
             radius_top_right: 4,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
+        shop_radius: {
+            radius: 8,
+            radius_top_left: 8,
+            radius_top_right: 8,
+            radius_bottom_left: 8,
+            radius_bottom_right: 8,
         },
         content_outer_spacing: 10, // 商品间距
         content_spacing: 10,
         content_outer_width: 104,
         content_outer_height: 189,
-        shop_title_typeface: 'normal',
+        shop_title_typeface: '500',
         shop_title_size: 14,    
         shop_title_color: "#333333",
-        shop_price_typeface: 'normal',
-        shop_price_size: 14,
+        shop_price_typeface: '500',
+        shop_price_size: 18,
         shop_price_color: "#EA3323;",
-        shop_sold_number_typeface: 'normal',
+        shop_sold_number_typeface: '400',
         shop_sold_number_size: 10,
         shop_sold_number_color: "#999999",
-        shop_score_typeface: 'normal',
+        shop_score_typeface: '400',
         shop_score_size: 10,
         shop_score_color: "#999999",
-        shop_button_typeface:'normal',
+        shop_button_typeface:'400',
         shop_button_size: 12,
         shop_button_color: [
             {
-                color: '#2a94ff',
+                color: '#FF3D53',
                 color_percentage: ''
             },
             {
-                color: '#2a94ff',
+                color: '#D73A3A',
                 color_percentage: ''
             }
         ],
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 5329914a..317659fe 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -14,12 +14,13 @@ interface articleTabsList {
 }
 interface DefaultProductList {
     content: {
-        tabs_style: string;
+        tabs_theme: string;
         tabs_top_up: boolean;
         theme: string;
         tabs_list: articleTabsList[];
         is_show: string[];
         is_shop_show: boolean;
+        is_price_solo: boolean;
         shop_type: string;
         shop_button_effect: string;
         shop_button_size: string;
@@ -60,7 +61,7 @@ interface DefaultProductList {
 }
 const defaultProductList: DefaultProductList = {
     content: {
-        tabs_style: '0',
+        tabs_theme: '0',
         tabs_top_up: false,
         theme: '0',
         tabs_list: [
@@ -71,6 +72,7 @@ const defaultProductList: DefaultProductList = {
         ],
         is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
         is_shop_show: true,
+        is_price_solo: true,
         shop_type: '0',
         shop_button_effect: '0',
         shop_button_size: '1',
@@ -92,44 +94,44 @@ const defaultProductList: DefaultProductList = {
             padding_right: 10,
         },
         shop_img_radius: {
-            radius: 0,
-            radius_top_left: 0,
-            radius_top_right: 0,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
-        },
-        shop_radius: {
-            radius: 0,
+            radius: 4,
             radius_top_left: 4,
             radius_top_right: 4,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
+        shop_radius: {
+            radius: 8,
+            radius_top_left: 8,
+            radius_top_right: 8,
+            radius_bottom_left: 8,
+            radius_bottom_right: 8,
         },
         content_outer_spacing: 10,
         content_spacing: 10,
         content_outer_width: 104,
         content_outer_height: 189,
-        shop_title_typeface: 'normal',
+        shop_title_typeface: '500',
         shop_title_size: 14,    
         shop_title_color: "#333333",
-        shop_price_typeface: 'normal',
-        shop_price_size: 14,
+        shop_price_typeface: '500',
+        shop_price_size: 18,
         shop_price_color: "#EA3323;",
-        shop_sold_number_typeface: 'normal',
+        shop_sold_number_typeface: '400',
         shop_sold_number_size: 10,
         shop_sold_number_color: "#999999",
-        shop_score_typeface: 'normal',
+        shop_score_typeface: '400',
         shop_score_size: 10,
         shop_score_color: "#999999",
-        shop_button_typeface:'normal',
+        shop_button_typeface:'400',
         shop_button_size: 12,
         shop_button_color: [
             {
-                color: '#2a94ff',
+                color: '#FF3D53',
                 color_percentage: ''
             },
             {
-                color: '#2a94ff',
+                color: '#D73A3A',
                 color_percentage: ''
             }
         ],
diff --git a/src/layout/components/main/default/tabs.ts b/src/layout/components/main/default/tabs.ts
index 0da3f3c5..26616d2c 100644
--- a/src/layout/components/main/default/tabs.ts
+++ b/src/layout/components/main/default/tabs.ts
@@ -11,12 +11,12 @@ interface tabs_page {
 }
 interface defaultTabs {
     content: {
-        tabs_style: string;
+        tabs_theme: string;
         tabs_top_up: boolean;
         tabs_list: tabs_page[];
     };
     style: {
-        tabs_checked: string[];
+        tabs_checked: color_list[];
         tabs_direction: string;
         tabs_weight_checked: string,
         tabs_size_checked: number,
@@ -29,7 +29,7 @@ interface defaultTabs {
 }
 const defaultTabs: defaultTabs = {
     content: {
-        tabs_style: '0',
+        tabs_theme: '0',
         tabs_top_up: true,
         tabs_list: [
             { id: get_math(), title: '热门推荐', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', category_list: [] },
@@ -38,7 +38,7 @@ const defaultTabs: defaultTabs = {
         ],
     },
     style: {
-        tabs_checked: ['rgba(212,212,212,2)', 'rgba(255,210,210,1)'],
+        tabs_checked: [{ color: 'rgba(212,212,212,2)', color_percentage: '' }, { color: 'rgba(255,210,210,1)', color_percentage: '' }],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
@@ -48,7 +48,8 @@ const defaultTabs: defaultTabs = {
         tabs_color: 'rgba(51,51,51,1)',
         common_style: {
             ...defaultCommon,
-            padding_top: 0,
+            padding: 10,
+            padding_top: 10,
             padding_bottom: 10,
             padding_left: 10,
             padding_right: 10,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 101c7850..a595302c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -156,7 +156,7 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
  * @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
  */
 export function common_styles_computer(new_style: componentsCommonCommonStyle) {
-    return gradient_computer(new_style) + padding_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + background_computer(new_style);
+    return gradient_computer(new_style) + padding_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + background_computer(new_style) + `overflow:hidden;`;
 }
 
 /**
@@ -299,3 +299,19 @@ export const set_cookie = (name: string, value: string, expire_time?: number) =>
         document.cookie = cookie_str;
     }
 };
+
+// style 风格
+export const tabs_style = (color: string, style: string | number | boolean | undefined) => {
+    const color_list = ['rgba(51,51,51,1)', 'rgba(255, 34, 34, 1)', 'rgba(255, 255, 255, 1)'];
+    if (color_list.includes(color)) {
+        if ((style == '2' || style == '4')) {
+            return 'rgba(255, 255, 255, 1)';
+        } else if (style == '3') {
+            return 'rgba(255, 34, 34, 1)';
+        } else {
+            return 'rgba(51,51,51,1)';
+        }
+    } else {
+        return color;
+    }
+}
\ No newline at end of file