diff --git a/components/ai_recognize_fruit_bar/ai_recognize_fruit_bar.vue b/components/ai_recognize_fruit_bar/ai_recognize_fruit_bar.vue
deleted file mode 100644
index 342846f..0000000
--- a/components/ai_recognize_fruit_bar/ai_recognize_fruit_bar.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <view>
-
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  }
-}
-</script>
-
-<style lang="scss">
-
-</style>
diff --git a/components/ai_recognize_recipe_bar/ai_recognize_recipe_bar.vue b/components/ai_recognize_recipe_bar/ai_recognize_recipe_bar.vue
deleted file mode 100644
index 342846f..0000000
--- a/components/ai_recognize_recipe_bar/ai_recognize_recipe_bar.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <view>
-
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  }
-}
-</script>
-
-<style lang="scss">
-
-</style>
diff --git a/pages/homepages/homes/ai_recognize_fruit/ai_recognize_fruit.vue b/pages/homepages/homes/ai_recognize_fruit/ai_recognize_fruit.vue
index 476b2a8..42b83a7 100644
--- a/pages/homepages/homes/ai_recognize_fruit/ai_recognize_fruit.vue
+++ b/pages/homepages/homes/ai_recognize_fruit/ai_recognize_fruit.vue
@@ -14,7 +14,7 @@
     </view>
 
     <!-- 返回按钮 -->
-    <image class="button" @click="goBackToHome" src="@/static/homepages/homes/ai_recognize_fruit/pictures/button.png"></image>
+    <image class="button" @click="goBackToHome" src="/static/homepages/homes/ai_recognize_fruit/pictures/button.png"></image>
   </view>
 </template>
 
