<script setup lang="ts"></script>
<template>
  <el-skeleton direction="vertical" class="quick-access" animated>
    <template #template>
      <el-skeleton-item class="title" variant="text" />
      <el-skeleton-item
        v-for="index of 6"
        :key="index"
        class="item quick-access-item"
        variant="rect"
      />
    </template>
  </el-skeleton>
</template>
<style lang="scss" scoped>
.title {
  width: 136px;
  margin-bottom: 24px;
  display: block;
}
.quick-access-item {
  width: calc((100% - 48px - 35px) / 6);
  height: 56px;
  display: inline-block;
  margin-right: 16px;
  &:last-child {
    margin-right: 0px;
  }
}

.item {
  display: inline-block;
  background: var(--o-bg-color-dark);
}
</style>
