de-net/src/view/components/nft-card.vue

<template>
    <div class="show" :style="{ zoom: zoom }">
        <div class="card" :class="item.modelName">
            <div class="logo">
                <img v-if="item.logoImagePath" :src="item.logoImagePath" alt="" />
            </div>
            <div class="member">{{ item.projectName === '' ? 'xxxx' : item.projectName }}</div>
            <div class="number">{{ nftItemId === '' ? '0000' : nftItemId }}</div>
        </div>
        <img class="bg" :src="item.modelImagePath" />
    </div>
</template>

<script setup>
import { onBeforeMount, defineProps, ref } from 'vue'

const zoom = ref(1);

const props = defineProps({
    item: {
        type: Object,
        default: {},
    },
    nftItemId: {
        type: String,
        default: '0000',
    },
    width: {
        type: Number,
        default: 400
    }
})

onBeforeMount(() => {
    if (props.width) {
        zoom.value = props.width / 400
    }
})
</script>

<style lang='scss' scoped>
.show {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 400px;
    .card {
        position: absolute;
        left: 53px;
        top: 103px;
        width: 294px;
        height: 186px;
        .logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
            }
        }
        .member {
            position: absolute;
            top: 11px;
            left: 11px;
            width: 228px;
            font-size: 12px;
            text-align: left;
            font-weight: 800;
            line-height: 13px;
        }
        .number {
            position: absolute;
            top: 11px;
            right: 10px;
            font-size: 12px;
            font-weight: 800;
            line-height: 13px;
            letter-spacing: 1px;
        }
        &.s1 {
            .member, .number {
                color: #ffffff;
            }
        }
        &.s2 {
            .member, .number {
                color: #4AC3E1;
            }
        }
        &.s3 {
            .member, .number {
                color: #606C94;
            }
        }
        &.s4 {
            .member, .number {
                color: #504215;
            }
        }
    }
    .bg {
        width: 100%;
        height: 100%;
    }
}
</style>