<script setup lang="ts">
import {useConfigInfo} from "~/composables/configState";
import Link from "~/components/AppFooter/Link/Link.vue";
const config = useConfigInfo();
</script>

<template>
  <!-- PC端 -->
  <div class="w-full sm:bg-black hidden-sm-and-down">
    <div class="xl:w-screen-xl flex flex-col justify-between m-auto">
      <!-- 友情链接 -->
      <Link />
      <!-- 版权信息 -->
      <div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex flex-row sm:justify-between justify-center items-center sm:py-3 text-center text-sm">
        <div class="text-gray-400 sm:gap-xs leading-7 flex flex-col sm:flex-row">
          <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
          <nuxt-link to="https://beian.miit.gov.cn/" class="visited:text-gray-400 hover:text-gray-200" target="_blank"> <span>备案号：{{ config?.icpNo }}</span></nuxt-link>
        </div>
        <div class="text-gray-400 sm:gap-xs text-sm leading-7 flex flex-col sm:flex-row">
          {{ config.tel }}
        </div>
        <div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-400 text-xs">
          Powered by <a rel="nofollow" href="https://site.gxbsnx.com" target="_blank" class="visited:text-gray-400 hover:text-gray-200 ml-1">云·企业官网</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="w-full sm:bg-black hidden-sm-and-up">
    <div class="xl:w-screen-xl flex flex-col justify-between m-auto">
      <!-- 友情链接 -->
      <Link />
      <!-- 版权信息 -->
      <div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex flex-col sm:justify-between justify-center items-center py-3 text-center text-sm">
        <div class="my-4">
          <el-avatar :src="config?.wxQrcode" shape="square" :size="100" />
        </div>
        <div class="text-gray-400 sm:gap-xs text-sm leading-7 flex flex-col sm:flex-row">
          {{ config.tel }}
        </div>
        <div class="text-gray-400 sm:gap-xs leading-7 flex flex-col sm:flex-row">
          <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
          <nuxt-link to="https://beian.miit.gov.cn/" target="_blank"> <span class="text-gray-400 visited:text-gray-400 hover:text-gray-200">备案号：{{ config?.icpNo }}</span></nuxt-link>
        </div>
        <div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-300 text-xs mt-5">
          Powered by <a rel="nofollow" href="https://site.gxbsnx.com" target="_blank" class="visited:text-gray-300 hover:text-gray-200 ml-1">云·企业官网</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
