133 lines
5.5 KiB
Vue
133 lines
5.5 KiB
Vue
<script setup lang="ts">
|
||
import { Phone } from 'lucide-vue-next';
|
||
|
||
const submenus = [
|
||
{ name: '首页', href: '/' },
|
||
{ name: '行业痛点', href: '#pain' },
|
||
{ name: '解决方案', href: '#solution' },
|
||
{ name: '核心产品', href: '#product' },
|
||
{ name: '精准养老', href: '#elderly' },
|
||
{ name: "合作伙伴", href: '#partner' },
|
||
{ name: '关于锦泽', href: '#about' },
|
||
]
|
||
|
||
// 获取当前 hash 值
|
||
const route = useRoute()
|
||
const currentHash = ref('')
|
||
|
||
// 监听 hash 变化
|
||
watch(() => route.hash, (newHash) => {
|
||
currentHash.value = newHash
|
||
}, { immediate: true })
|
||
|
||
// 检查链接是否激活
|
||
const isActive = (href: string) => {
|
||
return currentHash.value === href
|
||
}
|
||
|
||
const footerSections = [
|
||
{
|
||
title: '关于锦泽',
|
||
links: [
|
||
{ text: '关于我们', href: '/about' },
|
||
{ text: '企业文化', href: '/culture' },
|
||
{ text: '发展历程', href: '/history' },
|
||
{ text: '核心优势', href: '/advantage' },
|
||
],
|
||
},
|
||
{
|
||
title: '核心产品',
|
||
links: [
|
||
{ text: '智慧康养床', href: '/product/bed' },
|
||
{ text: '管家机器人', href: '/product/robot' },
|
||
{ text: '运营管理系统', href: '/product/system' },
|
||
{ text: '智慧监控平台', href: '/product/monitor' },
|
||
],
|
||
},
|
||
{
|
||
title: '硬件设施',
|
||
links: [
|
||
{ text: '康复设备', href: '/facility/rehab' },
|
||
{ text: '服务机器人', href: '/facility/robot' },
|
||
{ text: '采集传感器', href: '/facility/sensor' },
|
||
],
|
||
},
|
||
{
|
||
title: '市场应用',
|
||
links: [
|
||
{ text: '医疗机构合作', href: '/market/hospital' },
|
||
{ text: '科研机构合作', href: '/market/research' },
|
||
{ text: '企业合作伙伴', href: '/market/enterprise' },
|
||
],
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-screen h-screen overflow-x-hidden">
|
||
<header class="sticky top-0 z-99 md:block hidden">
|
||
<nav class="flex items-center justify-center bg-white py-[1rem]">
|
||
<NuxtLink to="/" class="flex items-center h-[2.25rem]">
|
||
<img src="/images/logoL.png" alt="logo" class="h-[2.25rem] object-cover" />
|
||
</NuxtLink>
|
||
<div class="flex items-center justify-center gap-6 text-[#9c9d9d] gap-[3.75rem] mx-[1.875rem]">
|
||
<NuxtLink
|
||
:to="item.href"
|
||
:class="[
|
||
'hover:text-black',
|
||
isActive(item.href) ? 'text-[#18bbb8] font-medium border-b border-[#18bbb8] border-solid' : ''
|
||
]"
|
||
:external="true"
|
||
v-for="item in submenus"
|
||
:key="item.href">
|
||
{{ item.name }}
|
||
</NuxtLink>
|
||
</div>
|
||
<div
|
||
class="rounded-full w-[10rem] h-[2.25rem] border border-[#18bbb8] border-solid flex items-center justify-center">
|
||
<Phone :size="20" color="#18bbb8" class="mr-2" />
|
||
<a href="tel:400-621-1003">400-621-1003</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
<slot />
|
||
<footer class="grid grid-cols-1 md:flex justify-items-center md:justify-items-start bg-[#1a222a] px-[2.5%] pt-[70px] pb-[20px] justify-between" id="about">
|
||
<img src="/images/logo.png" alt="logo" srcset="" class="h-[49px]">
|
||
<div class="max-w-6xl grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 flex flex-col items-start">
|
||
<section v-for="section in footerSections" :key="section.title" class="space-y-3 flex flex-col items-center">
|
||
<h2 class="text-lg font-semibold text-[#18bbb8]">{{ section.title }}</h2>
|
||
<ul class="space-y-2 text-[#9c9d9d] flex flex-col justify-center">
|
||
<li v-for="link in section.links" :key="link.href">
|
||
<a class="hover:text-blue-600">{{ link.text }}</a>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<section class="max-w-6xl flex flex-col items-center justify-center">
|
||
<h2 class="text-2xl font-semibold text-[#18bbb8]">联系我们</h2>
|
||
<div class="space-y-4 mt-4 flex flex-col items-center justify-center">
|
||
<!-- 二维码部分 -->
|
||
<div class="flex space-x-4">
|
||
<div class="w-24 h-24">
|
||
<img src="/images/qrcode1.png" alt="二维码 1" class="w-full h-full object-contain">
|
||
</div>
|
||
<div class="w-24 h-24">
|
||
<img src="/images/qecode2.png" alt="二维码 2" class="w-full h-full object-contain">
|
||
</div>
|
||
</div>
|
||
<!-- 联系信息 -->
|
||
<div class="text-[#9c9d9d] space-y-2">
|
||
<p><strong>电话：</strong>400-621-1003</p>
|
||
<p><strong>邮箱：</strong><a href="mailto:1534747238@QQ.COM"
|
||
class="hover:underline">1534747238@QQ.COM</a></p>
|
||
<p><strong>地址：</strong>上海杨浦区政学路88号5号楼1003室</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped></style> |