修改容器新增字段
于肖磊
parent
94322b0a03
commit
290de448a5
|
|
@ -78,14 +78,10 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
// 初始化表单数据
|
||||
interface color_form {
|
||||
color: string;
|
||||
color_percentage: number | undefined;
|
||||
}
|
||||
const init_form = reactive({
|
||||
direction: '180deg',
|
||||
background_img_url: [] as uploadList[],
|
||||
color_list: [{ color: '', color_percentage: undefined }] as color_form[],
|
||||
color_list: [{ color: '', color_percentage: undefined }] as color_list[],
|
||||
background_img_style: 2,
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
|
|
@ -112,7 +108,7 @@ const init_form = reactive({
|
|||
let form = reactive(Object.assign({}, init_form, props.value));
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const mult_color_picker_event = (arry: color_form[], type: number) => {
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.color_list = arry;
|
||||
form.direction = type.toString();
|
||||
emit('update:value', form);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<template v-if="form.notice_style == 'inherit'">
|
||||
<div class="flex-row align-c news-box gap-y-8">
|
||||
<div class="flex-row align-c news-box gap-y-8" :style="container_background_style">
|
||||
<template v-if="form.title_type == 'img-icon'">
|
||||
<div v-if="!isEmpty(form.img_src)">
|
||||
<image-empty v-model="form.img_src[0]" :style="img_style"></image-empty>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="news-card flex-col gap-10">
|
||||
<div class="news-card flex-col gap-10" :style="container_background_style">
|
||||
<div class="flex-row w jc-sb">
|
||||
<template v-if="form.title_type == 'img-icon'">
|
||||
<template v-if="!isEmpty(form.icon_class)">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { common_styles_computer, get_math, gradient_handle } from '@/utils';
|
||||
import { background_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, radius_computer } from '@/utils';
|
||||
import { isEmpty, cloneDeep } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -62,6 +62,19 @@ const { form, new_style } = toRefs(state);
|
|||
|
||||
// 用于样式显示
|
||||
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
|
||||
// 容器高度
|
||||
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_url } = new_style.value;
|
||||
const styles = {
|
||||
color_list: container_color_list,
|
||||
direction: container_direction,
|
||||
background_img_url: container_background_img_url,
|
||||
background_img_style: container_background_img_style,
|
||||
};
|
||||
return gradient_computer(styles) + radius_computer(new_style.value.container_radius) + background_computer(styles) + `overflow:hidden;`;
|
||||
});
|
||||
// 图片设置
|
||||
const img_style = ref('');
|
||||
// 标题的设置
|
||||
|
|
@ -128,7 +141,8 @@ watchEffect(() => {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.news-box {
|
||||
height: 4.4rem;
|
||||
min-height: 4.4rem;
|
||||
overflow: hidden;
|
||||
padding: 0 1rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -160,7 +174,7 @@ watchEffect(() => {
|
|||
}
|
||||
:deep(.el-carousel) {
|
||||
.el-carousel__container {
|
||||
height: 4.4rem;
|
||||
height: v-bind(container_height);
|
||||
.el-carousel__item {
|
||||
line-height: 4.4rem;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,35 @@
|
|||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="substance.notice_style === 'inherit'">
|
||||
<el-form-item label="容器高度">
|
||||
<slider v-model="form.container_height" :max="1000"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="容器背景">
|
||||
<div class="flex-col gap-10 w">
|
||||
<div class="size-12">背景色</div>
|
||||
<mult-color-picker :value="form.container_color_list" :type="form.container_direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
<div class="flex-row jc-sb align-c">
|
||||
<div class="size-12">背景图</div>
|
||||
<el-radio-group v-model="form.container_background_img_style" is-button>
|
||||
<el-tooltip content="单张" placement="top" effect="light">
|
||||
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="平铺" placement="top" effect="light">
|
||||
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="铺满" placement="top" effect="light">
|
||||
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.container_background_img_url" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="容器圆角">
|
||||
<radius :value="form.container_radius"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="按钮颜色">
|
||||
<color-picker v-model="form.button_color" default-color="#999"></color-picker>
|
||||
</el-form-item>
|
||||
|
|
@ -65,6 +94,11 @@ const is_img = computed(() => substance.value.title_type == 'img-icon');
|
|||
const common_styles_update = (val: Object) => {
|
||||
form.value.common_style = val;
|
||||
};
|
||||
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.container_color_list = arry;
|
||||
form.value.container_direction = type.toString();
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card.mb-8 {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ let form = reactive(props.value);
|
|||
const common_styles_update = (val: Object) => {
|
||||
form.common_style = val;
|
||||
};
|
||||
const mult_color_picker_event = (arry: string[], type: number) => {
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.background_color_list = arry;
|
||||
form.background_direction = type.toString();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,6 +33,11 @@ interface defaultSearch {
|
|||
topic_height: number;
|
||||
icon_size: number;
|
||||
icon_color: string;
|
||||
container_color_list: color_list[],
|
||||
container_direction: string,
|
||||
container_background_img_style: string,
|
||||
container_background_img_url: uploadList[],
|
||||
container_radius: radiusStyle,
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
|
|
@ -78,6 +83,17 @@ const defaultSearch: defaultSearch = {
|
|||
icon_size: 12,
|
||||
icon_color: '#999',
|
||||
button_color: '#999',
|
||||
container_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
container_direction: '180deg',
|
||||
container_background_img_style: '2',
|
||||
container_background_img_url: [],
|
||||
container_radius: {
|
||||
radius: 0,
|
||||
radius_top_left: 0,
|
||||
radius_top_right: 0,
|
||||
radius_bottom_left: 0,
|
||||
radius_bottom_right: 0,
|
||||
},
|
||||
common_style: defaultCommon,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue