39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<template>
|
|
<div class="skeleton-card glass-card p-4 rounded-xl mb-4 text-start">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<SkeletonAvatar size="56px" margin="0 16px 0 0" />
|
|
<div class="flex-grow-1">
|
|
<SkeletonBlock width="140px" height="20px" margin="0 0 8px 0" borderRadius="6px" />
|
|
<SkeletonBlock width="80px" height="14px" borderRadius="4px" />
|
|
</div>
|
|
</div>
|
|
<div class="divider border-bottom border-light opacity-10 mb-3"></div>
|
|
<SkeletonBlock width="100%" height="12px" margin="0 0 8px 0" borderRadius="4px" />
|
|
<SkeletonBlock width="100%" height="12px" margin="0 0 8px 0" borderRadius="4px" />
|
|
<SkeletonBlock width="60%" height="12px" borderRadius="4px" />
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-4 pt-2">
|
|
<SkeletonBlock width="100px" height="10px" borderRadius="4px" />
|
|
<SkeletonBlock width="90px" height="36px" borderRadius="18px" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SkeletonBlock from './SkeletonBlock.vue';
|
|
import SkeletonAvatar from './SkeletonAvatar.vue';
|
|
</script>
|
|
|
|
<style scoped>
|
|
.rounded-xl {
|
|
border-radius: 24px;
|
|
}
|
|
.glass-card {
|
|
background: white;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
:global(.dark-mode) .glass-card {
|
|
background: #1f2228 !important;
|
|
}
|
|
</style>
|