模块内边距可配置
于肖磊
parent
9eeacb66ef
commit
b7af8c6d8f
|
|
@ -5,7 +5,7 @@
|
|||
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
|
||||
<product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<template v-else>
|
||||
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
|
||||
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
|
||||
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10 pa-10">
|
||||
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
|
||||
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
|
||||
<div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
|
||||
</div>
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { isEmpty } from 'lodash';
|
||||
import { padding_computer } from '@/utils';
|
||||
|
||||
interface Props {
|
||||
value: Array<any>;
|
||||
|
|
@ -56,6 +57,7 @@ interface Props {
|
|||
num: number;
|
||||
actived: number;
|
||||
isShow: Array<string>;
|
||||
chunkPadding: internalStyle;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
|
|
|||
|
|
@ -33,18 +33,23 @@
|
|||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<template v-if="tabs_content.data_type === 'commodity' && isShowTitle">
|
||||
<el-form-item label="主标题">
|
||||
<div class="flex-col gap-10 w">
|
||||
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
|
||||
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题">
|
||||
<div class="flex-col gap-10 w">
|
||||
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
|
||||
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
|
||||
</div>
|
||||
<template v-if="tabs_content.data_type === 'commodity'">
|
||||
<template v-if="isShowTitle">
|
||||
<el-form-item label="主标题">
|
||||
<div class="flex-col gap-10 w">
|
||||
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
|
||||
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题">
|
||||
<div class="flex-col gap-10 w">
|
||||
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
|
||||
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="内间距">
|
||||
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -53,6 +58,7 @@
|
|||
</card-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { pick } from 'lodash';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
|
|
@ -75,6 +81,15 @@ const mult_color_picker_event = (arry: string[], type: number) => {
|
|||
form.value.color_list = arry;
|
||||
form.value.direction = type.toString();
|
||||
};
|
||||
const chunk_padding_change = (padding: any) => {
|
||||
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
|
||||
'padding',
|
||||
'padding_top',
|
||||
'padding_bottom',
|
||||
'padding_left',
|
||||
'padding_right'
|
||||
]));
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
form.value = props.value;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="flex-row align-c jc-c style-size flex-wrap">
|
||||
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
|
||||
<template v-if="item.data_content.data_type == 'commodity'">
|
||||
<div :class="['w h flex-col gap-20', {'ptb-20 plr-15': [0, 1].includes(index) }]">
|
||||
<div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
|
||||
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
|
||||
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
|
||||
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<template v-else>
|
||||
<div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
|
||||
<template v-if="item.data_content.data_type == 'commodity'">
|
||||
<div class="ptb-20 plr-15 w h flex-col gap-20">
|
||||
<div class="w h flex-col gap-20" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
|
||||
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
|
||||
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
|
||||
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
|
||||
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer } from '@/utils';
|
||||
import { isEmpty, cloneDeep } from 'lodash';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
|
|
@ -81,7 +81,6 @@ const state = reactive({
|
|||
});
|
||||
// 如果需要解构，确保使用toRefs
|
||||
const { form, new_style } = toRefs(state);
|
||||
// const data_list = computed(() => form.value.data_magic_list);
|
||||
const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
|
||||
const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
|
||||
// 图片间距设置
|
||||
|
|
|
|||
|
|
@ -68,6 +68,13 @@ const data_style = {
|
|||
subtitle_color: '#FF852A',
|
||||
subtitle_typeface: 'normal',
|
||||
subtitle_size: 14,
|
||||
chunk_padding: {
|
||||
padding: 0,
|
||||
padding_top: 20,
|
||||
padding_bottom: 20,
|
||||
padding_left: 15,
|
||||
padding_right: 15,
|
||||
},
|
||||
is_show: true,
|
||||
indicator_style: 'dot',
|
||||
indicator_location: 'center',
|
||||
|
|
@ -156,12 +163,19 @@ const style_click = (index: number) => {
|
|||
}
|
||||
// 规整复制的数据
|
||||
const magic_list = (index: number) => {
|
||||
return cloneDeep(style_show_list[index]).map((item) => ({
|
||||
return cloneDeep(style_show_list[index]).map((item, map_index) => ({
|
||||
...item,
|
||||
actived_index: 0,
|
||||
data_content: cloneDeep(data_content),
|
||||
data_style: {
|
||||
...cloneDeep(data_style),
|
||||
chunk_padding: {
|
||||
padding: show_padding(index, map_index) ? 10 : 0,
|
||||
padding_top: show_padding(index, map_index) ? 10 : 20,
|
||||
padding_bottom: show_padding(index, map_index) ? 10 : 20,
|
||||
padding_left: show_padding(index, map_index) ? 10 : 15,
|
||||
padding_right: show_padding(index, map_index) ? 10 : 15,
|
||||
},
|
||||
carouselKey: get_math(),
|
||||
}
|
||||
}));
|
||||
|
|
@ -172,6 +186,9 @@ const selected_click = (index: number) => {
|
|||
selected_active.value = index;
|
||||
tabs_name.value = 'content';
|
||||
}
|
||||
const show_padding = (index:number, map_index:number) => {
|
||||
return index == 7 && ![0, 1].includes(map_index)
|
||||
}
|
||||
//#endregion
|
||||
const data_title = (item: any) => {
|
||||
let title = `共有`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue