新建

src/pages/home/detail.vue

@@ -6,11 +6,12 @@
     <div class="div-b">
       <div class="mt-5">榴莲成熟度：70%</div>
       <div class="mt-5">
-        <van-image width="60rpx" height="60rpx" :src="image" />
+        <van-icon v-if="status" size="80rpx" color="#07c160" name="smile-o" />
+        <van-icon v-else size="80rpx" color="#dd524d" name="question-o" />
       </div>
       <van-button
-        custom-style="margin-top: 10rpx;"
-        type="info"
+        custom-style="margin-top: 20rpx;padding-left:40rpx;padding-right:40rpx;border-radius: 8rpx;background: #dd524d;color: white"
+        size="small"
         @click="againTakePhoto"
         >重新拍照</van-button
       >
@@ -24,6 +25,7 @@ export default {
   data() {
     return {
       image: "",
+      status: false,
     };
   },
   onLoad(op) {

src/pages/home/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="body">
+  <div class="div-body">
     <img class="div-img" src="@/static/logo.png" />
-    <h1 class="mt-20">水果慧眼</h1>
-    <div class="mt-20">梧桐AI智慧创新团队</div>
+    <h1 class="mt-20 font-24">水果慧眼</h1>
+    <h6 class="mt-20 font-10 a.grey-9">梧桐AI智慧创新团队</h6>
 
     <van-button
-      custom-style=" margin-top: 100rpx"
+      custom-style="margin-top: 160rpx;padding-left:40rpx;padding-right:40rpx;border-radius: 8rpx;background: #3caaff;color: white"
       size="small"
-      type="info"
       @click="goTakePhoto"
       >拍照识别</van-button
     >
@@ -26,7 +25,7 @@ export default {
 </script>
 
 <style scoped>
-.body {
+.div-body {
   height: 100%;
   width: 100%;
   text-align: center;
@@ -37,5 +36,6 @@ export default {
   width: 100px;
   height: 100px;
   margin-top: 20%;
+  margin-bottom: 90rpx;
 }
 </style>

src/pages/home/takePhoto.vue

@@ -9,7 +9,7 @@
         @click="record"
       />
 
-      <van-uploader :max-count="1" @after-read="getImage">
+      <van-uploader :max-count="1" accept="image" @after-read="getImage">
         <a class="a-xc">相册</a>
       </van-uploader>
     </div>