huijia-website/app/components/m-footer.vue

<!--
 * @Author: LiZhiWei
 * @Description: AppFooter
-->
<template>
  <footer class="bg-black text-white py-60px lt-sm:py-40px sm:pt-130px sm:pb-60px lt-sm:pt-88px">
    <div class="footer-container">
      <!-- 顶部区域：链接列表 + 联系方式 -->
      <div class="flex flex-col sm:flex-row justify-between items-start gap-60px sm:gap-0">
        <!-- 左侧链接列表 -->
        <div
          class="flex flex-wrap gap-40px sm:gap-80px w-full sm:w-auto justify-between sm:justify-start lt-sm:hidden"
        >
          <!-- 产品 -->
          <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 sm:flex-row gap-40px sm:gap-123px w-full sm:w-auto">
          <div class="text-left lt-sm:text-center">
            <div class="text-16px lh-22px text-white pf-sc-semibold">关注或联系我们</div>
            <div class="text-14px lh-22px text-#94a3b8 mt-16px">
              <span class="lt-sm:hidden">电话：400-600-7709</span>
              <i class="i-custom-mobile-phone lt-sm:h-58px lt-sm:w-552px"></i>
            </div>
            <div class="text-14px lh-22px text-#94a3b8 mt-16px">
              地址：海南省海口市美兰区西溪里商业街7号楼A127
            </div>
          </div>
          <div class="flex flex-col items-start sm:items-center lt-sm: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 sm:mt-80px pt-0 flex flex-col sm:flex-row justify-between items-center text-12px text-#64748b"
      >
        <!-- 左侧 Logo -->
        <div class="flex items-center gap-10px mb-20px sm:mb-0">
          <i class="i-custom-logo-white h-31px w-147px"></i>
        </div>

        <!-- 右侧 版权 -->
        <div class="flex flex-col py-8px gap-36px sm:flex-row items-center sm: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">
  .footer-container {
    @extend %landing-container;
  }
</style>