From 2988535c68f488c288cb6c437022ee38afccec0a 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, 14 Feb 2025 15:56:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/sliding-fixed/index.vue   | 18 +++++
 src/components/common/tabs-view/index.vue     | 65 +++++++++-------
 src/components/model-article-tabs/index.vue   |  5 +-
 .../model-article-tabs-content.vue            | 23 ++++++
 src/components/model-data-tabs/index.vue      |  5 +-
 .../model-data-tabs-content.vue               | 26 ++++++-
 src/components/model-goods-tabs/index.vue     |  5 +-
 .../model-goods-tabs-content.vue              | 23 ++++++
 src/components/model-tabs-carousel/index.vue  |  5 +-
 src/components/model-tabs/index.vue           |  7 +-
 .../model-tabs/model-tabs-content.vue         | 75 +++++++++++++------
 src/config/const/article-tabs.ts              | 13 ++--
 src/config/const/data-tabs.ts                 |  9 ++-
 src/config/const/goods-tabs.ts                |  9 ++-
 src/config/const/tabs-carousel.ts             |  9 ++-
 src/config/const/tabs.ts                      |  9 ++-
 16 files changed, 226 insertions(+), 80 deletions(-)
 create mode 100644 src/components/base/sliding-fixed/index.vue

diff --git a/src/components/base/sliding-fixed/index.vue b/src/components/base/sliding-fixed/index.vue
new file mode 100644
index 00000000..c131454f
--- /dev/null
+++ b/src/components/base/sliding-fixed/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <el-form-item label="滑动固定" class="w mb-10">
+        <div class="flex-row w h">
+            <el-switch v-model="is_sliding_fixed" class="mr-10" active-value="1" inactive-value="0" @change="sliding_fixed_change" />
+            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1. 选项卡背景建议设置单纯色、多色或图片会造成背景不吻合。<br/> 2. 仅支持一个选项卡数据固定、开启后其他项将自动关闭。</span>" raw-content placement="top">
+                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+            </el-tooltip>
+        </div>
+    </el-form-item>
+</template>
+
+<script lang="ts" setup>
+const is_sliding_fixed = defineModel({ type: String, default: '0' });
+const emit = defineEmits(['sliding_fixed_change']);
+const sliding_fixed_change = (val: string | number | boolean) => {
+    emit('sliding_fixed_change', val);
+};
+</script>
\ No newline at end of file
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 318776c0..502d3bc9 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,39 +1,41 @@
 <template>
     <div :class="`flex-row gap-10 align-c ${ form.justification == 'center' ? 'jc-c' : form.justification == 'right' ? 'jc-e': 'jc-sb' }`">
