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