From 50a12d9ccb7d15f8570c6be28237df34424cc708 Mon Sep 17 00:00:00 2001
From: luojie <rowe_jason@outlook.com>
Date: Mon, 30 Oct 2023 10:30:07 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=97=E4=B8=96=E6=9D=B0=EF=BC=9Afeat?=
 =?UTF-8?q?=EF=BC=9A=E6=90=9C=E7=B4=A2=E6=A1=86=E5=AE=9A=E4=BD=8D=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/childComps/HomeHeader.vue | 112 ++++++++++++++++++++++++++
 pages/index/index.vue                 |  48 +----------
 2 files changed, 114 insertions(+), 46 deletions(-)
 create mode 100644 pages/index/childComps/HomeHeader.vue

diff --git a/pages/index/childComps/HomeHeader.vue b/pages/index/childComps/HomeHeader.vue
new file mode 100644
index 0000000..e4b5465
--- /dev/null
+++ b/pages/index/childComps/HomeHeader.vue
@@ -0,0 +1,112 @@
+<template>
+	<view class="header-area">
+		<view class="search-box u-flex u-flex-nowarp u-row-between">
+			<view class="search-box-input" >
+				<u-input 
+					:placeholder="hotSearchWord"
+					prefixIcon="search"
+					prefixIconStyle="font-size: 14px;color: #909399;margin-left:30rpx" 
+				/>
+			</view>
+			<view class="search-box-location">
+				<view><u-icon name="map" color="#909399" size="15"></u-icon></view>
+				<view class="localtion-text"><text>{{position}}</text></view>
+			</view>
+		</view>
+		
+		<view class="swiper">
+			<u-swiper :list="headerBgList"/>
+			<!-- <u-image :src=headerBgURL
+			class="header-bgimg" width="100vw" height="25vh"/> -->
+		</view> 
+		
+	</view>
+</template>
+
+<script>
+	export default{
+		name: "HomeHeader",
+		props: {
+			
+		},
+		data() {
+			return {
+				hotSearchWord:'热门关键词',
+				headerBgList:["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
+			}
+		},
+		options: {
+			styleIsolation: 'shared' // 解除样式隔离
+		},
+		computed:{
+			position(){
+				return  '定位中...'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 搜索区域样式
+	.header-area {
+		position: relative;
+		.search-box {
+			// background: #000;
+			position: absolute;
+			z-index: 1;
+			left: 50%;
+			width: 84.6%;
+			transform: translateX(-50%); 
+			.search-box-input {
+				border-radius: 10px;
+				padding-top: 3px !important;
+				margin-top: 8px;
+				background-color: #fff;
+				.u-border{
+					border: none;
+				}
+				// 组件内部样式修改
+				.u-input__content {
+					background-color: #fff;
+					border-radius: 1;
+					height: 10px;
+					.u-input__content__field-wrapper__field {
+						// height: 10px !important;
+						font-size: 10px !important;
+					}
+				}
+			}
+			.search-box-location{
+				position: absolute;
+				z-index: 1;
+				height: 25px;
+				// width: 15vw;
+				top: 15px;
+				right: 10%;
+				
+				// transform: translate(-100%);
+				
+				display: flex;
+				.localtion-text{
+					padding-left: 8px;
+					font-size: 10px;
+				}
+			}
+			.header-bgimg {
+				width: 100vw;
+				z-index: 0;
+			}
+		}
+		// 轮播图样式
+		.swiper {
+			.u-swiper {
+				border-radius:0 !important;
+			}
+			.u-swiper__wrapper__item__wrapper__image{
+				border-radius:0 !important;
+			}
+		}
+		
+	}
+	
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index e3298ec..5626c1d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,6 @@
 <template>
 	<home-header></home-header>
+	
 </template>
 
 <script>
@@ -28,51 +29,6 @@
 </script>
 
 <style lang="scss">
-	// 搜索区域样式
-	.search_box {
-		background: #000;
-		position: relative;
-		.search_box_border {
-			width: 84.6%;
-			height: 25px;
-			z-index: 1;
-			
-			position: absolute;
-			left: 50%;  
-			transform: translate(-50%, 0%); 
-			
-			border-radius: 10px;
-			padding-top: 3px !important;
-			margin-top: 8px;
-			background-color: #fff;
-			.u-border{
-				border: none;
-			}
-			// .u
-			.u-input__content {
-				background-color: #fff;
-				border-radius: 1;
-				height: 10px;
-				.u-input__content__field-wrapper__field {
-					height: 10px !important;
-					font-size: 10px !important;
-				}
-			}
-		}
-		.header-bgimg {
-			width: 100vw;
-			// z-index: 0;
-		}
-		
-	}
-	// 轮播图样式
-	.swiper {
-		.u-swiper {
-			border-radius:0 !important;
-		}
-		.u-swiper__wrapper__item__wrapper__image{
-			border-radius:0 !important;
-		}
-	}
+	
 	
 </style>
\ No newline at end of file