1.代码优化

sws 2024-09-02
v1.0.0
sws 2024-09-02 17:22:58 +08:00
parent f819055fc7
commit 3e31e2fe11
11 changed files with 229 additions and 103 deletions

View File

@ -1,7 +1,7 @@
<template>
<div class="oh" :style="style_container">
<div class="re oh" :style="style">
<div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
<div v-if="!['4'].includes(article_theme)" class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
<template v-for="(item, index) in data_list" :key="index">
<div class="item bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
<template v-if="article_theme !== '3'">
@ -25,6 +25,30 @@
</div>
</template>
</div>
<div v-else class="oh" :class="article_theme_class">
<el-carousel :key="carousel_key" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll ? true : false">
<el-carousel-item v-for="(item1, index1) in article_carousel_list" :key="index1" class="flex" :style="article_spacing">
<div v-for="(item, index) in item1.carousel_list" :key="index" class="item bg-f oh flex-col" :style="article_style">
<template v-if="item.new_cover.length > 0">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
<div class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
<div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div class="flex-row jc-sb gap-8 align-e mt-10">
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
<div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
<icon name="eye"></icon>
<div>
{{ item.data.access_count ? item.data.access_count : '16' }}
</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
@ -57,7 +81,6 @@ interface ArticleList {
new_title: string;
new_cover: uploadList[];
}
const containerRef = ref<HTMLElement | null>(null);
//
const data_list = ref<ArticleList[]>([]);
//
@ -81,8 +104,7 @@ const content_spacing = ref('');
//
const article_spacing = ref('');
const article_spacing_children = ref('');
const article_item_width = ref('104');
const article_item_height = ref('104');
const article_item_height = ref('155');
const article_style = ref({});
const default_data_list: ArticleList = {
@ -91,8 +113,16 @@ const default_data_list: ArticleList = {
new_title: '测试文章标题',
new_cover: [],
};
const get_auto_data_list = async (new_content: any) => {
const { category, number, sort, sort_rules, is_cover } = new_content;
//
const carousel_col = ref('2');
// key
const carousel_key = ref('0');
//
const interval_time = ref(2000);
//
const is_roll = ref(1);
const get_auto_data_list = async () => {
const { category, number, sort, sort_rules, is_cover } = new_content.value;
const new_data = {
article_keywords: '',
article_category_ids: category.join(','),
@ -116,32 +146,44 @@ const get_auto_data_list = async (new_content: any) => {
data_list.value = Array(4).fill(default_data_list);
}
};
const data_type_is_change = ref(0);
watch(
() => data_type_is_change.value,
(newVal, oldValue) => {
if (newVal !== oldValue && String(newVal) === '1') {
get_auto_data_list(props.value?.content);
const new_content = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
watchEffect(() => {
if (new_content.value.data_type == '0') {
if (!isEmpty(new_content.value.data_list)) {
data_list.value = new_content.value.data_list;
data_list.value = cloneDeep(new_content.value.data_list);
} else {
data_list.value = Array(4).fill(default_data_list);
}
},
{ deep: true }
);
} else {
get_auto_data_list();
}
});
//
const multicolumn_columns_width = computed(() => {
const { carousel_col } = toRefs(new_content.value);
// (gap * gap) /
let gap = carousel_col.value !== '0' ? (new_style.value.article_spacing * carousel_col.value) / (Number(carousel_col.value) + 1) : '0';
return `calc(${100 / (Number(carousel_col.value) + 1)}% - ${gap}px)`;
});
//
const article_name_height_computer = computed(() => {
return new_style.value.name_size * 2.4 + 'px';
});
const article_name_line_height_computer = computed(() => {
return new_style.value.name_size * 1.2 + 'px';
});
//
const carousel_height_computer = computed(() => {
return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
});
watch(
props.value,
(newVal, oldValue) => {
const new_content = newVal?.content;
const new_style = newVal?.style;
//
data_type_is_change.value = new_content.data_type;
if (String(new_content.data_type) === '0') {
if (!isEmpty(new_content.data_list)) {
data_list.value = new_content.data_list;
data_list.value = cloneDeep(new_content.data_list);
} else {
data_list.value = Array(4).fill(default_data_list);
}
}
article_theme.value = new_content.theme;
field_show.value = new_content.field_show;
//
@ -169,7 +211,13 @@ watch(
} else if (article_theme.value == '3') {
style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
} else if (article_theme.value == '4') {
article_item_width.value = `${new_style.article_width}px`;
// key
carousel_col.value = new_content.carousel_col || '1';
carousel_key.value = get_math();
//
interval_time.value = (new_style.interval_time || 2) * 1000;
//
is_roll.value = new_style.is_roll;
article_item_height.value = `${new_style.article_height}px`;
article_style.value += content_radius.value;
}
@ -177,7 +225,7 @@ watch(
style_container.value = common_styles_computer(new_style.common_style);
}
},
{ immediate: true, deep: true }
{ deep: true, immediate: true }
);
const article_theme_class = computed(() => {
switch (article_theme.value) {
@ -189,10 +237,34 @@ const article_theme_class = computed(() => {
return 'style3 flex-col';
case '3':
return 'style4 flex-col';
case '4':
return 'style5 flex-row';
default:
return 'style5';
}
});
interface ArticleCarouselList {
carousel_list: ArticleList[];
}
const article_carousel_list = computed(() => {
//
const cloneList = cloneDeep(data_list.value);
//
if (cloneList.length > 0) {
//
const num = Number(carousel_col.value) + 1;
console.log(num);
//
let nav_list: ArticleCarouselList[] = [];
//
const split_num = Math.ceil(cloneList.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({ carousel_list: cloneList.slice(i * num, (i + 1) * num) });
}
return nav_list;
} else {
//
return [{ carousel_list: cloneList }];
}
return `style${article_theme.value}`;
});
</script>
<style lang="scss" scoped>
@ -232,12 +304,24 @@ const article_theme_class = computed(() => {
}
.style5 {
.item {
min-width: v-bind(article_item_width);
width: v-bind(article_item_width);
width: v-bind(multicolumn_columns_width);
min-width: v-bind(multicolumn_columns_width);
.img {
width: 100%;
height: v-bind(article_item_height);
max-height: v-bind(article_item_height);
}
.title {
height: v-bind(article_name_height_computer);
line-height: v-bind(article_name_line_height_computer);
}
}
}
:deep(.el-carousel) {
width: 100%;
.el-carousel__container {
// height: v-bind(article_item_height);
height: v-bind(carousel_height_computer);
}
}
</style>

View File

@ -23,7 +23,6 @@
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
<template v-if="theme == '0'">
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
@ -35,14 +34,24 @@
</el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<template v-if="theme == '4'">
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />

View File

@ -16,6 +16,11 @@
<el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '4'" label="轮播列数">
<el-radio-group v-model="form.article_carousel_col">
<el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -123,6 +128,12 @@ const base_list = reactive({
{ name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
{ name: '两列展示', value: '1' },
{ name: '三列展示', value: '2' },
{ name: '四列展示', value: '3' },
],
data_type_list: [
{ name: '选择文章', value: '0' },
{ name: '筛选文章', value: '1' },

View File

@ -50,14 +50,24 @@
</el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<template v-if="theme == '4'">
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_styles_update" />

View File

@ -56,7 +56,7 @@
</div>
<div v-if="form.is_shop_show">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
@ -83,7 +83,7 @@
</div>
<div v-if="form.is_shop_show">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
@ -132,7 +132,7 @@
</div>
<div v-if="form.is_shop_show">
<template v-if="form.shop_type == 'text'">
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
@ -206,23 +206,23 @@ const default_list = {
bg_color: '#EA3323',
br_color: '',
color: '#fff',
url: ''
url: '',
},
{
name: '包邮',
bg_color: '',
br_color: '#EA3323',
color: '#EA3323',
url: ''
url: '',
},
{
name: '领劵',
bg_color: '',
br_color: '#EA9223',
color: '#EA9223',
url: ''
}
]
url: '',
},
],
};
const list = ref<data_list[]>([]);
@ -369,15 +369,15 @@ const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '90deg');
};
// icon
const icon_style = (item: { bg_color: string; color: string; br_color: string; }) => {
const icon_style = (item: { bg_color: string; color: string; br_color: string }) => {
let style = `background: ${item.bg_color};color: ${item.color};`;
if (!isEmpty(item.br_color)) {
style += `border: 1px solid ${item.br_color};`
style += `border: 1px solid ${item.br_color};`;
} else {
style += `border: 1px solid ${item.bg_color};`
style += `border: 1px solid ${item.bg_color};`;
}
return style;
}
};
//
const style_container = computed(() => {
if (props.isCommonStyle) {
@ -391,16 +391,16 @@ const style_container = computed(() => {
//
//
const multicolumn_columns_width = computed(() => {
const { single_line_number } = toRefs(form.value);
// (gap * gap) /
let gap = (new_style.value.content_outer_spacing * (single_line_number.value - 1)) / single_line_number.value;
return `calc(${ 100 / single_line_number.value }% - ${ gap }px)` ;
const { carousel_col } = toRefs(form.value);
// (gap * gap) /
let gap = (new_style.value.content_outer_spacing * (carousel_col.value - 1)) / carousel_col.value;
return `calc(${100 / carousel_col.value}% - ${gap}px)`;
});
const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
const interval_list = ref({
time: 2000,
is_roll: true,
notice_length: 1
notice_length: 1,
});
interface nav_list {
split_list: data_list[];
@ -411,7 +411,7 @@ const shop_content_list = computed(() => {
//
if (cloneList.length > 0) {
//
const num = form.value.single_line_number;
const num = form.value.carousel_col;
//
let nav_list: nav_list[] = [];
//
@ -424,7 +424,7 @@ const shop_content_list = computed(() => {
//
return [{ split_list: cloneList }];
}
})
});
//
const interval_time = ref(2000);
//
@ -447,7 +447,7 @@ watchEffect(() => {
interval_list.value = {
time: time,
is_roll: display_is_roll,
notice_length: notice_length
notice_length: notice_length,
};
// key
carouselKey.value = get_math();

View File

@ -8,8 +8,8 @@
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '5'" label="单行显示">
<el-radio-group v-model="form.single_line_number" class="ml-4">
<el-form-item v-if="form.theme == '5'" label="轮播列数">
<el-radio-group v-model="form.carousel_col" class="ml-4">
<el-radio :value="1">1</el-radio>
<el-radio :value="2">2</el-radio>
<el-radio :value="3">3</el-radio>

View File

@ -16,8 +16,8 @@
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '5'" label="单行显示">
<el-radio-group v-model="form.single_line_number" class="ml-4">
<el-form-item v-if="form.theme == '5'" label="轮播列数">
<el-radio-group v-model="form.carousel_col" class="ml-4">
<el-radio :value="1">1</el-radio>
<el-radio :value="2">2</el-radio>
<el-radio :value="3">3</el-radio>

View File

@ -36,8 +36,9 @@ interface DefaultArticleList {
padding: paddingStyle;
article_spacing: number;
content_spacing: number;
article_width: number;
article_height: number;
interval_time: number; //滚动时间
is_roll: number;
common_style: object;
};
}
@ -91,8 +92,9 @@ const defaultArticleList: DefaultArticleList = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_width: 155, // 文章宽度
article_height: 155, // 文章宽度
article_height: 155, // 文章高度
interval_time: 2, //滚动时间
is_roll: 1, // 是否轮播
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

View File

@ -22,6 +22,7 @@ interface DefaultArticleTabs {
tabs_theme: string;
tabs_top_up: boolean;
article_theme: string;
article_carousel_col: string;
tabs_list: articleTabsList[];
field_show: string[];
};
@ -49,8 +50,9 @@ interface DefaultArticleTabs {
padding: paddingStyle;
article_spacing: number;
content_spacing: number;
article_width: number;
article_height: number;
interval_time: number; //滚动时间
is_roll: number;
common_style: object;
};
}
@ -59,6 +61,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
tabs_theme: '0',
tabs_top_up: true,
article_theme: '0',
article_carousel_col: '2',
tabs_list: [
{ id: '1', title: '热门推荐', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
{ id: '2', title: '测试一', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
@ -70,7 +73,10 @@ const defaultArticleTabs: DefaultArticleTabs = {
field_show: ['0', '1'],
},
style: {
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },
],
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,
@ -114,8 +120,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_width: 155, // 文章宽度
article_height: 155, // 文章宽度
article_height: 155, // 文章高度
interval_time: 2, //滚动时间
is_roll: 1, // 是否轮播
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
},
};

View File

@ -3,7 +3,7 @@ interface DefaultProductList {
content: {
theme: string;
data_type: string;
single_line_number: number;
carousel_col: number;
category: string[];
data_ids: string[];
product_show_list: string[];
@ -54,7 +54,7 @@ const defaultProductList: DefaultProductList = {
content: {
theme: '0',
data_type: '0',
single_line_number: 3,
carousel_col: 3,
product_show_list: [],
data_list: [],
category: [],

View File

@ -17,7 +17,7 @@ interface DefaultProductList {
tabs_theme: string;
tabs_top_up: boolean;
theme: string;
single_line_number: number,
carousel_col: number;
tabs_list: articleTabsList[];
is_show: string[];
is_shop_show: boolean;
@ -31,20 +31,20 @@ interface DefaultProductList {
style: {
tabs_checked: color_list[];
tabs_direction: string;
tabs_weight_checked: string,
tabs_size_checked: number,
tabs_color_checked: string,
tabs_weight: string,
tabs_size: number,
tabs_color: string,
tabs_weight_checked: string;
tabs_size_checked: number;
tabs_color_checked: string;
tabs_weight: string;
tabs_size: number;
tabs_color: string;
tabs_spacing: number;
shop_padding: paddingStyle;
shop_img_radius: radiusStyle;
shop_radius: radiusStyle;
content_outer_spacing: number;
content_outer_height: number;
is_roll: boolean,
interval_time: number,
is_roll: boolean;
interval_time: number;
content_spacing: number;
shop_title_typeface: string;
shop_title_size: number;
@ -58,10 +58,10 @@ interface DefaultProductList {
shop_score_typeface: string;
shop_score_size: number;
shop_score_color: string;
shop_button_typeface:string;
shop_button_typeface: string;
shop_button_size: number;
shop_button_color: color_list[];
shop_button_text_color: string,
shop_button_text_color: string;
shop_icon_size: number;
shop_icon_color: string;
common_style: object;
@ -72,10 +72,10 @@ const defaultProductList: DefaultProductList = {
tabs_theme: '0',
tabs_top_up: false,
theme: '0',
single_line_number: 3,
carousel_col: 3,
tabs_list: [
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
{ id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
],
@ -89,7 +89,10 @@ const defaultProductList: DefaultProductList = {
shop_button_size: '1',
},
style: {
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },
],
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,
@ -99,10 +102,10 @@ const defaultProductList: DefaultProductList = {
tabs_color: 'rgba(51,51,51,1)',
tabs_spacing: 20,
shop_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
shop_img_radius: {
@ -125,32 +128,32 @@ const defaultProductList: DefaultProductList = {
is_roll: true,
interval_time: 2,
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",
shop_title_size: 14,
shop_title_color: '#333333',
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: "#EA3323;",
shop_price_color: '#EA3323;',
shop_sold_number_typeface: '400',
shop_sold_number_size: 10,
shop_sold_number_color: "#999999",
shop_sold_number_color: '#999999',
shop_score_typeface: '400',
shop_score_size: 10,
shop_score_color: "#999999",
shop_button_typeface:'400',
shop_score_color: '#999999',
shop_button_typeface: '400',
shop_button_size: 12,
shop_button_color: [
{
color: '#FF3D53',
color_percentage: undefined
color_percentage: undefined,
},
{
color: '#D73A3A',
color_percentage: undefined
}
color_percentage: undefined,
},
],
shop_button_text_color: '#fff',
shop_icon_size: 10,
shop_icon_color: "#fff",
shop_icon_color: '#fff',
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};