|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
- <div class="pa-3 main d-flex align-center flex-column justify-center">
|
|
|
+ <div class="main d-flex align-center flex-column">
|
|
|
<div class="text-center text-h3 text--indigo mb-5 title">检测结果</div>
|
|
|
<div color="#26c6da" class="d-flex justify-space-around box">
|
|
|
<v-card class="text-center pa-3 card" hover v-for="face in items" :key="face.name" width="500" @click="handlePutOn(face)">
|
|
|
<img class="faceType" :src="require(`@/assets/face/${face.name}.jpg`)" alt="">
|
|
|
- <div class="text-h5 text--indigo py-5">
|
|
|
+ <div class="text--indigo text">
|
|
|
{{ faceType[face.name]?.face }}
|
|
|
相似度 {{ face.similarity.toFixed(2) }}%
|
|
|
</div>
|
|
@@ -13,7 +13,7 @@
|
|
|
<img :src="item.img" width="100%">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="pa-3 d-flex align-center justify-center">
|
|
|
+ <div class="d-flex align-center justify-center">
|
|
|
<v-btn text color="primary">试戴体验</v-btn>
|
|
|
</div>
|
|
|
</v-card>
|
|
@@ -74,6 +74,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
font-size: 14px;
|
|
|
+ justify-content: space-around;
|
|
|
.content {
|
|
|
margin: 0 auto;
|
|
|
max-width: 600px;
|
|
@@ -101,6 +102,9 @@ export default {
|
|
|
.card {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+.text {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
@media screen and (max-width: 600px) {
|
|
|
.faceType {
|
|
|
width: 200px;
|