diff --git a/App.vue b/App.vue
index 6d6d52b..eda9c4e 100644
--- a/App.vue
+++ b/App.vue
@@ -15,6 +15,8 @@
 	}
 </script>
 
-<style>
+
+<style lang="scss">
 	/*每个页面公共css */
-</style>
\ No newline at end of file
+	@import 'uview-ui/index.scss';
+</style>
diff --git a/components/ShowShopList/ShowShopList.vue b/components/ShowShopList/ShowShopList.vue
new file mode 100644
index 0000000..a090a45
--- /dev/null
+++ b/components/ShowShopList/ShowShopList.vue
@@ -0,0 +1,20 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"ShowShopList",
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/components/ShowShopListItem/ShowShopListItem.vue b/components/ShowShopListItem/ShowShopListItem.vue
new file mode 100644
index 0000000..456e06d
--- /dev/null
+++ b/components/ShowShopListItem/ShowShopListItem.vue
@@ -0,0 +1,51 @@
+<template>
+	<view class="list-border">
+		<view class="list-container">
+			<view class="shop-list-img">
+				<u-image width="80px" height="80px" :src="imageUrl" border-radius='6px'></u-image>
+			</view>
+		</view>
+		<view class="list-ads">
+			
+		</view>
+	</view>
+	
+</template>
+
+<script>
+	export default {
+		props: {
+			imageUrl: {
+				type: String,
+				default(){
+					return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg'
+				}
+			}
+			
+		},
+		data() {
+			return {
+				
+			}
+			
+		},
+		computed: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list-border {
+		padding: 10px;
+	}
+	.list-container {
+		height: 80px;
+		background-color: #fff;
+		background-color: #000;
+		margin: 10px;
+		.shop-list-img {
+			border-radius: $uni-border-radius-lg;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/childComps/HomeHeader.vue b/pages/index/childComps/HomeHeader.vue
new file mode 100644
index 0000000..6a3e041
--- /dev/null
+++ b/pages/index/childComps/HomeHeader.vue
@@ -0,0 +1,127 @@
+<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: {
+			hotSearchWord:{
+				type: String,
+				default() {
+					return '热门关键词'
+				}
+			},
+			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"]
+				}
+			},
+			position:{
+				type: String,
+				default() {
+					return '定位中'
+				}
+			}
+		},
+		data() {
+			return {
+				// hotSearchWord:'',
+				// headerBgList:[]
+			}
+		},
+		options: {
+			styleIsolation: 'shared' // 解除样式隔离
+		},
+		computed:{
+			
+		}
+	}
+</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 8da536a..026bb9b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="home-base-bg">
 	<view class="search_box">
 		<view class="search_box_border">
 			<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
@@ -8,26 +8,94 @@
 		</view>
 		<InputAndSwiper></InputAndSwiper>
 		<TabBar :current-page="0"></TabBar>
+		<view class="nav-card">
+			<u-grid :col="4">
+					<u-grid-item>
+						<u-icon name="photo" :size="30"></u-icon>
+						<view class="grid-text">图片</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="lock" :size="30"></u-icon>
+						<view class="grid-text">锁头</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="hourglass" :size="30"></u-icon>
+						<view class="grid-text">沙漏</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="hourglass" :size="30"></u-icon>
+						<view class="grid-text">沙漏</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="photo" :size="30"></u-icon>
+						<view class="grid-text">图片</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="lock" :size="30"></u-icon>
+						<view class="grid-text">锁头</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="hourglass" :size="30"></u-icon>
+						<view class="grid-text">沙漏</view>
+					</u-grid-item>
+					<u-grid-item>
+						<u-icon name="hourglass" :size="30"></u-icon>
+						<view class="grid-text">沙漏</view>
+					</u-grid-item>
+				</u-grid>
+		</view>
+		<view class="news-box">
+			<u-notice-bar
+				:text="newsTextLists"
+				:bg-color="$uni-bg-color"
+			></u-notice-bar>
+		</view>
+		
+		<ShowShopListItem></ShowShopListItem>
+		
 	</view>
-	<h1>测试</h1>
-	</view>
+	
 </template>
 
 <script>
 	export default {
+		components: {
+			
+		},
 		data() {
-			return {}
+			return {
+				newsTextLists: [
+					'寒雨连江夜入吴',
+					'平明送客楚山孤',
+					'洛阳亲友如相问',
+					'一片冰心在玉壶'],
+			}
 		},
 		onLoad() {
-
+			
 		},
 		methods: {
 		
 		}
 	}
 </script>
-<style>
-	page {
-		background-color: #F8F8F8;
+
+<style lang="scss" scoped>
+	.home-base-bg {
+		background-color: $uni-bg-color-grey;
+		width: 100%;
 	}
+	.nav-card {
+		margin: 15px 7px;
+		padding: 10px 0;
+		background-color: $uni-bg-color;
+		
+		border-radius: $uni-border-radius-lg;
+		box-shadow: 0 3px 3px 0 $u-border-color;
+
+		.grid-text {
+			font-size: 14px;
+		}
+	}
+	
 </style>
\ No newline at end of file