diff --git a/pages.json b/pages.json
index e4d561ed..d1d077f3 100644
--- a/pages.json
+++ b/pages.json
@@ -2035,28 +2035,40 @@
                 {
                     "path": "index/index",
                     "style": {
-                        "enablePullDownRefresh": true,
+                        // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
+                        "navigationStyle": "custom",
+                        // #endif
+                        "enablePullDownRefresh": false,
                         "navigationBarTitleText": ""
                     }
                 },
                 {
                     "path": "detail/detail",
                     "style": {
-                        "enablePullDownRefresh": true,
+                        // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
+                        "navigationStyle": "custom",
+                        // #endif
+                        "enablePullDownRefresh": false,
                         "navigationBarTitleText": ""
                     }
                 },
                 {
                     "path": "search/search-record",
                     "style": {
-                        "enablePullDownRefresh": true,
+                        // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
+                        "navigationStyle": "custom",
+                        // #endif
+                        "enablePullDownRefresh": false,
                         "navigationBarTitleText": ""
                     }
                 },
                 {
                     "path": "search/search",
                     "style": {
-                        "enablePullDownRefresh": true,
+                        // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
+                        "navigationStyle": "custom",
+                        // #endif
+                        "enablePullDownRefresh": false,
                         "navigationBarTitleText": ""
                     }
                 }
