diff --git a/.gitignore b/.gitignore
index 78a752d..193a671 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+/manifest.json
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/manifest.json b/manifest.json
index e3780b6..a9b2899 100644
--- a/manifest.json
+++ b/manifest.json
@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx78efc832a9373884",
         "setting" : {
             "urlCheck" : false
         },
diff --git a/package.json b/package.json
index 49fd105..93e4c3f 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "scss": "^0.2.4",
     "uview-ui": "^2.0.36"
   }
 }
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 537ac72..5acd1a8 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,25 +1,102 @@
 <template>
-	<view>
+	<view class="base-bg-color">
 		<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>
 	</view>
+	
 </template>
 
 <script>
 	export default {
+		components: {
+			
+		},
 		data() {
-			return {}
+			return {
+				newsTextLists: [
+					'寒雨连江夜入吴',
+					'平明送客楚山孤',
+					'洛阳亲友如相问',
+					'一片冰心在玉壶'],
+			}
 		},
 		onLoad() {
-
+			
 		},
 		methods: {
-
+			// 头部区域
+			//获取热点搜索词、背景URL
+			getHeaderAreaURL() {
+				this.headerBgList = [];
+				this.hotSearchWord = ''
+			}
+		},
+		computed:{
+			newsText() {
+				// return "寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶"
+				return this.newsTextLists.join('')
+			}
 		}
 	}
 </script>
-<style>
-	page {
-		background-color: #F8F8F8;
+
+<style lang="scss">
+	.base-bg-color {
+		background-color: $u-bg-color;
 	}
+	.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;
+		// border: solid 2px black;
+		.grid-text {
+			font-size: 14px;
+		}
+	}
+	
 </style>
\ No newline at end of file
diff --git a/pages/my/my.vue b/pages/my/my.vue
index ecb41eb..2d30c91 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -28,4 +28,4 @@
 
 <style lang="scss">
 
-</style>
\ No newline at end of file
+</style>