From d25084485817a94ded740059293a44d7232c18c9 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, 13 Dec 2024 16:52:58 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E5=92=8C?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/common/common.js                    |  6 +-
 .../choice-location/choice-location.vue       |  2 +-
 components/diy/carousel.vue                   | 58 ++++++++----
 components/diy/diy.vue                        | 67 ++++++++------
 components/diy/modules/tabs-view.vue          | 89 ++++++++++++++++---
 components/diy/search.vue                     |  2 +-
 components/diy/tabs-carousel.vue              | 50 +++++++++--
 components/diy/tabs.vue                       |  9 +-
 8 files changed, 219 insertions(+), 64 deletions(-)

diff --git a/common/js/common/common.js b/common/js/common/common.js
index d59e391b..246c101f 100644
--- a/common/js/common/common.js
+++ b/common/js/common/common.js
@@ -32,7 +32,7 @@ export function get_nested_property(obj, path) {
     
     // 使用reduce方法遍历属性键数组，逐层访问对象属性
     // 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
-    return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
+    return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : ''), obj) ?? '';
 }
 
 /**
@@ -344,6 +344,10 @@ export function background_computer(new_style) {
  * 这些样式包括渐变色、内边距、外边距、圆角和阴影等，为组件提供了一套完整的外观定义。
  *
  * @param new_style  组件的新样式对象，包含了需要计算的样式属性。
+ * @param scale      一个缩放比例，用于控制样式的缩放，默认为1。
+ * @param scale      用于控制样式的缩放比例，默认为1，表示不进行缩放。
+ * @param is_custom  一个布尔值，用于判断是否为自定义样式，默认为false。
+ * @param index      用于标识组件的索引，默认为0。
  * @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
  */
 export function common_styles_computer(new_style) {
diff --git a/components/choice-location/choice-location.vue b/components/choice-location/choice-location.vue
index 31c922c6..717572f9 100644
--- a/components/choice-location/choice-location.vue
+++ b/components/choice-location/choice-location.vue
@@ -10,7 +10,7 @@
                         <iconfont :name="propLeftIconValue" :size="propIconLocationSize" propClass="lh" :color="propIconLocationColor || propBaseColor"></iconfont>
                     </block>
                 </view>
-                <view :class="'va-m dis-inline-block margin-left-xs single-text text' + (propType == 'header' ? 'text-size-md' : 'text-size-xs')" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view>
+                <view :class="'va-m dis-inline-block margin-left-xs single-text text' + (propType == 'header' ? ' text-size-md' : ' text-size-xs')" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view>
                 <view v-if="propIsRightIconArrow" class="va-m lh dis-inline-block margin-left-xs">
                     <block v-if="propRightImgValue.length > 0">
                         <image :src="propRightImgValue[0].url" class="dis-block" mode="heightFix"></image>
diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index ab77adc0..65c167b4 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -1,6 +1,6 @@
 <template>
-    <view class="pr" :style="style_container">
-        <view class="pr re" :style="style_img_container">
+    <view class="pr" :style="style_container + swiper_bg_style">
+        <view class="pr re" :style="style_img_container + swiper_bg_img_style">
             <swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :display-multiple-items="slides_per_group" :duration="500" :style="{ height: swiper_height }" :previous-margin="previousMargin" :next-margin="nextMargin" @change="slideChange">
                 <block v-if="form.carousel_type == 'card'">
                     <swiper-item v-for="(item, index) in new_list" :key="index">
@@ -129,6 +129,9 @@
                 // hackReset: true,
                 // 轮播图的高度
                 swiper_height: 50,
+                // 轮播时的背景样式
+                swiper_bg_style: '',
+                swiper_bg_img_style: '',
             };
         },
         watch: {
@@ -179,6 +182,8 @@
                     img_fit: fit, // 图片风格 默认为aspectFill
                     video_style: this.get_video_style(new_style), // 视频播放按钮显示逻辑   
                     swiper_height: new_form.height * scale + 'px', // 轮播图高度
+                    swiper_bg_style: this.get_swiper_bg_style(new_form, 0),
+                    swiper_bg_img_style: this.get_swiper_bg_img_style(new_form, 0),
                 });
                 // 风格二显示逻辑
                 if (new_form.carousel_type == 'card') {
@@ -198,17 +203,37 @@
                         });
                     // });
                 }
