From efbac250fc599348f958d76feec1faab2e325069 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sat, 28 Sep 2024 17:32:23 +0800
Subject: [PATCH 1/5] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-tabs.vue      |  1 -
 components/diy/diy.vue               | 19 +++++++-------
 components/diy/goods-tabs.vue        |  1 -
 components/diy/header.vue            | 18 ++++++-------
 components/diy/modules/tabs-view.vue | 10 +++++++-
 components/diy/tabs.vue              | 38 ++++++++++++++++++----------
 6 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index b734b542..0909ad87 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -138,7 +138,6 @@
                             this.setData({
                                 tabs_top: res.top,
                             });
-                            console.log('article', res);
                         }
                     })
                     .exec();
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 12c21bd0..629866a2 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -4,10 +4,10 @@
         <view class="pr header">
             <componentDiyHeader v-if="hack_reset" :propValue="header_data.com_data"></componentDiyHeader>
         </view>
-        <view class="content flex-col" :style="'padding-top:' + temp_is_header_top ? temp_header_top : '0'">
+        <view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
             <view v-for="(item, index) in tabs_data" :key="item.key">
-                <componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
-                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
+                <componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="is_header_top ? is_header_top && temp_is_header_top : temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
+                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="is_header_top ? is_header_top && temp_is_header_top : temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
             </view>
             <template v-if="is_tabs_type">
                 <template v-if="diy_data.length > 0">
@@ -62,7 +62,7 @@
         <!-- 当前diy页面底部菜单（非公共底部菜单） -->
         <block v-if="is_show_footer == 1">
             <componentDiyFooter v-if="hack_reset" :propValue="footer_data.com_data" @footer-height="footer_height_value_event"></componentDiyFooter>
-            <view v-if="footer_height_value > 0" :style="'height:'+footer_height_value+'rpx;'"></view>
+            <view v-if="footer_height_value > 0" :style="'height:' + footer_height_value + 'rpx;'"></view>
         </block>
 
         <!-- 底部卡槽 -->
@@ -115,7 +115,7 @@
             propDataId: {
                 type: [String, Number],
                 default: '',
-            }
+            },
         },
         components: {
             componentDiyHeader,
@@ -310,6 +310,7 @@
                 this.setData({
                     tabs_height: height,
                 });
+                console.log(this.temp_sticky_top, this.tabs_height);
             },
 
             // 滚动加载
@@ -430,7 +431,7 @@
                     if (e.detail.scrollTop >= this.sticky_top + 33) {
                         this.setData({
                             temp_sticky_top: 0,
-                            temp_header_top: this.tabs_height + 'px',
+                            temp_header_top: 0,
                             temp_is_header_top: true,
                         });
                     } else {
@@ -445,11 +446,11 @@
             },
 
             // 底部菜单高度
-            footer_height_value_event(value) {  
+            footer_height_value_event(value) {
                 this.setData({
-                    footer_height_value: (value*2)+20
+                    footer_height_value: value * 2 + 20,
                 });
-            }
+            },
         },
     };
 </script>
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index e9639a31..bb0d2b5d 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -132,7 +132,6 @@
                                 tabs_top: res.top,
                             });
                         }
-                        console.log('goods', res);
                     })
                     .exec();
             },
diff --git a/components/diy/header.vue b/components/diy/header.vue
index 7c6be3fa..dc439624 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -4,9 +4,9 @@
             <view class="header-content flex-row align-c">
                 <view class="model-top flex-1">
                     <view class="roll pr z-i">
-                        <view class="model-head pr padding-horizontal-sm flex-row align-c" :style="header_style">
-                            <view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
-                                <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
+                        <view class="model-head pr flex-row align-c" :style="header_style">
+                            <view class="flex-row align-c jc-sb gap-16 wh-auto">
+                                <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16 padding-left-main" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
                                     <template v-if="['2', '3'].includes(form.content.theme)">
                                         <view class="logo-outer-style">
                                             <imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
@@ -19,7 +19,7 @@
                                         </view>
                                     </template>
                                 </view>
-                                <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
+                                <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10 padding-left-main">
                                     <view class="flex-row align-c gap-2" @tap="go_map_event">
                                         <iconfont name="icon-location" size="12" color="0"></iconfont>
                                         <text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
@@ -117,7 +117,7 @@
 
                 // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU
                 const custom = uni.getMenuButtonBoundingClientRect();
