118 lines
3.9 KiB
Vue
118 lines
3.9 KiB
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:133-7697-0966">
|
||
客服电话：133-7697-0966
|
||
</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:133-7697-0966">
|
||
商务合作： 133-7697-0966
|
||
</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:564737095@qq.com">
|
||
反馈建议邮箱：564737095@qq.com
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 数据定义
|
||
const solutions = [
|
||
'共享单车',
|
||
'共享滑板车',
|
||
'共享陪护床',
|
||
'共享电动车',
|
||
'共享充电宝'
|
||
]
|
||
|
||
const industrySolutions = [
|
||
'智慧餐饮',
|
||
'智慧公寓',
|
||
'智能电动车'
|
||
]
|
||
|
||
const softwareDevelopment = [
|
||
'微信开发',
|
||
'APP开发',
|
||
'小程序开发'
|
||
]
|
||
|
||
const smartHardware = [
|
||
'物联网应用定制',
|
||
'物联网智能硬件',
|
||
'物联网IOT云平台'
|
||
]
|
||
</script> |