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 @@
@@ -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 @@
@@ -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') {