ct/app/components/BottomNavigation.vue

<template>
  <footer class="bg-default py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">

        <!-- 解决方案 -->
        <div class="text-center md:text-left">
          <h3 class="text-lg font-semibold mb-4 text-default">解决方案</h3>
          <ul class="space-y-2">
            <li
                v-for="item in solutions" :key="item"
                class="text-muted hover:text-primary transition-colors cursor-pointer">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>

        <!-- 行业方案 -->
        <div class="text-center md:text-left">
          <h3 class="text-lg font-semibold mb-4 text-default">行业方案</h3>
          <ul class="space-y-2">
            <li
                v-for="item in industrySolutions" :key="item"
                class="text-muted hover:text-primary transition-colors cursor-pointer">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>

        <!-- 软件开发 -->
        <div class="text-center md:text-left">
          <h3 class="text-lg font-semibold mb-4 text-default">软件开发</h3>
          <ul class="space-y-2">
            <li
                v-for="item in softwareDevelopment" :key="item"
                class="text-muted hover:text-primary transition-colors cursor-pointer">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>

        <!-- 智能硬件 -->
        <div class="text-center md:text-left">
          <h3 class="text-lg font-semibold mb-4 text-default">智能硬件</h3>
          <ul class="space-y-2">
            <li
                v-for="item in smartHardware" :key="item"
                class="text-muted hover:text-primary transition-colors cursor-pointer">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>

        <!-- 联系我们 -->
        <div class="text-center md:text-left">
          <h3 class="text-lg font-semibold mb-4 text-default">联系我们</h3>
          <div class="space-y-3 text-muted">
            <div class="flex items-center justify-center md:justify-start space-x-2 group">
              <UIcon
                  class="w-4 h-4 text-muted group-hover:text-primary transition-colors"
                  name="i-heroicons-phone-20-solid"/>
              <a class="group-hover:text-primary transition-colors" href="tel:0755-85225123">
                客服电话：0755-85225123
              </a>
            </div>
            <div class="flex items-center justify-center md:justify-start space-x-2 group">
              <UIcon
                  class="w-4 h-4 text-muted group-hover:text-primary transition-colors"
                  name="i-heroicons-users-20-solid"/>
              <a class="group-hover:text-primary transition-colors" href="tel:18123752516">
                商务合作： 18123752516
              </a>
            </div>
            <div class="flex items-center justify-center md:justify-start space-x-2 group">
              <UIcon
                  class="w-4 h-4 text-muted group极hover:text-primary transition-colors"
                  name="i-heroicons-envelope-20-solid"/>
              <a class="group-hover:text-primary transition-colors" href="mailto:yuxi@yuxiit.com">
                反馈建议邮箱：yuxi@yuxiit.com
              </a>
            </div>
          </div>
        </div>
      </div>

    
    </div>
  </footer>
</template>

<script setup>
// 数据定义
const solutions = [
  '共享单车',
  '共享滑板车',
  '共享陪护床',
  '共享电动车',
  '共享充电宝'
]

const industrySolutions = [
  '智慧餐饮',
  '智慧公寓',
  '智能电动车'
]

const softwareDevelopment = [
  '微信开发',
  'APP开发',
  '小程序开发'
]

const smartHardware = [
  '物联网应用定制',
  '物联网智能硬件',
  '物联网IOT云平台'
]
</script>