<script lang="ts" setup>
import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
import NavBar from "@/components/nav/NavBar.vue";
import {removeMobileTopColor, setMobileTopColor} from "@/utils/function.ts";

const loadingElement = document.getElementById("loading") as HTMLDivElement;

onMounted(() => {
  emitter.on('startLoading', on => {
        if (on) {
          loadingElement.classList.remove('stop')
          removeMobileTopColor()
        } else {
          loadingElement.classList.add('stop')
          setMobileTopColor()
        }
      }
  )
})
</script>

<template>
  <div class="relative min-h-screen overflow-hidden bg-blue-50">
    <nav-bar/>
    <router-view/>
    <footer class="mt-8 items-end pt-48 pb-8 min-h-48 bg">
      <div class="container mx-auto px-4 md:px-0 xl:max-w-screen-xl">
        <div class="grid-cols-4 gird min-h-48">
          <div>
            <div class="flex items-center gap-4">
              <img alt="" class="h-20 w-20" src="@/assets/logo-c.png">
              <div class="text-4xl leading-7 text-gray-500" style="font-family: BaconyScript, sans-serif">
                <p>CantyOn_ion's</p>
                <p>Index</p>
              </div>
            </div>
            <p class="mt-20 leading-8 text-gray-500">&copy;2024 All rights reserved.</p>
          </div>
        </div>
        <div class="flex flex-col text-gray-500 md:flex-row">
          <a class="mr-4 hover:text-black" href="https://beian.miit.gov.cn/"
             target="_blank">苏ICP备2022016243号-1</a>
          <div>
            <img alt="" class="inline-block w-4 pb-1" src="@/assets/beian.png"/>
            <a class="hover:text-black" href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641/"
               target="_blank">苏公网安备32050602011641</a>
          </div>
        </div>
        <!--        <div class="flex justify-center gap-4">-->
        <!--          <a href="https://beian.miit.gov.cn/" target="_blank">-->
        <!--            <img alt="苏ICP备2022016243号-1"-->
        <!--                 src="https://img.shields.io/badge/%E8%8B%8FICP%E5%A4%87-2022016243%E5%8F%B7&#45;&#45;1-green?style=for-the-badge">-->
        <!--          </a>-->
        <!--          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641" rel="noreferrer" target="_blank">-->
        <!--            <img alt="苏公网安备32050602011641"-->
        <!--                 src="https://img.shields.io/badge/%E8%8B%8F%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87-32050602011641-blue?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAFQklEQVRYw%2B3Wa1BUdRjH8SOpMeg4WhZGpDIxiaaTeUFgWrxE4AVRQJGlRRAVIV1JkbgMgQLi5AVBQSVLSp0xlEAUKBEEFZCrCstll8UV2AV2YbmoGCrYv31%2BR95UL5pmmtamZ%2Bbz6rz5nvOc%2F5zDcX9jGLs%2FiTxuyvIlWYkRFeTHA2HVRFtzfhthTG5KuH96%2FvUgNlC4mMgyw1NJit%2FaAXLKazYje9xtIMZ%2FOZz50gW%2B9hcNkvoLEemEPbnrSP47QYwxQ5Ifv54RqzcXwFFvSyjaOhfavN8F7Y5ZcC%2FHH9JOB4LNa9Zw5YA76OZV8vIGMdZtSp7cDrtOnOavYiQhTAiPwi1AMtIQaqyngsxpBtw2GAGDKfaQmpUAa6xc4Vfp4UtEdzAMycsT9JQ1Tyctl%2F2eEkuTlYysF%2FrCUNxMqDEzgTqzSXBnpgnIHCzgjvEEuD52DLBr3rA1MAaWmNtB582wdtIljZ9G9D%2BIPU6aTxIPBjHCcXvg3CEh9K2fDLWvjIH6D6fwTIyheuwEqLUyhzLOALq8pkN%2BbgRw3HY4FBsMzxojZxP9DequLjAlQwVrbpIjhyIY4UYGQ%2FbuhdBqPxlk3Gion2IMDQIz3kJe%2FZS34I7uHkmD7VSQVgYDNyIAwsNCgfXGXoOBPjP9DKrOCAogA2etGTmTHAMcFwFZye7wS5QlVHGjoEw4A2qPCUBZ6AzNcQ5Q%2FYYRdO%2BYB1U3dsDwypLio4FJ3ECryIzWz6Cm3NgTRHN8HiPF6eHAGSbAdh8feFZkB7krzaHE9h2o85sDsiAbkIsXQMN%2Be2CtGyF0kzdwXCgU5%2B%2BD%2FouLQFV4OEU%2Fg2Q%2FiNuIPNaKkQflAWBqexxGjhLDVUcL6IwSQN3SGVChe6FJg9dckCx6D1QBliDZLIAxo7eA8eyv4KE0BJqTrHkZvnL9DJKn%2BTwmt0NsGGHZy2Dn3kQYfsQ53Hh4%2Fr4RNGz8AIpdzKEuaAF0RC2E57MmQgE3ATjuM%2FCPiANW7AqSfQJQ5vk362eQKmd3JrmXsoSRocpNIMnbB9zbceDIWUPmuHFQNMkISqa9DpUvNK6YDpW2s8DfwBK48WFQnhMCgzUBoLy0BrRVe5P0NWjPLdKUsJiR1tR1wGp8IeZwMgx%2FSrgRvjxuAziNcwLvyathLOcJHLflhRDYGRYFrNET2rJ5yvPLoas0tOj%2FoL8UpC4JHyTSU%2B6MNCS4gvKoAB5WiKG%2BMAQSg0WwLXQ%2FZJ3xhao0FxB5hYCbUwAEfhEF3Td8QP2dAOQnPwFlxgrolUVq9TPoaX%2BZB2nLc2Gk6awj1MU78HZZwJMid2Byb550JQwVO0NfxlJgdz14vWKeRAiK6DlQF28PLZdcoLNcBIO92bb6GTQ8Q%2F13RURT6tlH2gvXMlITLYD6uI%2Bgp2ozdF0VQXumM6ivCqGvahM8kPiDItkeGo8tB025GFQ3xFrSr06zI3%2F4yde7oN7m0sWk5eKWDqK5JWJQvAHac9ygq3Adr9gTNNc3QG85rzPfHe5%2F7wDtPwuhp%2FZz6CjyhaZzwi6ivfetHdH%2FoP77%2B3PJQOsuRnqkQdCa4wWqyx6gyecpL64GTaEX7ycXUJz4GJp1B4O0X%2FHg0Xp1tFV%2B8Ei1k6c5coHofxBrrzQinbKYo0SVJ%2Bwn6iurGHlY5gY911aDJnMFaHXXiDp9GQyvtKfUA9QFTtBZ7gPdit0tpFd9OpwwFmlA9D%2Fo9yNLDpxIKmI8PMnNSNtviCLVpYTITzrXEGWaq4qos0WgOPdpCenIF%2BeRrurjB4k0PXopYZG6gMg%2FD%2FgNBUxhAbSAmKMAAAAASUVORK5CYII%3D">-->
        <!--          </a>-->
        <!--        </div>-->
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background: url("@/assets/footer-bg.svg");
  background-size: 100% auto;
  background-color: white;
  background-repeat: no-repeat;
}
</style>
