diff --git a/components/FoodsList/FoodsList.vue b/components/FoodsList/FoodsList.vue
new file mode 100644
index 0000000..e764e2c
--- /dev/null
+++ b/components/FoodsList/FoodsList.vue
@@ -0,0 +1,89 @@
+<template>
+	<view class="foods-list">
+		<view class="foods-item" v-for="f in foodsList" :key="f.id" @click="showDetail(f)">
+			<view class="foods-cover">
+				<image class="cover" :src="f.cover" mode="scaleToFill"></image>
+			</view>
+			<view class="foods-info">
+				<view class="foods-name">{{ f.title }}</view>
+				<view class="foods-month">月销 {{ f.saleCount }} 单</view>
+				<view class="foods-coupon">
+					<text class="iconfont icon-coupon_fill icon-coupon"></text>
+					<text>{{f.couponDesc}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { defineComponent } from "vue";
+	import { FoodsModel } from "../../service/models";
+	defineComponent({
+		name: 'FoodsList'
+	})
+
+	defineProps<{
+		foodsList : FoodsModel[]
+	}>()
+	function showDetail(f : FoodsModel) {
+		uni.navigateTo({
+			url: `/pages/index/detail?id=${f.id}`
+		})
+	}
+</script>
+
+<style lang="scss">
+	.foods-list {
+		background-color: #fafafa;
+		padding: 10px 0;
+
+		.foods-item {
+			background-color: #fff;
+			display: flex;
+			padding: 10px;
+			border-bottom: 1px solid #efefef;
+
+			&:last-child {
+				border-bottom: none;
+			}
+		}
+
+		.foods-cover {
+			width: 80px;
+			margin-right: 10px;
+
+			.cover {
+				display: block;
+				width: 100%;
+				height: 60px;
+			}
+		}
+
+		.foods-info {
+			flex: 1;
+		}
+
+		.foods-name {}
+
+		.foods-month {
+			font-size: 13px;
+			color: #999999;
+			margin-bottom: 5px;
+		}
+
+		.foods-coupon {
+			border-top: 1px dashed #eee;
+			padding-top: 5px;
+			font-size: 13px;
+			color: #999999;
+
+			.icon-coupon {
+				color: $uni-color-primary;
+				position: relative;
+				top: 1px;
+				margin-right: 2px;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index bd06457..70e68c7 100644
--- a/pages.json
+++ b/pages.json
@@ -17,7 +17,25 @@
 			}
 
 		}
-	],
+	    ,{
+            "path" : "pages/index/search",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "我爱外卖",
diff --git a/pages/index/detail.vue b/pages/index/detail.vue
new file mode 100644
index 0000000..efb6892
--- /dev/null
+++ b/pages/index/detail.vue
@@ -0,0 +1,54 @@
+<template>
+	<view class="page-detail" v-if="f">
+		<view class="foods-cover">
+			<image class="cover" :src="f.cover" mode=""></image>
+		</view>
+		<view class="foods-name">
+			<text>{{f.title}}</text>
+		</view>
+		<view class="sale-count">
+			<text>{{f.saleCount}}</text>
+		</view>
+		<view class="sale-control">
+			<view class="sale-price">
+				<text class="price">{{f.price}}</text>
+				<text class="coupon">{{f.coupon}}</text>
+			</view>
+			<view class="add-to-cart">
+				<text class="iconfont icon-add"></text>
+				<text>加入购物车</text>
+			</view>
+		</view>
+		<view class="foods-detail-content" v-html="f.content">
+			
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { foodsDetail } from '../../service/api';
+	import { ref } from "vue";
+	import { FoodsModel } from '../../service/models';
+	const props = defineProps<{
+		id : any
+	}>();
+	const f = ref<FoodsModel>()
+	foodsDetail(props.id).then((foods) => {
+		f.value = foods
+	})
+</script>
+
+<style lang="scss">
+.page-detail{
+	img,image,umi-image{
+		max-width: 100%;
+		height: auto;
+	}
+	.foods-cover{
+		.cover{
+			display: block;
+			width: 100%;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 9c50e5b..16d9937 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,14 +1,14 @@
 <template>
-	<view>
+	<view class="page-index">
 		<view class="header">
 			<view class="my-location flex-center">
 				<text class="icon-location iconfont"></text>
 				<text class="address">通力大厦</text>
 			</view>
 			<view class="search-box">
-				<view class="search-input-wrapper flex-center">
+				<view class="search-input-wrapper flex-center" @click="showSearchPage">
 					<text class="iconfont icon-search"></text>
-					<input class="input" type="text" :placeholder="placeholder" />
+					<view class="input">{{placeholder}}</view>
 				</view>
 			</view>
 		</view>
@@ -20,12 +20,7 @@
 				<view class="title">{{c.id}}{{c.title}}</view>
 			</view>
 		</view>
-		<view class="foods-list">
-			<view class="foods-item" v-for="f in foodsList">
-				<image :src="f.cover" mode=""></image>
-				<view class="foods-name">{{f.title}}</view>
-			</view>
-		</view>
+		<FoodsList :foodsList="foodsList"></FoodsList>
 	</view>
 </template>
 
@@ -65,6 +60,12 @@
 		})
 
 	}
+	
+	function showSearchPage(){
+		uni.navigateTo({
+			url:'/pages/index/search'
+		})
+	}
 
 
 	const foodsName = '鱼香肉丝,鱼香茄子,烂肉豇豆,麻婆豆腐'.split(',');
@@ -87,27 +88,24 @@
 </script>
 
 <style lang="scss" scoped>
+	.page-index {
+		// min-height: 100vh;
+	}
+
 	.header {
 		background-color: $uni-color-primary;
 		padding: 10px 15px;
 		color: white;
-		display: flex;
-		height: 30px;
-		line-height: 30px;
 	}
 
 	.my-location {
 		cursor: pointer;
-		background-color: rgba(0, 0, 0, 0.4);
-		border-radius: 50px;
-		padding: 0px 10rpx;
 		font-size: 12px;
 		max-width: 100px;
 		overflow: hidden;
 	}
 
 	.address {
-		margin-left: 2px;
 		margin-right: 5px;
 	}
 
@@ -126,7 +124,7 @@
 		background-color: #fff;
 		border-radius: 40px;
 		height: 30px;
-		margin-left: 15px;
+		margin-top: 10px;
 		padding: 0 15px 0 5px;
 
 		.input {
@@ -154,4 +152,5 @@
 			height: 40px;
 		}
 	}
+
 </style>
\ No newline at end of file
diff --git a/pages/index/search.vue b/pages/index/search.vue
new file mode 100644
index 0000000..8c3b35f
--- /dev/null
+++ b/pages/index/search.vue
@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/service/api.ts b/service/api.ts
index 8d6eee2..bbb3c20 100644
--- a/service/api.ts
+++ b/service/api.ts
@@ -1 +1,42 @@
-export const API_URL = 'http://localhost:8080'
\ No newline at end of file
+import { FoodsModel, ResponseModel } from "./models"
+
+export const API_URL = 'http://localhost:8080'
+function request<T>(url : string, method : 'GET' | 'POST' = 'GET', data : any = null) {
+	return new Promise<T>((resolve, reject) => {
+		uni.request({
+			url: API_URL + url,
+			method,
+			data,
+			header: {
+				'Content-Type': 'application/json'
+			},
+			success(ret) {
+				if (ret.statusCode == 200) {
+					const data = ret.data as ResponseModel<T>;
+					if (data.code != 200) {
+						reject(Error(data.msg))
+					} else {
+						resolve(data.data)
+					}
+				} else {
+					reject(Error('服务器异常'))
+				}
+			},
+			fail(e) {
+				console.log(e)
+				reject(Error(e.errMsg))
+			}
+		})
+		// task.
+	})
+}
+export function foodsDetail(id : any) {
+	return request<FoodsModel>(`/api/food/${id}`)
+	// uni.request({
+	// 	url: API_URL + '/api/food/recommend',
+	// 	success(ret) {
+	// 		foodsList.value = ret.data.data
+	// 		// console.log(ret.data.data)
+	// 	}
+	// })
+}
\ No newline at end of file
diff --git a/service/models.ts b/service/models.ts
new file mode 100644
index 0000000..186b3f1
--- /dev/null
+++ b/service/models.ts
@@ -0,0 +1,32 @@
+
+export type ResponseModel<T> = {
+	code : number
+	data : T
+	msg : string
+}
+
+export type FoodsModel = {
+	createBy ?: any;
+	createTime : string;
+	updateBy ?: any;
+	updateTime : string;
+	remark ?: any;
+	id : number;
+	cid : number;
+	title : string;
+	cover : string;
+	description : string;
+	content ?: any;
+	coupon : number;
+	couponDesc : string;
+	couponStartTime : string;
+	couponEndTime : string;
+	price : number;
+	sort : number;
+	area ?: any;
+	recommend : number;
+	recommendStartTime : string;
+	recommendEndTime ?: any;
+	saleCount : number;
+	state : number;
+}
\ No newline at end of file
diff --git a/uni.scss b/uni.scss
index e537d9d..671a5ae 100644
--- a/uni.scss
+++ b/uni.scss
@@ -74,3 +74,7 @@ $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph:15px;
+
+img,image{
+	max-width: 100%;
+}
\ No newline at end of file