<script setup lang="ts"></script>
<template>
  <el-skeleton
    direction="vertical"
    class="monitor"
    style="--el-skeleton-circle-size: 100px"
    animated
  >
    <template #template>
      <el-skeleton-item class="title" style="display: block" variant="text" />
      <el-skeleton-item
        v-for="index of 5"
        :key="index"
        :class="{ 'monitor-gap': index !== 5 }"
        class="item monitor-item"
        variant="circle"
      />
    </template>
  </el-skeleton>
</template>
<style lang="scss" scoped>
.title {
  width: 136px;
  margin-bottom: 26px;
}
.monitor-item {
  display: inline-block;
  width: calc((81.2%) / 5);
  max-width: 230px;
  aspect-ratio: 1;
  height: auto;
}
.monitor-gap {
  margin-right: calc(4.7%);
}

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

.title {
  height: 30px;
}
</style>
