<template>
  <div class="skeleton">
    <div class="skeleton__body">
      <div class="skeleton__base">
        <cr-row>
          <cr-col span="5" style="height: 27px;margin-bottom: 10px" />
        </cr-row>
        <cr-row>
          <cr-col span="24" />
        </cr-row>
        <cr-row>
          <cr-col span="13" style="margin-bottom: 16px" />
        </cr-row>
        <cr-row type="flex" justify="space-around">
          <cr-col span="4" style="height: 16px" />
          <cr-col span="4" style="height: 16px" />
        </cr-row>
      </div>
      <div class="skeleton__base">
        <cr-row>
          <cr-col span="2" style="height: 16px;margin-right: 12px;margin-bottom: 36px" />
          <cr-col span="10" style="height: 16px;" />
        </cr-row>
        <cr-row>
          <cr-col span="2" style="height: 16px;margin-right: 12px" />
          <cr-col span="12" style="height: 16px;" />
        </cr-row>
      </div>
      <div class="skeleton__base">
        <cr-row>
          <cr-col span="5" style="margin-bottom: 16px" />
        </cr-row>
        <cr-row>
          <cr-col
            span="2"
            style="width: 30px;height: 30px;border-radius: 30px;margin-right: 8px;margin-bottom: 14px"
          />
          <cr-col span="20" style="background-color:#fff;">
            <cr-row>
              <cr-col span="8" style="height: 12px;margin-bottom: 6px" />
            </cr-row>
            <cr-row>
              <cr-col span="5" style="height: 9px;" />
            </cr-row>
          </cr-col>
        </cr-row>
        <cr-row>
          <cr-col span="23" style="margin-bottom: 10px" />
        </cr-row>
        <cr-row>
          <cr-col span="18" style="margin-bottom: 10px" />
        </cr-row>
        <cr-row>
          <cr-col span="8" style="width: 80px;height: 80px;margin-bottom: 14px" />
        </cr-row>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from '../store';
export default {
  name: 'Skeleton',
  computed: {
    ...mapState(['query'])
  }
};
</script>
<style lang="less" scoped>
.card-base {
  background-color: @white;
  border-radius: @border-radius-md;
  margin-bottom: @padding-sm;
  padding: @padding-sm;
}
.cr-col {
  background-color: #f7f8fa;
  height: 21px;
  margin-bottom: @padding-unit;
  border-radius: 4px;
}
.skeleton {
  position: relative;
  z-index: 999;
  // top: 0;
  // left: 0;
  // right: 0;
  // bottom: 0;
  height: 100%;
  width: 100%;
  background-color: #f7f8fa;
  &__body {
    padding: @padding-xs;
  }
  &__base {
    .card-base;
  }
}
</style>
