<script setup lang="ts">

</script>

<template>
  <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>
  </footer>
</template>

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