<template>
  <div>
    <div class="md:hidden bg-footerBg w-full pt-12">
      <div class="mx-auto pb-5">
        <div class="justify-between flex flex-row w-8/12 mx-auto">
          <div class="w-6/12">
            <div class="flex flex-col">
              <span :class="styleClass.footerMainFontMobile">支持</span>
              <span :class="styleClass.footerSecondFontMobile">企业内网部署</span>
              <span :class="styleClass.footerSecondFontMobile">联盟链部署</span>
              <span :class="styleClass.footerSecondFontMobile">私链部署</span>
            </div>
            <div class="flex flex-col">
              <span :class="styleClass.footerMainFontMobile">帮助与支持</span>
              <span :class="styleClass.footerSecondFontMobile">帮助中心</span>
              <span :class="styleClass.footerSecondFontMobile">服务协议</span>
              <span :class="styleClass.footerSecondFontMobile">隐私协议</span>
            </div>
          </div>

          <div class=" w-6/12 pr-3">
            <div class="flex flex-col">
              <span :class="styleClass.footerMainFontMobile">联系我们</span>
              <span :class="styleClass.footerSecondFontMobile">关于我们</span>
              <span :class="styleClass.footerSecondFontMobile">问题反馈</span>
            </div>
            <div class=" flex flex-col">
              <span :class="styleClass.footerSecondFontMobile">咨询电话</span>
              <span :class="styleClass.footerMainFontMobile">0571-8167-1366</span>
              <span :class="styleClass.footerSecondFontMobile">客服二维码</span>
              <img src="@/assets/serviceQr.png" class="w-16" />
            </div>
          </div>
        </div>
      </div>
      <div class="h-px bg-footerBorder"></div>
      <div class="text-xs text-gray-400 text-center py-3">
        Copyright © 2021 杭州库链科技有限公司
        <br />浙ICP备17050749号-5
      </div>
    </div>

    <div class="hidden md:block bg-footerBg w-full pt-12">
      <div class="w-bodySet mx-auto pb-5">
        <div class="w-8/12 flex flex-row mx-auto justify-between">
          <div class="flex flex-col">
            <span :class="styleClass.footerMainFont">支持</span>
            <span :class="styleClass.footerSecondFont">企业内网部署</span>
            <span :class="styleClass.footerSecondFont">联盟链部署</span>
            <span :class="styleClass.footerSecondFont">私链部署</span>
          </div>
          <div class="flex flex-col">
            <span :class="styleClass.footerMainFont">帮助与支持</span>
            <span :class="styleClass.footerSecondFont">帮助中心</span>
            <span :class="styleClass.footerSecondFont">服务协议</span>
            <span :class="styleClass.footerSecondFont">隐私协议</span>
          </div>
          <div class="flex flex-col">
            <span :class="styleClass.footerMainFont">联系我们</span>
            <span :class="styleClass.footerSecondFont">关于我们</span>
            <span :class="styleClass.footerSecondFont">问题反馈</span>
          </div>
          <div class="flex flex-col pl-16">
            <span :class="styleClass.footerSecondFont">咨询电话</span>
            <span :class="styleClass.footerMainFont">0571-8167-1366</span>
            <span :class="styleClass.footerSecondFont">客服二维码</span>
            <img src="@/assets/serviceQr.png" class="w-14" />
          </div>
        </div>
      </div>
      <div class="h-px bg-footerBorder"></div>
      <div
        class="text-xs text-gray-400 text-center py-3"
      >Copyright © 2021 杭州库链科技有限公司 浙ICP备17050749号-5</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import styleClass from '@/assets/style/style.module.css'
</script>