<template>
  <el-skeleton class="sk" animated>
    <template #template>
      <div class="sk__block" v-for="idx in 3" :key="idx">
        <el-skeleton-item variant="p" class="sk__title" />
        <el-skeleton-item variant="p" class="sk__text" />
        <el-skeleton-item variant="p" class="sk__text" />
      </div>
    </template>
  </el-skeleton>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.sk {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  &__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  &__title {
    width: 200px;
    height: 30px;
  }

  &__text {
    width: 100%;
    height: 21px;
  }
}

:deep(.el-skeleton__item) {
  --el-skeleton-color: #c9ccd0 !important;
  --el-skeleton-to-color: #c3c3c7 !important;
}
</style>