新增公告内边距
于肖磊
parent
6bc12640e6
commit
de30916e8f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue