diff --git a/前端/miniprogram/pages/menu/menu.js b/前端/miniprogram/pages/menu/menu.js
new file mode 100644
index 0000000..42ba5cb
--- /dev/null
+++ b/前端/miniprogram/pages/menu/menu.js
@@ -0,0 +1,107 @@
+const app = getApp();
+Page({
+ data: {
+ detailed_id:null,
+ detailed_name:null,
+ detailed_material:null,
+ detailed_steps:null,
+ detailed_time:null,
+ loading_1:true,
+ loading_2:true,
+ },
+
+ onLoad:function(options){
+ var item = JSON.parse(options.item)
+ var that = this
+ this.setData({
+ detailed_id:Number(item.id),
+ detailed_name:item.name,
+ detailed_time:Number(item.time),
+ })
+ console.log(item.id)
+ wx.cloud.callContainer({
+ "config": {
+ "env": "prod-2g058voqbea31ecb"
+ },
+ "path": "menu/materials/",
+ "header": {
+ "X-WX-SERVICE": "django-5198",
+ "content-type": "application/x-www-form-urlencoded;charset=utf-8"
+ },
+ "method": "GET",
+ data: {id:item.id},
+ success(res){
+
+ let arr = app.parse_json(res)
+ that.setData({
+ detailed_material: arr,
+ loading_1:false
+ })
+ }
+ })
+ wx.cloud.callContainer({
+ "config": {
+ "env": "prod-2g058voqbea31ecb"
+ },
+ "path": "menu/steps/",
+ "header": {
+ "X-WX-SERVICE": "django-5198",
+ "content-type": "application/x-www-form-urlencoded;charset=utf-8"
+ },
+ "method": "GET",
+ data: {id:item.id},
+ success(res){
+ console.log(res.data)
+ let arr = app.parse_json(res)
+ that.setData({
+ detailed_steps: arr,
+ loading_2:false
+ })
+ }
+ })
+
+ },
+
+
+ // get_detailedmenu(){
+ // var that = this
+ // wx.cloud.callContainer({
+ // "config": {
+ // "env": "prod-2g058voqbea31ecb"
+ // },
+ // "path": "menu/menus/",
+ // "header": {
+ // "X-WX-SERVICE": "django-5198",
+ // 'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
+ // },
+ // "method": "GET",
+ // data:{id:this.data.id},
+ // success(res){
+ // let arr = app.parse_json(res)
+ // that.setData({
+ // detailedmenu:arr,
+ // detailed_id:arr,
+ // detailed_meterial:arr,
+ // detailed_steps:arr,
+ // detailed_time:arr,
+ // })
+ // }
+ // })
+ // },
+ // onShow(){
+ // this.get_detailedmenu()
+ // },
+
+
+ back(){
+ wx.navigateBack({
+ delta: 3,
+ })
+ },
+ back_dishes(){
+ wx.navigateBack({
+ delta: 1,
+ })
+ }
+ })
+
\ No newline at end of file
diff --git a/前端/miniprogram/pages/menu/menu.json b/前端/miniprogram/pages/menu/menu.json
new file mode 100644
index 0000000..6f5247b
--- /dev/null
+++ b/前端/miniprogram/pages/menu/menu.json
@@ -0,0 +1,3 @@
+{
+ "usingComponents": {}
+}
\ No newline at end of file
diff --git a/前端/miniprogram/pages/menu/menu.wxml b/前端/miniprogram/pages/menu/menu.wxml
new file mode 100644
index 0000000..5501180
--- /dev/null
+++ b/前端/miniprogram/pages/menu/menu.wxml
@@ -0,0 +1,91 @@
+
+加载中
+
+
+
+
+ {{detailed_name}}
+
+
+
+
+ <
+
+
+
+
+
+ {{detailed_time}}分钟
+
+
+
+
+
+
+
+ 原材料
+
+
+
+ {{item.name}} {{item.amount}}
+
+
+
+
+
+
+
+ 步骤
+
+
+
+
+
+ 步骤{{item.order}}
+ 总耗时 {{item.time}}
+
+ {{item.text}}
+
+
+
+
+
+
+
+
+
+ 做菜结束
+
+
+
+
\ No newline at end of file
diff --git a/前端/miniprogram/pages/menu/menu.wxss b/前端/miniprogram/pages/menu/menu.wxss
new file mode 100644
index 0000000..8016f00
--- /dev/null
+++ b/前端/miniprogram/pages/menu/menu.wxss
@@ -0,0 +1,130 @@
+/**dishes.wxss**/
+page {
+ background-image: linear-gradient(-20deg, #f0e0c1 0%, #fdd6bd 100%);
+ }
+
+.profile {
+ padding: 30rpx;
+ padding-top: 70rpx;
+ margin: 0 auto;
+ text-align: center;
+ font-weight: bold;
+ font-size: 120%;
+ color: #B8860B;
+ /* border-radius: 40rpx 40rpx 40rpx 40rpx; */
+ box-shadow: 0px 1px 4px rgba(26, 77, 160, 0.16), inset 3px 3px 3px rgba(255, 255, 255, 0.15);
+ background-color: rgba(255, 255, 255, 0.75);
+}
+
+.sameStyle {
+ font-size: 32rpx;
+ border-radius: 10rpx;
+ /* background-color: #fff; */
+ box-shadow: 0px 1px 4px rgba(26, 77, 160, 0.16), inset 3px 3px 3px rgba(255, 255, 255, 0.15);
+ background-color: rgba(255, 255, 255, 0.75);
+ margin: 20rpx 3%;
+}
+
+.TotalTime {
+ padding: 14rpx 20rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+}
+
+.materialHeight {
+ height: calc(25vh - 80rpx);
+ margin-left: 20rpx;
+ width: 100%;
+}
+
+.material {
+ height: 25vh;
+ overflow: hidden;
+}
+
+.title {
+ font-size: 28rpx;
+ height: 80rpx;
+ line-height: 80rpx;
+ font-weight: bold;
+ padding-left: 20rpx;
+}
+
+.item {
+ padding: 10rpx 0;
+ margin: 0 20rpx;
+}
+
+.step {
+ height: 50vh;
+ overflow: hidden;
+}
+
+.materialHeight1 {
+ height: calc(50vh - 80rpx);
+ width: 100%;
+}
+
+.items {
+ margin: 3rpx 20rpx;
+ padding: 20rpx;
+ /* background: #e0ac7f; */
+ box-shadow: 0px 0px 4px #6d6a6b29;
+ border-radius: 10rpx;
+ margin-bottom: 20rpx;
+
+ height:100%;
+ justify-content: space-between;
+}
+
+/* .top {
+ display: flex;
+ align-items: center;
+ height:100%;
+ justify-content: space-between;
+} */
+
+.bot {
+ margin: 20rpx 0;
+ color: #666666;
+}
+.time{
+ color: #e05f5f;
+}
+
+.loading{
+ text-align: center;
+ width: 100%;
+ padding-top:40%;
+ z-index: 2;
+ margin: auto;
+ position: fixed;
+ font-weight:bold;
+ font-size: 20px;
+ color: rgb(0, 0, 0);
+ height: 100%;
+}
+
+.bottom_button{
+ position: fixed;
+ bottom: 0px;
+ text-align: center;
+ width: 100%;
+ padding-top: 5%;
+ padding-bottom: 1%;
+ z-index: 2;
+ margin: auto;
+ border-radius: 20px 20px 20px 20px;
+ font-weight:bold;
+ font-size: 20px;
+ background: rgba( 248, 138, 138, 0.3 );
+
+ backdrop-filter: blur( 20px );
+
+ }
+
+ .bottom_button_press{
+ background: rgba(255, 0, 0, 0.055);
+}
\ No newline at end of file