parent
f819055fc7
commit
3e31e2fe11
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue