<script setup lang="ts"></script>
<template>
  <el-skeleton direction="vertical" class="product" animated>
    <template #template>
      <div class="resource">
        <el-skeleton-item class="item title" variant="text" />
        <el-skeleton-item
          v-for="index of 6"
          :key="index"
          class="item resource-item"
          variant="rect"
        />
      </div>
    </template>
  </el-skeleton>
</template>
<style lang="scss" scoped>
.product {
  .title {
    width: 50%;
    margin-bottom: 16px;
    display: block;
  }

  .resource {
    .resource-item {
      display: inline-block;
      width: calc((100% - 37px * 7) / 6);
      height: 104px;
      margin-right: 37px;
    }
  }
}
</style>
