From de30916e8f61f0f328f71319ee45e03babf0dd66 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, 21 May 2025 18:06:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=85=AC=E5=91=8A=E5=86=85?=
 =?UTF-8?q?=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-notice/index.vue         | 25 +++++++++++-----
 .../model-notice/model-notice-content.vue     | 29 +++++++++++++++++--
 .../model-notice/model-notice-setting.vue     |  2 +-
 .../model-notice/model-notice-styles.vue      |  3 ++
 src/config/const/notice.ts                    |  8 +++++
 5 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index 51c22014..a5234f63 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -52,7 +52,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_img_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, radius_computer } from '@/utils';
+import { background_computer, common_img_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, padding_computer, radius_computer } from '@/utils';
 import { isEmpty, cloneDeep, throttle } from 'lodash';
 
 const props = defineProps({
@@ -78,22 +78,35 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
 const container_height = computed(() => new_style.value.container_height + 'px');
 // 容器背景
 const container_background_style = computed(() => {
-    const { container_color_list, container_direction, container_background_img_style, container_background_img } = new_style.value;
+    const { container_color_list, container_direction, container_background_img_style, container_background_img} = new_style.value;
     const styles = {
         color_list: container_color_list,
         direction: container_direction,
         background_img: container_background_img,
         background_img_style: container_background_img_style,
     };
+    
     return gradient_computer(styles) + radius_computer(new_style.value.container_radius) + `overflow:hidden;`;
 });
 const container_background_img_style = computed(() => {
-    const { container_background_img_style, container_background_img } = new_style.value;
+    const { container_background_img_style, container_background_img, container_padding = '' } = new_style.value;
     const styles = {
         background_img: container_background_img,
         background_img_style: container_background_img_style,
     };
-    return background_computer(styles) + `overflow:hidden;`;
+    let padding = '';
+    // 不等于空的时候使用新数据
+    if (!isEmpty(container_padding)) {
+        padding = padding_computer(container_padding);
+    } else {
+        // 为空的时候使用默认数据，兼容老数据没有这个值时的处理
+        let old_padding = { padding: 15, padding_top: 15, padding_right: 15, padding_bottom: 15, padding_left: 15 };
+        if (form.value.notice_style === 'inherit') {
+            old_padding = { padding: 0, padding_top: 0, padding_right: 10, padding_bottom: 0, padding_left: 10, }
+        }
+        padding = padding_computer(old_padding);
+    }
+    return background_computer(styles) + padding + `overflow:hidden;`;
 });
 // 图片设置
 const img_style = computed(() => `height: ${new_style.value.title_height}px; width: ${new_style.value.title_width}px`);
@@ -155,10 +168,6 @@ watchEffect(() => {
 .news-box {
     height: v-bind(container_height);
     overflow: hidden;
-    padding: 0 1rem;
-}
-.news-card {
-    padding: 1.5rem;
 }
 .num {
     padding-right: 0.7rem;
diff --git a/src/components/model-notice/model-notice-content.vue b/src/components/model-notice/model-notice-content.vue
index b3e0f320..22c26de9 100644
--- a/src/components/model-notice/model-notice-content.vue
+++ b/src/components/model-notice/model-notice-content.vue
@@ -6,7 +6,7 @@
             <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
-                    <el-radio-group v-model="form.notice_style">
+                    <el-radio-group v-model="form.notice_style" @change="change_style">
                         <el-radio value="inherit">样式一</el-radio>
                         <el-radio value="card">样式二</el-radio>
                     </el-radio-group>
@@ -84,6 +84,10 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    noticeStyle: {
+        type: Object,
+        default: () => {},
+    }
 });
 
 const is_card = computed(() => form.value.notice_style == 'card');
@@ -91,8 +95,29 @@ const is_text = computed(() => form.value.title_type == 'text');
 
 const state = reactive({
     form: props.value,
+    new_style: props.noticeStyle,
 });
-const { form } = toRefs(state);
+const { form, new_style } = toRefs(state);
+
+const change_style = (val: string | number | boolean | undefined) => {
+    if (val === 'inherit') {
+        new_style.value.container_padding = {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 10,
+            padding_bottom: 0,
+            padding_left: 10,
+        }
+    } else {
+        new_style.value.container_padding = {
+            padding: 15,
+            padding_top: 15,
+            padding_right: 15,
+            padding_bottom: 15,
+            padding_left: 15,
+        }
+    }
+};
 const add = () => {
     form.value.notice_list.push({
         id: get_math(),
diff --git a/src/components/model-notice/model-notice-setting.vue b/src/components/model-notice/model-notice-setting.vue
index 59f23ab3..f234de54 100644
--- a/src/components/model-notice/model-notice-setting.vue
+++ b/src/components/model-notice/model-notice-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-notice-content :value="value.content"></model-notice-content>
+            <model-notice-content :value="value.content" :notice-style="value.style"></model-notice-content>
         </template>
         <template v-if="type == '2'">
             <model-notice-styles :value="value.style" :content="value.content"></model-notice-styles>
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index 98fb54fa..6f6ec224 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -62,6 +62,9 @@
                 <el-form-item label="容器背景">
                     <background-common v-model:color_list="form.container_color_list" v-model:direction="form.container_direction" v-model:img_style="form.container_background_img_style" v-model:img="form.container_background_img" @mult_color_picker_event="mult_color_picker_event" />
                 </el-form-item>
+                <el-form-item label="容器边距">
+                    <padding :value="form.container_padding"></padding>
+                </el-form-item>
                 <el-form-item label="容器圆角">
                     <radius :value="form.container_radius"></radius>
                 </el-form-item>
diff --git a/src/config/const/notice.ts b/src/config/const/notice.ts
index 8ce8338d..567eb5d7 100644
--- a/src/config/const/notice.ts
+++ b/src/config/const/notice.ts
@@ -43,6 +43,7 @@ interface defaultSearch {
         container_background_img_style: string,
         container_background_img: uploadList[],
         container_radius: radiusStyle,
+        container_padding: paddingStyle,
         common_style: object;
     };
 }
@@ -108,6 +109,13 @@ const defaultSearch: defaultSearch = {
         container_direction: '180deg',
         container_background_img_style: '2',
         container_background_img: [],
+        container_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 10,
+            padding_bottom: 0,
+            padding_left: 10,
+        },
         container_radius: {
             radius: 0,
             radius_top_left: 0,