<template>
  <div class="bk-skeleon">
    <div class='circle' v-if="type === 'circle'" :style="{
      width: circleSize,
      height: circleSize,
    }"></div>
    <div class='title-content' v-if="type === 'title-content'" :style="{
      width
    }"></div>
    <div class='normal-content' v-if="type === 'normal-content'" :style="{
      width
    }"></div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'normal-content'
    },
    circleSize: {
      type: 'String',
      default: '64rpx'
    },
    width: {
      type: String,
      default: '60vw'
    }
  },
  data: () => {
    return {}
  },
  mounted () {},
  methods: {
  },
  computed: {}
}
</script>
<style scoped>
.circle {
  border-radius: 50%;
  background-color: #f2f3f5;
  animation: blink 1.2s ease-in-out infinite;
  display: inline-block;
}
.title-content {
  height: 32px;
  background-color: #f2f3f5;
  margin-bottom: 40px;
  display: inline-block;
  animation: blink 1.2s ease-in-out infinite;
}
.normal-content {
  height: 32px;
  background-color: #f2f3f5;
  margin-bottom: 24px;
  display: inline-block;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>

