diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 169322fe..6d9682b9 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -28,13 +28,13 @@
                 <el-form-item label="内边距">
                     <padding :value="form" @update:value="padding_change"></padding>
                 </el-form-item>
-                <el-form-item label="外边距">
+                <el-form-item v-if="isMargin" label="外边距">
                     <margin :value="form" @update:value="margin_change"></margin>
                 </el-form-item>
-                <el-form-item label="圆角">
+                <el-form-item v-if="isRadius" label="圆角">
                     <radius :value="form" @update:value="radius_change"></radius>
                 </el-form-item>
-                <el-form-item label="阴影设置">
+                <el-form-item v-if="isShadow" label="阴影设置">
                     <div class="flex-col gap-10 w">
                         <el-form-item label="颜色" label-width="45">
                             <color-picker v-model="form.box_shadow_color" @update:value="box_shadow_color_event"></color-picker>
@@ -63,6 +63,18 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
+    },
+    isMargin: {
+        type: Boolean,
+        default: true,
+    },
+    isRadius: {
+        type: Boolean,
+        default: true,
+    },
+    isShadow: {
+        type: Boolean,
+        default: true,
     }
 });
 // 初始化表单数据
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index cf4dc49d..143415d9 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -52,7 +52,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
-        <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -79,8 +79,5 @@ const mult_color_picker_event = (arry: string[], type: number) => {
 <style lang="scss" scoped>
 .styles {
     width: 100%;
-    .styles-height {
-        min-height: calc(100vh - 16.8rem);
-    }
 }
 </style>
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index 6b24a19b..fcd07ebf 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -41,7 +41,7 @@
                                         <el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
                                     </div>
                                     <div class="plug-in-name">{{ item.name }}</div>
-                                    <div class="main-content" :class="{ 'plug-in-close': !item.is_enable }">
+                                    <div class="main-content" :class="{ 'plug-in-close': !item.is_enable }" :style="main_content_style">
                                         <!-- 基础组件 -->
                                         <!-- 视频 -->
                                         <template v-if="item.key == 'video'">
@@ -145,7 +145,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, get_math, gradient_computer } from '@/utils';
+import { background_computer, get_math, gradient_computer, padding_computer, radius_computer } from '@/utils';
 import { cloneDeep } from 'lodash';
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import defaultSettings from './index';
@@ -170,7 +170,6 @@ const props = defineProps({
 const diy_data = ref(props.diyData);
 const page_data = ref(props.header);
 const footer_nav = ref(props.footer);
-const content_style = ref('');
 // 监听
 watch(
     () => props.diyData,
@@ -188,9 +187,15 @@ watch(
 );
 const top_padding = ref(90);
 const top_margin = ref(0);
+const content_style = ref('');
+const main_content_style = ref('');
 watchEffect(() => {
     if (page_data.value.com_data) {
-        const { immersive_style, up_slide_display } = page_data.value.com_data.style;
+        const new_style = page_data.value.com_data.style;
+        content_style.value = gradient_computer(new_style.common_style) + background_computer(new_style.common_style);
+        main_content_style.value = padding_computer(new_style.common_style);
+        
+        const { immersive_style, up_slide_display } = new_style;
         // 不开启沉浸式 和 上滑显示
         if (immersive_style || !up_slide_display) {
             top_padding.value = 2;
@@ -205,6 +210,7 @@ watchEffect(() => {
         }
     }
 });
+
 watch(
     () => props.footer,
     (newValue) => {
@@ -214,7 +220,7 @@ watch(
 
 // 父组件调用的方法
 const emits = defineEmits(['rightUpdate']);
-const activeNames = reactive(['1', '2']);
+const activeNames = reactive(['1', '2', '3']);
 const components = reactive([
     {
         title: '基础组件',