85 lines
3.2 KiB
Vue
85 lines
3.2 KiB
Vue
<template>
|
||
<footer class="bg-primary text-white py-12">
|
||
<div class="container">
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||
<div class="flex space-x-4">
|
||
<a href="#" class="text-white/50 hover:text-white transition-colors">
|
||
<i class="fab fa-weixin"></i>
|
||
</a>
|
||
<a href="#" class="text-white/50 hover:text-white transition-colors">
|
||
<i class="fab fa-weibo"></i>
|
||
</a>
|
||
<a href="#" class="text-white/50 hover:text-white transition-colors">
|
||
<i class="fab fa-linkedin"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||
<ul class="space-y-2">
|
||
<li v-for="(product, index) in products" :key="index">
|
||
<NuxtLink :to="product.path" class="text-white/70 hover:text-white transition-colors">
|
||
{{ product.name }}
|
||
</NuxtLink>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||
<ul class="space-y-2">
|
||
<li v-for="(solution, index) in solutions" :key="index">
|
||
<NuxtLink :to="solution.path" class="text-white/70 hover:text-white transition-colors">
|
||
{{ solution.name }}
|
||
</NuxtLink>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-map-marker-alt text-white/70 mt-1 mr-3"></i>
|
||
<span class="text-white/70">北京市朝阳区某某大厦10层</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-phone text-white/70 mt-1 mr-3"></i>
|
||
<span class="text-white/70">400-123-4567</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-envelope text-white/70 mt-1 mr-3"></i>
|
||
<span class="text-white/70">contact@example.com</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-12 pt-8 border-t border-white/10 text-center">
|
||
<p class="text-white/50">© {{ new Date().getFullYear() }} 云服务专家. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const products = [
|
||
{ name: 'EC2 云服务器', path: '/products' },
|
||
{ name: 'S3 对象存储', path: '/products' },
|
||
{ name: 'RDS 数据库服务', path: '/products' },
|
||
{ name: 'Lambda 无服务器', path: '/products' },
|
||
{ name: '更多产品...', path: '/products' }
|
||
];
|
||
|
||
const solutions = [
|
||
{ name: '网站托管', path: '/solutions' },
|
||
{ name: '企业上云', path: '/solutions' },
|
||
{ name: '灾备方案', path: '/solutions' },
|
||
{ name: '大数据分析', path: '/solutions' },
|
||
{ name: '微服务架构', path: '/solutions' }
|
||
];
|
||
</script> |