huijia-website/app/components/Footer.vue

<!--
 * @Author: LiZhiWei
 * @Description: AppFooter
-->
<template>
  <footer class="bg-black text-white py-60px px-20px lg:px-60px xl:pt-130px xl:pb-60px xl:px-240px">
    <div class="landing-container">
      <!-- 顶部区域：链接列表 + 联系方式 -->
      <div class="flex flex-col xl:flex-row justify-between items-start gap-60px xl:gap-0">
        <!-- 左侧链接列表 -->
        <div
          class="flex flex-wrap gap-40px lg:gap-80px w-full xl:w-auto justify-between xl:justify-start"
        >
          <!-- 产品 -->
          <div class="text-left">
            <div class="mb-16px text-16px text-white pf-sc-semibold">产品</div>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              绘管家物业云平台
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              绘服务居民平台
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              智能硬件物联
            </NuxtLink>
          </div>

          <!-- 解决方案 -->
          <div class="text-left">
            <div class="mb-16px text-16px text-white pf-sc-semibold">解决方案</div>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              智慧收费系统
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              综合工单调度
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              移动巡检巡更
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              智慧车场管理
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              数据决策中心
            </NuxtLink>
          </div>

          <!-- 关于绘家 -->
          <div class="text-left">
            <div class="mb-16px text-16px text-white pf-sc-semibold">关于绘家</div>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              公司简介
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              客户案例
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              知识产权
            </NuxtLink>
            <NuxtLink
              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
              to="#"
            >
              加入我们
            </NuxtLink>
          </div>
        </div>

        <!-- 右侧联系方式 -->
        <div class="flex flex-col lg:flex-row gap-40px xl:gap-123px w-full xl:w-auto">
          <div class="text-left">
            <div class="text-16px lh-22px text-white pf-sc-semibold">关注或联系我们</div>
            <div class="text-14px lh-22px text-#94a3b8 mt-16px">电话：400-600-7709</div>
            <div class="text-14px lh-22px text-#94a3b8 mt-16px">
              地址：海南省海口市美兰区西溪里商业街7号楼A127
            </div>
          </div>
          <div class="flex flex-col items-start lg:items-center">
            <i class="i-custom-qrcode wh-136px"></i>
            <div class="mt-12px text-16px text-#white lh-22px pf-sc-regular">扫一扫关注我们</div>
          </div>
        </div>
      </div>

      <!-- 底部区域：Logo + 版权 -->
      <div
        class="mt-40px lg:mt-80px pt-0 flex flex-col md:flex-row justify-between items-center text-12px text-#64748b"
      >
        <!-- 左侧 Logo -->
        <div class="flex items-center gap-10px mb-20px md:mb-0">
          <i class="i-custom-logo-white h-31px w-147px"></i>
        </div>

        <!-- 右侧 版权 -->
        <div class="flex flex-col py-8px gap-36px md:flex-row items-center md:gap-20px">
          <span>© 2024 海南智慧城科技有限公司版权所有</span>
          <a
            href="https://beian.miit.gov.cn/"
            target="_blank"
            class="flex items-center gap-4px hover:text-white transition-colors"
          >
            <div
              class="w-14px h-14px bg-contain bg-no-repeat bg-center"
              style="
                background-image: url('https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png');
              "
            ></div>
            琼ICP备2021000000号
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>