From a70ad338e36859bf18c9bdd4b7eb64ecba747577 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 6 Feb 2025 11:24:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/radius/index.vue          |   8 +-
 .../common/background-common/index.vue        |   2 +-
 .../data-tabs-common/goods/goods-content.vue  | 168 ++++++++++++
 .../data-tabs-common/goods/goods-style.vue    |  44 ++++
 src/components/common/div-content/index.vue   |   4 +
 .../model-article-tabs-content.vue            |   2 +-
 src/components/model-data-tabs/index.vue      |  89 +++++++
 .../model-data-tabs-content.vue               | 205 +++++++++++++++
 .../model-data-tabs-setting.vue               |  29 +++
 .../model-data-tabs-styles.vue                | 196 ++++++++++++++
 .../model-goods-list-styles.vue               |  16 +-
 .../model-goods-tabs-content.vue              |   2 +-
 .../model-nav-group-content.vue               |  18 +-
 .../model-tabs/model-tabs-content.vue         |   2 +-
 src/config/const/data-tabs.ts                 | 239 ++++++++++++++++++
 src/styles/index.scss                         |  35 +++
 src/views/layout/components/main/index.ts     |   3 +
 .../layout/components/settings/index.vue      |   4 +
 18 files changed, 1039 insertions(+), 27 deletions(-)
 create mode 100644 src/components/common/data-tabs-common/goods/goods-content.vue
 create mode 100644 src/components/common/data-tabs-common/goods/goods-style.vue
 create mode 100644 src/components/model-data-tabs/index.vue
 create mode 100644 src/components/model-data-tabs/model-data-tabs-content.vue
 create mode 100644 src/components/model-data-tabs/model-data-tabs-setting.vue
 create mode 100644 src/components/model-data-tabs/model-data-tabs-styles.vue
 create mode 100644 src/config/const/data-tabs.ts

diff --git a/src/components/base/radius/index.vue b/src/components/base/radius/index.vue
index 1c4dacc1..2f17e72c 100644
--- a/src/components/base/radius/index.vue
+++ b/src/components/base/radius/index.vue
@@ -96,19 +96,19 @@ onBeforeMount(() => {
     // 判断是否相等，如果不相等，就展开
     const flag = areAllEqual(form.value.radius_top_left, form.value.radius_top_right, form.value.radius_bottom_left, form.value.radius_bottom_right);
     if (!flag) {
-        icon_event('unified');
+        icon_event('margin');
     }
 });
 const icon_data = reactive({
-    name: 'unified',
+    name: 'margin',
     title: '独个'
 });
 const icon_event = (name: string) => {
-    if (name == 'unified') {
+    if (name == 'margin') {
         icon_data.name = 'alone';
         icon_data.title = '统一';
     } else {
-        icon_data.name = 'unified';
+        icon_data.name = 'margin';
         icon_data.title = '独个';
     }
 }
diff --git a/src/components/common/background-common/index.vue b/src/components/common/background-common/index.vue
index 37f9f57c..1a89af88 100644
--- a/src/components/common/background-common/index.vue
+++ b/src/components/common/background-common/index.vue
@@ -7,7 +7,7 @@
             </el-tooltip>
         </div>
         <mult-color-picker :value="color_list" :type="direction" @update:value="mult_color_picker_event"></mult-color-picker>
-        <div class="flex-row jc-sb align-c">
+        <div class="flex-row jc-sb align-c is-newline">
             <div class="size-12">背景图</div>
             <bg-btn-style v-model="background_img_style" @operation_end="operation_end"></bg-btn-style>
         </div>
diff --git a/src/components/common/data-tabs-common/goods/goods-content.vue b/src/components/common/data-tabs-common/goods/goods-content.vue
new file mode 100644
index 00000000..d130fe4f
--- /dev/null
+++ b/src/components/common/data-tabs-common/goods/goods-content.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="data-tabs-style">
+        <el-form-item label="商品风格">
+            <el-radio-group v-model="form.theme" @change="change_style">
+                <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.theme == '5'" label="轮播列数">
+            <el-radio-group v-model="form.carousel_col">
+                <el-radio :value="1">单列展示</el-radio>
+                <el-radio :value="2">两列展示</el-radio>
+                <el-radio :value="3">三列展示</el-radio>
+                <el-radio :value="4">四列展示</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <div class="divider-line"></div>
+        <!-- 商品显示的配置信息 -->
+        <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
+        <div class="divider-line"></div>
+        <card-container>
+            <div class="mb-12">角标设置</div>
+            <!-- 角标设置 -->
+            <subscript-content :value="form"></subscript-content>
+        </card-container>
+        <div class="divider-line"></div>
+        <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
+        <data-filter type="goods" :value="form" :list="form.data_list" :base-list="base_list" @add="product_add" @data_list_replace="data_list_replace" @data_list_remove="goods_list_remove" @data_list_sort="goods_list_sort"></data-filter>
+    </div>
+    <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+</template>
+
+<script lang="ts" setup>
+import { get_math } from '@/utils';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+const base_list = reactive({
+    product_style_list: [
+        { name: '单列展示', value: '0', width: 110, height: 120 },
+        { name: '大图展示', value: '2', width: 166, height: 166 },
+        { name: '无图模式', value: '6', width: 0, height: 0 },
+        { name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
+        { name: '两列展示(横向)', value: '4', width: 70, height: 70 },
+        { name: '三列展示', value: '3', width: 116, height: 114 },
+        { name: '左右滑动展示', value: '5', width: 0, height: 0 },
+    ],
+    product_list: [
+        { name: '指定商品', value: '0' },
+        { name: '筛选商品', value: '1' },
+    ],
+});
+const state = reactive({
+    form: props.value,
+    styles: props.tabStyle,
+});
+// 如果需要解构，确保使用toRefs
+const { form, styles } = toRefs(state);
+
+watch(() => props.value, (value) => {
+    form.value = value;
+},{deep: true, immediate: true });
+
+watch(() => props.tabStyle, (value) => {
+    styles.value = value;
+},{deep: true, immediate: true });
+const is_revise = ref(false);
+const change_shop_type = () => {
+    is_revise.value = true;
+};
+
+// 选择某些风格时， 切换到对应的按钮
+const change_style = (val: any): void => {
+    form.value.theme = val;
+    if (!is_revise.value) {
+        if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
+            form.value.shop_type = 'icon';
+        } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
+            form.value.shop_type = 'text';
+        }
+    }
+    if (['0', '4'].includes(val)) {
+        if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+        }
+    } else {
+        if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+        }
+    }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
+    if (list.length > 0) {
+        styles.value.content_img_width = list[0].width;
+        styles.value.content_img_height = list[0].height;
+    }
+    console.log(styles.value);  
+};
+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 product_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((item: any) => {
+            form.value.data_list.push({
+                id: get_math(),
+                new_cover: [],
+                new_title: '',
+                data: item,
+            });
+        });
+    } else {
+        form.value.data_list[data_list_replace_index.value] = {
+            id: get_math(),
+            new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
+            new_title: '',
+            data: item[0],
+        };
+    }
+};
+// 指定商品
+const goods_list_remove = (index: number) => {
+    form.value.data_list.splice(index, 1);
+};
+const goods_list_sort = (item: any) => {
+    form.value.data_list = item;
+};
+
+</script>
+
+<style lang="scss" scoped>
+</style>
+
diff --git a/src/components/common/data-tabs-common/goods/goods-style.vue b/src/components/common/data-tabs-common/goods/goods-style.vue
new file mode 100644
index 00000000..a9589208
--- /dev/null
+++ b/src/components/common/data-tabs-common/goods/goods-style.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="data-tabs-style">
+        <model-goods-list-styles :value="form" :content="data" :default-config="defaultConfig" :is-common-style="false" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+    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);
+watch(() => props.value, (value) => {
+    form.value = value;
+},{deep: true, immediate: true });
+
+watch(() => props.content, (value) => {
+    data.value = value;
+},{deep: true, immediate: true });
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index b0d7da48..6ec33899 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -78,6 +78,10 @@
             <template v-else-if="item.key == 'goods-tabs'">
                 <model-goods-tabs :key="item.com_data" :value="item.com_data"></model-goods-tabs>
             </template>
+            <!-- 数据选项卡 -->
+            <template v-else-if="item.key == 'data-tabs'">
+                <model-data-tabs :key="item.com_data" :value="item.com_data"></model-data-tabs>
+            </template>
             <!-- 图片魔方 -->
             <template v-else-if="item.key == 'img-magic'">
                 <model-img-magic :key="item.com_data" :value="item.com_data"></model-img-magic>
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index d6778217..cf857fa8 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -39,7 +39,7 @@
                     <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">
+                                <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>
diff --git a/src/components/model-data-tabs/index.vue b/src/components/model-data-tabs/index.vue
new file mode 100644
index 00000000..14b0bc7d
--- /dev/null
+++ b/src/components/model-data-tabs/index.vue
@@ -0,0 +1,89 @@
+<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="props.value" :active-index="tabs_active_index"></tabs-view>
+                </div>
+            </div>
+            <div class="oh" :style="data_container">
+                <div class="oh" :style="data_img_container">
+                    <template v-if="tabs_data_type == 'goods'">
+                        <model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
+                    </template>
+                </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';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+    },
+});
+
+const style_container = ref('');
+const style_img_container = ref('');
+const tabs_list = ref({});
+const tabs_active_index = ref(0);
+const tabs_data_type = ref('');
+// 选项卡内容样式设置
+const tabs_container = ref('');
+const tabs_img_container = ref('');
+// 商品区域样式设置
+const data_container = ref('');
+const data_img_container = ref('');
+watch(
+    () => props.value,
+    (val) => {
+        const new_val = cloneDeep(val);
+        const new_style = new_val?.style;
+        let new_data = new_val;
+        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_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 data_content = {
+            color_list: new_style.data_content_color_list,
+            direction: new_style.data_content_direction,
+            background_img_style: new_style.data_content_background_img_style,
+            background_img: new_style.data_content_background_img,
+        }
+        data_container.value = gradient_computer(data_content) + margin_computer(new_style.data_content_margin) + radius_computer(new_style.data_content_radius) + border_computer(new_style.data_content) + box_shadow_computer(new_style.data_content);
+        data_img_container.value = background_computer(data_content) + padding_computer(new_style.data_content_padding);
+        // 显示的数据处理
+        const tabs_data_list = new_data.content.tabs_list[tabs_active_index.value] || {};
+        tabs_data_type.value = tabs_data_list?.tabs_data_type || '';
+        console.log(tabs_data_list);
+        if (tabs_data_list.tabs_data_type === 'goods') {
+            tabs_list.value = tabs_data_list.goods_config;
+        } else if (tabs_data_list.tabs_data_type === 'article') {
+            tabs_list.value = tabs_data_list.goods_config;
+        } else if (tabs_data_list.tabs_data_type === 'custom') {
+            tabs_list.value = tabs_data_list.goods_config;
+        }
+        console.log(
+            tabs_list.value
+        );
+        // 公共样式
+        style_container.value += common_styles_computer(new_style.common_style);
+        style_img_container.value = common_img_computer(new_style.common_style) + `gap: ${new_style.shop_content_spacing}px;`;
+    },
+    { immediate: true, deep: true }
+);
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/model-data-tabs/model-data-tabs-content.vue b/src/components/model-data-tabs/model-data-tabs-content.vue
new file mode 100644
index 00000000..e0897413
--- /dev/null
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -0,0 +1,205 @@
+<template>
+    <div class="content">
+        <el-form :model="form" label-width="60" 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="置顶">
+                    <div class="flex-row align-c gap-10">
+                        <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
+                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
+                            <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                        </el-tooltip>
+                    </div>
+                </el-form-item>
+                <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_style_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>
+            </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>
+                                <template v-if="form.tabs_active_index == index">
+                                    <el-form-item v-if="form.tabs_theme == '4'" label="上传图片">
+                                        <upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
+                                    </el-form-item>
+                                    <el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
+                                        <el-input v-model="row.desc" placeholder="请输入简介" clearable />
+                                    </el-form-item>
+                                    <el-form-item label="数据类型">
+                                        <el-radio-group v-model="row.tabs_data_type">
+                                            <el-radio value="goods">商品</el-radio>
+                                            <el-radio value="article">文章</el-radio>
+                                            <el-radio value="custom">自定义</el-radio>
+                                        </el-radio-group>
+                                    </el-form-item>
+                                    <el-tabs v-model="row.tabs_name" class="content-tabs">
+                                        <el-tab-pane label="内容设置" name="content">
+                                            <div v-show="row.tabs_data_type == 'goods'">
+                                                <goods-content :value="row.goods_config.content" :tab-style="row.goods_config.style"></goods-content>
+                                            </div>
+                                            <div v-show="row.tabs_data_type == 'article'">
+                                                <goods-content :value="row.goods_config.content" :tab-style="row.goods_config.style"></goods-content>
+                                            </div>
+                                            <div v-show="row.tabs_data_type == 'custom'">
+                                                <goods-content :value="row.goods_config.content" :tab-style="row.goods_config.style"></goods-content>
+                                            </div>
+                                        </el-tab-pane>
+                                        <el-tab-pane label="样式设置" name="styles">
+                                            <div v-show="row.tabs_data_type == 'goods'">
+                                                <goods-style :value="row.goods_config.style" :content="row.goods_config.content"></goods-style>
+                                            </div>
+                                            <div v-show="row.tabs_data_type == 'article'">
+                                                <goods-style :value="row.goods_config.style" :content="row.goods_config.content"></goods-style>
+                                            </div>
+                                            <div v-show="row.tabs_data_type == 'custom'">
+                                                <goods-style :value="row.goods_config.style" :content="row.goods_config.content"></goods-style>
+                                            </div>
+                                        </el-tab-pane>
+                                    </el-tabs>
+                                </template>
+                            </div>
+                        </template>
+                    </drag>
+                    <el-button class="mtb-20 w" @click="tabs_add">+添加</el-button>
+                </div>
+            </card-container>
+            <div class="divider-line"></div>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">角标设置</div>
+            </card-container>
+        </el-form>
+    </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();
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+const state = reactive({
+    form: props.value,
+    styles: props.tabStyle,
+});
+// 如果需要解构，确保使用toRefs
+const { form, styles } = toRefs(state);
+
+const base_list = reactive({
+    tabs_style_list: [
+        { name: '样式一', value: '0' },
+        { name: '样式二', value: '1' },
+        { name: '样式三', value: '2' },
+        { name: '样式四', value: '3' },
+        { name: '样式五', value: '4' },
+    ],
+    product_list: [
+        { name: '指定商品', value: '0' },
+        { name: '筛选商品', value: '1' },
+    ]
+});
+const emits = defineEmits(['theme_change']);
+const tabs_list_click = (item: any, index: number) => {
+    form.value.tabs_active_index = index;
+};
+// 选项卡设置
+const tabs_list_remove = (index: number) => {
+    if (form.value.tabs_list.length > 1) {
+        form.value.tabs_list.splice(index, 1);
+        if (form.value.tabs_list.length > index) {
+            form.value.tabs_active_index = index;
+        } else {
+            form.value.tabs_active_index = index - 1;
+        }
+    } else {
+        form.value.tabs_active_index = 0;
+        ElMessage.warning('至少保留一个选项卡');
+    }
+};
+const tabs_list_sort = (item: any) => {
+    form.value.tabs_list = item;
+};
+const tabs_add = () => {
+    form.value.tabs_list.push({
+        id: get_math(),
+        tabs_type: '0', 
+        tabs_img: [], 
+        tabs_icon: '',
+        title: '',
+        img: [],
+        desc: '',
+        data_type: '0',
+        category: [],
+        data_ids: [],
+        number: 4,
+        order_by_type: '0',
+        order_by_rule: '0',
+        data_list: [],
+    });
+    form.value.tabs_active_index = form.value.tabs_list.length - 1;
+};
+const tabs_theme_change = (val: string | number | boolean | undefined): void => {
+    styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
+};
+const is_immersion_model = computed(() => common_store.is_immersion_model);
+watchEffect(() => {
+    if (is_immersion_model.value) {
+        form.value.tabs_top_up = '0';
+    }
+});
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    .content-height {
+        min-height: calc(100vh - 38.2rem);
+    }
+}
+.number-show {
+    :deep(.el-input__wrapper .el-input__inner) {
+        text-align: left;
+    }
+}
+</style>
diff --git a/src/components/model-data-tabs/model-data-tabs-setting.vue b/src/components/model-data-tabs/model-data-tabs-setting.vue
new file mode 100644
index 00000000..a70386df
--- /dev/null
+++ b/src/components/model-data-tabs/model-data-tabs-setting.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="auxiliary-line-setting">
+        <template v-if="type == '1'">
+            <model-data-tabs-content :value="form.content" :tab-style="form.style"></model-data-tabs-content>
+        </template>
+        <template v-if="type == '2'">
+            <model-data-tabs-styles :value="form.style" :tabs-style="form.content.tabs_theme" :content="form.content"></model-data-tabs-styles>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    type: {
+        type: String,
+        default: '1',
+    },
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const form = ref(props.value);
+</script>
+<style lang="scss" scoped>
+.auxiliary-line-setting {
+    width: 100%;
+}
+</style>
diff --git a/src/components/model-data-tabs/model-data-tabs-styles.vue b/src/components/model-data-tabs/model-data-tabs-styles.vue
new file mode 100644
index 00000000..1ac32643
--- /dev/null
+++ b/src/components/model-data-tabs/model-data-tabs-styles.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="w">
+        <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 v-if="['4'].includes(data.tabs_theme)" label="标题上图">
+                    <div class="flex-col gap-10 w">
+                        <el-form-item label="圆角" label-width="40">
+                            <radius :value="form.tabs_top_img_radius"></radius>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="40">
+                            <slider v-model="form.tabs_top_img_height" :max="200"></slider>
+                        </el-form-item>
+                    </div>
+                </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.data_content_color_list" v-model:direction="form.data_content_direction" v-model:img_style="form.data_content_background_img_style" v-model:img="form.data_content_background_img" @mult_color_picker_event="data_content_mult_color_picker_event" />
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.data_content_radius"></radius>
+                </el-form-item>
+                <el-form-item label="外间距">
+                    <margin :value="form.data_content_margin"></margin>
+                </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :value="form.data_content_padding"></padding>
+                </el-form-item>
+                <el-form-item label="数据间距">
+                    <slider v-model="form.data_content_spacing" :max="100"></slider>
+                </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.data_content.border_is_show" v-model:color="form.data_content.border_color" v-model:style="form.data_content.border_style" v-model:size="form.data_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.data_content"></shadow-config>
+            </card-container>
+        </el-form>
+        <common-styles :value="form.common_style" @update:value="common_style_update" />
+    </div>
+</template>
+<script setup lang="ts">
+import { isEmpty } from 'lodash';
+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.theme);
+if (['0', '4'].includes(theme.value)) {
+    if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+        form.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
+        form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+        form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+        form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+        form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+    }
+} else {
+    if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+        form.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
+        form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+        form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+        form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+        form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+    }
+}
+const common_style_update = (value: any) => {
+    form.value.common_style = value;
+};
+// 选项卡背景渐变设置
+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 data_content_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.data_content_color_list = arry;
+    form.value.data_content_direction = type.toString();
+};
+const tabs_checked_event = (arry: string[], type: number) => {
+    form.value.tabs_checked = arry;
+    form.value.tabs_direction = type.toString();
+};
+</script>
+<style lang="scss" scoped>
+.topic {
+    :deep(.el-form-item__content) {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/components/model-goods-list/model-goods-list-styles.vue b/src/components/model-goods-list/model-goods-list-styles.vue
index 4006b57c..c0d7756b 100644
--- a/src/components/model-goods-list/model-goods-list-styles.vue
+++ b/src/components/model-goods-list/model-goods-list-styles.vue
@@ -89,8 +89,8 @@
                     </template>
                 </template>
             </card-container>
-            <div class="divider-line"></div>
             <template v-if="theme == '5'">
+                <div class="divider-line"></div>
                 <card-container>
                     <div class="mb-12">轮播设置</div>
                     <el-form-item label="自动轮播">
@@ -108,14 +108,14 @@
                         </el-form-item>
                     </template>
                 </card-container>
-                <div class="divider-line"></div>
             </template>
             <!-- 秒杀角标 -->
             <template v-if="data.seckill_subscript_show == '1'">
-                <subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
                 <div class="divider-line"></div>
+                <subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
             </template>
             <template v-if="data.is_shop_show == '1'">
+                <div class="divider-line"></div>
                 <card-container>
                     <div class="mb-12">购物车按钮</div>
                     <el-form-item label="按钮颜色" class="topic">
@@ -132,10 +132,12 @@
                         </el-form-item>
                     </template>
                 </card-container>
-                <div class="divider-line"></div>
             </template>
         </el-form>
-        <common-styles :value="form.common_style" @update:value="common_style_update" />
+        <template v-if="isCommonStyle">
+            <div class="divider-line"></div>
+            <common-styles :value="form.common_style" @update:value="common_style_update" />
+        </template>
     </div>
 </template>
 <script setup lang="ts">
@@ -148,6 +150,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isCommonStyle: {
+        type: Boolean,
+        default: true,
+    },
     defaultConfig: {
         type: Object,
         default: () => ({
diff --git a/src/components/model-goods-tabs/model-goods-tabs-content.vue b/src/components/model-goods-tabs/model-goods-tabs-content.vue
index 0607832c..41c2ad81 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -42,7 +42,7 @@
                     <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">
+                                <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>
diff --git a/src/components/model-nav-group/model-nav-group-content.vue b/src/components/model-nav-group/model-nav-group-content.vue
index 7faa0f4a..fa077065 100644
--- a/src/components/model-nav-group/model-nav-group-content.vue
+++ b/src/components/model-nav-group/model-nav-group-content.vue
@@ -358,20 +358,10 @@ const tabs_list_click = (item: any, index: number) => {
        padding: 0 !important;
     }
 }
-:deep(.el-tabs.content-tabs) {
-    .el-tabs__header.is-top {
-        background: #fff;
-        margin: 0;
-        padding-bottom: 1rem;
-    }
-    .el-tabs__item.is-top {
-        padding: 0;
-        align-items: center;
-        width: 10rem;
-        font-size: 1.4rem;
-    }
-    .el-tabs__active-bar{
-        width: 100%;
+:deep(.content-tabs) {
+    .flex-row.is-newline {
+        flex-direction: column !important;
+        align-items: flex-start;
     }
 }
 </style>
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index f99d9bb8..47499501 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -30,7 +30,7 @@
                 <div class="flex-col gap-x-20">
                     <div class="card-background box-shadow-sm ptb-25 flex gap-y-16 re align-c">
                         <el-icon class="iconfont icon-jinzhi size-16 cursor-move" />
-                        <el-form-item label="数据类型" class="w mb-0">
+                        <el-form-item label="显示类型" class="w mb-0">
                             <div class="flex-col gap-10 w h">
                                 <el-radio-group v-model="form.home_data.tabs_type">
                                     <el-radio value="0">文本</el-radio>
diff --git a/src/config/const/data-tabs.ts b/src/config/const/data-tabs.ts
new file mode 100644
index 00000000..d2a588f9
--- /dev/null
+++ b/src/config/const/data-tabs.ts
@@ -0,0 +1,239 @@
+import defaultCommon from './index';
+import defaultGoodsList from '@/config/const/goods-list';
+import commonTop from './common-top';
+import { cloneDeep } from 'lodash';
+
+interface articleTabsList {
+    id: string;
+    tabs_type: string;
+    tabs_img: uploadList[];
+    tabs_icon: string;
+    title: string;
+    img: uploadList[];
+    desc: string;
+    data_type: string;
+    tabs_data_type: string;
+    tabs_name: string;
+    goods_config: any;
+}
+interface DefaultProductList {
+    content: {
+        content_top: object;
+        tabs_theme: string;
+        tabs_adorn_icon: string;
+        tabs_adorn_img: uploadList[];
+        tabs_top_up: string;
+        tabs_list: articleTabsList[];
+        tabs_active_index: number;
+    };
+    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_top_img_radius: radiusStyle;
+        tabs_top_img_height: number;
+        tabs_img_radius: radiusStyle;
+        tabs_img_height: number;
+        tabs_spacing: number;
+        tabs_sign_spacing: number;
+        tabs_bg_direction: string;
+        tabs_bg_color_list: color_list[];
+        tabs_bg_background_img_style: string;
+        tabs_bg_background_img: string[];
+        tabs_radius: radiusStyle;
+        tabs_margin: marginStyle;
+        tabs_padding: paddingStyle;
+        tabs_content: object;
+        data_content_direction: string;
+        data_content_color_list: color_list[];
+        data_content_background_img_style: string;
+        data_content_background_img: string[];
+        data_content_radius: radiusStyle;
+        data_content_margin: marginStyle;
+        data_content_padding: paddingStyle;
+        data_content_spacing: number;
+        data_content: object;
+        common_style: object;
+    };
+}
+const defaultProductList: DefaultProductList = {
+    content: {
+        content_top: {
+            ...commonTop,
+        },
+        // 选项卡风格
+        tabs_theme: '0',
+        // 选中装饰图标
+        tabs_adorn_icon: 'checked-smooth',
+        tabs_adorn_img: [],
+        // 是否置顶
+        tabs_top_up: '0',
+        // 选项卡数据
+        tabs_list: [
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList) },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList) },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList) },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList) },
+        ],
+        // 选中的内容索引
+        tabs_active_index: 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,
+        tabs_top_img_radius: {
+            radius: 100,
+            radius_top_left: 100,
+            radius_top_right: 100,
+            radius_bottom_left: 100,
+            radius_bottom_right: 100,
+        },
+        tabs_top_img_height: 39,
+        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间距
+        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,
+        },
+        // 数据内容设置
+        data_content_direction: '90deg',
+        data_content_color_list: [{ color: '', color_percentage: undefined }],
+        data_content_background_img_style: '2',
+        data_content_background_img: [],
+        data_content_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        data_content_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        data_content_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 10,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        data_content_spacing: 0,
+        data_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,
+        },
+        common_style: defaultCommon,
+    },
+};
+
+export default defaultProductList;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6bf3f7b9..a4e125d7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -297,4 +297,39 @@ p {
     .el-table__cell {
         background: #FFEAEA !important;
     }
+}
+
+.el-tabs.content-tabs {
+    .el-tabs__header.is-top {
+        background: #fff;
+        margin: 0;
+        padding-bottom: 1rem;
+    }
+    .el-tabs__item.is-top {
+        padding: 0;
+        align-items: center;
+        width: 10rem;
+        font-size: 1.4rem;
+    }
+    .el-tabs__active-bar{
+        width: 100%;
+    }
+}
+
+.data-tabs-style {
+    .card {
+        padding: 0 !important;
+        // .el-form-item:last-child {
+        //     margin-bottom: 1.8rem;
+        // }
+        .flex-row.is-newline {
+            flex-direction: column !important;
+            align-items: flex-start;
+        }
+    }
+    .divider-line {
+        height: 0.1rem !important;
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+    }
 }
