diff --git a/pages/index/index.vue b/pages/index/index.vue
index d024077..cd26a4b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,7 +1,77 @@
 <template>
 	<view class="page">
+		<view class="red-top">
+			<view class="building-title">
+				<view class="title-right">
+					建材
+				</view>
+				<view class="title-left">
+					寻找你想要的建材材料
+				</view>
+			</view>
+			<view class="building-search">
+				<view class="address">
+					<image src="../../static/image/home/1.png" mode=""></image>
+					<view class="eare">
+						<text>深圳</text>
+					</view>
+					<view class="down-arrow"></view>
+				</view>
+				<view class="search">
+					<!-- DC2828 -->
+					<uv-search bgColor="#ffffff"  placeholder="搜索材料" inputAlign="left" height="70" showAction="false"></uv-search>
+				</view>
+			</view>
+		</view>
 		
+		<view class="image-home">
+			<image src="../../static/image/home/2.png" mode=""></image>
+		</view>
 		
+		<view class="building-class">
+			<image src="../../static/image/home/3.png" mode=""></image>
+			<image src="../../static/image/home/4.png" mode=""></image>
+			<image src="../../static/image/home/5.png" mode=""></image>
+			<image src="../../static/image/home/6.png" mode=""></image>
+		</view>
+		<view class="text-building">
+			<text>XX建材</text>
+			<text>XX建材</text>
+			<text>XX建材</text>
+			<text>XX建材</text>
+		</view>
+		<view class="hot-building">
+			<text>热卖建材</text>
+			<view class="new-message">
+				你有一条新的快捷下单信息
+			</view>
+			<view class="quick-order">
+				<view class="number-order">
+					1
+				</view>
+				<image src="../../static/image/home/7.png" mode=""></image>
+			</view>
+		</view>
+		<view class="shop-list">
+			<view class="picture-shop">
+				<image src="../../static/image/home/8.png" mode=""></image>
+			</view>
+			<view class="price-shop">
+				<view class="top-shop">
+					<text>泰山工装石膏板</text>
+					<view class="tag-shop">
+						<uv-tags text="建材材料" type="warning" plain size="mini"></uv-tags>
+						<uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
+					</view>
+				</view>
+				<view class="bottom-price">
+					<text style="font-size: 45rpx; ">￥38</text>.00元/米
+				</view>
+			</view>
+			<view class="buy-shop">
+				<uv-button  :custom-style="customStyle" type="primary" shape="circle" text="立即购买" ></uv-button>
+			</view>
+		</view>
 		<PrivacyAgreementPoup/>
 		
 		<tabber select="0"/>
@@ -18,9 +88,22 @@
 		},
 		data() {
 			return {
+				keyword:''
 			}
 		},
 		computed : {
+			customStyle(){
+				return{
+						height: '60rpx',
+						background: '#EB553B',
+						color: '#fff',
+						borderRadius: '40rpx' ,//圆角
+						// nvue中必须是下方的写法
+						'border-top-right-radius': '40rpx',
+						'border-bottom-left-radius': '40rpx',
+						'border-bottom-right-radius': '40rpx'
+				}
+			}
 		},
 		methods: {
 		}
@@ -28,215 +111,210 @@
 </script>
 
 <style scoped lang="scss">