-                // this.setData({
-                //     hackReset: false,
-                // });
-                // this.$nextTick(() => {
-                //     this.setData({
-                //         hackReset: true,
-                //     });
-                // });
+            },
+            get_swiper_bg_style(form, actived_index) {
+                if (!this.propIsCommon) {
+                    return '';
+                }
+                const style = form?.carousel_list?.[actived_index]?.style;
+                if (style && !isEmpty(style.color_list)) {
+                    const color_list = style.color_list;
+                    const list = color_list.filter((item) => !isEmpty(item.color));
+                    if (list.length > 0) {
+                        try {
+                            return gradient_computer(style);
+                        } catch (error) {
+                            return '';
+                        }
+                    }
+                    return '';
+                }
+                return '';
+            },
+            get_swiper_bg_img_style(form, actived_index) {
+                if (!this.propIsCommon) {
+                    return '';
+                }
+                if (!isEmpty(form.carousel_list[actived_index].style.background_img)) {
+                    return background_computer(form.carousel_list[actived_index].style);
+                }
+                return '';
             },
             get_seat_list(form) {
-                if (form.carousel_list.length > 3) {
+                if (form.carousel_list.length > 3 || form.carousel_type !== 'card') {
                     return [];
                 } else {
                     let seat_list = [];
@@ -231,19 +256,22 @@
             },
             slideChange(e) {
                 let actived_index = e.detail.current;
-                if (e.detail.current > this.form.carousel_list.length - 1) {
+                if (e.detail.current > this.form.carousel_list.length - 1 && this.form.carousel_type == 'card') {
                     const seat_length = this.seat_list.length;
                     if (seat_length == 2 && e.detail.current == 3) {
                         actived_index = 1;
-                    } else if (seat_length == 3) {
-                        actived_index = 0;
                     } else {
-                        actived_index = e.detail.current - this.seat_list.length;
+                        actived_index = 0;
                     }
                 }
+                if (!this.propIsCommon) {
+                    this.$emit('slideChange', actived_index);
+                }
                 this.setData({
                     animationData: e.detail.current,
                     actived_index: actived_index,
+                    swiper_bg_style: this.get_swiper_bg_style(this.form, actived_index),
+                    swiper_bg_img_style: this.get_swiper_bg_img_style(this.form, actived_index),
                 });
             },
             get_video_style(new_style) {
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 183725ab..a02d2087 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -10,8 +10,8 @@
                     <view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
                         <view v-for="item in tabs_data" :key="item.key">
                             <template v-if="item.is_enable == '1'">
-                                <componentDiyTabs v-if="item.key == 'tabs'" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
-                                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propScrollTop="scroll_top" :propTabsIsTop="temp_is_header_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
+                                <componentDiyTabs v-if="item.key == 'tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
+                                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="temp_header_top" :propScrollTop="scroll_top" :propTabsIsTop="temp_is_header_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
                             </template>
                         </view>
                         <template v-if="is_tabs_type">
@@ -288,38 +288,41 @@
 
             // 初始化
             init() {
-                let header = this.propValue.header;
+                const { header = {}, diy_data = [], tabs_data = []} = this.propValue;
                 let header_style = header.com_data.style;
-                let diy_data = JSON.parse(JSON.stringify(this.propValue.diy_data));
                 let new_diy_index = 0;
+                let new_tabs_data = [];
                 let new_diy_data = [];
-                diy_data.forEach((item) => {
-                    // 判断是否是商品列表
-                    if (item.com_name == 'float-window') {
-                        item.index = -1;
-                    } else {
-                        if (new_diy_index == 0) {
-                            // 判断是否开启沉浸模式和是否开启安全距离 如果为true则除了选项卡和选项卡轮播外， 第一个组件则加上安全距离样式的padding_top加上顶部导航的高度和安全距离的高度
-                            if (header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1') {
-                                let new_data = JSON.parse(JSON.stringify(item));
-                                // 顶部导航的高度
-                                let header_top_height = (header.com_data.content.data_alone_row_value.length > 0 ? parseInt(header.com_data.style.data_alone_row_space || 5) : 0) + 33 + (header.com_data.content.data_alone_row_value.length > 0 ? 33 : 0);
-                                new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
-                                item = new_data;
-                            }
-                        }
-                        item.index = new_diy_index;
-                        new_diy_data.push(item);
+                if (tabs_data.length > 0) {
+                    tabs_data.forEach((item) => {
+                        // 修改item的内容
+                        item = this.get_index_content(new_diy_index, header, header_style, item);
+                        new_tabs_data.push(item);
                         new_diy_index++;
-                    }
-                });
+                    });
+                    new_diy_data = diy_data;
+                } else {
+                    new_tabs_data = tabs_data;
+                    // 过滤数据 
+                    diy_data.forEach((item) => {
+                        // 判断是否是商品列表
+                        if (item.com_name == 'float-window') {
+                            item.index = -1;
+                        } else {
+                            // 修改item的内容
+                            item = this.get_index_content(new_diy_index, header, header_style, item);
+                            new_diy_data.push(item);
+                            new_diy_index++;
+                        }
+                    });
+                }
                 const { padding_right = 0, padding_left = 0} = header.com_data.style.common_style;
                 // tabs选项卡数据过滤
                 this.setData({
                     header_data: header,
                     footer_data: this.propValue.footer,
                     diy_data: new_diy_data,
-                    tabs_data: this.propValue.tabs_data,
+                    tabs_data: new_tabs_data,
                     page_style: common_styles_computer(header.com_data.style.common_style),
                     page_img_style: background_computer(header.com_data.style.common_style),
                     // 内间距
@@ -344,7 +347,21 @@
                     is_immersion_model: bool,
                 });
             },
-
+            get_index_content(new_diy_index, header, header_style, item) {
+                item.index = new_diy_index;
+                if (new_diy_index == 0) {
+                    // 判断是否开启沉浸模式和是否开启安全距离 如果为true则除了选项卡和选项卡轮播外， 第一个组件则加上安全距离样式的padding_top加上顶部导航的高度和安全距离的高度
+                    if (header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1') {
+                        let new_data = JSON.parse(JSON.stringify(item));
+                        // 顶部导航的高度
+                        let header_top_height = (header.com_data.content.data_alone_row_value.length > 0 ? parseInt(header.com_data.style.data_alone_row_space || 5) : 0) + 33 + (header.com_data.content.data_alone_row_value.length > 0 ? 33 : 0);
+                        new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
+                        return new_data;
+                    }
+                    return item;
+                }
+                return item;
+            },
             // 选项卡回调更新数据
             tabs_click_event(tabs_id, bool, params = {}) {
                 let new_data = [];
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index c210727e..78569d52 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -6,11 +6,27 @@
                 <view class="flex-row gap-10 jc-sb align-c" :style="propsTabsImgContainer">
                     <view class="tabs flex-1 flex-width">
                         <scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
-                            <view class="flex-row">
+                            <view class="flex-row" :style="'height:' + tabs_height">
                                 <view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
                                     <view class="nowrap flex-col jc-c align-c" :style="tabs_sign_spacing">
-                                        <image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
-                                        <view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</view>
+                                        <template v-if="!isEmpty(item.img)">
+                                            <image :src="item.img[0].url" class="img" :style="tabs_theme_style.tabs_top_img" mode="aspectFit" />
+                                        </template>
+                                        <template v-if="item.tabs_type == '1'">
+                                            <template v-if="!isEmpty(item.tabs_icon)">
+                                                <view class="title" :style="index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_check : `` :  '' + tabs_padding_bottom">
+                                                    <iconfont :name="'icon-' + item.tabs_icon" :color="index == active_index ? tabs_icon_checked_color : tabs_icon_color" propContainerDisplay="flex" :size="index == active_index ? tabs_icon_checked_size : tabs_icon_size"></iconfont>
+                                                </view>
+                                            </template>
+                                            <template v-else>
+                                                <view class="title" :style="index == active_index ? new_style.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index) ? tabs_check : `` : tabs_padding_bottom">
+                                                    <imageEmpty :propImageSrc="item.tabs_img[0]" :propStyle="index == active_index ? tabs_theme_style.tabs_img_checked : tabs_theme_style.tabs_img" propImgFit="heightFix" propErrorStyle="width: 40rpx;height: 40rpx;"></imageEmpty>
+                                                </view>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <view class="title" :style="index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_theme_style.tabs_title_checked + tabs_check : tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</view>
+                                        </template>
                                         <view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
                                         <iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''" propContainerDisplay="flex" size="40rpx"></iconfont>
                                         <view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></view>
@@ -51,15 +67,19 @@
 
 <script>
     const app = getApp();
-    import { gradient_computer, isEmpty } from '@/common/js/common/common.js';
+    import { gradient_computer, isEmpty, radius_computer } from '@/common/js/common/common.js';
     import componentPopup from '@/components/popup/popup';
-
+    import imageEmpty from '@/components/diy/modules/image-empty.vue';
     // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
     // #ifdef MP-TOUTIAO
     bar_height = 0;
     // #endif
     export default {
+        components: {
+            componentPopup,
+            imageEmpty,
+        },
         props: {
             propValue: {
                 type: Object,
@@ -109,11 +129,9 @@
                 default: '',
             }
         },
-        components: {
-            componentPopup,
-        },
         data() {
             return {
+                new_style: {},
                 tabs_theme_index: '',
                 tabs_theme: '',
                 tabs_check: '',
@@ -126,7 +144,14 @@
                 tabs_theme_style: {
                     tabs_title_checked: '',
                     tabs_title: '',
+                    tabs_img_checked: '',
+                    tabs_img: '',
+                    tabs_top_img: ''
                 },
+                tabs_icon_checked_size: '',
+                tabs_icon_size: '',
+                tabs_icon_checked_color: '',
+                tabs_icon_color: '',
                 icon: {
                     more_icon_class: '',
                     more_icon_size: '',
@@ -137,6 +162,11 @@
                 propIsBar: false,
                 tabs_bottom_line_theme: '',
                 tabs_sticky: '',
+                tabs_height: '100%',
+                // 默认数据
+                old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
+                old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
+                old_margin: { margin: 0, margin_top: 10, margin_bottom: 0, margin_left: 0, margin_right: 0 },
             };
         },
         watch: {
@@ -178,12 +208,38 @@
                     more_icon_size: new_style.more_icon_size,
                     more_icon_color: new_style.more_icon_color,
                 };
+                const tabs_top_img_height = new_style?.tabs_top_img_height || 39;
+                const tabs_top_img_radius = new_style?.tabs_top_img_radius || { radius: 100, radius_top_left: 100, radius_top_right: 100, radius_bottom_left: 100, radius_bottom_right: 100}
                 // 标题样式
                 const new_tabs_theme_style = {
-                    tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked * 2}rpx;line-height: ${new_style.tabs_size_checked * 2}rpx;color:${new_style.tabs_color_checked};` + (['2', '4'].includes(this.tabs_theme_index) ? this.tabs_check : ``),
+                    tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked * 2}rpx;line-height: ${new_style.tabs_size_checked * 2}rpx;color:${new_style.tabs_color_checked};`,
                     tabs_title: `font-weight: ${new_style.tabs_weight};font-size: ${new_style.tabs_size * 2}rpx;line-height: ${new_style.tabs_size * 2}rpx;color:${new_style.tabs_color};`,
+                    tabs_img_checked: `height: ${(new_style?.tabs_img_height || 0) * 2}rpx;` + radius_computer(new_style?.tabs_img_radius || this.old_radius),
+                    tabs_img: `height: ${(new_style?.tabs_img_height || 0) * 2}rpx;` + radius_computer(new_style?.tabs_img_radius || this.old_radius),
+                    tabs_top_img: `height: ${tabs_top_img_height * 2 }rpx; width: 100%;box-sizing: border-box;` + radius_computer(tabs_top_img_radius),
                 };
+                const { tabs_size_checked, tabs_size, tabs_icon_size_checked = 0, tabs_icon_size = 0, tabs_img_height = 0, tabs_sign_spacing = 0 } = new_style || {};
+                let default_height = 0;
+                if (new_content.tabs_theme == '2') {
+                    default_height = 12; // 选中的时候,风格二的内间距
+                } else if (new_content.tabs_theme == '4') {
+                    const top_index = new_content?.tabs_list?.findIndex((item) => !isEmpty(item.img)) ?? -1;
+                    default_height = 4 + (top_index > -1 ? tabs_top_img_height + tabs_sign_spacing : 0); // 选中的时候,风格二的内间距 加上上边图片的大小和上边图片之间的间距
+                }
+                // 筛选出所有的icon
+                const is_icon = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && !isEmpty(item.tabs_icon)) ?? -1;
+                // 如果有icon，则取选中的icon大小和未选中的icon大小取最大值，作为图标的高度
+                let icon_height = 0;
+                if (is_icon > -1) {
+                    icon_height = Math.max(tabs_icon_size_checked + default_height, tabs_icon_size);
+                }
+                // 筛选出所有的图片, 没有选择图标的时候默认是图片
+                const is_img = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && isEmpty(item.tabs_icon)) ?? -1;
+                // 选项卡高度 五个值，作为判断依据，因为图片没有未选中的大小设置，所以高度判断的时候只取选中的高度, 其余的icon和标题都分别取选中和未选中的大小对比，取出最大的值，作为选项卡的高度，避免选项卡切换时会出现抖动问题
+                const height = Math.max(tabs_size_checked + default_height, tabs_size, icon_height, is_img > -1 ? (tabs_img_height + default_height) : '');
+                // 参数设置
                 this.setData({
+                    new_style: new_style,
                     tabs_spacing: Number(new_style.tabs_spacing),
                     tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `row-gap:${new_style.tabs_sign_spacing * 2}rpx;` : 'row-gap:8rpx;',
                     tabs_list: new_content.tabs_list,
@@ -195,9 +251,14 @@
                     tabs_check: new_tabs_check,
                     icon_tabs_check: `${new_tabs_check};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`,
                     icon: new_icon,
+                    tabs_icon_checked_size: (new_style?.tabs_icon_size_checked || 0) * 2 + 'rpx',
+                    tabs_icon_size: (new_style?.tabs_icon_size || 0) * 2 + 'rpx',
+                    tabs_icon_checked_color: new_style?.tabs_icon_color_checked || '',
+                    tabs_icon_color: new_style?.tabs_icon_color || '',
                     tabs_theme_style: new_tabs_theme_style,
                     tabs_bottom_line_theme: new_style.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '',
                     tabs_theme_1_style: new_style.tabs_one_theme == '1',
+                    tabs_height: ['2', '4'].includes(new_content.tabs_theme) ? height * 2 + 'rpx' : '100%;',
                 });
             },
             // 获取选项卡主题
@@ -301,8 +362,8 @@
                 display: none;
             }
             .img {
-                width: 78rpx;
-                height: 78rpx;
+                // width: 78rpx;
+                // height: 78rpx;
                 border-radius: 100%;
                 border: 2rpx solid transparent;
                 display: none;
@@ -338,9 +399,9 @@
             &.tabs-style-3 {
                 &.active {
                     .title {
-                        background: #ff2222;
+                        // background: #ff2222;
                         border-radius: 40rpx;
-                        padding: 12rpx 24rpx;
+                        padding: 6px 12px;
                         color: #fff;
                     }
                 }
@@ -364,7 +425,7 @@
                         font-size: 22rpx;
                         background: #ff5e5e;
                         border-radius: 40rpx;
-                        padding: 4rpx 14rpx;
+                        padding: 2px 7px;
                         color: #fff;
                     }
                     .img {
diff --git a/components/diy/search.vue b/components/diy/search.vue
index ee450921..1bf127f8 100644
--- a/components/diy/search.vue
+++ b/components/diy/search.vue
@@ -4,7 +4,7 @@
             <view class="search wh-auto pr">
                 <view class="box oh flex-row align-c" :style="box_style">
                     <view v-if="form.positioning_name_float == '1' && propSearchType == 'header'" :style="propLocationMargin">
-                        <component-choice-location :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '150rpx'" @onBack.stop="choice_location_back"></component-choice-location>
+                        <component-choice-location propType="search" :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '150rpx'" @onBack.stop="choice_location_back"></component-choice-location>
                     </view>
                     <view :class="'oh flex-1 ht-auto flex-row align-c gap-10' + (form.is_center == '1' ? ' tips-float' : '')" @tap.stop="search_tap">
                         <view v-if="form.is_icon_show == '1'" class="pr">
diff --git a/components/diy/tabs-carousel.vue b/components/diy/tabs-carousel.vue
index 4a21704f..5bdfb4dc 100644
--- a/components/diy/tabs-carousel.vue
+++ b/components/diy/tabs-carousel.vue
@@ -1,10 +1,10 @@
 <template>
-    <view class="ou" :style="style_container">
-        <view class="flex-col ou wh-auto" :style="style_img_container">
+    <view class="ou" :style="style_container + swiper_bg_style">
+        <view class="flex-col ou wh-auto" :style="style_img_container + carousel_img_container">
             <componentDiyTabs :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
             <view :style="carousel_container">
                 <view :style="carousel_img_container">
-                    <componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play"></componentDiycarousel>
+                    <componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play" @slideChange="slideChange"></componentDiycarousel>
                 </view>
             </view>
         </view>
@@ -48,7 +48,12 @@
             propContentPadding: {
                 type: String,
                 default: '',
-            }
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 1000000,
+            },
         },
         data() {
             return {
@@ -74,6 +79,10 @@
                 carousel_container: '',
                 carousel_img_container: '',
                 // top_up: '0',
+                actived_index: 0,
+                // 轮播图背景
+                swiper_bg_style: '',
+                swiper_bg_img_style: '',
             };
         },
         created() {
@@ -112,7 +121,7 @@
                 this.setData({
                     // style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
                     style_container: `${common_styles_computer(new_style.common_style)};`,
-                    style_img_container: common_img_computer(new_style.common_style) + 'gap:' + new_style.data_spacing * 2 + 'rpx',
+                    style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'gap:' + new_style.data_spacing * 2 + 'rpx',
                     tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;',
                     tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
                     carousel_container: gradient_computer(carousel_content_data) + margin_computer(carousel_content_margin) + radius_computer(carousel_content_radius) + 'overflow: hidden;',
@@ -128,6 +137,8 @@
                         margin_left: new_style.common_style.margin_left,
                         margin_right: new_style.common_style.margin_right,
                     },
+                    swiper_bg_style: this.get_swiper_bg_style(new_content, 0),
+                    swiper_bg_img_style: this.get_swiper_bg_img_style(new_content, 0),
                 });
             },
             // tab点击
@@ -142,6 +153,35 @@
             video_play(url, popup_width, popup_height) {
                 this.$emit('onVideoPlay', url, popup_width, popup_height);
             },
+            get_swiper_bg_style(form, actived_index) {
+                const style = form?.carousel_list?.[actived_index]?.style;
+                if (style && !isEmpty(style.color_list)) {
+                    const color_list = style.color_list;
+                    const list = color_list.filter((item) => !isEmpty(item.color));
+                    if (list.length > 0) {
+                        try {
+                            return gradient_computer(style);
+                        } catch (error) {
+                            return '';
+                        }
+                    }
+                    return '';
+                }
+                return '';
+            },
+            get_swiper_bg_img_style(form, actived_index) {
+                if (!isEmpty(form.carousel_list[actived_index].style.background_img)) {
+                    return background_computer(form.carousel_list[actived_index].style);
+                }
+                return '';
+            },
+            slideChange(index) {
+                this.setData({
+                    actived_index: index,
+                    swiper_bg_style: this.get_swiper_bg_style(this.propValue.content || {}, index),
+                    swiper_bg_img_style: this.get_swiper_bg_img_style(this.propValue.content || {}, index),
+                });
+            },
         },
     };
 </script>
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 275e1fea..63611f60 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -70,7 +70,12 @@
             propContentPadding: {
                 type: String,
                 default: '',
-            }
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 1000000,
+            },
         },
         components: {
             componentDiyModulesTabsView,
@@ -145,7 +150,7 @@
                 this.setData({
                     tabs_data: new_tabs_data,
                     style_container: this.propIsCommon ? common_styles_computer(new_style.common_style) + new_tabs_background : new_content.tabs_top_up == '1' ? gradient_computer(new_style.common_style) + new_tabs_background : '', // 如果是选项卡轮播，不需要走默认样式
-                    style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
+                    style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
                     tabs_top_style: new_tabs_top_style,
                     // 判断是否置顶
                     top_up: new_top_up,

From 905d3944b3087e43148df9db939094a0a6d18f11 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, 13 Dec 2024 16:57:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E9=80=89=E9=A1=B9=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/modules/tabs-view.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 78569d52..65dfa04d 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -7,7 +7,7 @@
                     <view class="tabs flex-1 flex-width">
                         <scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
                             <view class="flex-row" :style="'height:' + tabs_height">
-                                <view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
+                                <view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'flex:0 0 auto;margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
                                     <view class="nowrap flex-col jc-c align-c" :style="tabs_sign_spacing">
                                         <template v-if="!isEmpty(item.img)">
                                             <image :src="item.img[0].url" class="img" :style="tabs_theme_style.tabs_top_img" mode="aspectFit" />

From 82f73ff7dee3b11610f9099ba0f6f9f12064b915 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, 13 Dec 2024 17:20:44 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E6=95=B0=E6=8D=AE=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/carousel.vue      | 2 +-
 components/diy/tabs-carousel.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index 65c167b4..00b7ffe1 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -227,7 +227,7 @@
                 if (!this.propIsCommon) {
                     return '';
                 }
-                if (!isEmpty(form.carousel_list[actived_index].style.background_img)) {
+                if (!isEmpty(form.carousel_list[actived_index]?.style?.background_img)) {
                     return background_computer(form.carousel_list[actived_index].style);
                 }
                 return '';
diff --git a/components/diy/tabs-carousel.vue b/components/diy/tabs-carousel.vue
index 5bdfb4dc..5dc8769f 100644
--- a/components/diy/tabs-carousel.vue
+++ b/components/diy/tabs-carousel.vue
@@ -170,7 +170,7 @@
                 return '';
             },
             get_swiper_bg_img_style(form, actived_index) {
-                if (!isEmpty(form.carousel_list[actived_index].style.background_img)) {
+                if (!isEmpty(form.carousel_list[actived_index]?.style?.background_img)) {
                     return background_computer(form.carousel_list[actived_index].style);
                 }
                 return '';