meida_front/pages/report/component/Header/index.vue

<template>
  <view class="header">
    <!-- 头像和信息区 -->
    <view class="info-row">
      <view class="avatar-stack">
        <image
          class="avatar-main"
          :src="userFaceInfo?.avatar_img_url"
          mode="aspectFill"
        />
        <image
          class="avatar-shadow"
          :src="userFaceInfo?.avatar_img_url"
          mode="aspectFill"
        />
      </view>
    </view>
    <!-- 底部分栏信息 -->
    <view class="">
      <view class="info-main">
        <view class="info-basic">
          <text class="gender">{{ userFaceInfo.sex }}</text>
          <text class="birthday">| {{ userFaceInfo.birthday }}</text>
        </view>
        <view class="info-desc">
          {{ userFaceInfo.feature }}，
          <!-- {{
            userFaceInfo.Facial_three_dimensionality
          }}， -->
          {{ userFaceInfo.eyebrows }}，{{ userFaceInfo.ocular_form }}，
          {{ userFaceInfo.neck_length }}，
          {{ userFaceInfo.nasolabial_folds }}
        </view>
      </view>
      <view class="info-columns">
        <view class="col-item">
          <text class="col-label">身高</text>
          <text class="col-value">{{ userFaceInfo.height || "-" }}cm</text>
        </view>
        <view class="col-item">
          <text class="col-label">体重</text>
          <text class="col-value">{{ userFaceInfo.weight || "-" }}kg</text>
        </view>
        <view class="col-item">
          <text class="col-label">修饰目标</text>
          <text class="col-value">{{ userFaceInfo.purpose || "-" }}</text>
        </view>
        <view class="col-item">
          <text class="col-label">局部问题</text>
          <text class="col-value">{{ userFaceInfo.question || "-" }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, watch, ref } from "vue";
const props = defineProps({
  userFaceInfo: {
    type: Object,
    default: {},
  },
});

const userFaceInfo = ref({});

watch(
  () => props.userFaceInfo,
  (newVal) => {
    // console.log('newVal: xxxxxxxx', newVal);
    userFaceInfo.value = newVal;
  },
  { deep: true, immediate: true }
);
</script>

<style scoped>
.header {
  background: url("https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/h5headerbg.png")
    no-repeat center center;
  color: #fff;
  padding: 16px 20px 32px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.status-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: #333;
}
.status-bar-title {
  color: #aaa;
  font-size: 14px;
}
.status-bar-icons {
  display: flex;
  align-items: center;
}
.status-bar-time {
  font-size: 16px;
  color: #fff;
  margin-right: 16px;
}
.status-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-bar-icon {
  width: 16px;
  height: 16px;
  background: #666;
  border-radius: 3px;
}
.status-bar-icon.signal {
  background: linear-gradient(90deg, #fff 60%, #666 100%);
}
.status-bar-icon.wifi {
  background: linear-gradient(90deg, #fff 60%, #666 100%);
}
.status-bar-icon.battery {
  background: #fff;
  border-radius: 2px;
}
.header-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 0 12px;
}
.back-btn {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.back-arrow {
  color: #222;
  font-size: 22px;
  font-weight: bold;
}
.header-icons {
  display: flex;
  gap: 10px;
}
.icon-box {
  width: 24px;
  height: 24px;
  background: #444;
  border-radius: 6px;
}
.icon-box.square {
  border-radius: 4px;
}
.icon-box.dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  margin-top: 8px;
}
.icon-box.circle {
  border-radius: 50%;
  background: #fff;
  border: 2px solid #444;
}
.info-row {
  display: flex;
  align-items: flex-start;
  /* margin-top: 8px; */
  /* padding: 0 24px; */
}
.avatar-stack {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
}
.avatar-main {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* border: 2px solid #fff; */
  position: absolute;
  background-color: #fff;
  object-fit: cover;
  left: 0;
  top: 0;
  z-index: 9;
}
.avatar-shadow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: gray;
  /* opacity: 0.3; */
  object-fit: cover;
  position: absolute;
  left: 82%;
  z-index: 2;
  /* 关键代码：图片变黑白 */
  filter: grayscale(100%);
}

.info-main {
  margin-top: 8px;
}
.info-basic {
  font-size: 12px;
  margin-bottom: 6px;
}
.gender {
  margin-right: 8px;
}
.birthday {
  color: #bbb;
}
.info-desc {
  width: 336px;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
  font-family: Molengo;
  font-weight: 400;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* padding: 0 24px; */
  margin-top: 18px;
}
.col-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.col-label {
  color: #aaa;
  font-size: 13px;
  margin-bottom: 2px;
  font-family: Molengo;
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0px;
}
.col-value {
  color: #fff;
  font-size: 15px;
  font-family: Molengo;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0px;
  /* 超出隐藏并显示省略号 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 可选：限制最大宽度（防止 flex 布局拉伸） */
  max-width: 80px;
}
</style>