diff --git a/frontend/src/views/recipeDetail.vue b/frontend/src/views/recipeDetail.vue
index d24f2f6..272e33b 100644
--- a/frontend/src/views/recipeDetail.vue
+++ b/frontend/src/views/recipeDetail.vue
@@ -1,19 +1,15 @@
 <template>
-  <!-- <div @click="goHome()">
-    首页
-  </div> -->
-  <el-page-header @back="goHome" content="$recipe"></el-page-header>
+  <el-page-header
+    @back="goHome"
+    title="首页"
+    v-bind:content="recipe.name"
+  ></el-page-header>
 
   <div v-if="recipe != null">
     <el-row :gutter="10">
-      <el-col :span="6">
-        <el-icon :size="25"> <bowl /> </el-icon>{{ recipe.name }}
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="6" :offset="6"> 类型：{{ recipe.recipe_type }} </el-col>
-      <el-col :span="6"> 难度：{{ recipe.difficulty }} </el-col>
-      <el-col :span="6"> 评分：{{ recipe.rate }} </el-col>
+      <el-col :span="8"> 类型：{{ recipe.recipe_type }} </el-col>
+      <el-col :span="8"> 难度：{{ recipe.difficulty }} </el-col>
+      <el-col :span="8"> 评分：{{ recipe.rate }} </el-col>
     </el-row>
     <el-row :gutter="10"> 备注：{{ recipe.note }} </el-row>
   </div>
@@ -26,15 +22,14 @@
 <script>
 import axios from 'axios';
 import 'element-plus/dist/index.css';
-import { Bowl } from '@element-plus/icons';
 import router from '@/router/index';
 import input_recipe from '@/components/input_recipe.vue';
 export default {
   name: 'RecipeDetail',
-  components: { Bowl, input_recipe },
+  components: { input_recipe },
   data: function() {
     return {
-      recipe: null,
+      recipe: {},
     };
   },
   mounted() {