<template>
  <div :class="['d-flex', 'align-center', 'flex-column', 'white-bgc', 'py-5', {'elevation-1': elevation}]" style="border-radius: 10px;">
    <v-img :width="width" :height="height" cover src="../../assets/noData.png"></v-img>
    <div class="message">{{ message }}</div>
  </div>
</template>

<script setup>
defineOptions({ name: 'empty-page'})
defineProps({
  width: {
    type: [String, Number],
    default: 400
  },
  height: {
    type: [String, Number],
    default: 250
  },
  message: {
    type: String,
    default: '暂无数据'
  },
  elevation: {
    type: Boolean,
    default: true
  }
})
</script>

<style scoped lang="scss">
.message {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-999);
  line-height: 20px;
}
</style>