-                menuButtonInfo = `max-width:calc(100% - ${custom.width + 30}px);`;
+                menuButtonInfo = `max-width:calc(100% - ${custom.width + 10}px);`;
                 // #endif
                 this.setData({
                     form: this.propValue,
@@ -132,13 +132,13 @@
             },
             search_tap(value) {
                 this.setData({
-                    is_click: value
-                })
+                    is_click: value,
+                });
             },
             search_hot_close() {
                 this.setData({
-                    is_click: false
-                })
+                    is_click: false,
+                });
             },
             url_event(e) {
                 app.globalData.url_event(e);
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 2df81e73..93e3d7a7 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- 文章列表  66rpx是自定义顶部导航栏的高度-->
-    <uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
+    <uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="custom_nav_height">
         <view class="flex-row gap-10 jc-sb align-c" :style="propStyle + 'background:' + propTabsBackground">
             <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">
@@ -122,10 +122,18 @@
                 // #ifdef APP
                 tabs_top: 'calc(' + bar_height + 0 + 12 + 'px+ 66rpx);',
                 // #endif
+                custom_nav_height: '66rpx',
             };
         },
         mounted() {
             this.init();
+            this.$nextTick(() => {
+                // #ifdef H5 || MP-TOUTIAO
+                this.setData({
+                    custom_nav_height: this.propCustomNavHeight,
+                });
+                // #endif
+            });
         },
         methods: {
             isEmpty,
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 1169f313..2ec4bfe8 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -1,8 +1,10 @@
 <template>
     <!-- 选项卡 -->
     <view class="tabs pr" :style="'padding-top:' + tabs_padding_top">
-        <view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="style_container">
-            <componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        <view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="tabs_top_style">
+            <view class="max-w tabs-content" :style="style_container">
+                <componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+            </view>
         </view>
         <view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px'"></view>
     </view>
@@ -58,11 +60,15 @@
                 tabs_seat_height: 0,
                 // 置顶时，选项卡距离顶部高度
                 tabs_padding_top: 0,
+                // 置顶时，选项卡样式
+                tabs_top_style: '',
             };
         },
         created() {
             this.init();
-            this.$nextTick(() => {
+        },
+        mounted() {
+            setTimeout(() => {
                 this.get_tabs_height();
             });
         },
@@ -83,20 +89,24 @@
                 let new_tabs_data = JSON.parse(JSON.stringify(this.propValue));
                 new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
                 // 判断选项卡是否置顶
-                let other_style = '';
-                if (new_content.tabs_top_up == '1') {
-                    other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
-                    // #ifdef H5 || MP-TOUTIAO
-                    if (this.propTabsIsTop) {
-                        other_style = '0';
-                    }
-                    // #endif
+                let other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
+
+                let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:0;padding-top:' + other_style + ';z-index:3;' : '') : '';
+                let new_top_up = new_content.tabs_top_up;
+                // #ifdef H5 || MP-TOUTIAO
+                if (this.propTabsIsTop) {
+                    other_style = '0';
                 }
+                new_tabs_top_style = 'top:' + other_style + ';z-index:3;';
+                new_top_up = this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0';
+                // #endif
+
                 this.setData({
                     tabs_data: new_tabs_data,
-                    style_container: common_styles_computer(new_style.common_style) + 'top:' + other_style + ';z-index:3;',
+                    style_container: common_styles_computer(new_style.common_style),
+                    tabs_top_style: new_tabs_top_style,
                     // 判断是否置顶
-                    top_up: this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0',
+                    top_up: new_top_up,
                     tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
                 });
             },
@@ -107,7 +117,7 @@
                     // 选择我们想要的元素
                     query
                         .in(this)
-                        .select('.tabs-top')
+                        .select('.tabs-content')
                         .boundingClientRect((res) => {
                             if ((res || null) != null) {
                                 // data包含元素的宽度、高度等信息

From c9ca51797120f9d5bbc985cc66a40b0742b4ff40 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sat, 28 Sep 2024 17:47:13 +0800
Subject: [PATCH 2/5] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/header.vue | 87 +++++++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/components/diy/header.vue b/components/diy/header.vue
index dc439624..e1c7d0ce 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -1,40 +1,42 @@
 <template>
-    <view v-if="(propValue || null) !== null" class="header-container" :style="roll_style + position">
-        <view class="bg-white" :style="top_content_style">
-            <view class="header-content flex-row align-c">
-                <view class="model-top flex-1">
-                    <view class="roll pr z-i">
-                        <view class="model-head pr flex-row align-c" :style="header_style">
-                            <view class="flex-row align-c jc-sb gap-16 wh-auto">
-                                <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16 padding-left-main" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
-                                    <template v-if="['2', '3'].includes(form.content.theme)">
-                                        <view class="logo-outer-style">
-                                            <imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
-                                        </view>
-                                    </template>
-                                    <view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
-                                    <template v-if="['3', '5'].includes(form.content.theme)">
-                                        <view class="flex-1">
-                                            <componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
-                                        </view>
-                                    </template>
-                                </view>
-                                <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10 padding-left-main">
-                                    <view class="flex-row align-c gap-2" @tap="go_map_event">
-                                        <iconfont name="icon-location" size="12" color="0"></iconfont>
-                                        <text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
-                                        <iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
+    <view v-if="(propValue || null) !== null" class="header-container">
+        <view class="wh-auto header-z-3" :style="roll_style + position">
+            <view class="bg-white" :style="top_content_style">
+                <view class="header-content flex-row align-c">
+                    <view class="model-top flex-1">
+                        <view class="roll pr z-i">
+                            <view class="model-head pr flex-row align-c" :style="header_style">
+                                <view class="flex-row align-c jc-sb gap-16 wh-auto">
+                                    <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16 padding-left-main" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
+                                        <template v-if="['2', '3'].includes(form.content.theme)">
+                                            <view class="logo-outer-style">
+                                                <imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
+                                            </view>
+                                        </template>
+                                        <view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
+                                        <template v-if="['3', '5'].includes(form.content.theme)">
+                                            <view class="flex-1">
+                                                <componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
+                                            </view>
+                                        </template>
                                     </view>
-                                    <template v-if="['5'].includes(form.content.theme)">
-                                        <view class="flex-1">
-                                            <componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
+                                    <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10 padding-left-main">
+                                        <view class="flex-row align-c gap-2" @tap="go_map_event">
+                                            <iconfont name="icon-location" size="12" color="0"></iconfont>
+                                            <text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
+                                            <iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
+                                        </view>
+                                        <template v-if="['5'].includes(form.content.theme)">
+                                            <view class="flex-1">
+                                                <componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
+                                            </view>
+                                        </template>
+                                    </view>
+                                    <view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
+                                        <view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
+                                            <imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
+                                            <iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
                                         </view>
-                                    </template>
-                                </view>
-                                <view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
-                                    <view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
-                                        <imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
-                                        <iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
                                     </view>
                                 </view>
                             </view>
@@ -42,8 +44,15 @@
                     </view>
                 </view>
             </view>
+            <hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
         </view>
-        <hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
+        <!-- #ifndef H5 || MP-TOUTIAO -->
+        <view v-if="is_positon_realative" class="wh-auto pf top-0 left-0 right-0" :style="roll_style">
+            <view class="bg-white" :style="top_content_style">
+                <view style="height: 66rpx"></view>
+            </view>
+        </view>
+        <!-- #endif -->
     </view>
 </template>
 
@@ -89,6 +98,7 @@
                 // #ifdef APP
                 top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:12px;',
                 // #endif
+                is_positon_realative: false,
             };
         },
         created() {
@@ -122,6 +132,7 @@
                 this.setData({
                     form: this.propValue,
                     position: new_style.up_slide_display == '1' ? 'position:fixed;' : 'position:relative;',
+                    is_positon_realative: new_style.up_slide_display == '1' ? false : true,
                     roll_style: new_roll_style,
                     text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
                     header_style: menuButtonInfo,
@@ -149,8 +160,12 @@
 
 <style lang="scss" scoped>
     .header-container {
-        z-index: 102;
+        position: relative;
+        z-index: 4;
         width: 100%;
+        .header-z-3 {
+            z-index: 3;
+        }
         .header-content {
             height: 66rpx;
         }

From dd4be2f6da40085df850f086c142e9cf1c15b983 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sat, 28 Sep 2024 19:00:20 +0800
Subject: [PATCH 3/5] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-tabs.vue      | 39 +++++++++++++++++++++-------
 components/diy/diy.vue               |  5 ++--
 components/diy/goods-tabs.vue        | 39 +++++++++++++++++++++-------
 components/diy/modules/tabs-view.vue |  4 ++-
 components/diy/tabs.vue              |  1 +
 5 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 0909ad87..3c1382f6 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 文章列表 -->
     <view class="article-tabs ou" :style="style_container">
-        <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="oh">
             <componentDiyArticleList v-if="hackReset" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
         </view>
@@ -10,7 +10,7 @@
 
 <script>
     const app = getApp();
-    import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
+    import { common_styles_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
     import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
     import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@@ -28,8 +28,8 @@
                 default: 0,
             },
             propCustomNavHeight: {
-                type: String,
-                default: '66rpx',
+                type: Number,
+                default: 33,
             },
             propScrollTop: {
                 type: Number,
@@ -50,15 +50,25 @@
                 top_up: '0',
                 tabs_style: '',
                 tabs_top: 0,
-                tabs_background: 'transparent',
+                tabs_background: 'background:transparent',
+                custom_nav_height: 33,
             };
         },
         watch: {
             propScrollTop(newVal) {
-                if (newVal >= this.tabs_top) {
-                    this.tabs_background = 'rgba(255,255,255,1)';
+                if (newVal + this.propTop + this.custom_nav_height >= this.tabs_top) {
+                    let new_style = this.propValue.style || {};
+                    let tabs_bg = new_style.common_style.color_list;
+                    let new_tabs_background = '';
+                    if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
+                        new_tabs_background = gradient_computer(new_style.common_style);
+                    }
+                    console.log(new_tabs_background.length);
+                    this.setData({
+                        tabs_background: background_computer(new_style.common_style) + (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff'),
+                    });
                 } else {
-                    this.tabs_background = 'transparent';
+                    this.tabs_background = 'background:transparent';
                 }
             },
         },
@@ -66,7 +76,18 @@
             this.init();
         },
         mounted() {
-            this.getTop();
+            this.$nextTick(() => {
+                const self = this;
+                setTimeout(() => {
+                    self.getTop();
+                });
+                // #ifdef H5 || MP-TOUTIAO
+                // 获取自定义导航栏高度
+                this.setData({
+                    custom_nav_height: this.propCustomNavHeight,
+                });
+                // #endif
+            });
         },
         methods: {
             init() {
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 629866a2..1c3e71e4 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -20,8 +20,8 @@
                         <componentDiyNotice v-else-if="item.key == 'notice'" :propValue="item.com_data"></componentDiyNotice>
                         <componentDiyVideo v-else-if="item.key == 'video'" :propValue="item.com_data"></componentDiyVideo>
                         <componentDiyArticleList v-else-if="item.key == 'article-list'" :propValue="item.com_data"></componentDiyArticleList>
-                        <componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyArticleTabs>
-                        <componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyGoodsTabs>
+                        <componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyArticleTabs>
+                        <componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyGoodsTabs>
 
                         <componentDiyGoodsList v-else-if="item.key == 'goods-list'" :propValue="item.com_data"></componentDiyGoodsList>
                         <componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propValue="item.com_data"></componentDiyDataMagic>
@@ -310,7 +310,6 @@
                 this.setData({
                     tabs_height: height,
                 });
-                console.log(this.temp_sticky_top, this.tabs_height);
             },
 
             // 滚动加载
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index bb0d2b5d..5677c69a 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="goods-tabs ou" :style="style_container">
-        <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+        <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="oh">
             <componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
         </view>
@@ -9,7 +9,7 @@
 
 <script>
     const app = getApp();
-    import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
+    import { common_styles_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
     import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
     import componentGoodsList from '@/components/diy/goods-list'; // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@@ -33,8 +33,8 @@
                 default: 0,
             },
             propCustomNavHeight: {
-                type: String,
-                default: '66rpx',
+                type: Number,
+                default: 33,
             },
             propScrollTop: {
                 type: Number,
@@ -49,15 +49,25 @@
                 // 是否滑动置顶
                 top_up: '0',
                 tabs_top: 0,
-                tabs_background: 'transparent',
+                tabs_background: 'background:transparent',
+                custom_nav_height: 33,
             };
         },
         watch: {
             propScrollTop(newVal) {
-                if (newVal >= this.tabs_top) {
-                    this.tabs_background = 'rgba(255,255,255,1)';
+                if (newVal + this.propTop + this.custom_nav_height >= this.tabs_top) {
+                    let new_style = this.propValue.style || {};
+                    let tabs_bg = new_style.common_style.color_list;
+                    let new_tabs_background = '';
+                    if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
+                        new_tabs_background = gradient_computer(new_style.common_style);
+                    }
+                    console.log(new_tabs_background.length);
+                    this.setData({
+                        tabs_background: background_computer(new_style.common_style) + (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff'),
+                    });
                 } else {
-                    this.tabs_background = 'transparent';
+                    this.tabs_background = 'background:transparent';
                 }
             },
         },
@@ -65,7 +75,18 @@
             this.init();
         },
         mounted() {
-            this.getTop();
+            this.$nextTick(() => {
+                const self = this;
+                setTimeout(() => {
+                    self.getTop();
+                });
+                // #ifdef H5 || MP-TOUTIAO
+                // 获取自定义导航栏高度
+                this.setData({
+                    custom_nav_height: this.propCustomNavHeight,
+                });
+                // #endif
+            });
         },
         methods: {
             init() {
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 93e3d7a7..c75e08c4 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 文章列表  66rpx是自定义顶部导航栏的高度-->
     <uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="custom_nav_height">
-        <view class="flex-row gap-10 jc-sb align-c" :style="propStyle + 'background:' + propTabsBackground">
+        <view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
             <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="'column-gap: ' + tabs_spacing + 'rpx;'">
@@ -127,8 +127,10 @@
         },
         mounted() {
             this.init();
+            // 延迟执行，等待dom渲染完成
             this.$nextTick(() => {
                 // #ifdef H5 || MP-TOUTIAO
+                // 获取自定义导航栏高度
                 this.setData({
                     custom_nav_height: this.propCustomNavHeight,
                 });
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 2ec4bfe8..5013981f 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -154,6 +154,7 @@
 
 <style lang="scss" scoped>
     .tabs {
+        z-index: 4;
         .tabs-top {
             position: fixed;
             left: 0;

From 4cee9008212668c20b9428eb0ef03300c0320a98 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sat, 28 Sep 2024 19:00:33 +0800
Subject: [PATCH 4/5] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-tabs.vue | 1 -
 components/diy/goods-tabs.vue   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 3c1382f6..1c5a51b9 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -63,7 +63,6 @@
                     if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
                         new_tabs_background = gradient_computer(new_style.common_style);
                     }
-                    console.log(new_tabs_background.length);
                     this.setData({
                         tabs_background: background_computer(new_style.common_style) + (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff'),
                     });
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index 5677c69a..2e059c64 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -62,7 +62,6 @@
                     if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
                         new_tabs_background = gradient_computer(new_style.common_style);
                     }
-                    console.log(new_tabs_background.length);
                     this.setData({
                         tabs_background: background_computer(new_style.common_style) + (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff'),
                     });

From af7f2147d181fc04d98db751ec1e8c387cd4ac41 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sat, 28 Sep 2024 19:24:13 +0800
Subject: [PATCH 5/5] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-tabs.vue | 6 +++++-
 components/diy/goods-tabs.vue   | 6 +++++-
 components/diy/tabs.vue         | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 1c5a51b9..dac0fc16 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -63,8 +63,12 @@
                     if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
                         new_tabs_background = gradient_computer(new_style.common_style);
                     }
+                    let new_tabs_background_img = background_computer(new_style.common_style);
+                    if (new_tabs_background_img.length > 0) {
+                        new_tabs_background_img += 'background-position: top left;';
+                    }
                     this.setData({
-                        tabs_background: background_computer(new_style.common_style) + (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff'),
+                        tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
                     });
                 } else {
                     this.tabs_background = 'background:transparent';
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index 2e059c64..4e3f49c3 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -62,8 +62,12 @@
                     if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
                         new_tabs_background = gradient_computer(new_style.common_style);
                     }
+                    let new_tabs_background_img = background_computer(new_style.common_style);
+                    if (new_tabs_background_img.length > 0) {
+                        new_tabs_background_img += 'background-position: top left;';
+                    }
                     this.setData({
-                        tabs_background: background_computer(new_style.common_style) + (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff'),
+                        tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
                     });
                 } else {
                     this.tabs_background = 'background:transparent';
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 5013981f..b2e9e224 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -91,7 +91,7 @@
                 // 判断选项卡是否置顶
                 let other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
 
-                let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:0;padding-top:' + other_style + ';z-index:3;' : '') : '';
+                let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:' + other_style + ';z-index:3;' : '') : '';
                 let new_top_up = new_content.tabs_top_up;
                 // #ifdef H5 || MP-TOUTIAO
                 if (this.propTabsIsTop) {