salix-front/src/components/ui/SkeletonSummary.vue

58 lines
1.9 KiB
Vue

<template>
<div class="header bg-primary q-pa-sm q-mb-md">
<q-skeleton type="rect" square />
</div>
<div class="row q-pa-md q-col-gutter-md q-mb-md">
<div class="col">
<q-skeleton type="rect" class="q-mb-md" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
</div>
<div class="col">
<q-skeleton type="rect" class="q-mb-md" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
</div>
<div class="col">
<q-skeleton type="rect" class="q-mb-md" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
</div>
<div class="col">
<q-skeleton type="rect" class="q-mb-md" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
</div>
<div class="col">
<q-skeleton type="rect" class="q-mb-md" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
<q-skeleton type="text" square />
</div>
</div>
</template>
<style lang="scss" scoped>
.row {
flex-wrap: wrap;
.col {
min-width: 250px;
}
}
</style>