-	.search {
-		height: 82rpx;
-		width: 710rpx;
-		background: #FFFFFF;
-		margin: 20rpx auto;
-		border-radius: 41rpx;
-		box-sizing: border-box;
-		padding: 0 15rpx;
-	
-		display: flex;
-		align-items: center;
-		// justify-content: space-between;
-	
-		.left-area,
-		.center-area {
-			display: flex;
-			align-items: center;
-		}
-	
-		.left-area {
-			max-width: 160rpx;
-	
-			image {
-				flex-shrink: 0;
-				width: 26rpx;
-				height: 26rpx;
-			}
-	
-			.area {
-				font-size: 24rpx;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				/* 限制显示两行 */
-				-webkit-box-orient: vertical;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				color: #292929;
+	.red-top{
+		position: relative;
+		height: 420rpx;
+		background: $uni-color;
+		border-bottom-left-radius: 100rpx;
+		border-bottom-right-radius: 100rpx;
+		z-index: -1;
+		.building-title{
+			position: absolute;
+			height: 100rpx;
+			width: 100%;
+			margin-top: 100rpx;
+			.title-right{
+				color: $uni-bg-color;
+				height: 100rpx;
+				line-height: 100rpx;
+				font-size: 45rpx;
+				font-weight: 900;
+				margin-left: 30rpx;
+				display: inline-block;
 			}
-	
-			.parting-line {
-				flex-shrink: 0;
-				font-size: 26rpx;
-				color: #ccc;
-				margin: 0rpx 5rpx;
+			.title-left{
+				display: inline-block;
+				margin-left: 30rpx;
+				font-size: 22rpx;
+				color: $uni-bg-color;
 			}
 		}
-	
-		.center-area {
-			display: flex;
-			flex-wrap: nowrap;
-			align-items: center;
-			width: calc(100% - 290rpx);
-			margin-left: 30rpx;
-			image {
-				width: 26rpx;
-				height: 26rpx;
-			}
-	
-			.van-field {
-				background-color: transparent;
-				box-sizing: border-box;
-				height: 82rpx;
-				line-height: 82rpx;
-				width: calc(100% - 30rpx);
-				padding: 0rpx 10rpx 0rpx 0rpx;
-	
-				input {
-					height: 82rpx;
-					font-size: 60rpx;
+		.building-search{
+			position: absolute;
+			height: 100rpx;
+			width: 100%;
+			margin-top: 200rpx;
+			// background-color: black;
+			.address{
+				height: 100rpx;
+				width: 150rpx;
+				position: relative;
+				image{
+					position: absolute;
+					height: 20rpx;
+					width: 15rpx;
+					line-height: 20rpx;
+					left: 20px;
+					top: 42rpx;
+				}
+				.eare{
+					width: 100rpx;
+					height: 100rpx;
+					line-height: 100rpx;
+					margin-left:60rpx;
+					color: $uni-bg-color;
+				}
+				.down-arrow:after {
+				  content: "";
+				  display: inline-block;
+				  width: 0;
+				  height: 0;
+				  border-left: 10rpx solid transparent;
+				  border-right: 10rpx solid transparent;
+				  border-top:15rpx solid $uni-bg-color;
+				  margin-top: 5rpx;
+				  position: absolute;
+				  top: 42rpx;
+				  left: 65px;
 				}
 			}
-		}
-	
-		.right-area {
-			.search-button {
-				background: #60BDA2;
-				height: 60rpx;
-				width: 130rpx;
-				font-size: 26rpx;
-				border-radius: 35rpx;
-				color: white;
-	
-				display: flex;
-				align-items: center;
-				justify-content: center;
+			.search{
+				display: inline-block;
+				position: absolute;
+				top: 8px;
+				left: 26%;
+				width: 70%;
 			}
+			
 		}
 	}
-	.swipe{
-		overflow: hidden;
-		border-radius: 20rpx;
-		margin: 20rpx;
+	.image-home{
+		z-index: 1;
+		height: 350rpx;
+		width: 100%;
+		image{
+			width: 95%;
+			height: 100%;
+			margin:auto;
+			display: block;
+			margin-top: -100rpx;
+		}                                                         
 	}
-	.page{
-		& /deep/ .uv-icon__icon{
-			font-size: 30rpx !important;
+	.building-class{
+		height: 150rpx;
+		display: flex;
+		justify-content: space-around;
+		align-items: center; /* 垂直居中 */
+		background-color: $uni-bg-color;
+		image{
+			margin-left: 20rpx;
+			margin-right: 20rpx;
+			margin-bottom: -30rpx;
+			width: 100rpx;
+			height: 100rpx;
+			display: inline-block;
+			
 		}
-		
-		
-		// 水洗店
-		.userShop{
-			.list{
-				display: flex;
-				flex-wrap: wrap;
-				.item{
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					width: 330rpx;
-					margin: 20rpx;
-					padding: 30rpx 0;
-					color: #FFFFFF;
-					line-height: 50rpx;
-					border-radius: 20rpx;
-					font-size: 28rpx;
-					.num{
-						font-size: 38rpx;
-						font-weight: 900;
-					}
-					image{
-						width: 110rpx;
-						height: 110rpx;
-						margin-left: 20rpx;
-					}
-					&:nth-child(1){
-						background: #F07A77;
-					}
-					&:nth-child(2){
-						background: #F48B4E;
-					}
-					&:nth-child(3){
-						background: #6487E1;
-					}
-					&:nth-child(4){
-						background: #61B7E6;
-					}
-				}
-			}
+	}
+	.text-building{
+		display: flex;
+		justify-content: space-around;
+		align-items: center; /* 垂直居中 */
+		background-color: $uni-bg-color;
+		text-align: center;
+		font-weight: 500;
+		margin-bottom: -30rpx;
+		padding-bottom: 40rpx;
+		// overflow: hidden;
+	}
+	.hot-building{
+		margin-top: 50rpx;
+		height: 100rpx;
+		background-color: $uni-bg-color;
+		display: flex;
+		align-items: center;
+		padding-left: 40rpx;
+		font-size: 35rpx;
+		font-weight: 400;
+		.new-message{
+			background-color: #DC2828;
+			border-radius: 20rpx;
+			font-size: 25rpx;
+			color: $uni-bg-color;
+			padding: 0 10rpx 0 10rpx;
+			margin-left: 20rpx;
 		}
-		// 酒店
-		.user{
-			padding: 20rpx;
-			.shop{
-				position: relative;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				background-color: #fff;
-				margin-top: 20rpx;
+		.quick-order{
+			position: relative;
+			width: 230rpx;
+			height: 160rpx;		
+			margin-right: 0rpx;
+			margin-top: 15rpx;
+			image{
+				width: 100%;
+				height: 100%;
+				
+			}
+			.number-order{
+				background-color: #DC2828;
+				position: absolute;
+				font-size: 30rpx;
+				height: 40rpx;
+				width: 40rpx;
+				text-align: center;
 				border-radius: 20rpx;
-				padding: 20rpx;
-				overflow: hidden;
-				.image{
-					width: 180rpx;
-					height: 180rpx;
-					margin-right: 20rpx;
-					border-radius: 20rpx;
-				}
-				.shopInfo{
-					font-size: 22rpx;
-					.title{
-						font-size: 30rpx;
-					}
-					.tags{
-						display: flex;
-						.tag{
-							padding: 4rpx 6rpx;
-							border: 1rpx solid #FFAC6E;
-							color: #FFAC6E;
-							margin-right: 10rpx;
-							margin-top: 10rpx;
-							font-size: 18rpx;
-						}
-					}
-					.time{
-						margin-top: 10rpx;
-						display: flex;
-					}
-					.address{
-						margin-top: 10rpx;
-						display: flex;
-					}
-				}
-				.btns{
-					margin-left: auto;
+				color: #ffffff;
+				top: 10rpx;
+				left: 25rpx;
+			}
+		}
+	}
+	.shop-list{
+		width: 95%;
+		height: 222rpx;
+		display: flex;
+		margin: 30rpx auto;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		.picture-shop{
+			width: 240rpx;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			image{
+				width: 200rpx;
+				height: 150rpx;
+			}
+		}
+		.price-shop{
+			width: 250rpx;
+			height: 100%;
+			.top-shop{
+				height: 100rpx;
+				width: 100%;
+				font-size: 33rpx;
+				margin-top: 30rpx;
+				text-align: center;
+				.tag-shop{
 					display: flex;
-					align-items: center;
-					justify-content: center;
-					.btn{
-						background-color: $uni-color;
-						color: #fff;
-						box-shadow: 0 0 5rpx 5rpx #FFAC6E;
-						padding: 10rpx 20rpx;
-						flex-shrink: 0;
-						border-radius: 35rpx;
-					}
-				}
-				.tips{
-					position: absolute;
-					top: 0;
-					right: 0;
-					font-size: 24rpx;
-					color: #FFAC6E;
-					background-color: #FEF5EE;
-					padding: 10rpx 20rpx;
-					border-radius: 10rpx;
+					justify-content: space-around;
 				}
 			}
+			.bottom-price{
+				display: inline-block;
+				color: #DC2828;
+				height: 80rpx;
+				width: 250rpx;
+				line-height: 100rpx;
+			}
+		}
+		.buy-shop{
+			height: 100%;
+			width: 250rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
 	}
-	
 </style>
diff --git a/static/image/home/0.png b/static/image/home/0.png
deleted file mode 100644
index e221211..0000000
Binary files a/static/image/home/0.png and /dev/null differ
diff --git a/static/image/home/1.png b/static/image/home/1.png
index 0b7d3dc..6ef8d78 100644
Binary files a/static/image/home/1.png and b/static/image/home/1.png differ
diff --git a/static/image/home/2.png b/static/image/home/2.png
index 8ba997f..5b6bf7a 100644
Binary files a/static/image/home/2.png and b/static/image/home/2.png differ
diff --git a/static/image/home/3.png b/static/image/home/3.png
index a7f85f3..1a4c761 100644
Binary files a/static/image/home/3.png and b/static/image/home/3.png differ
diff --git a/static/image/home/4.png b/static/image/home/4.png
new file mode 100644
index 0000000..1ed209f
Binary files /dev/null and b/static/image/home/4.png differ
diff --git a/static/image/home/5.png b/static/image/home/5.png
new file mode 100644
index 0000000..c240c58
Binary files /dev/null and b/static/image/home/5.png differ
diff --git a/static/image/home/6.png b/static/image/home/6.png
new file mode 100644
index 0000000..2ad7719
Binary files /dev/null and b/static/image/home/6.png differ
diff --git a/static/image/home/7.png b/static/image/home/7.png
new file mode 100644
index 0000000..738432c
Binary files /dev/null and b/static/image/home/7.png differ
diff --git a/static/image/home/8.png b/static/image/home/8.png
new file mode 100644
index 0000000..611f1e6
Binary files /dev/null and b/static/image/home/8.png differ
diff --git a/uni.scss b/uni.scss
index 6e2d4c6..4ac21ce 100644
--- a/uni.scss
+++ b/uni.scss
@@ -12,7 +12,7 @@
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
 /* 颜色变量 */
-$uni-color: #FD5100;
+$uni-color: #DC2828;
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;