From ca9cec71f231ba6ac2ef6138050b7549aec3bf10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 28 Aug 2024 17:52:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98=E5=91=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue |  6 +++++-
 src/components/page-settings/page-styles.vue  |  2 +-
 src/layout/components/main/index.vue          | 16 +++++++++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 4c5a8a98..6d9682b9 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -31,7 +31,7 @@
                 <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 v-if="isShadow" label="阴影设置">
@@ -68,6 +68,10 @@ const props = defineProps({
         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 726c7660..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 :value="form.common_style" :is-margin="false" :is-shadow="false" @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">
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: '基础组件',