diff --git a/pages/plugins/video/components/loading.vue b/pages/plugins/video/components/loading.vue
index d4063dff..e43318db 100644
--- a/pages/plugins/video/components/loading.vue
+++ b/pages/plugins/video/components/loading.vue
@@ -12,7 +12,7 @@
 <script>
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .more-history-btn {
     font-weight: 400;
     font-size: 28rpx;
diff --git a/pages/plugins/video/components/search.vue b/pages/plugins/video/components/search.vue
index 040c80e7..90e9b345 100644
--- a/pages/plugins/video/components/search.vue
+++ b/pages/plugins/video/components/search.vue
@@ -1,7 +1,9 @@
 <template> 
     <view class="search-bar pr">
         <view v-if="propsIsDisabled" class="search-mask" @tap="disabled_search"></view>
-        <iconfont name="icon-search-fine"></iconfont>
+        <view class="search-iconfont-container">
+            <iconfont name="icon-search-fine"></iconfont>
+        </view>
         <input type="text" v-model="search_query" placeholder="请输入您的搜索内容" @input="handle_search" />
         <view class="search-line"></view>
         <view class="search-button" @tap="perform_search">搜索</view>
@@ -58,7 +60,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 /* 搜索框 */
 .search-bar {
 	display: flex;
@@ -68,7 +70,7 @@ export default {
 	border: 2rpx solid #313131;
     height: 100%;
 	margin: 0 24rpx;
-	.iconfont-container {
+	.search-iconfont-container {
 		padding: 16rpx 30rpx;
 		padding-right: 20rpx;
 	}
diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue
index 883182b3..8902bdcc 100644
--- a/pages/plugins/video/detail/detail.vue
+++ b/pages/plugins/video/detail/detail.vue
@@ -258,7 +258,7 @@
 	};
 </script>
 
-<style>
+<style lang="scss" scoped>
 	.content,
 	.swiper-container,
 	swiper-item,
diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue
index 61cea5c1..da45d140 100644
--- a/pages/plugins/video/index/index.vue
+++ b/pages/plugins/video/index/index.vue
@@ -4,10 +4,12 @@
 			<view class="wh-auto ht-auto pr">
 				<!-- 搜索框 -->
 				<view class="header-top">
-					<view class="wh-auto ht-auto" :style="top_content_style">
-						<search-component :propsSearchQuery="search_query" :propsIsDisabled="true" @disabledSearch="handle_search"/>
+					<view class="ht-auto" :style="top_content_style + menu_button_info">
+						<view class="search-height">
+							<search-component :propsSearchQuery="search_query" :propsIsDisabled="true" @disabledSearch="handle_search"/>
+						</view>
 					</view>
-					
+
 					<template v-if="recommend_videos.length > 0">
 						<!-- 导航栏 -->
 						<view class="nav-tabs">
@@ -80,6 +82,7 @@ export default {
 			isLoadingMore: false,
 			data_list_loding_status: 1,
 			data_list_loding_msg: '',
+			menu_button_info: '',
 		};
 	},
 	mounted() {
@@ -97,11 +100,13 @@ export default {
 				if (is_current_single_page == 0) {
 					const custom = uni.getMenuButtonBoundingClientRect();
 					menu_button_info = `max-width:calc(100% - ${custom.width + 10}px);`;
+					this.get_top_content_style(custom.height);
 				}
 				// #endif
 			// #endif
 			setTimeout(() => {
 				this.setData({
+					menu_button_info: menu_button_info,
 					data_list_loding_status: 0,
 					recommend_videos: [
 						{
@@ -136,6 +141,32 @@ export default {
 				});
 			}, 10000);
 		},
+		get_top_content_style(custom_height) {
+			// 获取搜索区域的高度
+			setTimeout(() => {
+				const query = uni.createSelectorQuery().in(this);
+					// 选择我们想要的元素
+				query.select('.search-height').boundingClientRect((res) => {
+					if ((res || null) != null) {
+						// 判断搜索跟胶囊的大小间隔
+						const top_height = custom_height == 0 ? 0 : (res.height - custom_height) / 2;
+						let top_content_style = '';
+						// #ifdef MP
+						top_content_style = 'padding-top:' + (bar_height + 5 - top_height) + 'px;padding-bottom:10px;';
+						// #endif
+						// #ifdef H5 || MP-TOUTIAO
+						top_content_style = 'padding-top:' + (bar_height + 7 - top_height) + 'px;padding-bottom:10px;';
+						// #endif
+						// #ifdef APP
+						top_content_style = 'padding-top:' + bar_height - top_height + 'px;padding-bottom:10px;';
+						// #endif
+						this.setData({
+							top_content_style: top_content_style
+						});
+					}
+				}).exec(); // 执行查询
+			}, 500);
+		},
 		handle_search() {
 			// 跳转到搜索记录页面
 			app.globalData.url_open(`/pages/plugins/video/search/search-record`, false);
@@ -185,7 +216,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .header-top {
 	position: sticky;
 	top: 0;
@@ -239,8 +270,7 @@ export default {
 
 /* #ifdef MP-WEIXIN | APP-PLUS */
 .tabs-scroll {
-	::v-deep ::-webkit-scrollbar
-	{
+	::v-deep ::-webkit-scrollbar {
 		width: 0rpx!important;
 		height: 0rpx!important;
 		background-color: transparent;
diff --git a/pages/plugins/video/search/search-record.vue b/pages/plugins/video/search/search-record.vue
index d3d7598e..96972586 100644
--- a/pages/plugins/video/search/search-record.vue
+++ b/pages/plugins/video/search/search-record.vue
@@ -1,12 +1,14 @@
 <template>
 	<view class="wh-auto ht pr search-record-container">
 		<!-- 搜索框 -->
-		<view class="header-top flex-row align-c">
-			<view class="cp" @tap="handle_back">
-				<iconfont name="icon-arrow-left " size="32rpx" color="#333" class="mr-10"></iconfont>
-			</view>
-			<view class="wh-auto ht-auto" :style="top_content_style">
-				<search-component :propsSearchQuery="search_query" @search="handle_search" />
+		<view class="header-top" :style="top_content_style + menu_button_info">
+			<view class="search-height flex-row align-c">
+				<view class="cp" @tap="handle_back">
+					<iconfont name="icon-arrow-left " size="32rpx" color="#333" class="mr-10"></iconfont>
+				</view>
+				<view class="wh-auto ht-auto">
+					<search-component :propsSearchQuery="search_query" @search="handle_search" />
+				</view>
 			</view>
 		</view>
 		<!-- 搜索历史记录 -->
@@ -115,9 +117,39 @@ export default {
 				if (is_current_single_page == 0) {
 					const custom = uni.getMenuButtonBoundingClientRect();
 					menu_button_info = `max-width:calc(100% - ${custom.width + 10}px);`;
+					this.get_top_content_style(custom.height);
 				}
 				// #endif
 			// #endif
+			this.setData({
+				menu_button_info: menu_button_info
+			});
+		},
+		get_top_content_style(custom_height) {
+			// 获取搜索区域的高度
+			setTimeout(() => {
+				const query = uni.createSelectorQuery().in(this);
+					// 选择我们想要的元素
+				query.select('.search-height').boundingClientRect((res) => {
+					if ((res || null) != null) {
+						// 判断搜索跟胶囊的大小间隔
+						const top_height = custom_height == 0 ? 0 : (res.height - custom_height) / 2;
+						let top_content_style = '';
+						// #ifdef MP
+						top_content_style = 'padding-top:' + (bar_height + 5 - top_height) + 'px;padding-bottom:10px;';
+						// #endif
+						// #ifdef H5 || MP-TOUTIAO
+						top_content_style = 'padding-top:' + (bar_height + 7 - top_height) + 'px;padding-bottom:10px;';
+						// #endif
+						// #ifdef APP
+						top_content_style = 'padding-top:' + bar_height - top_height + 'px;padding-bottom:10px;';
+						// #endif
+						this.setData({
+							top_content_style: top_content_style
+						});
+					}
+				}).exec(); // 执行查询
+			}, 500);
 		},
 		// 返回
 		handle_back() {
@@ -154,7 +186,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .search-record-container {
     background: #fff;
 }
@@ -164,7 +196,8 @@ export default {
 	top: 0;
 	background: #fff;
 	z-index: 9;
-    padding-left: 40rpx;
+    padding-left: 24rpx;
+	box-sizing: border-box;
 }
 
 /* #ifdef MP-WEIXIN | APP-PLUS */
diff --git a/pages/plugins/video/search/search.vue b/pages/plugins/video/search/search.vue
index 7e10c26e..a2079eb2 100644
--- a/pages/plugins/video/search/search.vue
+++ b/pages/plugins/video/search/search.vue
@@ -4,12 +4,14 @@
 			<view class="wh-auto ht-auto pr">
 				<!-- 搜索框 -->
 				<view class="header-top">
-					<view class="header-search flex-row align-c">
-						<view class="cp" @tap="handle_back">
-							<iconfont name="icon-arrow-left " size="32rpx" color="#333" class="mr-10"></iconfont>
-						</view>
-						<view class="wh-auto ht-auto" :style="top_content_style">
-							<search-component :propsSearchQuery="search_query" @search="handle_search" />
+					<view class="header-search" :style="top_content_style + menu_button_info">
+						<view class="search-height flex-row align-c">
+							<view class="cp" @tap="handle_back">
+								<iconfont name="icon-arrow-left " size="32rpx" color="#333" class="mr-10"></iconfont>
+							</view>
+							<view class="wh-auto ht-auto">
+								<search-component :propsSearchQuery="search_query" @search="handle_search" />
+							</view>
 						</view>
 					</view>
 					<!-- 导航栏 -->
@@ -174,10 +176,13 @@ export default {
 				if (is_current_single_page == 0) {
 					const custom = uni.getMenuButtonBoundingClientRect();
 					menu_button_info = `max-width:calc(100% - ${custom.width + 10}px);`;
+					this.get_top_content_style(custom.height);
 				}
 				// #endif
 			// #endif
-
+			this.setData({
+				menu_button_info: menu_button_info,
+			});
 			// 获取头部的高度
 			setTimeout(() => {
                 const query = uni.createSelectorQuery().in(this);
@@ -195,6 +200,32 @@ export default {
                     .exec(); // 执行查询
             }, 500);
 		},
+		get_top_content_style(custom_height) {
+			// 获取搜索区域的高度
+			setTimeout(() => {
+				const query = uni.createSelectorQuery().in(this);
+					// 选择我们想要的元素
+				query.select('.search-height').boundingClientRect((res) => {
+					if ((res || null) != null) {
+						// 判断搜索跟胶囊的大小间隔
+						const top_height = custom_height == 0 ? 0 : (res.height - custom_height) / 2;
+						let top_content_style = '';
+						// #ifdef MP
+						top_content_style = 'padding-top:' + (bar_height + 5 - top_height) + 'px;padding-bottom:10px;';
+						// #endif
+						// #ifdef H5 || MP-TOUTIAO
+						top_content_style = 'padding-top:' + (bar_height + 7 - top_height) + 'px;padding-bottom:10px;';
+						// #endif
+						// #ifdef APP
+						top_content_style = 'padding-top:' + bar_height - top_height + 'px;padding-bottom:10px;';
+						// #endif
+						this.setData({
+							top_content_style: top_content_style
+						});
+					}
+				}).exec(); // 执行查询
+			}, 500);
+		},
 		handle_search(e) {
 			this.search_query = e;
 			if (this.search_query.trim() == '') {
@@ -269,7 +300,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .header-top {
 	position: sticky;
 	top: 0;
@@ -277,7 +308,8 @@ export default {
 	z-index: 9;
 }
 .header-search {
-	margin-left: 24rpx;
+	padding-left: 24rpx;
+	box-sizing: border-box;
 }
 /* 导航栏 */
 .nav-tabs {