@@ -36,49 +36,49 @@ export default {
     selectAndUploadPicture() {
       const app = getApp();
       const serverAddress = app.globalData.fit_journey_ai_address;
-      console.log("后端服务器的地址是："+serverAddress);
+      console.log("后端服务器的地址是：" + serverAddress);
 
       // 调用选择图片的 API
-	  uni.file
+      uni.file
       uni.chooseImage({
         count: 1, // 选择的图片数量，1表示只选择一张
         sizeType: ['compressed'], // 可以选择原图或者压缩图，compressed为压缩图
         sourceType: ['album', 'camera'], // 可选择相册或拍照
         success: (chooseImageRes) => {
-			
+
           const filePath = chooseImageRes.tempFilePaths[0]; // 获取选择的图片路径
           console.log('选择的图片路径:', filePath);
           console.log("图片上传成功！");
-					        // 上传文件到后端服务器中
-							uni.uploadFile({
-							 header: {
-									'Authorization': app.globalData.token // 授权 token
-									},
-							  url: app.globalData.fit_journey_ai_address+`/ai/recipe`, // 服务器接口地址
-							  
-							  filePath: filePath,
-							  name: 'file', // 后端接收的文件参数名称
-							  success: (uploadFileRes) => {
-								console.log('上传结果:', uploadFileRes);
-								const response = JSON.parse(uploadFileRes.data); // 解析返回的数据
-								if (response && response.data) {
-								  // 处理返回的数据
-								  this.calorie = response.data.calorie || 0;
-								  this.name = response.data.name || '识别失败，请重新上传图片';
-								} else {
-								  uni.showToast({
-									title: '识别失败，请重新上传图片',
-									icon: 'none',
-								  });
-								}
-							  },
-							  fail: () => {
-								uni.showToast({
-								  title: '图片上传失败',
-								  icon: 'none',
-								});
-							  },
-							});
+          // 上传文件到后端服务器中
+          uni.uploadFile({
+            header: {
+              'Authorization': app.globalData.token // 授权 token
+            },
+            url: app.globalData.fit_journey_ai_address + `/ai/fruit`, // 服务器接口地址
+
+            filePath: filePath,
+            name: 'file', // 后端接收的文件参数名称
+            success: (uploadFileRes) => {
+              console.log('上传结果:', uploadFileRes);
+              const response = JSON.parse(uploadFileRes.data); // 解析返回的数据
+              if (response && response.data) {
+                // 处理返回的数据
+                this.calorie = response.data.calorie || 0;
+                this.name = response.data.name || '识别失败，请重新上传图片';
+              } else {
+                uni.showToast({
+                  title: '识别失败，请重新上传图片',
+                  icon: 'none',
+                });
+              }
+            },
+            fail: () => {
+              uni.showToast({
+                title: '图片上传失败',
+                icon: 'none',
+              });
+            },
+          });
         },
         fail: () => {
           uni.showToast({
diff --git a/static/homepages/homes/ai_recognize_fruit/css/ai_recongnize_fruit.scss b/static/homepages/homes/ai_recognize_fruit/css/ai_recongnize_fruit.scss
new file mode 100644
index 0000000..43017ac
--- /dev/null
+++ b/static/homepages/homes/ai_recognize_fruit/css/ai_recongnize_fruit.scss
@@ -0,0 +1,68 @@
+
+.background {
+  background-image: url("@/static/homepages/homes/ai_recognize_fruit/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  flex-direction: column; /* 纵向排列 */
+  align-items: center; /* 水平居中 */
+  justify-content: flex-end; /* 使内容向底部对齐 */
+  position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
+}
+.upload_picture{
+  position: absolute; /* 绝对定位 */
+  width: 90%;
+  height: 25%;
+  top: 45%; /* 距离底部 20% 的位置 */
+  left: 50%; /* 水平居中 */
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
+}
+.button {
+  position: absolute; /* 绝对定位 */
+  width: 13%;
+  height: 6%;
+  top: 0%;
+  left: 6%; /* 水平居中 */
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
+}
+.calorie_container {
+  background-image: url("@/static/homepages/homes/ai_recognize_fruit/pictures/calorie.png");
+  background-size: cover;
+  background-position: center;
+  display: flex; /* 使用 flex 布局 */
+  flex-direction: column;
+  align-items: center; /* 水平居中 */
+  justify-content: center; /* 垂直居中 */
+  position: absolute;
+  width: 40%;
+  height: 27%;
+  bottom: 3%;
+  left: 6%;
+}
+.calorie_text {
+  font-size: 23px;
+  color: #1b1313;
+  font-weight: bold;
+  margin-top: 100%; /* 向下移动 100% */
+}
+.name_container{
+  background-image: url("@/static/homepages/homes/ai_recognize_fruit/pictures/fruit.png");
+  background-size: cover;
+  background-position: center;
+  display: flex; /* 使用 flex 布局 */
+  flex-direction: column;
+  align-items: center; /* 水平居中 */
+  justify-content: center; /* 垂直居中 */
+  position: absolute;
+  width: 40%;
+  height: 26%;
+  bottom: 3%;
+  left: 54%;
+}
+.name_text {
+  font-size: 23px;
+  color: #0c0b0b;
+  font-weight: 800;
+  margin-top: 100%; /* 向下移动 100% */
+}
\ No newline at end of file
diff --git a/static/homepages/homes/ai_recognize_fruit/pictures/background.png b/static/homepages/homes/ai_recognize_fruit/pictures/background.png
new file mode 100644
index 0000000..a59e83c
Binary files /dev/null and b/static/homepages/homes/ai_recognize_fruit/pictures/background.png differ
diff --git a/static/homepages/homes/ai_recognize_fruit/pictures/button.png b/static/homepages/homes/ai_recognize_fruit/pictures/button.png
new file mode 100644
index 0000000..f3f43e8
Binary files /dev/null and b/static/homepages/homes/ai_recognize_fruit/pictures/button.png differ
diff --git a/static/homepages/homes/ai_recognize_fruit/pictures/calorie.png b/static/homepages/homes/ai_recognize_fruit/pictures/calorie.png
new file mode 100644
index 0000000..71ec982
Binary files /dev/null and b/static/homepages/homes/ai_recognize_fruit/pictures/calorie.png differ
diff --git a/static/homepages/homes/ai_recognize_fruit/pictures/fruit.png b/static/homepages/homes/ai_recognize_fruit/pictures/fruit.png
new file mode 100644
index 0000000..e00ba82
Binary files /dev/null and b/static/homepages/homes/ai_recognize_fruit/pictures/fruit.png differ
diff --git a/static/homepages/homes/ai_recognize_fruit/pictures/photo.png b/static/homepages/homes/ai_recognize_fruit/pictures/photo.png
new file mode 100644
index 0000000..c3c2df6
Binary files /dev/null and b/static/homepages/homes/ai_recognize_fruit/pictures/photo.png differ