2022-07-30 15:08:20 +00:00
|
|
|
<template>
|
|
|
|
|
<article class="skeleton">
|
2022-12-02 16:17:37 +00:00
|
|
|
<aside class="pulse" />
|
2022-07-30 15:08:20 +00:00
|
|
|
<main>
|
|
|
|
|
<div class="details">
|
2022-12-02 16:17:37 +00:00
|
|
|
<h3 class="pulse" />
|
|
|
|
|
<p class="pulse" />
|
2022-07-30 15:08:20 +00:00
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</article>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.skeleton {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
padding: 8px 12px 8px 8px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px solid var(--color-bg-secondary);
|
|
|
|
|
|
|
|
|
|
aside {
|
|
|
|
|
width: 48px;
|
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
|
|
|
|
.details {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h3, p {
|
|
|
|
|
width: 66%;
|
|
|
|
|
height: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 33%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
