ads_web/src/components/cardComponents/ShowCard.vue

<template>
    <div style="height: 350px;">
        <el-row>
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                    <div style="display: flex; align-items: center;">
                        <div><img class="cardImg" :src="cardImage" alt="Card Image" style="height: 100px; border-radius: 50%;"/></div>
                        <div>
                            <div style="color:#909399;">{{ cardTitle }}</div>
                            <div style="font-weight: bold;font-size: large">{{ cardMiddle }}</div>
                            <div>
                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
                                <span style="color:orangered;">{{ `${cardBottomRight}%` }}</span>
                            </div>
                        </div>
                    </div>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>

const props = defineProps({
    cardData: {
        type: Object,
        required: true,
    },
})
const { cardImage, cardTitle, cardMiddle, cardBottom, cardBottomRight } = props.cardData

</script>

<style scoped>

</style>