67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
<template>
|
|
<div class="home-skeleton pb-5">
|
|
<!-- BalanceBox Skeleton -->
|
|
<div class="tf-container">
|
|
<SkeletonStats />
|
|
</div>
|
|
|
|
<!-- Grid Services Skeleton -->
|
|
<div class="mt-4 px-2">
|
|
<div class="tf-container">
|
|
<div class="row g-3 justify-content-center">
|
|
<div v-for="i in 12" :key="i" class="col-3 text-center mb-4">
|
|
<SkeletonBlock width="52px" height="52px" borderRadius="14px" margin="0 auto 10px" />
|
|
<SkeletonBlock width="40px" height="10px" margin="0 auto" borderRadius="2px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Announcements Skeleton -->
|
|
<div class="mt-4">
|
|
<div class="tf-container">
|
|
<SkeletonBlock width="100%" height="110px" borderRadius="20px" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Management Tools Skeleton -->
|
|
<div class="tf-container mt-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-3 px-1">
|
|
<SkeletonBlock width="160px" height="22px" borderRadius="4px" />
|
|
</div>
|
|
|
|
<div v-for="i in 5" :key="i" class="d-flex align-items-center mb-3 p-3 glass-card rounded-xl border border-light-5">
|
|
<SkeletonBlock width="44px" height="44px" borderRadius="12px" margin="0 16px 0 0" />
|
|
<div class="flex-grow-1">
|
|
<SkeletonBlock width="60%" height="16px" borderRadius="4px" />
|
|
</div>
|
|
<SkeletonBlock width="24px" height="24px" borderRadius="6px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SkeletonBlock from './SkeletonBlock.vue';
|
|
import SkeletonStats from './SkeletonStats.vue';
|
|
</script>
|
|
|
|
<style scoped>
|
|
.glass-card {
|
|
background: white;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.rounded-xl {
|
|
border-radius: 20px;
|
|
}
|
|
.border-light-5 {
|
|
border-color: rgba(0, 0, 0, 0.03) !important;
|
|
}
|
|
:global(.dark-mode) .glass-card {
|
|
background: #1f2228 !important;
|
|
}
|
|
:global(.dark-mode) .border-light-5 {
|
|
border-color: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
</style>
|