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

Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-10-15 18:37:50 +08:00
parent 0576f4ea6f 1cf31c634a
commit 2b4c912e8b
13 changed files with 120 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -3,6 +3,9 @@
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="链接">
<url-value v-model="form.link"></url-value>
</el-form-item>
<el-form-item label="背景颜色">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>

2
src/components/common/div-content/index.vue
View File

@ -287,7 +287,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
top: 0;
left: -0.2rem;
border: 0.2rem solid $cr-main;
z-index: 1;
z-index: 99999;
}
.plug-in-animation {
transition: all 0.3s ease-in-out;

1
src/components/model-custom/components/index-default.ts
View File

@ -128,6 +128,7 @@ export const panel_com_data = {
com_width: 100,
com_height: 100,
staging_height: 100,
link: {},
icon_rotate: 0,
background_img_style: '2',
background_img: [],

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

@ -288,10 +288,9 @@ const previous_layer = (index: number) => {
const old_data = get_diy_index_data(index);
// 删除当前位置信息
diy_data.value.splice(index, 1);
// 将数据插入上一层数据中
diy_data.value.splice(index + 1, 0, old_data);
// 设置对应的位置为显示
set_show_tabs(index + 1);
// 将数据插入下一层数据中
diy_data.value.splice(index - 1, 0, old_data);
set_show_tabs(index - 1);
}
}
@ -301,9 +300,10 @@ const underlying_layer = (index: number) => {
const old_data = get_diy_index_data(index);
// 删除当前位置信息
diy_data.value.splice(index, 1);
// 将数据插入下一层数据中
diy_data.value.splice(index - 1, 0, old_data);
set_show_tabs(index - 1);
// 将数据插入上一层数据中
diy_data.value.splice(index + 1, 0, old_data);
// 设置对应的位置为显示
set_show_tabs(index + 1);
}
}
//组件置顶
@ -337,7 +337,7 @@ const get_diy_index_data = (index: number) => {
};
// 设置当前选中的是那个
const set_show_tabs = (index: number) => {
is_show_component_line.value = false;
// is_show_component_line.value = false;
diy_data.value.forEach((item, for_index) => {
// 先将全部的设置为false,再将当前选中的设置为true
item.show_tabs = '0';
@ -447,8 +447,11 @@ const drop = (event: any) => {
let location_y = event.offsetY;
// 使用新函数调整位置
const { x: adjustedX, y: adjustedY } = adjustPosition(location_x, location_y, com_width, com_height, 390, center_height.value);
// 计算存在多少个相同的key
const list = diy_data.value.filter(item => item.key == draggedItem.value.key);
const newItem = {
...draggedItem.value,
new_name: list.length > 0 ? draggedItem.value.name + list.length : draggedItem.value.name, // 默认添加别名
location: {
x: adjustedX,
y: adjustedY,

4
src/components/model-custom/components/right-side-operation/index.vue
View File

@ -8,10 +8,10 @@
<el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="前置一层" placement="right">
<el-icon :class="['iconfont icon-arrow-top', { 'disabled': index === dataLength - 1 }]" @click.stop="previous_layer(index, index === dataLength - 1)" />
<el-icon :class="['iconfont icon-arrow-top', { 'disabled': index === 0 }]" @click.stop="previous_layer(index, index === 0)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="后置一层" placement="right">
<el-icon :class="['iconfont icon-arrow-bottom', { 'disabled': index === 0 }]" @click.stop="underlying_layer(index, index === 0)" />
<el-icon :class="['iconfont icon-arrow-bottom', { 'disabled': index === dataLength - 1 }]" @click.stop="underlying_layer(index, index === dataLength - 1)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置顶" placement="right">
<el-icon :class="['iconfont icon-top-up', { 'disabled': index === 0 }]" @click.stop="top_up(index, index === 0)" />

2
src/components/model-data-magic/components/product-list-show.vue
View File

@ -70,7 +70,7 @@
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}

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

@ -8,7 +8,7 @@
<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) }]">
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :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>
@ -39,7 +39,7 @@
<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 }`">
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :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>
@ -118,6 +118,7 @@ interface data_magic {
};
num: number;
flex: string;
title_text_gap: number;
outerflex: string;
heading_title?: string;
subtitle?: string;

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

@ -117,15 +117,15 @@ const data_content = {
// 不同风格的数据
const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row'}], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row' }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格9
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格9
]
const tabs_name = ref('content');
const state = reactive({
@ -180,6 +180,7 @@ const magic_list = (index: number) => {
data_content: cloneDeep(data_content),
data_style: {
...cloneDeep(data_style),
goods_price_size: show_padding(index, map_index) ? 12 : 18,
chunk_padding: {
padding: show_padding(index, map_index) ? 10 : 0,
padding_top: show_padding(index, map_index) ? 10 : 20,
@ -197,8 +198,21 @@ const selected_click = (index: number) => {
selected_active.value = index;
tabs_name.value = 'content';
}
const padding_handle = [
{ index: 2, index_index: [0 , 1] },
{ index: 3, index_index: [1 , 2] },
{ index: 4, index_index: [1 , 2] },
{ index: 5, index_index: [0, 1] },
{ index: 6, index_index: [0, 1, 2, 3] },
{ index: 7, index_index: [0, 1] },
{ index: 8, index_index: [1] },
]
const show_padding = (index:number, map_index:number) => {
return index == 7 && ![0, 1].includes(map_index)
const list = padding_handle.filter(item => item.index == index && item.index_index.includes(map_index))
if (list.length > 0 || (index == 7 && ![0, 1].includes(map_index))) {
return true;
}
return false;
}
//#endregion
const data_title = (item: any) => {

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

@ -2,7 +2,7 @@
<div :style="style_container">
<div :style="style_img_container">
<div class="search w re" :style="style">
<div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
<div class="box h oh flex align-c gap-10" :style="box_style">
<template v-if="form.is_icon_show == '1'">
<template v-if="form.icon_img.length > 0">
<div class="img-box">
@ -13,7 +13,14 @@
<el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
</template>
</template>
<span v-if="form.is_tips_show == '1'" :class="[props.isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
<template v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'">
<el-carousel :key="carouselKey" class="flex-1" indicator-position="none" :interval="interval_list.time" arrow="never" height="32px" direction="vertical" :autoplay="interval_list.is_roll == '1'">
<el-carousel-item v-for="(item, index) in form.hot_word_list" :key="index" class="flex align-c" :style="{ 'color': !isEmpty(new_style.hot_words_color) ? new_style.hot_words_color : item.color }">{{ item.value }}</el-carousel-item>
</el-carousel>
</template>
<template v-else>
<span v-if="form.is_tips_show == '1'" :class="[props.isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
</template>
</div>
<div v-if="form.is_search_show == '1'" class="abs search-botton h flex align-c jc-c" :style="search_button">
<template v-if="form.search_type === 'text'">
@ -33,7 +40,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer } from '@/utils';
import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer, get_math } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
@ -72,7 +79,7 @@ const style_img_container = computed(() => props.isPageSettings ? '' : common_im
const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
// 搜索框设置
const box_style = computed(() => {
let style = `border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
let style = `background: ${ new_style.value.search_bg_color };border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
if (form.value.is_center == '1') {
style += `justify-content: center;`;
}
@ -92,6 +99,41 @@ const search_button = computed(() => {
}
return style;
})
// 轮播图key值
const carouselKey = ref('0');
// 记录当前显示的轮播图的数据
const interval_list = ref({
time: 2000,
is_roll: '1',
length: 0,
is_hot_word_show: '0',
});
// 内容参数的集合
watchEffect(() => {
//#region 轮播图设置
const time = (new_style.value?.interval_time || 2) * 1000;
const is_roll = new_style.value.is_roll;
// 判断长度是否相等
const hot_word_length = form.value.hot_word_list.length;
const data = {
time: time,
is_roll: is_roll,
length: hot_word_length,
is_hot_word_show: form.value.is_hot_word_show,
}
// 旧数据
const oldDataStringified = JSON.stringify(interval_list);
// 新数据
const newDataStringified = JSON.stringify(data);
// 判断跟历史的是否相等，不相等更新组件时间
if (oldDataStringified != newDataStringified) {
// 更新旧数据
interval_list.value = JSON.parse(newDataStringified);
// 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math();
}
//#endregion
});
</script>
<style lang="scss" scoped>
.search {

3
src/components/model-search/model-search-content.vue
View File

@ -54,6 +54,9 @@
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">搜索热词</div>
<el-form-item label="是否显示" class="align-s">
<el-switch v-model="form.is_hot_word_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<drag :data="form.hot_word_list" @remove="remove" @on-sort="on_sort">
<template #default="scoped">
<el-input v-model="scoped.row.value" placeholder="请输入搜索热词" clearable />

15
src/components/model-search/model-search-styles.vue
View File

@ -44,10 +44,25 @@
<el-form-item label="搜索框线">
<color-picker v-model="form.search_border" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item label="搜索背景">
<color-picker v-model="form.search_bg_color" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item label="框体圆角">
<radius :value="form.search_border_radius" @update:value="border_radius_change"></radius>
</el-form-item>
</card-container>
<template v-if="search_content.is_hot_word_show == '1'">
<div class="bg-f5 divider-line" />
<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>
</template>
</el-form>
<template v-if="isShowCommon">
<div class="bg-f5 divider-line" />

4
src/components/page-settings/page-setting.vue
View File

@ -37,8 +37,8 @@ const default_data = {
header_background_img: [],
header_background_title_color: '#333',
header_background_title_typeface: '500',
header_background_title_size: 16,
function_buttons_type: 'black',
header_background_title_size: 14,
function_buttons_type: '0',
immersive_style: '0',
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],

8
src/config/const/search.ts
View File

@ -19,6 +19,7 @@ interface defaultSearch {
is_search_show: string;
search_type: string;
search_tips: string;
is_hot_word_show: string;
hot_word_list: hot_word_list[];
};
style: {
@ -32,7 +33,10 @@ interface defaultSearch {
tips_color: string;
hot_words_color: string;
search_border: string;
search_bg_color: string;
search_border_radius: object;
is_roll: string;
interval_time: number;
common_style: object;
};
}
@ -50,6 +54,7 @@ const defaultSearch: defaultSearch = {
is_search_show: '0',
search_type: 'text',
search_tips: '搜索',
is_hot_word_show: '0',
hot_word_list: [],
},
style: {
@ -69,6 +74,7 @@ const defaultSearch: defaultSearch = {
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_bg_color: '#fff',
search_border_radius: {
radius: 16,
radius_top_left: 16,
@ -76,6 +82,8 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
is_roll: '1',
interval_time: 3,
common_style: {
...defaultCommon,
padding_top: 9,