From 9ec2d6dd04f4f1640a8be814b832c94d7397f449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 28 Feb 2025 09:34:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=9A=E5=AE=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-blog-list/index.vue      | 448 ++++++++++++++++++
 .../model-blog-list-content.vue               | 229 +++++++++
 .../model-blog-list-setting.vue               |  33 ++
 .../model-blog-list-styles.vue                | 187 ++++++++
 src/components/model-blog-tabs/index.vue      |  90 ++++
 .../model-blog-tabs-content.vue               | 387 +++++++++++++++
 .../model-blog-tabs-setting.vue               |  33 ++
 .../model-blog-tabs-styles.vue                | 309 ++++++++++++
 src/config/const/blog-list.ts                 | 213 +++++++++
 src/config/const/blog-tabs.ts                 | 404 ++++++++++++++++
 10 files changed, 2333 insertions(+)
 create mode 100644 src/components/model-blog-list/index.vue
 create mode 100644 src/components/model-blog-list/model-blog-list-content.vue
 create mode 100644 src/components/model-blog-list/model-blog-list-setting.vue
 create mode 100644 src/components/model-blog-list/model-blog-list-styles.vue
 create mode 100644 src/components/model-blog-tabs/index.vue
 create mode 100644 src/components/model-blog-tabs/model-blog-tabs-content.vue
 create mode 100644 src/components/model-blog-tabs/model-blog-tabs-setting.vue
 create mode 100644 src/components/model-blog-tabs/model-blog-tabs-styles.vue
 create mode 100644 src/config/const/blog-list.ts
 create mode 100644 src/config/const/blog-tabs.ts

