<script setup lang="ts"></script>
<template>
  <el-skeleton direction="vertical" class="product" animated>
    <template #template>
      <el-skeleton-item class="item title" variant="text" />
      <el-skeleton-item v-for="index of 4" :key="index" class="item product-item" variant="text" />
    </template>
  </el-skeleton>
</template>
<style lang="scss" scoped>
.product {
  margin: 24px;

  .title {
    width: 50%;
    margin-bottom: 16px;
  }
  .product-item {
    width: calc(100% - 24px);
    height: 18px;
    margin-bottom: 24px;
  }
}
</style>