\ No newline at end of file
diff --git a/src/views/layout/components/main/index.ts b/src/views/layout/components/main/index.ts
index 872203b4..d32940ad 100644
--- a/src/views/layout/components/main/index.ts
+++ b/src/views/layout/components/main/index.ts
@@ -16,6 +16,7 @@ import defaultFloatWindow from '@/config/const/float-window';
 import defaultTabs from '@/config/const/tabs';
 import defaultGoodsList from '@/config/const/goods-list';
 import defaultGoodsTabs from '@/config/const/goods-tabs';
+import defaultDataTabs from '@/config/const/data-tabs';
 import defaultImgMagic from '@/config/const/img-magic';
 import defaultHotZone from '@/config/const/hot-zone';
 import defaultCustom from '@/config/const/custom';
@@ -44,6 +45,7 @@ interface DefaultSettings {
     tabs: object;
     goods_list: object;
     goods_tabs: object;
+    data_tabs: object;
     img_magic: object;
     data_magic: object;
     hot_zone: object;
@@ -72,6 +74,7 @@ const defaultSettings: DefaultSettings = {
     tabs: defaultTabs,
     goods_list: defaultGoodsList,
     goods_tabs: defaultGoodsTabs,
+    data_tabs: defaultDataTabs,
     img_magic: defaultImgMagic,
     data_magic: defaultDataMagic,
     hot_zone: defaultHotZone,
diff --git a/src/views/layout/components/settings/index.vue b/src/views/layout/components/settings/index.vue
index 71532628..a66ce653 100644
--- a/src/views/layout/components/settings/index.vue
+++ b/src/views/layout/components/settings/index.vue
@@ -62,6 +62,10 @@
             <template v-else-if="value.key == 'goods-tabs'">
                 <model-goods-tabs-setting :type="radio" :value="value.com_data"></model-goods-tabs-setting>
             </template>
+            <!-- 数据选项卡 -->
+            <template v-else-if="value.key == 'data-tabs'">
+                <model-data-tabs-setting :type="radio" :value="value.com_data"></model-data-tabs-setting>
+            </template>
             <!-- 图片魔方 -->
             <template v-else-if="value.key == 'img-magic'">
                 <model-img-magic-setting :type="radio" :value="value.com_data"></model-img-magic-setting>