front-end/hdAppBack/src/admin/order/components/card-name.vue

<template>
	<div class="card-name-module">
        <div class="app-size-30 app-color-0">{{ info.receiveUserName }}</div>
        <div>{{ info.receiveMobile }}</div>
        <div>{{ info.receiveAddress }}</div>
        <div class="card-tag">
            <img :src="`${constant.imgUrl}/retail/order/tag.png`" alt="" mode="widthFix" >
        </div>
    </div>
</template>

<script>
export default {
	name: 'card-name-module',
	props: {
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			constant: this.$constant
		}
	}
}
</script>

<style lang="scss" scoped>
.card-name-module {
    position: relative;
    color: $fontColor3;
    box-shadow: 0 0 10px #ccc;
    border-radius: 4px;
    padding: 24px 0 24px 20px;
    & > div {
        margin-top: 14px;
        &:first-child {
            margin-top: 0;
        }
    }
    .card-tag {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        margin-top: 0;
    }
}
</style>