样式调整

src/views/components/MFeature.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="pa-3 main d-flex align-center flex-column justify-center">
     <div class="text-center text-h5 text--indigo mb-5">检测结果</div>
-    <div class="d-flex">
-      <div class="text-center" v-for="face in items" :key="face.name">
+    <div color="#26c6da" class="d-flex justify-space-around">
+      <v-card class="text-center pa-3 mr-3" v-for="face in items" :key="face.name">
         <img class="faceType" :src="require(`@/assets/face/${face.name}.jpg`)" alt="">
         <div class="text-h5 text--indigo py-5">
-          {{ faceType[face.name] }}
+          {{ faceType[face.name]?.face }}
           相似度 {{ face.similarity.toFixed(2) }}%
         </div>
-      </div>
+        <div class="d-flex align-center justify-center">
+          <div v-for="item in faceType[face.name].items" :key="item.type" class="text--indigo pa-3">
+            <img :src="item.img" height="50">
+          </div>
+        </div>
+      </v-card>
     </div>
 
     <div class="d-flex mt-3">
@@ -39,7 +44,7 @@ export default {
   computed: {
     faceType () {
       return programType.reduce((res, item) => {
-        res[item.value] = item.face
+        res[item.value] = item
         return res
       }, {})
     }