com.kasite.client.uniapp.patient/pagesPatient/st1/business/outpatient/outpatientRefundNew/components/userInfo/userInfo.vue

<template>
  <view class="patient-panel">
    <image class="bg" src="../../static/images/card_bg.png" mode="scaleToFill" />
    <view class="panel-inner">
      <image class="avatar" src="../../static/images/avatar.png" mode="heightFix" />
      <view class="patient-info">
        <view class="info-main">
          <text class="name">{{ currentUser.memberName }}</text>
          <text class="phone">{{ currentUser.mobile }}</text>
        </view>
        <view class="info-sub">
          <text class="other">{{ currentUser.certType == '01' ? '身份证：' : '证件号' }}</text>
          <text class="other">{{ currentUser.certNum }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  currentUser: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped>
.patient-panel {
  position: relative;
  height: 170upx;
  overflow: hidden;
}

.patient-panel .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.patient-panel .avatar {
  height: 100%;
  z-index: 9;
}

.patient-panel .panel-inner {
  width: 100%;
  height: 100%;
  padding: 30upx 50upx;
  display: flex;
  align-items: stretch;
}

.patient-panel .panel-inner .patient-info {
  color: #ffffff;
  flex: 1 0 0;
  z-index: 9;
  padding: 10upx 30upx;
  display: flex;
  flex-direction: column;
}

.info-main {
  flex: 1 0 0;
}

.info-sub {
  font-size: 30upx;
}

.name {
  font-size: 36upx;
  font-weight: bold;
}

.phone {
  font-size: 28upx;
  margin-left: 20upx;
}

.other {
  font-size: 28upx;
}
</style>