<template>
  <div>
    <SkeletonRect _class="oneSkeleton" />
    <div class="flex justify-between mt-2">
      <div v-for="n in 4" :key="n">
        <SkeletonRect _class="circleSkeleton" />
        <SkeletonRect _class="paraSkeleton" />
      </div>
    </div>
    <div class="flex justify-between mt-3 items-center">
      <SkeletonRect _class="circle2Skeleton" class="mr-2" />
      <div class="flex-grow mr-6">
        <SkeletonRect _class="paraSkeleton" />
        <SkeletonRect _class="paraSkeleton" />
      </div>
    </div>
    <div class="mt-3">
      <SkeletonRect _class="para2Skeleton" />
      <SkeletonRect _class="para2Skeleton" />
      <SkeletonRect _class="para2Skeleton" />
      <SkeletonRect _class="para2Skeleton" />
    </div>
    <SkeletonRect _class="twoSkeleton mt-8" />
  </div>
</template>

<script>
import Vue from "vue";
import SkeletonRect from "./Rect.vue";
export default Vue.extend({
  components: {
    SkeletonRect,
  },
});
</script>

<style lang="less">
.oneSkeleton {
  height: 191px;
}
.circleSkeleton {
  width: 64px !important;
  height: 64px !important;
  border-radius: 100% !important;
}
.circle2Skeleton {
  width: 48px !important;
  height: 48px !important;
  border-radius: 100% !important;
}
.paraSkeleton {
  height: 20px;
}
.para2Skeleton {
  height: 30px;
}
.twoSkeleton {
  height: 400px;
}
</style>