<template>
    <div>
        <el-skeleton style="width: 240px" :animated="true">
            <template #template>
                <el-skeleton-item variant="image" style="width: 240px; height: 240px;border-radius:8px;" />
                <div style="padding: 14px">
                    <el-skeleton-item variant="p" style="width: 50%" />
                    <div style="
            display: flex;
            align-items: center;
            justify-items: space-between;
          ">
                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                        <el-skeleton-item variant="text" style="width: 30%" />
                    </div>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>
  
<script setup>

</script>
<style scoped>
img {
    object-fit: contain;
}

.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.al-item {
    align-items: center;
}

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

.s-w-100 {
    width: 100%;
}

.jus-bet {
    justify-content: space-between;
}

.mg-t-35 {
    margin-top: 35px;
}
</style>
  