45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<template>
|
|
<div class="skeleton-stats glass-card p-4 rounded-xl mb-4 border text-center">
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col-6 border-right">
|
|
<SkeletonBlock width="60px" height="10px" margin="0 auto 8px" borderRadius="3px" />
|
|
<SkeletonBlock width="100px" height="28px" margin="0 auto" borderRadius="6px" />
|
|
</div>
|
|
<div class="col-6">
|
|
<SkeletonBlock width="60px" height="10px" margin="0 auto 8px" borderRadius="3px" />
|
|
<SkeletonBlock width="130px" height="28px" margin="0 auto" borderRadius="6px" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-center gap-4 mt-4 pt-3 border-top-dashed">
|
|
<SkeletonBlock v-for="i in 4" :key="i" width="44px" height="44px" borderRadius="12px" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SkeletonBlock from './SkeletonBlock.vue';
|
|
</script>
|
|
|
|
<style scoped>
|
|
.skeleton-stats {
|
|
background: white;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.rounded-xl {
|
|
border-radius: 24px;
|
|
}
|
|
.border-right {
|
|
border-right: 1px solid #e9ecef;
|
|
}
|
|
.border-top-dashed {
|
|
border-top: 1px dashed #e9ecef;
|
|
}
|
|
:global(.dark-mode) .skeleton-stats {
|
|
background: #1f2228 !important;
|
|
}
|
|
:global(.dark-mode) .border-right,
|
|
:global(.dark-mode) .border-top-dashed {
|
|
border-color: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
</style>
|