From 95db162b9b0782969d3d31cc54fbdce4b246c1bb Mon Sep 17 00:00:00 2001 From: gongfuxiang Date: Tue, 10 Oct 2023 21:09:00 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.css | 24 +++++++------- pages/index/index.vue | 74 ++++++++++++++++++++++++------------------- 2 files changed, 53 insertions(+), 45 deletions(-) diff --git a/pages/index/index.css b/pages/index/index.css index f06a45b4..ded3e9d4 100644 --- a/pages/index/index.css +++ b/pages/index/index.css @@ -66,27 +66,27 @@ * 搜索 */ .search-fixed-seat { - padding-top: 70rpx; + padding-top: 82rpx; /* #ifdef MP-TOUTIAO */ padding-top: 60rpx; /* #endif */ } - .search-content-fixed { position: fixed !important; top: 0; z-index: 11; - padding-bottom: 20rpx; width: 100%; - background-repeat: no-repeat; - background-size: 100% auto; - padding-top: 25px; - /* #ifdef H5 || APP */ - padding-top: 15rpx !important; - padding-bottom: 15rpx !important; - /* #endif */ +} +.search-content-fixed-content { + background-repeat: no-repeat; + background-size: 100% auto; + background-position: 0 13%; + padding-bottom: 20rpx; + /* #ifdef H5 || APP */ + padding-top: 15rpx !important; + padding-bottom: 15rpx !important; + /* #endif */ } - /* #ifdef H5 || MP-TOUTIAO || APP */ .search-content-fixed .nav-top-right-icon { top: 9px !important; @@ -98,7 +98,7 @@ * 轮播 */ .banner-content { - margin-top: 26rpx; + margin-top: 10rpx; } /** diff --git a/pages/index/index.vue b/pages/index/index.vue index e62a7648..787562dd 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -2,7 +2,7 @@ - + @@ -27,25 +27,27 @@ - - - - - - - - - - - - - - - + + + + + - + + + + + + + + + + + + + + - @@ -356,9 +358,11 @@ application_logo: app.globalData.data.application_logo, is_logo_use_text: app.globalData.data.is_logo_use_text || 0, // 顶部+搜索样式配置 - top_content_style: 'padding-top:' + (bar_height + 5) + 'px;background:linear-gradient(180deg, ' + theme_color + ' 0%, #f5f5f5 80%)', - top_content_title_style: 'background-image: url("' + static_url + 'nav-top.png");' + 'padding-top:' + (bar_height + 5) + 'px;background-color:' + theme_color, - search_style: '', + top_content_bg_color: 'background:linear-gradient(180deg, ' + theme_color + ' 0%, #f5f5f5 80%)', + top_content_search_bg_color: 'background:linear-gradient(180deg, ' + theme_color + ' 0%, #f5f5f5 350%)', + top_content_search_content_style: 'background-image: url("' + static_url + 'nav-top.png");', + top_content_style: 'padding-top:' + (bar_height + 5) + 'px;', + top_content_search_style: '', search_is_fixed: 0, // 是否单页预览 is_single_page: app.globalData.is_current_single_page() || 0, @@ -504,10 +508,12 @@ }); // 轮播数据处理 if (data.banner_list && data.banner_list.length > 0) { - if (data.banner_list[0].bg_color) { - this.slider_bg = 'background: linear-gradient(180deg, ' + data.banner_list[0].bg_color + ' 0%, #f5f5f5 80%);padding-top:' + (bar_height + 5) + 'px;'; + if ((data.banner_list[0]['bg_color'] || null) != null) { + this.top_content_bg_color = 'background: linear-gradient(180deg, ' + data.banner_list[0].bg_color + ' 0%, #f5f5f5 80%);'; + this.top_content_search_bg_color = 'background: linear-gradient(180deg, ' + data.banner_list[0].bg_color + ' -20%, #f5f5f5 350%);'; } else { - this.slider_bg = 'background: linear-gradient(180deg, ' + this.theme_color + ' 0%, #f5f5f5 80%);padding-top:' + (bar_height + 5) + 'px;'; + this.top_content_bg_color = 'background: linear-gradient(180deg, ' + this.theme_color + ' 0%, #f5f5f5 80%);'; + this.top_content_search_bg_color = 'background: linear-gradient(180deg, ' + this.theme_color + ' -20%, #f5f5f5 350%);'; } } @@ -526,7 +532,7 @@ var len = (this.right_icon_list || []).length; var val = len <= 0 ? 0 : 66 * len; this.setData({ - search_style: 'width: calc(100% - ' + val + 'rpx);', + top_content_search_style: 'width: calc(100% - ' + val + 'rpx);', }); // #endif } else { @@ -559,7 +565,7 @@ // 页面滚动监听 onPageScroll(e) { if (this.common_app_is_header_nav_fixed == 1 && this.common_app_is_enable_search == 1) { - var top = e.scrollTop > 42 ? 42 : e.scrollTop; + var top = e.scrollTop > 44 ? 44 : e.scrollTop; var num = top * 7; var base = 230; // #ifdef MP-ALIPAY @@ -571,14 +577,14 @@ // #endif // 开启哀悼插件的时候不需要浮动导航并且搜索框也不需要缩短、开启站点灰度会导致浮动失效 if (!this.plugins_mourning_data_is_app) { - var top_val = 42; + var top_val = 44; var val = num > base ? base : num; // #ifdef MP-TOUTIAO top_val = 0; val = base; // #endif this.setData({ - search_style: 'width: calc(100% - ' + (val < 0 ? 0 : val) + 'rpx);', + top_content_search_style: 'width: calc(100% - ' + (val < 0 ? 0 : val) + 'rpx);', search_is_fixed: top >= top_val ? 1 : 0, }); } @@ -632,14 +638,16 @@ clearInterval(this.plugins_popupscreen_timer); }, - // 轮播改变 + // 轮播改变、背景色处理 change_banner(color) { - if (color) { - this.slider_bg = 'background: linear-gradient(180deg,' + color + ' 0%, #f5f5f5 80%);padding-top:' + (bar_height + 5) + 'px;'; + if ((color || null) != null) { + this.top_content_bg_color = 'background: linear-gradient(180deg, ' + color + ' 0%, #f5f5f5 80%);'; + this.top_content_search_bg_color = 'background: linear-gradient(180deg, ' + color + ' -20%, #f5f5f5 350%);'; } else { - this.slider_bg = 'background: linear-gradient(180deg, ' + this.theme_color + ' 0%, #f5f5f5 80%);padding-top:' + (bar_height + 5) + 'px;'; + this.top_content_bg_color = 'background: linear-gradient(180deg, ' + this.theme_color + ' 0%, #f5f5f5 80%);'; + this.top_content_search_bg_color = 'background: linear-gradient(180deg, ' + this.theme_color + ' -20%, #f5f5f5 350%);'; } - }, + } }, };