From 324c36e4fb55955002bceb5f35df67e0cc35ff10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 5 Aug 2025 17:57:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=91=E5=8A=A8=E5=9B=BA=E5=AE=9A=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue    |  6 ++++-
 src/components/model-tabs-carousel/index.vue | 23 +++++++++++++++++-
 src/components/model-tabs-magic/index.vue    | 25 +++++++++++++++++++-
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 7ec70156..730a75f3 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -64,6 +64,10 @@ const props = defineProps({
     tabsSlidingFixedBg: {
         type: String,
         default: '',
+    },
+    slidingFixedStyle: {
+        type: String,
+        default: '',
     }
 });
 // const tabs = ref(props.value);
@@ -91,7 +95,7 @@ const tabs_theme = computed(() => {
 });
 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 : ''}`
+        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' ? (isEmpty(props.slidingFixedStyle) ? props.tabsSlidingFixedBg : props.slidingFixedStyle) : ''}`
     }
 });
 const tabs_bottom_line_theme = computed(() => {
diff --git a/src/components/model-tabs-carousel/index.vue b/src/components/model-tabs-carousel/index.vue
index 00e55689..1c1735bf 100644
--- a/src/components/model-tabs-carousel/index.vue
+++ b/src/components/model-tabs-carousel/index.vue
@@ -5,7 +5,7 @@
             <div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
                 <div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
                 <div class="oh re z-deep" :style="tabs_img_container">
-                    <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>
+                    <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :sliding-fixed-style="is_rotating_background ? sliding_fixed_style : ''" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>   
                 </div>
             </div>
             <div class="oh" :style="carousel_container">
@@ -91,6 +91,27 @@ const actived_index = ref(0);
 const slideChange = (index: number) => {
     actived_index.value = index;
 };
+// 滑动固定的背景样式
+const sliding_fixed_style = computed(() => {
+    const style = form.value?.carousel_list?.[actived_index.value]?.style;
+    if (style && !isEmpty(style.color_list)) {
+        const color_list = style.color_list;
+        const list = color_list.filter((item: { color: string }) => !isEmpty(item.color));
+        if (list.length > 0) {
+            try {
+                if (style.background_img.length > 0) {
+                    return `background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 0%)`;
+                } else {
+                    return gradient_computer(style);
+                }
+            } catch (error) {
+                return '';
+            }
+        }
+        return '';
+    }
+    return '';
+});
 
 const swiper_bg_style = computed(() => {
     const style = form.value?.carousel_list?.[actived_index.value]?.style;
diff --git a/src/components/model-tabs-magic/index.vue b/src/components/model-tabs-magic/index.vue
index 8fe7009e..93d03350 100644
--- a/src/components/model-tabs-magic/index.vue
+++ b/src/components/model-tabs-magic/index.vue
@@ -5,7 +5,7 @@
             <div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
                 <div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
                 <div class="oh re z-deep" :style="tabs_img_container">
-                    <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>
+                    <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :sliding-fixed-style="is_rotating_background ? sliding_fixed_style : ''"  :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
                 </div>
             </div>
             <div :style="magic_container">
@@ -113,6 +113,29 @@ const actived_index = ref(0);
 const slideChange = (index: number) => {
     actived_index.value = index;
 };
+// 滑动固定的背景样式
+const sliding_fixed_style = computed(() => {
+    if (tabs_magic_type.value == 'carousel') {
+        const style = tabs_magic_value.value.content?.carousel_list?.[actived_index.value]?.style;
+        if (style && !isEmpty(style.color_list)) {
+            const color_list = style.color_list;
+            const list = color_list.filter((item: { color: string }) => !isEmpty(item.color));
+            if (list.length > 0) {
+                try {
+                    if (style.background_img.length > 0) {
+                        return `background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 0%)`;
+                    } else {
+                        return gradient_computer(style);
+                    }
+                } catch (error) {
+                    return '';
+                }
+            }
+            return '';
+        }
+    }
+    return '';
+});
 // 轮播更新背景色
 const swiper_bg_style = computed(() => {
     if (tabs_magic_type.value == 'carousel') {