<template>
  <div class="app-container">
    <el-skeleton class="skeleton" :rows="1" animated>
      <template #template>
        <div class="item" style="height: 150px">
          <el-skeleton-item v-for="item in 5" :key="item" />
        </div>
        <div class="item" style="height: 320px">
          <el-skeleton-item style="width: 720px;" />
          <el-skeleton-item />
        </div>
        <div class="item" style="height: calc(100% - 150px - 320px - 40px)">
          <el-skeleton-item />
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
}

.skeleton {
  height: 100%;

  .item {
    display: flex;
    margin-bottom: 20px;
    flex: 1;

    .el-skeleton__item {
      height: 100%;
      margin-right: 20px;
    }

    .el-skeleton__item:last-child{
      margin: 0;
    }
  }
}
</style>
