diff --git a/components/InputAndSwiper/InputAndSwiper.vue b/components/InputAndSwiper/InputAndSwiper.vue
new file mode 100644
index 0000000..6697869
--- /dev/null
+++ b/components/InputAndSwiper/InputAndSwiper.vue
@@ -0,0 +1,156 @@
+<template>
+	<view>
+		<view class="search-box">
+			<view class="search-box-input">
+				<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
+					prefixIconStyle="font-size: 24px;color: #909399;" border="true">
+					<template slot="suffix">
+						<view style="display: flex;align-items: center;">
+							<u-icon name="map-fill" color="#329866" size="22"></u-icon>
+							<text class="position">{{position}}</text>
+						</view>
+					</template>
+				</u-input>
+			</view>
+		</view>
+		<u-swiper :list="headerBgList" height="300rpx" />
+	</view>
+</template>
+
+<script>
+	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
+	export default {
+		name: "inputAndSwiper",
+		props: {
+			headerBgList: {
+				type: Array,
+				default () {
+					return [
+						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
+						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
+						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
+					]
+				}
+			},
+			position: {
+				type: String,
+				default () {
+					return '定位'
+				}
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		options: {
+			styleIsolation: 'shared', // 解除样式隔离
+		},
+		created() {
+			// this.getLocation()
+		},
+		methods: {
+			getLocation() {
+				uni.getLocation({
+					type: 'wgs84',
+					// geocode: true, // 返回城市信息
+					// enableHighAccuracy: false, // 开启高精度模式
+					success: function(res) {
+						let qqmapsdk = new QQMapWX({
+							key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB'
+						});
+						qqmapsdk.reverseGeocoder({
+							location: {
+								latitude: res.latitude,
+								longitude: res.longitude
+							},
+							success: (re) => {
+								console.log(re.result.ad_info.city, '成都市==');
+								console.log(re.result.ad_info.district, '武侯区==');
+							},
+							fail: (re) => {
+								console.log(re, '失败信息');
+							}
+						})
+					}
+				});
+			},
+			//提示用户开启定位服务
+			open() {
+				// uni.authorize({
+				// 	scope: 'scope.userLocation',
+				// 	success: function() {
+				// 		console.log('授权成功');
+				// 	},
+				// 	fail: function() {
+				// 		console.log('授权失败');
+				// 	}
+				// })
+				// wx.getSetting({
+				// 	success: (res) => {
+				// 		if (res.authSetting['scope.userLocation'] === false) {
+				// 			wx.showModal({
+				// 				title: '提示',
+				// 				content: '请打开定位服务后重新进入该页面',
+				// 				confirmText: '去设置',
+				// 				success: (res) => {
+				// 					if (res.confirm) {
+				// 						wx.openSetting()
+				// 					}
+				// 				}
+				// 			})
+				// 		}
+				// 	}
+				// })
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.search-box {
+		position: absolute;
+		z-index: 1;
+		left: 50%;
+		width: 84.6%;
+		transform: translateX(-50%);
+
+		.search-box-input {
+			border-radius: 12rpx;
+			margin-top: 20rpx;
+			background-color: #fff;
+			opacity: 0.85;
+
+			.u-border {
+				border: none;
+
+				.u-input__content {
+					height: 62rpx;
+					border-radius: 12rpx;
+					background-color: #fff;
+
+					.u-input__content__field-wrapper__field {
+						font-size: 26rpx !important;
+					}
+				}
+			}
+		}
+	}
+
+	.position {
+		font-size: 24rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #232323;
+		line-height: 33rpx;
+	}
+
+	.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 5106d74..537ac72 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<!-- <InputAndSwiper></InputAndSwiper> -->
+		<InputAndSwiper></InputAndSwiper>
 		<TabBar :current-page="0"></TabBar>
 	</view>
 </template>