health-front/pages_order/components/reportCard.vue

<template>
  <view class="card report-card__view">
    <view class="card-header">
      <image class="card-header-bg" src="@/pages_order/static/report/report-card-header-bg.png" mode="scaleToFill"></image>
      <view class="flex card-header-content">
        <view class="avatar">
          <image class="avatar-img" :src="userInfo.avatar" mode="scaleToFill"></image>
        </view>
        <view class="info">
          <view class="nickname">{{ data.realName || '' }}</view>
          <view class="desc">
            <text class="age">{{ data.age || '' }}</text>
            <text class="gender">{{ data.sex || '' }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="card-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
	import { mapState } from 'vuex'
  
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
		computed: {
      ...mapState(['userInfo']),
		},
  }
</script>

<style scoped lang="scss">
.card {
  width: 100%;
  background-image: linear-gradient(#F2EDFF, #FCFEFE);
  border: 8rpx solid #F9F7FF;
  border-bottom-left-radius: 64rpx;
  border-bottom-right-radius: 64rpx;
  box-sizing: border-box;
  position: relative;

  &-header {
    background-color: $uni-bg-color;
    width: calc(100% + 8rpx * 2);
    height: 240rpx;
    position: absolute;
    top: -8rpx;
    left: -8rpx;

    &-bg {
      width: 100%;
      height: 100%;
    }

    &-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0 32rpx;
      box-sizing: border-box;
      justify-content: flex-start;

      .avatar {
        width: 104rpx;
        height: 104rpx;
        border: 4rpx solid #FFFFFF;
        border-radius: 50%;
        overflow: hidden;

        &-img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        margin-left: 24rpx;

        .nickname {
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 40rpx;
          line-height: 1.1;
          color: #252545;
        }

        .desc {
          margin-top: 8rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          line-height: 1.2;
          color: #252545CC;

          .gender {
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  &-content {
    width: 100%;
    padding: 32rpx 24rpx 48rpx 24rpx;
    padding-top: 264rpx;
    box-sizing: border-box;
  }
}
</style>