sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改自定义内容显示

v1.1.0
于肖磊 2024-12-23 17:33:52 +08:00
parent 1f2ddf21aa
commit 152e7aedfb
9 changed files with 91 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/model-custom/index.vue
View File

@ -2,14 +2,18 @@
<div :style="style_container"> <div :style="style_container">
<div class="w h re" :style="style_img_container"> <div class="w h re" :style="style_img_container">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'"> <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container"> <div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
<div class="w h" :style="style_chunk_img_container"> <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering> <div :style="style_chunk_container">
<div class="w h" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`"> <div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange"> <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1"> <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_chunk_container"> <div :style="style_chunk_container">
<div class="w h" :style="style_chunk_img_container"> <div class="w h" :style="style_chunk_img_container">
@ -77,6 +81,13 @@ onBeforeMount(() => {
} }
} }
}); });
// 计算纵向显示的宽度
const gap_width = computed(() => {
const model_number = Number(form.value.data_source_carousel_col);
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.value.column_gap * (model_number - 1)) / model_number;
return `calc(${100 / model_number}% - ${gap}px)`;
});
//#region 计算比例大小，和每块当前的大小 //#region 计算比例大小，和每块当前的大小
const scale = ref(1); const scale = ref(1);
// 计算整体宽度和比例 // 计算整体宽度和比例
@ -124,6 +135,7 @@ const slides_per_group = ref(1);
const dot_list = ref<unknown[]>([]); const dot_list = ref<unknown[]>([]);
const swiper_height = ref(390); const swiper_height = ref(390);
const slides_per_view = ref(1); const slides_per_view = ref(1);
const space_between = ref(0);
// 内容参数的集合 // 内容参数的集合
watchEffect(() => { watchEffect(() => {
// 是否滚动 // 是否滚动
@ -135,22 +147,26 @@ watchEffect(() => {
} else { } else {
autoplay.value = false; autoplay.value = false;
} }
// 间距
space_between.value = form.value.data_source_direction == 'horizontal' ? new_style.value.column_gap : new_style.value.row_gap;
// 显示数量
const data_source_carousel_col = Number(form.value.data_source_carousel_col);
// 判断是平移还是整屏滚动 // 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : Number(form.value.data_source_carousel_col); slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : Number(data_source_carousel_col);
// 商品数量大于列数的时候，高度是列数，否则是当前的数量 // 商品数量大于列数的时候，高度是列数，否则是当前的数量
const col = data_source_content_list.value.length > Number(form.value.data_source_carousel_col) ? Number(form.value.data_source_carousel_col) : data_source_content_list.value.length; const col = data_source_content_list.value.length > Number(data_source_carousel_col) ? Number(data_source_carousel_col) : data_source_content_list.value.length;
slides_per_view.value = col; slides_per_view.value = col;
let num = 0; let num = 0;
// 轮播图数量 // 轮播图数量
if (!isEmpty(data_source_content_list.value)) { if (!isEmpty(data_source_content_list.value)) {
num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(form.value.data_source_carousel_col)); num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
} }
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style; const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
// 轮播图高度控制 // 轮播图高度控制
if (form.value.data_source_direction == 'horizontal') { if (form.value.data_source_direction == 'horizontal') {
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top; swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
} else { } else {
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col; swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
} }
dot_list.value = Array(num); dot_list.value = Array(num);
// 更新轮播图的key，确保更换时能重新更新轮播图 // 更新轮播图的key，确保更换时能重新更新轮播图

6
src/components/model-custom/model-custom-content.vue
View File

@ -20,7 +20,7 @@
<el-radio v-for="(item, index) in default_type_data?.show_type" :key="index" :value="item">{{ item == 'vertical' ? '纵向展示' : item == 'vertical-scroll' ? '纵向滑动' : '横向滑动' }}</el-radio> <el-radio v-for="(item, index) in default_type_data?.show_type" :key="index" :value="item">{{ item == 'vertical' ? '纵向展示' : item == 'vertical-scroll' ? '纵向滑动' : '横向滑动' }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<template v-if="default_type_data?.show_number.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)"> <template v-if="default_type_data?.show_number.length > 0">
<el-form-item label="每屏显示"> <el-form-item label="每屏显示">
<el-radio-group v-model="form.data_source_carousel_col"> <el-radio-group v-model="form.data_source_carousel_col">
<el-radio v-for="(item, index) in default_type_data?.show_number" :key="index" :value="item">{{ item }}{{ form.data_source_direction == 'vertical-scroll' ? '行' : '列' }}展示</el-radio> <el-radio v-for="(item, index) in default_type_data?.show_number" :key="index" :value="item">{{ item }}{{ form.data_source_direction == 'vertical-scroll' ? '行' : '列' }}展示</el-radio>
@ -117,8 +117,8 @@ const form = ref(props.value);
const center_width = ref(props.magicWidth); const center_width = ref(props.magicWidth);
// 可拖拽区域的宽度 // 可拖拽区域的宽度
const custom_width = computed(() => { const custom_width = computed(() => {
// 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction == horizontal 为横向滑动 // 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction != vertical-scroll 不为纵向滑动的都是横向宽度变化
if (form.value.is_custom_data == '1' && form.value.data_source_direction == 'horizontal') { if (form.value.is_custom_data == '1' && form.value.data_source_direction != 'vertical-scroll') {
return center_width.value / form.value.data_source_carousel_col; return center_width.value / form.value.data_source_carousel_col;
} else { } else {
return center_width.value; return center_width.value;

10
src/components/model-custom/model-custom-styles.vue
View File

@ -39,6 +39,16 @@
<el-form-item label="圆角"> <el-form-item label="圆角">
<radius :value="form.data_style"></radius> <radius :value="form.data_style"></radius>
</el-form-item> </el-form-item>
<el-form-item label="数据间距">
<div class="flex-col w h gap-10">
<el-form-item v-if="['vertical', 'horizontal'].includes(data.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.column_gap" :max="100"></slider>
</el-form-item>
<el-form-item v-if="['vertical', 'vertical-scroll'].includes(data.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.row_gap" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
</card-container> </card-container>
</el-form> </el-form>
<div class="bg-f5 divider-line" /> <div class="bg-f5 divider-line" />

25
src/components/model-data-magic/components/custom/index.vue
View File

@ -1,13 +1,17 @@
<template> <template>
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'"> <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container"> <div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
<div class="w h oh" :style="style_img_container"> <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering> <div :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`"> <div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange"> <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1"> <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_container"> <div :style="style_container">
<div class="w h" :style="style_img_container"> <div class="w h" :style="style_img_container">
@ -119,6 +123,13 @@ watchEffect(() => {
const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2); const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
scale.value = (width / form.value.width) * props.magicScale; scale.value = (width / form.value.width) * props.magicScale;
}) })
// 计算纵向显示的宽度
const gap_width = computed(() => {
const model_number = Number(form.value.data_source_carousel_col);
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.value.column_gap * (model_number - 1)) / model_number;
return `calc(${100 / model_number}% - ${gap}px)`;
});
//#region 轮播图操作 //#region 轮播图操作
// 轮播图key值 // 轮播图key值
const carouselKey = ref('0'); const carouselKey = ref('0');
@ -126,6 +137,7 @@ const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1); const slides_per_group = ref(1);
const slides_per_view = ref(1); const slides_per_view = ref(1);
const swiper_height = ref(150); const swiper_height = ref(150);
const space_between = ref(0);
const emit = defineEmits(['carousel_change']); const emit = defineEmits(['carousel_change']);
// 内容参数的集合 // 内容参数的集合
watchEffect(() => { watchEffect(() => {
@ -138,6 +150,9 @@ watchEffect(() => {
} else { } else {
autoplay.value = false; autoplay.value = false;
} }
// 间距
space_between.value = form.value.data_source_direction == 'horizontal' ? new_style.value.column_gap : new_style.value.row_gap;
// 显示数量
const carousel_col = Number(form.value?.data_source_carousel_col) || 1; const carousel_col = Number(form.value?.data_source_carousel_col) || 1;
// 判断是平移还是整屏滚动 // 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : carousel_col; slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : carousel_col;
@ -151,7 +166,7 @@ watchEffect(() => {
if (form.value.data_source_direction == '2') { if (form.value.data_source_direction == '2') {
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top; swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
} else { } else {
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col; swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between.value);
} }
// 更新轮播图的key，确保更换时能重新更新轮播图 // 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math(); carouselKey.value = get_math();

10
src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
View File

@ -79,6 +79,16 @@
<el-form-item label="圆角"> <el-form-item label="圆角">
<radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius> <radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item> </el-form-item>
<el-form-item v-if="tabs_content.data_type == 'custom'" label="数据间距">
<div class="flex-col w h gap-10">
<el-form-item v-if="['vertical', 'horizontal'].includes(tabs_content.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.column_gap" :max="100"></slider>
</el-form-item>
<el-form-item v-if="['vertical', 'vertical-scroll'].includes(tabs_content.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.row_gap" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item v-if="tabs_content.data_type == 'goods'" label="数据间距"> <el-form-item v-if="tabs_content.data_type == 'goods'" label="数据间距">
<slider v-model="form.data_goods_gap" :min="0" :max="50"></slider> <slider v-model="form.data_goods_gap" :min="0" :max="50"></slider>
</el-form-item> </el-form-item>

2
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -186,6 +186,8 @@ const data_style = {
radius_bottom_left: 4, radius_bottom_left: 4,
radius_bottom_right: 4, radius_bottom_right: 4,
}, },
column_gap: 0,
row_gap: 0,
indicator_style: 'dot', indicator_style: 'dot',
indicator_new_location: 'bottom', indicator_new_location: 'bottom',
indicator_location: 'center', indicator_location: 'center',

2
src/components/model-search/index.vue
View File

@ -9,7 +9,7 @@
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty> <image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon> <icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon>
</template> </template>
<span class="location-name size-12 text-line-1">{{ form.positioning_name }}</span> <span class="location-name size-12 text-line-1" :style="`max-width: ${ form.theme == '4' ? '150px' : '100px;' }`">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'"> <template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty> <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon> <icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon>

21
src/components/page-settings/index.vue
View File

@ -41,7 +41,7 @@
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty> <image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon> <icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon>
</template> </template>
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span> <span class="location-name size-14 text-line-1" :style="location_name_style">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'"> <template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty> <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon> <icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon>
@ -64,7 +64,7 @@
<div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16"> <div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
<template v-if="['3', '5'].includes(form.theme) && is_search_alone_row"> <template v-if="['3', '5'].includes(form.theme) && is_search_alone_row">
<div class="flex-1"> <div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search> <model-search :value="pageData.com_data" :is-page-settings="true" search-type="header" :header-location-style="style_location_container" :header-location-img-style="style_location_img_container"></model-search>
</div> </div>
</template> </template>
<div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space"> <div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
@ -199,6 +199,21 @@ const style_location_img_container = computed(() => {
const height = 32 - location_margin.margin_top - location_margin.margin_bottom; const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
return background_computer(style) + padding_computer(location_padding) + radius_computer(new_style.value.location_radius) + border + `height: ${height}px;line-height: ${height}px;`; return background_computer(style) + padding_computer(location_padding) + radius_computer(new_style.value.location_radius) + border + `height: ${height}px;line-height: ${height}px;`;
}); });
const location_name_style = computed(() => {
let width = 0;
if (is_search_alone_row.value && is_icon_alone_row.value) {
width = 200;
} else if (is_search_alone_row.value || is_icon_alone_row.value) {
width = 100;
}
if (form.value.theme == '4') {
return `max-width: ${ 150 + width }px;`;
} else {
return `max-width: ${ 100 + width }px;`;
}
});
// 文字样式 // 文字样式
const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`); const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`);
const position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : '')); const position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : ''));
@ -230,8 +245,6 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
.model-head-content { .model-head-content {
height: 3.2rem; height: 3.2rem;
.location-name { .location-name {
// line-height: 100%;
max-width: 15rem;
width: 100%; width: 100%;
flex-basis: content; flex-basis: content;
flex-shrink: 1; flex-shrink: 1;

4
src/config/const/custom.ts
View File

@ -99,6 +99,8 @@ interface defaultSearch {
indicator_size: number; indicator_size: number;
indicator_radius: radiusStyle; indicator_radius: radiusStyle;
data_style: object; data_style: object;
row_gap: number;
column_gap: number;
// 通用样式 // 通用样式
common_style: object; common_style: object;
}; };
@ -174,6 +176,8 @@ const defaultSearch: defaultSearch = {
margin_left: 0, margin_left: 0,
margin_right: 0, margin_right: 0,
}, },
row_gap: 0,
column_gap: 0,
common_style: { common_style: {
...defaultCommon, ...defaultCommon,
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }], color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],