ct/app/components/BottomNavigation.vue
2025-09-30 12:02:39 +08:00

118 lines
3.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>