dz-app/pages/ie/components/card/pretty-card.vue

<template>
    <view class="pretty-card">
        <view class="px-35 py-45">
            <uv-text :text="title" color="white" margin="-2px 0 20px 20px"/>
            <slot>
                <view class="fx-row fx-bet-cen text-primary text-xs font-[PingFang] font-thin">
                    <view style="max-width: 33vw" class="truncate">姓名:{{ userSnapshot.nickName }}</view>
                    <view>省份:{{ userSnapshot.provinceName }}</view>
                    <view>类别:{{ userSnapshot.examType }}</view>
                </view>
            </slot>
        </view>
    </view>
</template>

<script>
import {useInjectUserSnapshot} from "@/pages/ie/hooks/useUserSnapshotInjection";

export default {
    name: "pretty-card",
    props: {
        title: {
            type: String,
            default: '我的信息'
        }
    },
    setup() {
        const {userSnapshot} = useInjectUserSnapshot()
        return {
            userSnapshot
        }
    }
}
</script>

<style scoped>
.pretty-card {
    width: 100vw;
    height: 112px;

    background-image: url('@/static/ie/index/bg-card.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
</style>