-        <div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;height: ${tabs_height}`">
+        <div class="tabs flex-row oh" :style="`height: ${tabs_height}`">
             <template v-for="(item, index) in form.tabs_list" :key="index">
-                <div class="item nowrap ma-auto" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" style="flex:0 0 auto;">
-                    <template v-if="!isEmpty(item.img)">
-                        <image-empty v-model="item.img[0]" class="img re z-deep" :style="top_img_style('data')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
-                    </template>
-                    <template v-else>
-                        <image-empty class="img re z-deep" :style="top_img_style('noData')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
-                    </template>
-                    <template v-if="item.tabs_type == '1'">
-                        <template v-if="!isEmpty(item.tabs_icon)">
-                            <div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'icon') + (index == activeIndex ? '' : padding_bottom)">
-                                <el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" :style="icon_style(index)" />
-                            </div>
+                <div class="item nowrap flex-col jc-c align-c" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'flex:0 0 auto;' + item_style(index, item.is_sliding_fixed)">
+                    <div class="nowrap ma-auto">
+                        <template v-if="!isEmpty(item.img)">
+                            <image-empty v-model="item.img[0]" class="img re z-deep" :style="top_img_style('data')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
                         </template>
                         <template v-else>
-                            <div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'img') + (index == activeIndex ? '' : padding_bottom)">
-                                <image-empty v-model="item.tabs_img[0]" fit="contain" :style="img_style()" error-img-style="width: 2rem;height: 2rem;" />
-                            </div>
+                            <image-empty class="img re z-deep" :style="top_img_style('noData')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
                         </template>
-                    </template>
-                    <template v-else>
-                        <div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
-                    </template>
-                    <div class="desc w re z-i" :style="tabs_sign_spacing + (tabs_theme_index == '1' && index == activeIndex ? tabs_check : '')">{{ item.desc }}</div>
-                    <template v-if="tabs_theme_index == '3' && index == activeIndex">
-                        <template v-if="!isEmpty(form.tabs_adorn_icon)">
-                            <icon :name="form.tabs_adorn_icon" class="icon re z-i" :style="icon_tabs_check() + tabs_sign_spacing" :size="new_style.tabs_adorn_icon_size + ''"></icon>
+                        <template v-if="item.tabs_type == '1'">
+                            <template v-if="!isEmpty(item.tabs_icon)">
+                                <div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'icon') + (index == activeIndex ? '' : padding_bottom)">
+                                    <el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" :style="icon_style(index)" />
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'img') + (index == activeIndex ? '' : padding_bottom)">
+                                    <image-empty v-model="item.tabs_img[0]" fit="contain" :style="img_style()" error-img-style="width: 2rem;height: 2rem;" />
+                                </div>
+                            </template>
                         </template>
                         <template v-else>
-                            <image-empty v-model="form.tabs_adorn_img[0]" fit="contain" class="re z-i" :style="tabs_adorn_img_style + tabs_sign_spacing" error-img-style="width: 2rem;height: 2rem;" />
+                            <div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
                         </template>
-                    </template>
-                    <div class="bottom_line re z-i" :class="tabs_bottom_line_theme" :style="tabs_check + tabs_sign_spacing"></div>
+                        <div class="desc w re z-i" :style="tabs_sign_spacing + (tabs_theme_index == '1' && index == activeIndex ? tabs_check : '')">{{ item.desc }}</div>
+                        <template v-if="tabs_theme_index == '3' && index == activeIndex">
+                            <template v-if="!isEmpty(form.tabs_adorn_icon)">
+                                <icon :name="form.tabs_adorn_icon" class="icon re z-i" :style="icon_tabs_check() + tabs_sign_spacing" :size="new_style.tabs_adorn_icon_size + ''"></icon>
+                            </template>
+                            <template v-else>
+                                <image-empty v-model="form.tabs_adorn_img[0]" fit="contain" class="re z-i" :style="tabs_adorn_img_style + tabs_sign_spacing" error-img-style="width: 2rem;height: 2rem;" />
+                            </template>
+                        </template>
+                        <div class="bottom_line re z-i" :class="tabs_bottom_line_theme" :style="tabs_check + tabs_sign_spacing"></div>
+                    </div>
                 </div>
             </template>
         </div>
@@ -59,6 +61,10 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
+    tabsSlidingFixedBg: {
+        type: String,
+        default: '',
+    }
 });
 // const tabs = ref(props.value);
 // 用于页面判断显示
@@ -83,6 +89,11 @@ const tabs_theme = computed(() => {
     }
     return tabs_theme;
 });
+const item_style = computed(() => {
+    return (index: number, is_sliding_fixed: string) => {
+        return `padding-left: ${ index == 0 ? '0' : new_style.value.tabs_spacing / 2}px;padding-right:${ index - 1 == form.value.tabs_list.length ? '0' : new_style.value.tabs_spacing / 2 }px;${ is_sliding_fixed == '1' ? props.tabsSlidingFixedBg : ''}`
+    }
+});
 const tabs_bottom_line_theme = computed(() => {
     return new_style.value.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '';
 });
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index 417da7c7..6d3abe00 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -3,7 +3,7 @@
         <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-view>
+                    <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">
@@ -37,6 +37,8 @@ const tabs_img_container = ref('');
 // 区域内边距
 const article_container = ref('');
 const article_img_container = ref('');
+// 打开滑动固定开关之后，显示的样式
+const tabs_sliding_fixed_bg = ref('');
 watch(
     () => props.value,
     (val) => {
@@ -51,6 +53,7 @@ watch(
             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);
         // 文章区域背景设置
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 4ce12367..bae71c87 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -60,6 +60,7 @@
                                         </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 />
@@ -180,6 +181,7 @@ onMounted(() => {
     }
     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';
@@ -253,6 +255,7 @@ const tabs_add = () => {
         tabs_type: '0', 
         tabs_img: [], 
         tabs_icon: '',
+        is_sliding_fixed: '0',
         title: '',
         desc: '',
         data_type: '0',
@@ -314,6 +317,26 @@ const url_value_dialog_call_back = (item: any[]) => {
         };
     }
 };
+/**
+ * 处理滑动固定状态变化的函数
+ * 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
+ * 
+ * @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);
 // 颜色主题切换
diff --git a/src/components/model-data-tabs/index.vue b/src/components/model-data-tabs/index.vue
index 1325517b..97ff6a62 100644
--- a/src/components/model-data-tabs/index.vue
+++ b/src/components/model-data-tabs/index.vue
@@ -3,7 +3,7 @@
         <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>
+                    <tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
                 </div>
             </div>
             <div class="oh" :style="data_container">
@@ -60,6 +60,8 @@ const outer_container_width = ref(0);
 // 数据内容样式
 const data_content_container = ref('');
 const data_content_img_container = ref('');
+// 打开滑动固定开关之后，显示的样式
+const tabs_sliding_fixed_bg = ref('');
 watch(
     () => props.value,
     (val) => {
@@ -74,6 +76,7 @@ watch(
             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);
         // 内容区域背景设置
diff --git a/src/components/model-data-tabs/model-data-tabs-content.vue b/src/components/model-data-tabs/model-data-tabs-content.vue
index ef3f530f..bcbe013a 100644
--- a/src/components/model-data-tabs/model-data-tabs-content.vue
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -48,6 +48,7 @@
                                         <el-input v-else v-model="row.title" placeholder="请输入标题文字" clearable />
                                     </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 == '4'" label="上传图片">
                                         <upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
@@ -91,7 +92,7 @@ import defaultDataGoodsStyles from '@/components/common/data-tabs-common/goods/d
 import defaultDataArticleStyles from '@/components/common/data-tabs-common/article/data-article-styles.vue';
 import defaultDataCustomStyles from '@/components/model-custom/model-custom-styles.vue';
 
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 import { article_default_parameter, goods_default_parameter } from "@/config/const/data-tabs";
 import defaultCustom from '@/config/const/custom';
 import { get_math, tabs_style } from '@/utils';
@@ -145,6 +146,7 @@ const arry_list = form.value.tabs_list;
 // 历史数据处理
 arry_list.forEach((item: any) => {
     item.tabs_name = `content`;
+    item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
     if (item.tabs_data_type == 'goods') {
         item.article_config = cloneDeep(article_default_parameter);
         item.custom_config = cloneDeep(defaultCustom);
@@ -275,6 +277,7 @@ const tabs_list_remove = (index: number) => {
 const tabs_list_copy = (index: number) => {
     const data = {
         ...cloneDeep(form.value.tabs_list[index]),
+        is_sliding_fixed: '0',
         tabs_name: 'content',
         title: (form.value.tabs_list[index]?.title || '') + '(复制)',
     };
@@ -294,6 +297,7 @@ const tabs_add = () => {
         tabs_type: '0', 
         tabs_img: [], 
         tabs_icon: '',
+        is_sliding_fixed: '0',
         title: '',
         img: [],
         desc: '',
@@ -309,6 +313,26 @@ const tabs_add = () => {
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
+/**
+ * 处理滑动固定状态变化的函数
+ * 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
+ * 
+ * @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';
+            }
+        });
+    }
+}
 // #endregion
 // const is_immersion_model = computed(() => common_store.is_immersion_model);
 
diff --git a/src/components/model-goods-tabs/index.vue b/src/components/model-goods-tabs/index.vue
index 4537813e..2ab7773c 100644
--- a/src/components/model-goods-tabs/index.vue
+++ b/src/components/model-goods-tabs/index.vue
@@ -3,7 +3,7 @@
         <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>
+                    <tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
                 </div>
             </div>
             <div class="oh" :style="shop_container">
@@ -37,6 +37,8 @@ const tabs_img_container = ref('');
 // 商品区域样式设置
 const shop_container = ref('');
 const shop_img_container = ref('');
+// 打开滑动固定开关之后，显示的样式
+const tabs_sliding_fixed_bg = ref('');
 watch(
     () => props.value,
     (val) => {
@@ -51,6 +53,7 @@ watch(
             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);
         // 商品区域背景设置
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 8d5d6421..e817b2a2 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -63,6 +63,7 @@
                                         </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 == '4'" label="上传图片">
                                         <upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
@@ -158,6 +159,7 @@ onBeforeMount(() => {
     }
     if (form.value.tabs_list.length > 1) {
         form.value.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';
@@ -191,6 +193,7 @@ const tabs_add = () => {
         tabs_type: '0', 
         tabs_img: [], 
         tabs_icon: '',
+        is_sliding_fixed: '0',
         title: '',
         img: [],
         desc: '',
@@ -254,6 +257,26 @@ const url_value_dialog_call_back = (item: any[]) => {
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
+/**
+ * 处理滑动固定状态变化的函数
+ * 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
+ * 
+ * @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 change_style = (val: any): void => {
     form.value.theme = val;
diff --git a/src/components/model-tabs-carousel/index.vue b/src/components/model-tabs-carousel/index.vue
index 626f28e5..a6324904 100644
--- a/src/components/model-tabs-carousel/index.vue
+++ b/src/components/model-tabs-carousel/index.vue
@@ -4,7 +4,7 @@
         <div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
             <div class="oh" :style="tabs_container">
                 <div class="oh" :style="tabs_img_container">
-                    <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
+                    <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
                 </div>
             </div>
             <div class="oh" :style="carousel_container">
@@ -38,6 +38,8 @@ const tabs_img_container = ref('');
 // 轮播区域背景设置
 const carousel_container = ref('');
 const carousel_img_container = ref('');
+// 打开滑动固定开关之后，显示的样式
+const tabs_sliding_fixed_bg = ref('');
 watch(
     props.value,
     (val) => {
@@ -57,6 +59,7 @@ watch(
             ...new_style.tabs_padding,
             padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
         }
+        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) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
         tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
         // 轮播区域背景设置
diff --git a/src/components/model-tabs/index.vue b/src/components/model-tabs/index.vue
index 99f3f474..f80f323b 100644
--- a/src/components/model-tabs/index.vue
+++ b/src/components/model-tabs/index.vue
@@ -1,12 +1,12 @@
 <template>
     <div :style="style">
         <div :style="style_img_container">
-            <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true"></tabs-view>
+            <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, common_img_computer } from '@/utils';
+import { common_styles_computer, common_img_computer, gradient_computer } from '@/utils';
 import { cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -18,11 +18,14 @@ const props = defineProps({
 });
 
 const tabs_list = ref(props.value);
+// 打开滑动固定开关之后，显示的样式
+const tabs_sliding_fixed_bg = ref('');
 watch(props.value, (val) => {
     let new_data = cloneDeep(val);
     const { home_data } = new_data.content;
     new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
     tabs_list.value = new_data;
+    tabs_sliding_fixed_bg.value = gradient_computer(props.value.style.common_style);
 }, { immediate: true, deep: true });
 
 const style = computed(() => common_styles_computer(props.value.style.common_style));
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index 50f42ce0..70d105d1 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -46,50 +46,54 @@
                 <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">
-                            <div class="flex-col gap-10 w h">
-                                <el-radio-group v-model="form.home_data.tabs_type">
-                                    <el-radio value="0">文本</el-radio>
-                                    <el-radio value="1">图片/图标</el-radio>
-                                </el-radio-group>
-                                <template v-if="form.home_data.tabs_type == '1'">
-                                    <upload v-model="form.home_data.tabs_img" v-model:icon-value="form.home_data.tabs_icon" is-icon :limit="1" size="50"></upload>
-                                </template>
-                                <template v-else>
-                                    <el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
-                                </template>
-                            </div>
-                        </el-form-item>
+                        <div class="flex-col gap-10 w">
+                            <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>
+                                        <el-radio value="1">图片/图标</el-radio>
+                                    </el-radio-group>
+                                    <template v-if="form.home_data.tabs_type == '1'">
+                                        <upload v-model="form.home_data.tabs_img" v-model:icon-value="form.home_data.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                    </template>
+                                    <template v-else>
+                                        <el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
+                                    </template>
+                                </div>
+                            </el-form-item>
+                            <sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
+                        </div>
                     </div>
                     <drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
-                        <template #default="scoped">
+                        <template #default="{ row, index }">
                             <div class="flex-col align-c jc-s gap-20 flex-1 w">
                                 <el-form-item label="数据类型" class="w mb-0">
                                     <div class="flex-col gap-10 w h">
-                                        <el-radio-group v-model="scoped.row.tabs_type">
+                                        <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="scoped.row.tabs_type == '1'">
-                                            <upload v-model="scoped.row.tabs_img" v-model:icon-value="scoped.row.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                        <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="scoped.row.title" placeholder="请输入标题文字" clearable />
+                                            <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, 'tabs_list')"></sliding-fixed>
                                 <el-form-item label="链接类型" class="w mb-0">
-                                    <el-radio-group v-model="scoped.row.data_type">
+                                    <el-radio-group v-model="row.data_type">
                                         <el-radio value="0">DIY页面</el-radio>
                                         <el-radio value="1">商品分类</el-radio>
                                     </el-radio-group>
                                 </el-form-item>
-                                <el-form-item :label="scoped.row.data_type == '0' ? 'DIY页面' : '商品分类'" class="w mb-0">
-                                    <template v-if="scoped.row.data_type == '0'">
-                                        <url-value v-model="scoped.row.micro_page_list" :type="['diy']"></url-value>
+                                <el-form-item :label="row.data_type == '0' ? 'DIY页面' : '商品分类'" class="w mb-0">
+                                    <template v-if="row.data_type == '0'">
+                                        <url-value v-model="row.micro_page_list" :type="['diy']"></url-value>
                                     </template>
                                     <template v-else>
-                                        <url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
+                                        <url-value v-model="row.classify" :type="['goods-category']"></url-value>
                                     </template>
                                 </el-form-item>
                             </div>
@@ -131,11 +135,13 @@ const { form, styles } = toRefs(state);
 onBeforeMount(() => {
     if (form.value.tabs_list.length > 1) {
         form.value.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';
         });
     }
+    form.value.home_data.is_sliding_fixed = !isEmpty(form.value.home_data.is_sliding_fixed) ? form.value.home_data.is_sliding_fixed : '0';
 });
 
 const add = () => {
@@ -167,6 +173,27 @@ const on_sort = (new_list: nav_group[]) => {
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
+const sliding_fixed_change = (val: string | number | boolean, index: number, type: string) => {
+    const home_data_is_sliding_fixed = form.value.home_data.is_sliding_fixed == '1';
+    const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
+    // 如果是选中的话，判断是否其他选项卡是否选中，如果有的话，就将其他选项卡设置为0
+    if (val == '1' && ( home_data_is_sliding_fixed || tabs_list_is_sliding_fixed != -1)) {
+        // 如果是首页的话，直接将选项卡的数据全部设置为0
+        if (type == 'home_data') {
+            form.value.tabs_list.forEach((item: any) => {
+                item.is_sliding_fixed = '0';
+            });
+        } else {
+            // 如果是其他的话，将首页的数据全部设置为0，不符合当前index也设置为0
+            form.value.home_data.is_sliding_fixed = '0';
+            form.value.tabs_list.forEach((item: any, index1: number) => {
+                if (index != index1) {
+                    item.is_sliding_fixed = '0';
+                }
+            });
+        }
+    }
+}
 // 选项卡是否设置安全距离
 const is_general_safe_distance = computed(() => common_store.is_general_safe_distance);
 watchEffect(() => {
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index b40bfe25..3c41194e 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -13,6 +13,7 @@ interface articleTabsList {
     tabs_type: string;
     tabs_img: uploadList[];
     tabs_icon: string;
+    is_sliding_fixed: string,
     title: string;
     desc: string;
     data_type: string;
@@ -149,12 +150,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
         article_theme: '0',
         article_carousel_col: '2',
         tabs_list: [
-            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', 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: '', 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: '', 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: '', 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: '', 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: '', 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: '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'],
diff --git a/src/config/const/data-tabs.ts b/src/config/const/data-tabs.ts
index 7236a651..bcea15ca 100644
--- a/src/config/const/data-tabs.ts
+++ b/src/config/const/data-tabs.ts
@@ -10,6 +10,7 @@ interface articleTabsList {
     tabs_type: string;
     tabs_img: uploadList[];
     tabs_icon: string;
+    is_sliding_fixed: string,
     title: string;
     img: uploadList[];
     desc: string;
@@ -152,10 +153,10 @@ const defaultProductList: DefaultProductList = {
         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(goods_default_parameter) },
-            { 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(goods_default_parameter) },
-            { 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(goods_default_parameter) },
-            { 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(goods_default_parameter) },
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
         ],
         // 选中的内容索引
         tabs_active_index: 0,
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index ddb1a712..7f4d3163 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -9,6 +9,7 @@ interface articleTabsList {
     tabs_type: string;
     tabs_img: uploadList[];
     tabs_icon: string;
+    is_sliding_fixed: string,
     title: string;
     img: uploadList[];
     desc: string;
@@ -169,10 +170,10 @@ const defaultProductList: DefaultProductList = {
         carousel_col: 3,
         // 选项卡数据
         tabs_list: [
-            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
-            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
-            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
-            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
         ],
         // 选中的内容索引
         tabs_active_index: 0,
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index a44f4e88..6811f49a 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -6,6 +6,7 @@ interface tabs_page {
     tabs_type: string;
     tabs_img: uploadList[];
     tabs_icon: string;
+    is_sliding_fixed: string,
     title: string;
     desc: string;
     data_type: string;
@@ -138,11 +139,11 @@ const defaultTabs: defaultTabs = {
         // 是否支持安全距离
         is_tabs_safe_distance: '0',
         // 选项卡数据
-        home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+        home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '',  title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '',  is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         ],
         // 轮播类型
         carousel_type: 'inherit',
diff --git a/src/config/const/tabs.ts b/src/config/const/tabs.ts
index 45421c0e..5aa11b0f 100644
--- a/src/config/const/tabs.ts
+++ b/src/config/const/tabs.ts
@@ -6,6 +6,7 @@ interface tabs_page {
     tabs_type: string;
     tabs_img: uploadList[];
     tabs_icon: string;
+    is_sliding_fixed: string;
     title: string;
     desc: string;
     data_type: string;
@@ -68,11 +69,11 @@ const defaultTabs: defaultTabs = {
         tabs_adorn_icon: 'checked-smooth',
         tabs_adorn_img: [],
         tabs_top_up: '0',
-        home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+        home_data: { id: get_math(), tabs_type: '0',  tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         ],
     },
     style: {