diff --git a/src/components/model-blog-list/index.vue b/src/components/model-blog-list/index.vue
new file mode 100644
index 00000000..407c4f2f
--- /dev/null
+++ b/src/components/model-blog-list/index.vue
@@ -0,0 +1,448 @@
+<template>
+    <div class="oh" :style="style_container">
+        <div :style="style_img_container">
+            <div class="re oh" :style="style">
+                <div v-if="!['4'].includes(blog_theme)" class="flex-warp" :class="blog_theme_class" :style="blog_theme != '3' ? blog_spacing : ''">
+                    <div v-for="(item, index) in data_list" :key="index" class="item oh" :style="blog_style">
+                        <div :class="blog_theme == '0' ? 'flex-row oh' : 'flex-col oh h'" :style="blog_img_style">
+                            <template v-if="blog_theme != '3'">
+                                <div class="oh re">
+                                    <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>
+                                    <!-- 角标设置 -->
+                                    <subscript-index :value="props.value"></subscript-index>
+                                </div>
+                            </template>
+                            <div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="blog_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="blog_theme != '0' ? content_padding : 'width: 0;'">
+                                <div class="flex-col" :class="blog_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
+                                    <div v-if="field_show.includes('3')" class="title" :class="blog_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="blog_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                    <div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</div>
+                                </div>
+                                <div class="flex-row jc-sb gap-8" :class="blog_theme == '3' ? 'ml-10' : 'align-e mt-10'">
+                                    <div :style="blog_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="blog_page_view">
+                                        <icon name="eye"></icon>
+                                        <div>
+                                            {{ item.data.access_count ? item.data.access_count : '16' }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="oh" :class="blog_theme_class">
+                    <swiper :key="carousel_key" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="Number(carousel_col) + 1" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="new_style.blog_spacing" :pause-on-mouse-enter="true" :modules="modules">
+                        <swiper-slide v-for="(item, index) in data_list" :key="index">
+                            <div class="item oh" :style="blog_style">
+                                <div class="h oh flex-col" :style="blog_img_style">
+                                    <div class="oh re h">
+                                        <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>
+                                        <template v-if="field_show.includes('3') && new_content.name_float == '1'">
+                                            <div class="text-line-1" :style="blog_name + float_name_style">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                        </template>
+                                        <!-- 角标设置 -->
+                                        <subscript-index :value="props.value"></subscript-index>
+                                    </div>
+                                    <div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && new_content.name_float == '0')" class="jc-sb flex-1 flex-col" :style="blog_theme != '0' ? content_padding : ''">
+                                        <div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
+                                            <div v-if="field_show.includes('3') && new_content.name_float == '0'" class="title text-line-2" :style="blog_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                            <div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</div>
+                                        </div>
+                                        <div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] ">
+                                            <div :style="blog_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="blog_page_view">
+                                                <icon name="eye"></icon>
+                                                <div>
+                                                    {{ item.data.access_count ? item.data.access_count : '16' }}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </swiper-slide>
+                    </swiper>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_radius, old_padding, old_margin } from '@/utils';
+import { isEmpty, cloneDeep } from 'lodash';
+// import blogAPI from '@/api/blog';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay } from 'swiper/modules';
+const modules = [Autoplay];
+/**
+ * @description: 文章列表（渲染）
+ * @param value{Object} 样式数据
+ * @param isCommonStyle{Object} 是否为通用样式
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    },
+});
+const error_img = ref('width:50px;padding:10px;');
+const style = ref('');
+const style_container = ref('');
+const style_img_container = ref('');
+interface dataObj {
+    cover?: string;
+    add_time?: string;
+    access_count?: string;
+    title?: string;
+    describe?: string;
+}
+interface blogList {
+    id: number | string;
+    data: dataObj;
+    new_title: string;
+    new_cover: uploadList[];
+}
+// 数据
+const data_list = ref<blogList[]>([]);
+// 风格
+const blog_theme = ref('0');
+// 是否显示
+const field_show = ref(['0', '1']);
+// 文章
+const blog_name = ref('');
+// 文章描述
+const blog_desc = ref('');
+// 日期
+const blog_date = ref('');
+// 浏览量
+const blog_page_view = ref('');
+// 内容圆角
+const content_radius = ref('');
+// 图片圆角
+const img_radius = ref('');
+// 内间距
+const content_padding = ref('');
+// 内容间距
+const content_spacing = ref('');
+// 文章间距
+const blog_spacing = ref('');
+const blog_item_height = ref('155');
+
+const blog_style = ref({});
+const blog_img_style = ref('');
+const default_data_list: blogList = {
+    id: 0,
+    data: {},
+    new_title: '测试文章标题',
+    new_cover: [],
+};
+// 内容
+const new_content = computed(() => props.value?.content || {});
+// 样式
+const new_style = computed(() => props.value?.style || {});
+// 获取自动数据
+const get_auto_data_list = async () => {
+    const { category_ids, number, order_by_type, order_by_rule, is_cover, keywords } = new_content.value;
+    const new_data = {
+        blog_keywords: keywords,
+        blog_category_ids: category_ids.join(','),
+        blog_order_by_type: order_by_type,
+        blog_order_by_rule: order_by_rule,
+        blog_number: number,
+        blog_is_cover: is_cover,
+    };
+    // const res = await blogAPI.getAutoList(new_data);
+    // new_content.value.data_auto_list = [];
+    // if (!isEmpty(res.data)) {
+    //     data_list.value = [];
+    //     res.data.forEach((child: any) => {
+    //         data_list.value.push({
+    //             id: get_math(),
+    //             new_title: '',
+    //             new_cover: [],
+    //             data: child,
+    //         });
+    //         new_content.value.data_auto_list.push({
+    //             id: get_math(),
+    //             new_title: '',
+    //             new_cover: [],
+    //             data: child,
+    //         });
+    //     });
+    // } else {
+    //     data_list.value = Array(4).fill(default_data_list);
+    // }
+};
+onMounted(() => {
+    // 判断数据类型是选择文章且数据不为空
+    if (new_content.value.data_type == '0' && !isEmpty(new_content.value.data_list)) {
+        data_list.value = new_content.value.data_list;
+    } else if (new_content.value.data_type == '1' && !isEmpty(new_content.value.data_auto_list)) {
+        // 判断数据是筛选文章且数据不为空
+        data_list.value = new_content.value.data_auto_list.map((item: any) => ({
+            id: get_math(),
+            new_title: '',
+            new_cover: [],
+            data: item,
+        }));
+    } else {
+        // 否则走默认数据
+        data_list.value = Array(4).fill(default_data_list);
+    }
+});
+// 监听new_content指定的数据变化
+const data_list_computer = computed(() => {
+    const { data_type, category_ids, number, order_by_type, order_by_rule, is_cover, data_list, keywords } = new_content.value;
+    return { data_type, category_ids, number, order_by_type, order_by_rule, is_cover, data_list, keywords };
+});
+// 监听new_content指定的数据的变化，来获取最新数据
+watch(
+    () => data_list_computer.value,
+    (new_value, old_value) => {
+        // 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
+        if (JSON.stringify(new_value) !== JSON.stringify(old_value) || props.isCommonStyle) {
+            if (new_value.data_type == '1') {
+                get_auto_data_list();
+            } else {
+                if (!isEmpty(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 }
+);
+
+// // 轮播宽度
+// const multicolumn_columns_width = computed(() => {
+//     const { carousel_col } = toRefs(new_content.value);
+//     const new_num = Number(carousel_col.value);
+//     // 计算间隔的空间。(gap * gap数量) / 模块数量
+//     let gap = (new_style.value.blog_spacing * (new_num - 1)) + (blog_left_right_width_margin.value * new_num) / new_num;
+//     return `calc(${100 / new_num}% - ${gap}px)`;
+// });
+// 文章内容高度
+const blog_name_height_computer = computed(() => {
+    return new_style.value.name_size * 2.4 + 'px';
+});
+// 文章行高计算
+const blog_name_line_height_computer = computed(() => {
+    return new_style.value.name_size * 1.2 + 'px';
+});
+// 轮播高度
+const carousel_height_computer = computed(() => {
+    return new_style.value.blog_height + 'px';
+});
+
+const theme_list = [
+    { name: '单列展示', value: '0', width:110, height: 83 },
+    { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+    { name: '大图展示', value: '2', width:0, height: 180 },
+    { name: '无图模式', value: '3', width:0, height: 0 },
+    { name: '左右滑动展示', value: '4', width:0, height: 0 },
+]
+// 宽度和高度为空的时候，修改默认值
+const blog_img_width = computed(() => {
+    if (typeof new_style.value.content_img_width == 'number') {
+        return new_style.value.content_img_width + 'px';
+    } else {
+        const list = theme_list.filter(item => item.value == new_content.value.theme);
+        if (list.length > 0) {
+            return list[0].width + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
+// 宽度和高度为空的时候，修改默认值
+const blog_img_height = computed(() => {
+    if (typeof new_style.value.content_img_height == 'number') {
+        return new_style.value.content_img_height + 'px';
+    } else {
+        const list = theme_list.filter(item => item.value == new_content.value.theme);
+        if (list.length > 0) {
+            return list[0].height + 'px';
+        } else {
+            return 'auto';
+        }
+    }
+});
+// 轮播图列数
+const carousel_col = ref('2');
+// 轮播图key值
+const carousel_key = ref('0');
+const autoplay = ref<boolean | object>(false);
+const slides_per_group = ref(1);
+
+// 文章名称浮动样式
+const float_name_style = computed(() => {
+    const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius = old_radius, name_bg_padding = old_padding, name_bg_margin = old_margin } = new_style.value;
+    const data = {
+        color_list: name_bg_color_list,
+        direction: name_bg_direction,
+    }
+    let location = 'position:absolute;bottom:0;left:0;right:0;'
+    return gradient_computer(data) + radius_computer(name_bg_radius) + padding_computer(name_bg_padding) + margin_computer(name_bg_margin) + location;
+});
+const field_desc_row = ref('1');
+const blog_left_right_width_margin = computed(() => {
+    const { margin = old_margin } = new_style.value;
+    return margin.margin_left + margin.margin_right;
+});
+// 监听value数据变化
+watch(
+    () => props.value,
+    (newVal, oldValue) => {
+        const new_content = newVal?.content;
+        const new_style = newVal?.style;
+        blog_theme.value = new_content.theme;
+        field_show.value = new_content.field_show;
+        // 样式
+        blog_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
+        // 文章描述
+        const desc_size = new_style.desc_size;
+        field_desc_row.value = new_content.field_desc_row;
+        if (new_content.field_desc_row == '2') {
+            blog_desc.value = 'font-size:' + desc_size + 'px;line-height:' + (desc_size > 0 ? desc_size + 3 : 0 ) + 'px;height:'+ (desc_size > 0 ? (desc_size + 3) * 2 : 0) + 'px;color:' + new_style.desc_color + ';';
+        } else {
+            blog_desc.value = 'font-size:' + desc_size + 'px;line-height:' + desc_size + 'px;height:'+ desc_size + 'px;color:' + new_style.desc_color + ';';
+        }
+        blog_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
+        blog_page_view.value = 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';';
+        content_radius.value = radius_computer(new_style.content_radius);
+        img_radius.value = radius_computer(new_style.img_radius);
+        // 内间距
+        content_padding.value = padding_computer(new_style.padding);
+        // 内容间距
+        content_spacing.value = `gap: ${new_style.content_spacing}px;`;
+        // 文章间距
+        blog_spacing.value = `gap: ${new_style.blog_spacing}px;`;
+        // 文章样式
+        blog_style.value = '';
+        blog_img_style.value = '';
+        // 背景图的处理
+        const blog_data = {
+            background_img_style: new_style.blog_background_img_style,
+            background_img: new_style.blog_background_img,
+        }
+        style.value = '';
+        // 样式处理
+        const all_style = gradient_handle(new_style.blog_color_list, new_style.blog_direction) + margin_computer(new_style.margin) + box_shadow_computer(new_style) + border_computer(new_style);
+        if (blog_theme.value == '0') {
+            blog_style.value += content_radius.value + all_style;
+            blog_img_style.value = content_spacing.value + content_padding.value + background_computer(blog_data);
+        } else if (blog_theme.value == '1') {
+            blog_style.value += `width: calc(50% - ${(new_style.blog_spacing + blog_left_right_width_margin.value * 2) / 2}px);` + content_radius.value + all_style;
+            blog_img_style.value = background_computer(blog_data);
+        } else if (blog_theme.value == '2') {
+            blog_style.value += content_radius.value + all_style;
+            blog_img_style.value = background_computer(blog_data);
+        } else if (blog_theme.value == '3') {
+            style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
+        } else if (blog_theme.value == '4') {
+            // 更新轮播图的key，确保更换时能重新更新轮播图
+            carousel_col.value = new_content.carousel_col || '1';
+            carousel_key.value = new_style.interval_time + new_style.is_roll + new_style.rolling_fashion;
+            // // 滚动时间
+            // interval_time.value = (new_style.interval_time || 2) * 1000;
+            // // 是否滚动修改
+            // is_roll.value = new_style.is_roll;
+            // 是否滚动
+            if (new_style.is_roll == '1' && data_list.value.length > 0) {
+                autoplay.value = {
+                    delay: (new_style.interval_time || 2) * 1000,
+                    pauseOnMouseEnter: true,
+                };
+            } else {
+                autoplay.value = false;
+            }
+            // 判断是平移还是整屏滚动
+            slides_per_group.value = new_style.rolling_fashion == 'translation' ? 1 : Number(new_content.carousel_col) + 1;
+            blog_item_height.value = `${new_style.blog_height}px`;
+            blog_style.value += content_radius.value + all_style;
+            blog_img_style.value = background_computer(blog_data);
+        }
+        if (new_style.common_style && props.isCommonStyle) {
+            style_container.value = common_styles_computer(new_style.common_style);
+            style_img_container.value = common_img_computer(new_style.common_style);
+        }
+    },
+    { deep: true, immediate: true }
+);
+// 文章主题class计算
+const blog_theme_class = computed(() => {
+    switch (blog_theme.value) {
+        case '0':
+            return 'style1 flex-col';
+        case '1':
+            return 'style2 flex-row flex-wrap';
+        case '2':
+            return 'style3 flex-col';
+        case '3':
+            return 'style4 flex-col';
+        default:
+            return 'style5';
+    }
+});
+</script>
+<style lang="scss" scoped>
+.style1 {
+    .item {
+        .img {
+            height: v-bind(blog_img_height);
+            width: v-bind(blog_img_width);
+        }
+    }
+}
+.style2 {
+    .item {
+        .img {
+            height: v-bind(blog_img_height);
+        }
+    }
+}
+.style3 {
+    .item {
+        .img {
+            width: 100%;
+            height: v-bind(blog_img_height);
+        }
+    }
+}
+.style4 {
+    .item {
+        &:not(:last-child) {
+            border-bottom: 0.1rem solid #eee;
+        }
+    }
+}
+.style5 {
+    .item {
+        height: v-bind(carousel_height_computer);
+        .img {
+            width: 100%;
+            height: 100%;
+        }
+        .title {
+            height: v-bind(blog_name_height_computer);
+            line-height: v-bind(blog_name_line_height_computer);
+        }
+    }
+}
+</style>
diff --git a/src/components/model-blog-list/model-blog-list-content.vue b/src/components/model-blog-list/model-blog-list-content.vue
new file mode 100644
index 00000000..da83a78b
--- /dev/null
+++ b/src/components/model-blog-list/model-blog-list-content.vue
@@ -0,0 +1,229 @@
+<template>
+    <div class="content">
+        <el-form :model="form" label-width="70" class="m-h">
+            <common-content-top :value="form.content_top"></common-content-top>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">展示设置</div>
+                <el-form-item label="选择风格">
+                    <el-radio-group v-model="form.theme" @change="theme_change">
+                        <el-radio v-for="item in base_list.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.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 class="card-container-br">
+                <div class="mb-12">文章设置</div>
+                <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
+                <data-filter type="article" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">列表设置</div>
+                <el-form-item label="是否显示">
+                    <el-checkbox-group v-model="form.field_show">
+                        <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item v-if="form.field_show.includes('2')" label="描述行数">
+                    <el-radio-group v-model="form.field_desc_row">
+                        <el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <template v-if="form.theme == '4'">
+                    <el-form-item label="标题浮起">
+                        <el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
+                    </el-form-item>
+                </template>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">角标设置</div>
+                <!-- 角标设置 -->
+                <subscript-content :value="form"></subscript-content>
+            </card-container>
+        </el-form>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { get_math } from '@/utils';
+import { commonStore } from '@/store';
+const common_store = commonStore();
+/**
+ * @description 文章列表（内容）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ * @param styles{Object} 样式
+ * @param defaultConfig{Object} 默认配置
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    styles: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+// 默认值
+const state = reactive({
+    form: props.value,
+    data: props.styles,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+const base_list = reactive({
+    theme_list: [
+        { name: '单列展示', value: '0', width:110, height: 83 },
+        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+        { name: '大图展示', value: '2', width:0, height: 180 },
+        { name: '无图模式', value: '3', width:0, height: 0 },
+        { name: '左右滑动展示', value: '4', width:0, height: 0 },
+    ],
+    carousel_col_list: [
+        { name: '单列展示', value: '0' },
+        { name: '两列展示', value: '1' },
+        { name: '三列展示', value: '2' },
+        { name: '四列展示', value: '3' },
+    ],
+    data_type_list: [
+        { name: '选择文章', value: '0' },
+        { name: '筛选文章', value: '1' },
+    ],
+    field_show_list: [
+        { name: '文章标题', value: '3' },
+        { name: '日期时间', value: '0' },
+        { name: '浏览量', value: '1' },
+        { name: '描述', value: '2' },
+    ],
+    field_desc_row: [
+        { name: '一行', value: '1' },
+        { name: '两行', value: '2' }
+    ]
+});
+
+const emits = defineEmits(['theme_change']);
+onMounted(() => {
+    // 如果历史数据没有操作，则修改默认值
+    const { content_img_width = '', content_img_height = '' } = data.value;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.value.theme)) {
+        const list = base_list.theme_list.filter(item => item.value == form.value.theme);
+        if (list.length > 0) {
+            emits('theme_change', list[0].width, list[0].height);
+        }
+    }
+});
+// 主题改变
+const theme_change = (val: any) => {
+    if (val == '3' || val == '4') {
+        form.value.field_show = ['1', '3'];
+    } else {
+        form.value.field_show = ['0', '1', '3'];
+    }
+    if (val == '0') {
+        if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            data.value.img_radius.radius = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+        }
+    } else {
+        if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            data.value.img_radius.radius = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+        }
+    }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.theme_list.filter(item => item.value == form.value.theme);
+    if (list.length > 0) {
+        // emits('theme_change', list[0].width, list[0].height);
+        data.value.content_img_width = list[0].width;
+        data.value.content_img_height = list[0].height;
+    }
+};
+// 移除
+const data_list_remove = (index: number) => {
+    form.value.data_list.splice(index, 1);
+};
+const url_value_multiple_bool = ref(true);
+const data_list_replace_index = ref(0);
+// 替换
+const data_list_replace = (index: number) => {
+    data_list_replace_index.value = index;
+    url_value_multiple_bool.value = false;
+    url_value_dialog_visible.value = true;
+};
+// 拖动排序
+const data_list_sort = (item: any) => {
+    form.value.data_list = item;
+};
+//  新增
+const add = () => {
+    url_value_multiple_bool.value = true;
+    url_value_dialog_visible.value = true;
+};
+// 开启关闭链接
+const url_value_dialog_visible = ref(false);
+const url_value_dialog_call_back = (item: any[]) => {
+    if (url_value_multiple_bool.value) {
+        item.forEach((child: any) => {
+            form.value.data_list.push({
+                id: get_math(),
+                new_title: '',
+                new_cover: [],
+                data: child,
+            });
+        });
+    } else {
+        form.value.data_list[data_list_replace_index.value] = {
+            id: get_math(),
+            new_title: '',
+            new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
+            data: item[0],
+        };
+    }
+};
+// 标题浮起之后文章标题的颜色和字体更新
+const switch_chage = (val: string | number | boolean) => {
+    if (val == '1') {
+        data.value.name_color = '#fff';
+        data.value.name_weight = '400';
+    } else {
+        data.value.name_color = '#333';
+        data.value.name_weight = 'bold';
+    }
+};
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+}
+.img {
+    width: 4rem;
+    height: 4rem;
+}
+.number-show {
+    :deep(.el-input__wrapper .el-input__inner) {
+        text-align: left;
+    }
+}
+</style>
diff --git a/src/components/model-blog-list/model-blog-list-setting.vue b/src/components/model-blog-list/model-blog-list-setting.vue
new file mode 100644
index 00000000..1c5ca6d0
--- /dev/null
+++ b/src/components/model-blog-list/model-blog-list-setting.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="setting-content">
+        <template v-if="type == '1'">
+            <model-blog-list-content :value="form.content" :styles="form.style" :default-config="data_config"></model-blog-list-content>
+        </template>
+        <template v-else-if="type == '2'">
+            <model-blog-list-styles :value="form.style" :content="form.content" :default-config="data_config"></model-blog-list-styles>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+/**
+ * @description: 文章选项卡列表（设置）
+ * @param type{String} 类型是进入内容组件还是样式组件
+ * @param value{Object} 样式数据
+ */
+const props = defineProps({
+    type: {
+        type: String,
+        default: '1',
+    },
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+const data_config = reactive({
+    // 图片不同风格下的圆角
+    img_radius_0: 4,
+    img_radius_1: 0,
+});
+const form = ref(props.value);
+</script>
diff --git a/src/components/model-blog-list/model-blog-list-styles.vue b/src/components/model-blog-list/model-blog-list-styles.vue
new file mode 100644
index 00000000..820ae2e2
--- /dev/null
+++ b/src/components/model-blog-list/model-blog-list-styles.vue
@@ -0,0 +1,187 @@
+<template>
+    <div class="styles">
+        <el-form :model="form" label-width="70">
+            <card-container class="card-container">
+                <div class="mb-12">列表样式</div>
+                <el-form-item v-if="theme != '3'" label="文章背景">
+                    <background-common v-model:color_list="form.blog_color_list" v-model:direction="form.blog_direction" v-model:img_style="form.blog_background_img_style" v-model:img="form.blog_background_img" @mult_color_picker_event="mult_color_picker_event" />
+                </el-form-item>
+                <el-form-item label="文章名称">
+                    <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
+                        <template v-if="data.theme == '4' && data.name_float == '1'">
+                            <el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
+                                <mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
+                            </el-form-item>
+                            <el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
+                                <margin :value="form.name_bg_margin"></margin>
+                            </el-form-item>
+                            <el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
+                                <padding :value="form.name_bg_padding"></padding>
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
+                                <radius :value="form.name_bg_radius"></radius>
+                            </el-form-item>
+                        </template>
+                    </color-text-size-group>
+                </el-form-item>
+                <el-form-item label="文章描述">
+                    <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
+                        <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.name_desc_space" :max="100"></slider>
+                        </el-form-item>
+                    </color-text-size-group>
+                </el-form-item>
+                <el-form-item label="日期时间">
+                    <color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
+                </el-form-item>
+                <el-form-item label="浏览量">
+                    <color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
+                </el-form-item>
+                <el-form-item v-if="theme != '3'" label="外间距">
+                    <margin :value="form.margin"></margin>
+                </el-form-item>
+                <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>
+                    </el-form-item>
+                </template>
+                <template v-if="theme != '3'">
+                    <el-form-item label="文章间距">
+                        <slider v-model="form.blog_spacing"></slider>
+                    </el-form-item>
+                </template>
+                <el-form-item label="内容圆角">
+                    <radius :value="form.content_radius"></radius>
+                </el-form-item>
+                <template v-if="theme == '4'">
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.blog_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="theme != '3'">
+                    <el-form-item label="图片圆角">
+                        <radius :value="form.img_radius"></radius>
+                    </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form"></shadow-config>
+                </template>
+                <template v-if="!['3', '4'].includes(theme)">
+                    <el-form-item v-if="['0'].includes(theme)" label="图片宽度">
+                        <slider v-model="form.content_img_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="图片高度">
+                        <slider v-model="form.content_img_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+            </card-container>
+            <template v-if="theme == '4'">
+                <div class="divider-line data-tabs-line"></div>
+                <card-container class="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>
+                    <template v-if="form.is_roll === 1">
+                        <el-form-item label="间隔时间">
+                            <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+                        </el-form-item>
+                        <el-form-item label="滚动方式">
+                            <el-radio-group v-model="form.rolling_fashion">
+                                <el-radio value="translation">平移</el-radio>
+                                <el-radio value="cut-screen">切屏</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </template>
+                </card-container>
+            </template>
+            <!-- 角标 -->
+            <template v-if="data.seckill_subscript_show == '1'">
+                <div class="divider-line data-tabs-line"></div>
+                <subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
+            </template>
+        </el-form>
+        <template v-if="isCommonStyle">
+            <div class="divider-line data-tabs-line"></div>
+            <common-styles :value="form.common_style" @update:value="common_style_update" />
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+/**
+ * @description: 博客列表（样式）
+ * @param value{Object} 样式数据
+ * @param content{Object} 内容数据
+ * @param defaultConfig{Object} 默认配置
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+// 默认值
+const state = reactive({
+    form: props.value,
+    data: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+const theme = computed(() => data.value.theme);
+if (theme.value == '0') {
+    if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+        form.value.img_radius.radius = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+    }
+} else {
+    if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+        form.value.img_radius.radius = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+    }
+}
+// 文章背景渐变设置
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.blog_color_list = arry;
+    form.value.blog_direction = type.toString();
+};
+// 文章标题浮起显示设置
+const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.name_bg_color_list = arry;
+    form.value.name_bg_direction = type.toString();
+};
+const emit = defineEmits(['update:value']);
+const common_style_update = (value: any) => {
+    form.value.common_style = value;
+};
+</script>
+<style lang="scss" scoped>
+.styles {
+    width: 100%;
+}
+</style>
diff --git a/src/components/model-blog-tabs/index.vue b/src/components/model-blog-tabs/index.vue
new file mode 100644
index 00000000..6d3abe00
--- /dev/null
+++ b/src/components/model-blog-tabs/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <div :style="style_container">
+        <div class="flex-col" :style="style_img_container">
+            <div class="oh" :style="tabs_container">
+                <div class="oh" :style="tabs_img_container">
+                    <tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
+                </div>
+            </div>
+            <div class="oh" :style="article_container">
+                <div class="oh" :style="article_img_container">
+                    <model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
+import { cloneDeep } from 'lodash';
+/**
+ * @description: 文章选项卡列表 （渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+const style_container = ref('');
+const style_img_container = ref('');
+const article_tabs = ref({});
+const tabs_active_index = ref(0);
+// 选项卡独立样式
+const tabs_container = ref('');
+const tabs_img_container = ref('');
+// 区域内边距
+const article_container = ref('');
+const article_img_container = ref('');
+// 打开滑动固定开关之后，显示的样式
+const tabs_sliding_fixed_bg = ref('');
+watch(
+    () => props.value,
+    (val) => {
+        const newVal = cloneDeep(val);
+        const new_style = newVal?.style;
+        let new_data = newVal;
+        tabs_active_index.value = new_data.content.tabs_active_index;
+        // 选项卡背景设置
+        const tabs_data = {
+            color_list: new_style.tabs_bg_color_list,
+            direction: new_style.tabs_bg_direction,
+            background_img_style: new_style.tabs_bg_background_img_style,
+            background_img: new_style.tabs_bg_background_img,
+        }
+        tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
+        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
+        tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
+        // 文章区域背景设置
+        const article_content_data = {
+            color_list: new_style.article_content_color_list,
+            direction: new_style.article_content_direction,
+            background_img_style: new_style.article_content_background_img_style,
+            background_img: new_style.article_content_background_img,
+        }
+        article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin) + radius_computer(new_style.article_content_radius) + border_computer(new_style.article_content) + box_shadow_computer(new_style.article_content);
+        article_img_container.value = background_computer(article_content_data) + padding_computer(new_style.article_content_padding);
+        //文章内容设置
+        new_data.content.theme = new_data.content.article_theme;
+        new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
+        new_data.content.keywords = new_data.content.tabs_list[tabs_active_index.value].keywords;
+        new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
+        new_data.content.carousel_col = new_data.content.article_carousel_col;
+        new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
+        new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
+        new_data.content.data_ids = new_data.content.tabs_list[tabs_active_index.value].data_ids;
+        new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
+        new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
+        new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
+        new_data.content.field_show = new_data.content.field_show;
+        new_data.content.is_cover = new_data.content.tabs_list[tabs_active_index.value].is_cover;
+        article_tabs.value = new_data;
+
+        style_container.value = common_styles_computer(new_style.common_style);
+        style_img_container.value = common_img_computer(new_style.common_style) + `gap: ${new_style.article_content_spacing}px;`;
+    },
+    { immediate: true, deep: true }
+);
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/model-blog-tabs/model-blog-tabs-content.vue b/src/components/model-blog-tabs/model-blog-tabs-content.vue
new file mode 100644
index 00000000..2e1844fd
--- /dev/null
+++ b/src/components/model-blog-tabs/model-blog-tabs-content.vue
@@ -0,0 +1,387 @@
+<template>
+    <div class="content">
+        <el-form :model="form" label-width="74" class="m-h">
+            <common-content-top :value="form.content_top"></common-content-top>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">展示设置</div>
+                <el-form-item label="对齐方式">
+                    <el-radio-group v-model="form.justification" @change="tabs_theme_change">
+                        <el-radio value="left">居左</el-radio>
+                        <el-radio value="center">居中</el-radio>
+                        <el-radio value="right">居右</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="选项卡置顶">
+                    <div class="flex-row align-c gap-10">
+                        <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
+                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">
+                            <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                        </el-tooltip>
+                    </div>
+                </el-form-item>
+                <template v-if="form.tabs_top_up == '1' && is_not_general_safe_distance">
+                    <el-form-item label="安全距离">
+                        <div class="flex-row align-c gap-10">
+                            <el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
+                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
+                                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                            </el-tooltip>
+                        </div>
+                    </el-form-item>
+                </template>
+                <el-form-item label="选项卡风格">
+                    <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
+                        <el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
+                    <upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
+                </el-form-item>
+                <el-form-item label="文章风格">
+                    <el-radio-group v-model="form.blog_theme" @change="blog_theme_change">
+                        <el-radio v-for="item in base_list.blog_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="form.blog_theme == '4'" label="轮播列数">
+                    <el-radio-group v-model="form.blog_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>
+                <div class="mb-12">选项卡设置</div>
+                <div class="nav-list">
+                    <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
+                        <template #default="{ row, index }">
+                            <div class="flex-col w">
+                                <el-form-item label="显示类型" class="w mb-10">
+                                    <div class="flex-col gap-10 w h">
+                                        <el-radio-group v-model="row.tabs_type">
+                                            <el-radio value="0">文本</el-radio>
+                                            <el-radio value="1">图片/图标</el-radio>
+                                        </el-radio-group>
+                                        <template v-if="row.tabs_type == '1'">
+                                            <upload v-model="row.tabs_img" v-model:icon-value="row.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                        </template>
+                                        <template v-else>
+                                            <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
+                                        </template>
+                                    </div>
+                                </el-form-item>
+                                <sliding-fixed v-model="row.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, index)"></sliding-fixed>
+                                <template v-if="form.tabs_active_index == index">
+                                    <el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
+                                        <el-input v-model="row.desc" placeholder="请输入简介" clearable />
+                                    </el-form-item>
+                                    <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
+                                    <data-filter type="blog" :value="row" :list="row.data_list" :base-list="base_list" @add="blog_add(index)" @data_list_replace="data_list_replace($event, index)" @data_list_remove="data_list_remove($event, index)" @data_list_sort="data_list_sort($event, index)"></data-filter>
+                                </template>
+                            </div>
+                        </template>
+                    </drag>
+                    <el-button class="mtb-20 w" @click="tabs_add">+添加</el-button>
+                </div>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">列表设置</div>
+                <el-form-item label="是否显示">
+                    <el-checkbox-group v-model="form.field_show">
+                        <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item v-if="form.field_show.includes('2')" label="描述行数">
+                    <el-radio-group v-model="form.field_desc_row">
+                        <el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <template v-if="form.blog_theme == '4'">
+                    <el-form-item label="标题浮起">
+                        <el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
+                    </el-form-item>
+                </template>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">角标设置</div>
+                <!-- 角标设置 -->
+                <subscript-content :value="form"></subscript-content>
+            </card-container>
+        </el-form>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['blog']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { isEmpty } from 'lodash';
+import { get_math, tabs_style } from '@/utils';
+import { commonStore } from '@/store';
+const common_store = commonStore();
+/**
+ * @description: 文章选项卡列表 （内容）
+ * @param value{Object} 内容数据
+ * @param tabsStyle{Object} tabs样式数据
+ * @param defaultConfig{Object} 默认配置
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+const form = reactive(props.value);
+const base_list = reactive({
+    tabs_theme_list: [
+        { name: '样式一', value: '0' },
+        { name: '样式二', value: '1' },
+        { name: '样式三', value: '2' },
+        { name: '样式四', value: '3' },
+    ],
+    blog_theme_list: [
+        { name: '单列展示', value: '0', width:110, height: 83 },
+        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+        { name: '大图展示', value: '2', width:0, height: 180 },
+        { name: '无图模式', value: '3', width:0, height: 0 },
+        { name: '左右滑动展示', value: '4', width:0, height: 0 },
+    ],
+    carousel_col_list: [
+        { name: '单列展示', value: '0' },
+        { name: '两列展示', value: '1' },
+        { name: '三列展示', value: '2' },
+        { name: '四列展示', value: '3' },
+    ],
+    data_type_list: [
+        { name: '选择文章', value: '0' },
+        { name: '筛选文章', value: '1' },
+    ],
+    field_show_list: [
+        { name: '文章标题', value: '3' },
+        { name: '日期时间', value: '0' },
+        { name: '浏览量', value: '1' },
+        { name: '描述', value: '2' },
+    ],
+    field_desc_row: [
+        { name: '一行', value: '1' },
+        { name: '两行', value: '2' }
+    ]
+});
+const emits = defineEmits(['theme_change']);
+onMounted(() => {
+    // 如果历史数据没有操作，则修改默认值
+    const { content_img_width = '', content_img_height = '' } = styles;
+    // 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
+    if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.theme)) {
+        const list = base_list.blog_theme_list.filter(item => item.value == form.theme);
+        if (list.length > 0) {
+            emits('theme_change', list[0].width, list[0].height);
+        }
+    }
+    if (form.tabs_list.length > 1) {
+        form.tabs_list.forEach((item: any) => {
+            item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
+            item.tabs_img = !isEmpty(item.tabs_img) ? item.tabs_img : [];
+            item.tabs_icon = !isEmpty(item.tabs_icon) ? item.tabs_icon : '';
+            item.tabs_type = !isEmpty(item.tabs_type) ?  item.tabs_type : '0';
+        });
+    }
+});
+
+// 监听tabs_theme_list的变化
+const blog_theme_change = (val: any) => {
+    if (val == '3' || val == '4') {
+        form.field_show = ['1', '3'];
+    } else {
+        form.field_show = ['0', '1', '3'];
+    }
+    if (val == '0') {
+        if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            styles.img_radius.radius = props.defaultConfig.img_radius_0;
+            styles.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+            styles.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+            styles.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+            styles.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+        }
+    } else {
+        if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            styles.img_radius.radius = props.defaultConfig.img_radius_1;
+            styles.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+            styles.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+            styles.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+            styles.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+        }
+    }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.blog_theme_list.filter(item => item.value == val);
+    if (list.length > 0) {
+        // emits('theme_change', list[0].width, list[0].height);
+        styles.value.content_img_width = list[0].width;
+        styles.value.content_img_height = list[0].height;
+    }
+};
+
+// 开启关闭链接
+const url_value_dialog_visible = ref(false);
+
+// 选项卡点击
+const tabs_list_click = (item: any, index: number) => {
+    form.tabs_active_index = index;
+};
+// 选项卡设置
+const tabs_list_remove = (index: number) => {
+    if (form.tabs_list.length > 1) {
+        form.tabs_list.splice(index, 1);
+        if (form.tabs_list.length > index) {
+            form.tabs_active_index = index;
+        } else {
+            form.tabs_active_index = index - 1;
+        }
+    } else {
+        form.tabs_active_index = 0;
+        ElMessage.warning('至少保留一个选项卡');
+    }
+};
+// 拖拽排序
+const tabs_list_sort = (item: any) => {
+    // 拖拽完成后更新数组
+    form.tabs_list = item;
+};
+// 添加选项卡
+const tabs_add = () => {
+    form.tabs_list.push({
+        id: get_math(),
+        tabs_type: '0', 
+        tabs_img: [], 
+        tabs_icon: '',
+        is_sliding_fixed: '0',
+        title: '',
+        desc: '',
+        data_type: '0',
+        category: [],
+        number: 4,
+        order_by_type: '0',
+        order_by_rule: '0',
+        is_cover: '1',
+        data_list: [],
+    });
+    form.tabs_active_index = form.tabs_list.length - 1;
+    // emit('update:value', form);
+};
+
+// 指定文章
+const data_list_remove = (index: number, blog_index: number) => {
+    form.tabs_list[blog_index].data_list.splice(index, 1);
+};
+// 拖拽排序
+const data_list_sort = (item: any, index: number) => {
+    form.tabs_list[index].data_list = item;
+};
+
+const url_value_multiple_bool = ref(true);
+const data_list_replace_index = ref(0);
+
+// 替换
+const data_list_replace = (index: number, row_index: number) => {
+    blog_index.value = row_index;
+    data_list_replace_index.value = index;
+    url_value_multiple_bool.value = false;
+    url_value_dialog_visible.value = true;
+};
+
+const blog_index = ref(0);
+// 添加文章
+const blog_add = (index: number) => {
+    url_value_multiple_bool.value = true;
+    url_value_dialog_visible.value = true;
+    blog_index.value = index;
+};
+// 添加回调
+const url_value_dialog_call_back = (item: any[]) => {
+    if (url_value_multiple_bool.value) {
+        item.forEach((child: any) => {
+            form.tabs_list[blog_index.value].data_list.push({
+                id: get_math(),
+                new_title: '',
+                new_cover: [],
+                data: child,
+            });
+        });
+    } else {
+        form.tabs_list[blog_index.value].data_list[data_list_replace_index.value] = {
+            id: get_math(),
+            new_title: '',
+            new_cover: form.tabs_list[blog_index.value].data_list[data_list_replace_index.value]?.new_cover || [],
+            data: item[0],
+        };
+    }
+};
+/**
+ * 处理滑动固定状态变化的函数
+ * 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
+ * 
+ * @param val 新的滑动固定状态值，可以是字符串、数字或布尔值
+ * @param index 当前标签页的索引
+ */
+ const sliding_fixed_change = (val: string | number | boolean, index: number) => {
+    // 查找除当前标签页外，其他标签页中是否已有滑动固定的
+    const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
+    // 如果当前标签页的滑动固定状态为'1'，且已存在其他滑动固定的标签页
+    if (val == '1' && tabs_list_is_sliding_fixed != -1) {
+        // 遍历所有标签页，将其他标签页的滑动固定状态设置为'0'
+        form.value.tabs_list.forEach((item: any, index1: number) => {
+            if (index != index1) {
+                item.is_sliding_fixed = '0';
+            }
+        });
+    }
+}
+
+const styles = reactive(props.tabStyle);
+// 颜色主题切换
+const tabs_theme_change = (val: string | number | boolean | undefined): void => {
+    styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
+};
+// 沉浸模式下是否设置安全距离
+const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
+watchEffect(() => {
+    if (!is_not_general_safe_distance.value) {
+        form.value.is_general_safe_distance = '0';
+    }
+});
+// 标题浮起之后文章标题的颜色和字体更新
+const switch_chage = (val: string | number | boolean) => {
+    if (val == '1') {
+        styles.name_color = '#fff';
+        styles.name_weight = '400';
+    } else {
+        styles.name_color = '#333';
+        styles.name_weight = 'bold';
+    }
+};
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+}
+.img {
+    width: 4rem;
+    height: 4rem;
+}
+.number-show {
+    :deep(.el-input__wrapper .el-input__inner) {
+        text-align: left;
+    }
+}
+</style>
diff --git a/src/components/model-blog-tabs/model-blog-tabs-setting.vue b/src/components/model-blog-tabs/model-blog-tabs-setting.vue
new file mode 100644
index 00000000..93f63abb
--- /dev/null
+++ b/src/components/model-blog-tabs/model-blog-tabs-setting.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="setting-content">
+        <template v-if="type == '1'">
+            <model-blog-tabs-content :value="form.content" :tab-style="form.style" :default-config="data_config"></model-blog-tabs-content>
+        </template>
+        <template v-else-if="type == '2'">
+            <model-blog-tabs-styles :value="form.style" :content="form.content" :tabs-style="form.content.tabs_theme" :default-config="data_config"></model-blog-tabs-styles>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+/**
+ * @description: 文章选项卡列表 （设置）
+ * @param type{String} 类型（1：内容，2：样式）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
+const props = defineProps({
+    type: {
+        type: String,
+        default: '1',
+    },
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+const data_config = reactive({
+    // 图片不同风格下的圆角
+    img_radius_0: 4,
+    img_radius_1: 0,
+});
+const form = ref(props.value);
+</script>
diff --git a/src/components/model-blog-tabs/model-blog-tabs-styles.vue b/src/components/model-blog-tabs/model-blog-tabs-styles.vue
new file mode 100644
index 00000000..1cd77cf5
--- /dev/null
+++ b/src/components/model-blog-tabs/model-blog-tabs-styles.vue
@@ -0,0 +1,309 @@
+<template>
+    <div class="styles">
+        <el-form :model="form" label-width="74">
+            <card-container>
+                <div class="mb-12">选项卡样式</div>
+                <el-form-item label="选中装饰">
+                    <el-radio-group v-if="tabsStyle == '0'" v-model="form.tabs_one_theme">
+                        <el-radio value="0">样式一</el-radio>
+                        <el-radio value="1">样式二</el-radio>
+                    </el-radio-group>
+                    <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
+                </el-form-item>
+                <!-- 装饰图标设置 -->
+                <template v-if="data.tabs_theme == '3'">
+                    <el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
+                        <slider v-model="form.tabs_adorn_icon_size"></slider>
+                    </el-form-item>
+                    <el-form-item v-else label="装饰图片">
+                        <div class="flex-col gap-10 w">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="40">
+                                <radius :value="form.tabs_adorn_img_radius"></radius>
+                            </el-form-item>
+                            <el-form-item label="高度" label-width="40">
+                                <slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
+                            </el-form-item>
+                        </div>
+                    </el-form-item>
+                </template>
+                <el-form-item label="选中文字">
+                    <color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
+                </el-form-item>
+                <el-form-item label="未选文字">
+                    <color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
+                </el-form-item>
+                <el-form-item label="选中图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']"  />
+                </el-form-item>
+                <el-form-item label="未选图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
+                </el-form-item>
+                <el-form-item label="图片设置">
+                    <div class="flex-col gap-10 w">
+                        <template v-if="['2', '4'].includes(data.tabs_theme)">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                        </template>
+                        <el-form-item label="圆角" label-width="40">
+                            <radius :value="form.tabs_img_radius"></radius>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="40">
+                            <slider v-model="form.tabs_img_height" :max="200"></slider>
+                        </el-form-item>
+                    </div>
+                </el-form-item>
+                <el-form-item label="上下间距">
+                    <slider v-model="form.tabs_sign_spacing" :min="-50" :max="50"></slider>
+                </el-form-item>
+                <el-form-item label="左右间距">
+                    <slider v-model="form.tabs_spacing" :max="100"></slider>
+                </el-form-item>
+                <el-form-item label="选项卡背景">
+                    <background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.tabs_radius"></radius>
+                </el-form-item>
+                <el-form-item label="外边距">
+                    <margin :value="form.tabs_margin"></margin>
+                </el-form-item>
+                <el-form-item label="内边距">
+                    <padding :value="form.tabs_padding"></padding>
+                </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.tabs_content"></shadow-config>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">内容样式</div>
+                <el-form-item label="内容背景">
+                    <background-common v-model:color_list="form.blog_content_color_list" v-model:direction="form.blog_content_direction" v-model:img_style="form.blog_content_background_img_style" v-model:img="form.blog_content_background_img" @mult_color_picker_event="blog_content_mult_color_picker_event" />
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.blog_content_radius"></radius>
+                </el-form-item>
+                <el-form-item label="外间距">
+                    <margin :value="form.blog_content_margin"></margin>
+                </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :value="form.blog_content_padding"></padding>
+                </el-form-item>
+                <el-form-item label="数据间距">
+                    <slider v-model="form.blog_content_spacing" :max="100"></slider>
+                </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.blog_content.border_is_show" v-model:color="form.blog_content.border_color" v-model:style="form.blog_content.border_style" v-model:size="form.blog_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.blog_content"></shadow-config>
+            </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">文章样式</div>
+                <el-form-item v-if="theme != '3'" label="文章背景">
+                    <background-common v-model:color_list="form.blog_color_list" v-model:direction="form.blog_direction" v-model:img_style="form.blog_background_img_style" v-model:img="form.blog_background_img" @mult_color_picker_event="mult_color_picker_event" />
+                </el-form-item>
+                <el-form-item label="文章名称">
+                    <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.blog_theme == '4' && data.name_float == '1' ? 60 : 40">
+                        <template v-if="data.blog_theme == '4' && data.name_float == '1'">
+                            <el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
+                                <mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
+                            </el-form-item>
+                            <el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
+                                <margin :value="form.name_bg_margin"></margin>
+                            </el-form-item>
+                            <el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
+                                <padding :value="form.name_bg_padding"></padding>
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
+                                <radius :value="form.name_bg_radius"></radius>
+                            </el-form-item>
+                        </template>
+                    </color-text-size-group>
+                </el-form-item>
+                <el-form-item label="文章描述">
+                    <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
+                        <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.name_desc_space"></slider>
+                        </el-form-item>
+                    </color-text-size-group>
+                </el-form-item>
+                <el-form-item label="日期时间">
+                    <color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
+                </el-form-item>
+                <el-form-item label="浏览量">
+                    <color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
+                </el-form-item>
+                <template v-if="theme != '3'">
+                    <el-form-item label="外间距">
+                        <margin :value="form.margin"></margin>
+                    </el-form-item>
+                </template>
+                <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>
+                    </el-form-item>
+                </template>
+                <template v-if="theme != '3'">
+                    <el-form-item label="文章间距">
+                        <slider v-model="form.blog_spacing"></slider>
+                    </el-form-item>
+                </template>
+                <el-form-item label="内容圆角">
+                    <radius :value="form.content_radius"></radius>
+                </el-form-item>
+                <template v-if="theme == '4'">
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.blog_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="theme != '3'">
+                    <el-form-item label="图片圆角">
+                        <radius :value="form.img_radius"></radius>
+                    </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form"></shadow-config>
+                </template>
+                <template v-if="!['3', '4'].includes(theme)">
+                    <el-form-item v-if="['0'].includes(theme)" label="图片宽度">
+                        <slider v-model="form.content_img_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="图片高度">
+                        <slider v-model="form.content_img_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+            </card-container>
+            <template v-if="theme == '4'">
+                <div class="divider-line"></div>
+                <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>
+                    <template v-if="form.is_roll == 1">
+                        <el-form-item label="间隔时间">
+                            <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+                        </el-form-item>
+                        <el-form-item label="滚动方式">
+                            <el-radio-group v-model="form.rolling_fashion">
+                                <el-radio value="translation">平移</el-radio>
+                                <el-radio value="cut-screen">切屏</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </template>
+                </card-container>
+            </template>
+            <!-- 秒杀角标 -->
+            <template v-if="data.seckill_subscript_show == '1'">
+                <div class="divider-line"></div>
+                <subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
+            </template>
+        </el-form>
+        <div class="divider-line"></div>
+        <common-styles :value="form.common_style" @update:value="common_styles_update" />
+    </div>
+</template>
+<script setup lang="ts">
+import { isEmpty } from 'lodash'
+/**
+ * @description: 文章选项卡列表 （样式）
+ * @param value{Object} 样式数据
+ * @param content{Object} 内容数据
+ * @param defaultConfig{Object} 默认配置
+ * @param tabsStyle{String} 选项卡风格
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+    tabsStyle: {
+        type: String,
+        default: '',
+    },
+});
+// 默认值
+const state = reactive({
+    form: props.value,
+    data: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+// 主题
+const theme = computed(() => data.value.blog_theme);
+// 兼容旧数据
+if (theme.value == '0') {
+    if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+        form.value.img_radius.radius = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+        form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+    }
+} else {
+    if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+        form.value.img_radius.radius = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+        form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+    }
+}
+//  选项卡选中事件
+const tabs_checked_event = (arry: string[], type: number) => {
+    form.value.tabs_checked = arry;
+    form.value.tabs_direction = type.toString();
+};
+// 选项卡背景渐变设置
+const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.tabs_bg_color_list = arry;
+    form.value.tabs_bg_direction = type.toString();
+};
+
+// 内容区域背景渐变设置
+const blog_content_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.blog_content_color_list = arry;
+    form.value.blog_content_direction = type.toString();
+};
+// 文章背景渐变设置
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.blog_color_list = arry;
+    form.value.blog_direction = type.toString();
+};
+// 通用样式回调
+const common_styles_update = (val: Object) => {
+    form.value.common_style = val;
+};
+// 文章标题浮起显示设置
+const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.name_bg_color_list = arry;
+    form.value.name_bg_direction = type.toString();
+};
+</script>
+<style lang="scss" scoped>
+.styles {
+    width: 100%;
+}
+</style>
diff --git a/src/config/const/blog-list.ts b/src/config/const/blog-list.ts
new file mode 100644
index 00000000..d0b536d9
--- /dev/null
+++ b/src/config/const/blog-list.ts
@@ -0,0 +1,213 @@
+import defaultCommon from './index';
+import commonTop from './common-top';
+import defaultSetting from '../setting/index';
+import subscriptStyle from './subscript-style';
+
+interface BlogList {
+    id: number | string;
+    data: object;
+    new_title: string;
+    new_cover: uploadList[];
+}
+interface DefaultBlogList {
+    content: {
+        content_top: object;
+        // 风格
+        theme: string;
+        carousel_col: string;
+        data_type: string;
+        keywords: string;
+        category_ids: string[];
+        data_list: BlogList[];
+        data_ids: string;
+        data_auto_list: BlogList[];
+        number: number;
+        order_by_type: number;
+        order_by_rule: number;
+        field_show: string[];
+        field_desc_row: string,
+        is_cover: string;
+        seckill_subscript_show: string;
+        subscript_type: string;
+        subscript_img_src: uploadList[];
+        subscript_icon_class: string;
+        subscript_text: string;
+        name_float: string;
+    };
+    style: {
+        blog_direction: string,
+        blog_color_list: color_list[],
+        blog_background_img_style: string,
+        blog_background_img: uploadList[],
+        name_weight: string;
+        name_size: number;
+        name_color: string;
+        name_bg_color_list: color_list[];
+        name_bg_direction: string,
+        name_bg_margin: marginStyle,
+        name_bg_padding: paddingStyle,
+        name_bg_radius: radiusStyle,
+        desc_color: string;
+        desc_size: number;
+        name_desc_space: number;
+        time_weight: string;
+        time_size: number;
+        time_color: string;
+        page_view_weight: string;
+        page_view_size: number;
+        page_view_color: string;
+        content_radius: radiusStyle;
+        img_radius: radiusStyle;
+        margin: marginStyle;    
+        padding: paddingStyle;
+        border_is_show: string;
+        border_color: string;
+        border_style: string;
+        border_size: paddingStyle;
+        // 阴影
+        box_shadow_color: string;
+        box_shadow_x: number;
+        box_shadow_y: number;
+        box_shadow_blur: number;
+        box_shadow_spread: number;
+        blog_spacing: number;
+        content_spacing: number;
+        blog_height: number;
+        content_img_width: number | undefined;
+        content_img_height: number | undefined;
+        interval_time: number; //滚动时间
+        is_roll: number;
+        rolling_fashion: string;
+        subscript_style: object;
+        common_style: object;
+    };
+}
+const defaultBlogList: DefaultBlogList = {
+    content: {
+        content_top: {
+            ...commonTop
+        },
+        theme: '0',
+        carousel_col: '2',
+        data_type: '0',
+        keywords: '',
+        category_ids: defaultSetting.category_ids,
+        data_list: [],
+        data_ids: '',
+        data_auto_list: [],
+        number: defaultSetting.page_size,
+        order_by_type: defaultSetting.order_by_type,
+        order_by_rule: defaultSetting.order_by_rule,
+        field_show: ['0', '1', '3'],
+        field_desc_row: '1',
+        is_cover: defaultSetting.is_cover,
+        // 角标配置
+        seckill_subscript_show: '0',
+        subscript_type: 'text',
+        subscript_img_src: [],
+        subscript_icon_class: '',
+        subscript_text: '',
+        name_float: '0'
+    },
+    style: {
+        blog_direction: '90deg',
+        blog_color_list: [{ color: '#fff', color_percentage: undefined }],
+        blog_background_img_style: '0',
+        blog_background_img: [],
+        name_weight: 'bold',
+        name_size: 14,
+        name_color: '#333',
+        name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
+        name_bg_direction: '180deg',
+        name_bg_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        name_bg_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        name_bg_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
+        desc_color: '#999',
+        desc_size: 12,
+        name_desc_space: 4,
+        time_weight: '400',
+        time_size: 12,
+        time_color: 'rgba(153, 153, 153, 1)',
+        page_view_weight: '400',
+        page_view_size: 12,
+        page_view_color: 'rgba(153, 153, 153, 1)',
+        // 内容圆角
+        content_radius: {
+            radius: 8,
+            radius_top_left: 8,
+            radius_top_right: 8,
+            radius_bottom_left: 8,
+            radius_bottom_right: 8,
+        },
+        // 图片圆角 ---- 除了风格一圆角是4，其他都是0
+        img_radius: {
+            radius: 4,
+            radius_top_left: 4,
+            radius_top_right: 4,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
+        margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        // 内间距
+        padding: {
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        // 边框样式
+        border_is_show: '0',
+        border_color: '#FF3F3F',
+        border_style: 'solid',
+        border_size: {
+            padding: 1,
+            padding_top: 1,
+            padding_right: 1,
+            padding_bottom: 1,
+            padding_left: 1,
+        },
+        // 阴影
+        box_shadow_color: '',
+        box_shadow_x: 0,
+        box_shadow_y: 0,
+        box_shadow_blur: 0,
+        box_shadow_spread: 0,
+        content_spacing: 10, // 内容间距
+        blog_spacing: 10, // 博客间距
+        blog_height: 155, // 博客高度
+        content_img_width: 110,
+        content_img_height: 83,
+        interval_time: 3, //滚动时间
+        is_roll: 1, // 是否轮播
+        rolling_fashion: 'translation', // 滚动方式  translation 平移 cut-screen 切屏
+        subscript_style: subscriptStyle,
+        common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
+    },
+};
+
+export default defaultBlogList;
diff --git a/src/config/const/blog-tabs.ts b/src/config/const/blog-tabs.ts
new file mode 100644
index 00000000..a7719038
--- /dev/null
+++ b/src/config/const/blog-tabs.ts
@@ -0,0 +1,404 @@
+import defaultCommon from './index';
+import commonTop from './common-top';
+import defaultSetting from '../setting/index';
+import subscriptStyle from './subscript-style';
+interface BlogList {
+    id: number | string;
+    data: object;
+    new_title: string;
+    new_cover: uploadList[];
+}
+interface blogTabsList {
+    id: string;
+    tabs_type: string;
+    tabs_img: uploadList[];
+    tabs_icon: string;
+    is_sliding_fixed: string,
+    title: string;
+    desc: string;
+    data_type: string;
+    keywords: string;
+    category_ids: string[];
+    number: number;
+    order_by_type: number;
+    order_by_rule: number;
+    is_cover: string;
+    data_ids: string;
+    data_list: BlogList[];
+    data_auto_list: BlogList[];
+}
+interface DefaultBlogTabs {
+    content: {
+        content_top: object;
+        tabs_theme: string;
+        tabs_adorn_icon: string;
+        tabs_adorn_img: uploadList[];
+        is_general_safe_distance: string;
+        tabs_top_up: string;
+        blog_theme: string;
+        blog_carousel_col: string;
+        tabs_list: blogTabsList[];
+        tabs_active_index: number;
+        field_show: string[];
+        field_desc_row: string;
+        seckill_subscript_show: string;
+        subscript_type: string;
+        subscript_img_src: uploadList[];
+        subscript_icon_class: string;
+        subscript_text: string;
+        name_float: string;
+        justification: string;
+    };
+    style: {
+        tabs_one_theme: string;
+        tabs_checked: color_list[];
+        is_tabs_adorn_img_background: string;
+        tabs_adorn_icon_size: number,
+        tabs_adorn_img_radius: radiusStyle,
+        tabs_adorn_img_height: number,
+        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_icon_color_checked: string;
+        tabs_icon_size_checked: number,
+        tabs_icon_color: string,
+        tabs_icon_size: number,
+        is_tabs_img_background: string,
+        tabs_img_radius: radiusStyle,
+        tabs_img_height: number,
+        tabs_spacing: number;
+        tabs_bg_direction: string,
+        tabs_bg_color_list: color_list[],
+        tabs_bg_background_img_style: string,
+        tabs_bg_background_img: string[],
+        tabs_sign_spacing: number;
+        tabs_radius: radiusStyle;
+        tabs_margin: marginStyle;
+        tabs_padding: paddingStyle;
+        tabs_content: object;
+        blog_content_direction: string;
+        blog_content_color_list: color_list[];
+        blog_content_background_img_style: string;
+        blog_content_background_img: string[];
+        blog_content_radius: radiusStyle;
+        blog_content_margin: marginStyle;
+        blog_content_padding: paddingStyle;
+        blog_content_spacing: number;
+        blog_content: object;
+        blog_direction: string,
+        blog_color_list: color_list[],
+        blog_background_img_style: string,
+        blog_background_img: uploadList[],
+        name_weight: string;
+        name_size: number;
+        name_color: string;
+        name_bg_color_list: color_list[];
+        name_bg_direction: string,
+        name_bg_margin: marginStyle,
+        name_bg_padding: paddingStyle,
+        name_bg_radius: radiusStyle,
+        desc_color: string;
+        desc_size: number;
+        name_desc_space: number;
+        time_weight: string;
+        time_size: number;
+        time_color: string;
+        page_view_weight: string;
+        page_view_size: number;
+        page_view_color: string;
+        content_radius: radiusStyle;
+        img_radius: radiusStyle;
+        margin: marginStyle;    
+        padding: paddingStyle;
+        border_is_show: string;
+        border_color: string;
+        border_style: string;
+        border_size: paddingStyle;
+        // 阴影
+        box_shadow_color: string;
+        box_shadow_x: number;
+        box_shadow_y: number;
+        box_shadow_blur: number;
+        box_shadow_spread: number;
+        blog_spacing: number;
+        content_spacing: number;
+        blog_height: number;
+        content_img_width: number | undefined;
+        content_img_height: number | undefined;
+        interval_time: number; //滚动时间
+        is_roll: number;
+        rolling_fashion: string;
+        subscript_style: object;
+        common_style: object;
+    };
+}
+const defaultBlogTabs: DefaultBlogTabs = {
+    content: {
+        content_top: {
+            ...commonTop,
+        },
+        // 对齐方式
+        justification: 'left',
+        tabs_theme: '0',
+        is_general_safe_distance: '0',
+        // 选中装饰图标
+        tabs_adorn_icon: 'checked-smooth',
+        tabs_adorn_img: [],
+        tabs_top_up: '0',
+        blog_theme: '0',
+        blog_carousel_col: '2',
+        tabs_list: [
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '5', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试四', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '6', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试五', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+        ],
+        tabs_active_index: 0,
+        field_show: ['0', '1', '3'],
+        field_desc_row: '1',
+        // 角标配置
+        seckill_subscript_show: '0',
+        subscript_type: 'text',
+        subscript_img_src: [],
+        subscript_icon_class: '',
+        subscript_text: '',
+        name_float: '0'
+    },
+    style: {
+        tabs_one_theme: '0',
+        tabs_checked: [
+            { color: '#FF2222', color_percentage: undefined },
+            { color: '#FF9898', color_percentage: undefined },
+        ],
+        is_tabs_adorn_img_background: '0',
+        tabs_adorn_icon_size: 15,
+        tabs_adorn_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_adorn_img_height: 10,
+        tabs_direction: '90deg',
+        tabs_weight_checked: 'bold',
+        tabs_size_checked: 14,
+        tabs_color_checked: 'rgba(51,51,51,1)',
+        tabs_weight: 'bold',
+        tabs_size: 14,
+        tabs_color: 'rgba(51,51,51,1)',
+        // 选项卡图标和图片设置
+        tabs_icon_color_checked: 'rgba(51,51,51,1)',
+        tabs_icon_size_checked: 14,
+        tabs_icon_color: 'rgba(51,51,51,1)',
+        tabs_icon_size: 14,
+        is_tabs_img_background: '0',
+        tabs_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_img_height: 20,
+        tabs_spacing: 20,
+        tabs_sign_spacing: 4,
+        // 选项卡背景设置
+        tabs_bg_direction: '90deg',
+        tabs_bg_color_list: [{ color: '', color_percentage: undefined }],
+        tabs_bg_background_img_style: '2',
+        tabs_bg_background_img: [],
+        tabs_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        tabs_padding: {
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        tabs_content: {
+            // 边框样式
+            border_is_show: '0',
+            border_color: '#FF3F3F',
+            border_style: 'solid',
+            border_size: {
+                padding: 1,
+                padding_top: 1,
+                padding_right: 1,
+                padding_bottom: 1,
+                padding_left: 1,
+            },
+            // 阴影
+            box_shadow_color: '',
+            box_shadow_x: 0,
+            box_shadow_y: 0,
+            box_shadow_blur: 0,
+            box_shadow_spread: 0,
+        },
+        // 博客内容设置
+        blog_content_direction: '90deg',
+        blog_content_color_list: [{ color: '', color_percentage: undefined }],
+        blog_content_background_img_style: '2',
+        blog_content_background_img: [],
+        blog_content_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        blog_content_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        blog_content_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        blog_content: {
+            // 边框样式
+            border_is_show: '0',
+            border_color: '#FF3F3F',
+            border_style: 'solid',
+            border_size: {
+                padding: 1,
+                padding_top: 1,
+                padding_right: 1,
+                padding_bottom: 1,
+                padding_left: 1,
+            },
+            // 阴影
+            box_shadow_color: '',
+            box_shadow_x: 0,
+            box_shadow_y: 0,
+            box_shadow_blur: 0,
+            box_shadow_spread: 0,
+        },
+        blog_content_spacing: 0,
+        // 博客背景设置
+        blog_direction: '90deg',
+        blog_color_list: [{ color: '#fff', color_percentage: undefined }],
+        blog_background_img_style: '0',
+        blog_background_img: [],
+        name_weight: 'bold',
+        name_size: 14,
+        name_color: '#333',
+        name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
+        name_bg_direction: '180deg',
+        name_bg_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        name_bg_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        name_bg_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
+        desc_color: '#999',
+        desc_size: 12,
+        name_desc_space: 4,
+        time_weight: '400',
+        time_size: 12,
+        time_color: 'rgba(153, 153, 153, 1)',
+        page_view_weight: '400',
+        page_view_size: 12,
+        page_view_color: 'rgba(153, 153, 153, 1)',
+        // 内容圆角
+        content_radius: {
+            radius: 8,
+            radius_top_left: 8,
+            radius_top_right: 8,
+            radius_bottom_left: 8,
+            radius_bottom_right: 8,
+        },
+        // 图片圆角 ---- 除了风格一圆角是4，其他都是0
+        img_radius: {
+            radius: 4,
+            radius_top_left: 4,
+            radius_top_right: 4,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
+        margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        // 内间距
+        padding: {
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        // 边框样式
+        border_is_show: '0',
+        border_color: '#FF3F3F',
+        border_style: 'solid',
+        border_size: {
+            padding: 1,
+            padding_top: 1,
+            padding_right: 1,
+            padding_bottom: 1,
+            padding_left: 1,
+        },
+        // 阴影
+        box_shadow_color: '',
+        box_shadow_x: 0,
+        box_shadow_y: 0,
+        box_shadow_blur: 0,
+        box_shadow_spread: 0,
+        content_spacing: 10, // 内容间距
+        blog_spacing: 10, // 博客间距
+        blog_height: 155, // 博客高度
+        content_img_width: 110,
+        content_img_height: 83,
+        interval_time: 3, //滚动时间
+        is_roll: 1, // 是否轮播
+        rolling_fashion: 'translation', // 滚动方式  translation 平移 cut-screen 切屏
+        subscript_style: subscriptStyle,
+        common_style: defaultCommon,
+    },
+};
+
+export default defaultBlogTabs;