diff --git a/pages.json b/pages.json
index 21ea691..ddc6fba 100644
--- a/pages.json
+++ b/pages.json
@@ -1,6 +1,12 @@
 {
     "pages" : [
         //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path" : "pages/home/home",
+            "style" : {
+                "navigationBarTitleText" : "钢材信息-首页"
+            }
+        },
         {
             "path" : "pages/index/index",
             "style" : {
@@ -16,7 +22,13 @@
         {
             "path" : "pages/search/search",
             "style" : {
-				"navigationBarTitleText" : "钢材信息-搜索"
+                "navigationBarTitleText" : "钢材信息-搜索"
+            }
+        },
+        {
+            "path" : "pages/details/details",
+            "style" : {
+				"navigationBarTitleText" : "钢材信息-钢材详情"
 			}
         }
     ],
@@ -39,16 +51,22 @@
         "backgroundColor" : "#fff",
         "list" : [
             {
-                "pagePath" : "pages/index/index",
-                "iconPath" : "static/search.png",
-                "selectedIconPath" : "static/search-active.png",
-                "text" : "搜索"
+                "pagePath" : "pages/home/home",
+                "iconPath" : "static/home.png",
+                "selectedIconPath" : "static/home-active.png",
+                "text" : "首页"
             },
             {
                 "pagePath" : "pages/iron/iron",
                 "iconPath" : "static/iron.png",
                 "selectedIconPath" : "static/iron-active.png",
                 "text" : "钢材"
+            },
+            {
+                "pagePath" : "pages/index/index",
+                "iconPath" : "static/search.png",
+                "selectedIconPath" : "static/search-active.png",
+                "text" : "搜索"
             }
         ]
     }
diff --git a/pages/details/details.vue b/pages/details/details.vue
new file mode 100644
index 0000000..307e0cd
--- /dev/null
+++ b/pages/details/details.vue
@@ -0,0 +1,236 @@
+<template>
+	<view>
+		<view class="chart">
+			<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleChart" ref="echarts" />
+		</view>
+		<view class="details-card" v-for="(ironObj, i) in infoArr" :key="i">
+			<image class="card-header" :src="ironObj.photo !== ''&&ironObj.photo !== null ? ironObj.photo : 'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/Ocean.jpg'"></image>
+			<view class="card-body">
+				<view class="card-name">
+					<view>{{ironObj.name}}</view>
+					<view class="new-price">{{ironObj.new_price}}元/吨</view>
+				</view>
+				<view class="card-intro">
+					<view>{{ironObj.intro}}</view>
+				</view>
+				<view class="card-footer">
+					{{ironObj.updatedAt}}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import * as echarts from 'echarts'
+	import mpvueEcharts from 'mpvue-echarts'
+	export default {
+		data() {
+			return {
+				echarts,
+				xaxis: null,
+				dataArr: [],
+				chartName: '',
+				ironName: '',
+				ironObj: {},
+				infoArr: []
+			}
+		},
+		components:{
+			mpvueEcharts
+		},
+		onLoad: function (option) {
+			console.log(option.ironName);
+			this.ironName = option.ironName
+			this.getIronData()
+		},
+		computed: {
+			theSeries: function() {
+				return this.dataArr.map(v => {
+					return {
+						name: v.name,
+						data: v.data,
+						type: 'line',
+						symbol:'circle',
+						areaStyle: {
+						}
+					}
+				})
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: '钢材信息详情',
+				path: '/pages/details/details'
+			}
+		},
+		methods: {
+			chartInit(){
+				this.options = {
+					grid: {
+						left: 60
+					},
+					dataZoom: [{
+						type: 'slider'
+					}],
+					dataZoom: [{ 
+						"show": true,
+						fillerColor: 'rgba(94, 225, 198, .5)',
+						"realtime": true, "start": 30, "end": 100, "xAxisIndex": [0], "bottom": "0"},
+					],
+					color: [ '#5ee1c6','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
+					legend: {
+						show: true,
+						top: 20
+					},
+					tooltip : {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'cross',
+							animation: false,
+							label: {
+								backgroundColor: '#505765'
+							}
+						},
+						formatter: '时间: {b0} \n 名称: {a} \n 价格:{c0}元/吨'
+					},
+					xAxis: {
+						type: 'category',
+						data: this.xaxis
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: this.theSeries
+				};
+				console.log(this.$refs)
+				this.$refs.echarts.init()
+			},
+			handleChart(canvas, width, height) {
+				const chart = echarts.init(canvas, null, {
+					width: width,
+					height: height
+				})
+				canvas.setChart(chart)	
+				chart.setOption(this.options)
+				return chart
+			},
+			getIronData() {
+				uni.request({
+					url: `${this.$store.state.rootUrl}/weapp/iron?name=${this.ironName}`,
+					success: (res) => {
+						if(res.data.code === 500) {
+							uni.showToast({
+								title: res.data.data,
+								duration: 2000,
+								icon: 'none'
+							});
+						} else {
+							let result = res.data.data
+							this.dataArr = []
+							this.infoArr = result.map(v => {
+								let obj = {
+									name: '',
+									data: []
+								}
+								obj.name = v.name
+								v.old_price.map(d => {
+									obj.data.push(d.price)
+								})
+								this.dataArr.push(obj)
+								return v
+							})
+							let x = result[0].old_price.map(v => {
+								let date = new Date(v.createdAt)
+								let myDate = (date.getMonth() + 1) + '-' + date.getDate() 
+								return myDate
+							})
+							this.chartName = result[0].name
+							this.xaxis = x
+
+							this.chartInit()
+						}
+						
+					},
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+.chart {
+	height: 500upx;
+	display: flex;
+	flex: 1;
+}
+.details-card {
+      margin: 62upx 89upx;
+      border-radius: 1px;
+      box-shadow: 0 1px 2px rgba(0,0,0,.3);
+      background: #fff;
+      color: #333;
+    }
+    .card-header {
+		background-size: cover;
+		background-position: 50%;
+		height:368upx;
+		width:100%;
+		color: #f2f2f2;
+    }
+    .card-body {
+      /* padding: 35upx 90upx; */
+      line-height: 1.6;
+    }
+	.card-body .card-name {
+		border-bottom: 1upx solid #eee;
+		padding:15upx 40upx;
+		display: flex;
+		justify-content: space-between;
+	}
+	.card-body .card-intro {
+		padding:15upx 40upx;
+		min-height: 120upx;
+	}
+	.card-body .card-footer {
+		padding:15upx 40upx;
+		text-align: right;
+		font-size: 24upx;
+		color: #999;
+	}
+	.details {
+		display: flex;
+		justify-content: center;
+		border:1upx solid #dfdfdf;
+		border-radius:20upx;
+		padding:10upx;
+		margin:0 20upx;
+		margin-bottom: 20upx;
+	}
+	.details-infos .iron-photo {
+		width: 300upx;
+		height: 300upx;
+		margin-left: 15upx;
+	}
+	.details .details-text {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		line-height: 2;
+	}
+	.details-info {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+	.new-price {
+		color: #007AFF;
+	}
+	.details-title {
+		padding:8rpx 0;
+		text-align:center;
+		background:#dfdfdf;
+		color:#323232;
+		margin:20rpx 0;
+	}
+</style>
diff --git a/pages/home/home.vue b/pages/home/home.vue
new file mode 100644
index 0000000..ed1ee4e
--- /dev/null
+++ b/pages/home/home.vue
@@ -0,0 +1,194 @@
+<template>
+	<view>
+		<!-- 轮播图 -->
+		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
+            <swiper-item v-for="item in itemList" :key="item">
+                <image class="banner-img" :src="item"></image>
+            </swiper-item>
+        </swiper>
+		<!-- 热门钢材 -->
+		<view class="hot-iron">
+			<view class="one-line">
+				<view v-for="(v, i) in listData" :key="i" @click="seeDetails(v)" class="iron-item">
+					<view class="iron-icon"></view>
+					<view class="iron-name">{{v.name}}</view>
+				</view>
+			</view>
+		</view>
+		<!-- 公告栏 -->
+		<view class="article">
+			<view class="article-card">
+				<div class="text">
+					<div class="title">钢材今日降价</div>
+					<div class="info">降价幅度较大, 我厂准备抛售</div>
+				</div>
+				<div class="date">
+					<div class="year">2018</div>
+					<div class="other">12.19</div>
+				</div>
+			</view>
+			<view class="article-card">
+				<div class="text">
+					<div class="title">钢材今日降价</div>
+					<div class="info">降价幅度较大, 我厂准备抛售</div>
+				</div>
+				<div class="date">
+					<div class="year">2018</div>
+					<div class="other">12.19</div>
+				</div>
+			</view>
+			<view class="article-card">
+				<div class="text">
+					<div class="title">钢材今日降价</div>
+					<div class="info">降价幅度较大, 我厂准备抛售</div>
+				</div>
+				<div class="date">
+					<div class="year">2018</div>
+					<div class="other">12.19</div>
+				</div>
+			</view>
+			<view class="article-card">
+				<div class="text">
+					<div class="title">钢材今日降价</div>
+					<div class="info">降价幅度较大, 我厂准备抛售</div>
+				</div>
+				<div class="date">
+					<div class="year">2018</div>
+					<div class="other">12.19</div>
+				</div>
+			</view>
+			<view class="article-card">
+				<div class="text">
+					<div class="title">钢材今日降价</div>
+					<div class="info">降价幅度较大, 我厂准备抛售</div>
+				</div>
+				<div class="date">
+					<div class="year">2018</div>
+					<div class="other">12.19</div>
+				</div>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				itemList: [
+					'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/banner1.png',
+					'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/banner2.png',
+					'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/banner3.png'
+				],
+				indicatorDots: false,
+				autoplay: false,
+				interval: 5000,
+				duration: 1000,
+				listData: []
+			};
+		},
+		onShareAppMessage() {
+			return {
+				title: '钢材信息首页',
+				path: '/pages/home/home'
+			}
+		},
+		mounted() {
+			this.getIronList()
+		},
+		methods: {
+			/**
+			 * 获取热门钢材
+			 */
+			getIronList() {
+				uni.request({
+					url: `${this.$store.state.rootUrl}/weapp/iron/option`,
+					success: (res) => {
+						this.listData = res.data.data
+						this.listData.length = 6
+					}
+				})
+			},
+			/**
+			 * 查看钢材详情
+			 */
+			seeDetails(v) {
+				uni.navigateTo({
+					url: `/pages/details/details?ironName=${v.name}`
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	.banner-img {
+		width: 100%;
+		height: 100%;
+	}
+	.hot-iron .one-line {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.hot-iron .one-line .iron-item {
+		width: 25%;
+		height: 120upx;
+		/* background: #4CD964; */
+		padding: 28upx;
+		text-align: center;
+	}
+	.hot-iron .one-line .iron-item .iron-icon{
+		width: 60upx;
+		height: 60upx;
+		border-radius: 50%;
+		background: url(https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/iron-icon2.png) center no-repeat;
+		background-size: contain;
+		margin:0 auto;
+	}
+	.hot-iron .one-line .iron-item:nth-child(even) .iron-icon{
+		background: url(https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/iron-icon1.png) center no-repeat;
+		background-size: contain;
+	}
+	.hot-iron .one-line .iron-item .iron-name{
+		text-align: center;
+		font-size: 28upx;
+		color: #323232;
+		margin-top: 14upx;
+	}
+	.article {
+		padding-top: 28upx;
+	}
+	.article-card {
+		padding: 28upx 10upx;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		border-top: 1px solid #dfdfdf;
+	}
+	.article-card::last-child {
+		border-bottom: 1px solid #dfdfdf;
+	}
+	.article-card .text .title {
+		font-size: 38upx;
+		color: #323232;
+		font-weight: bold;
+	}
+	.article-card .text .info {
+		font-size: 28upx;
+		color: #999;
+	}
+	.article-card .date {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.article-card .date .year {
+		font-size: 38upx;
+	}
+	.article-card .date .other {
+		font-size: 28upx;
+	}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4d8afb0..5305c77 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -8,7 +8,7 @@
 			<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleChart" ref="echarts" />
 		</view>
 		<view class="details-card" v-for="(ironObj, i) in infoArr" :key="i">
-			<image class="card-header" :src="ironObj.photo !== '' ? ironObj.photo : 'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/Ocean.jpg'"></image>
+			<image class="card-header" :src="ironObj.photo !== ''&&ironObj.photo !== null ? ironObj.photo : 'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/Ocean.jpg'"></image>
 			<view class="card-body">
 				<view class="card-name">
 					<view>{{ironObj.name}}</view>
diff --git a/pages/search/search.vue b/pages/search/search.vue
index 23f8611..e1312ed 100644
--- a/pages/search/search.vue
+++ b/pages/search/search.vue
@@ -3,7 +3,7 @@
 		<view class="search">
 			<!-- <search  @search="searchIron" :disabled="btnDisable"/> -->
 			<input class="search-input" v-model="ironName" placeholder="搜索钢材"></input>
-			<button class="search-btn" @search="searchIron">搜索</button>
+			<button class="search-btn" @click="searchIron">搜索</button>
 		</view>
 		<view class="content">
 			<view class="hot">
@@ -44,6 +44,7 @@ export default {
 	},
 	methods: {
 		searchIron() {
+			console.log(this.ironName)
 			this.goToDetails(this.ironName)
 		},
 		getIronData() {