<template>
  <div
    :style="{ background: 'url(' + bannerUrl + ') center center / cover no-repeat' }"
    class="m-banner animate__animated animate__fadeInDown"
  ></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getPageByName } from '@/api/page.js'

const route = useRoute()
const bannerUrl = ref('')

onMounted(async () => {
  bannerUrl.value = (await getPageByName(route.name)).data.bannerUrl
})
</script>

<style lang="scss" scoped>
.animate__fadeInDown {
  --animate-duration: 1.7s;
}
</style>
