feat: 收

pages/report/component/CustomHeader/CustomHeader.vue

@@ -6,10 +6,33 @@
       <div class="custom-pic-main">
         <img class="custom-pic-main-bg" src="/static/imgs/main.png" />
 
-        <view class="card-tags" v-if="userFaceInfo?.purpose || userFaceInfo?.question">
+        <div class="card-tags" v-if="userFaceInfo?.purpose || userFaceInfo?.question">
-          <view class="card-tag" v-if="userFaceInfo.purpose">{{ userFaceInfo.purpose }}</view>
+          <div
-          <view class="card-tag" v-if="userFaceInfo.question">{{ userFaceInfo.question  }}</view>
+            class="card-tag"
-        </view>
+            style="
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              max-width: 200rpx;
+              display: block;
+              line-height: 50rpx;
+            "
+            v-if="userFaceInfo.purpose">{{ userFaceInfo.purpose }}</div
+          >
+          <div
+            class="card-tag"
+            style="
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              max-width: 200rpx;
+              display: block;
+              line-height: 50rpx;
+            "
+            v-if="userFaceInfo.question"
+            >{{ userFaceInfo.question }}</div
+          >
+        </div>
 
         <div class="custom-pic-info">
           <img class="pic-border" src="/static/imgs/pic-border.png" />
@@ -55,25 +78,25 @@
         </div>
 
         <div class="user-info">
-          <div>{{userFaceInfo?.sex}}​｜{{ userFaceInfo?.birthday }}</div>
+          <div>{{ userFaceInfo?.sex }}​｜{{ userFaceInfo?.birthday }}</div>
-          <div>身高：{{ userFaceInfo.height || "-" }}cm 体重：{{ userFaceInfo.weight || "-" }}kg</div>
+          <div
+            >身高：{{ userFaceInfo.height || '-' }}cm 体重：{{ userFaceInfo.weight || '-' }}kg</div
+          >
         </div>
       </div>
     </div>
   </div>
 </template>
 
-
 <script setup>
-import { defineProps } from 'vue';
+  import { defineProps } from 'vue';
-
-const props = defineProps({
-  userFaceInfo: {
-    type: Object,
-    default: () => ({}),
-  },
-});
 
+  const props = defineProps({
+    userFaceInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
 </script>
 
 <style scoped lang="scss">
@@ -107,19 +130,20 @@ const props = defineProps({
           align-items: center;
           justify-content: center;
           flex-wrap: wrap;
+          gap: 20rpx;
 
           .card-tag {
             height: 50rpx;
+            line-height: 50rpx;
             padding-left: 26rpx;
             padding-right: 26rpx;
             background: rgba(239, 229, 219, 1);
             color: rgba(78, 78, 78, 1);
             font-size: 20rpx;
-            display: flex;
+            // display: flex;
-            align-items: center;
+            // align-items: center;
-            justify-content: center;
+            // justify-content: center;
             border-radius: 16rpx;
-            margin-right: 20rpx;
           }
         }