103 lines
3.7 KiB
Vue
103 lines
3.7 KiB
Vue
<template>
|
||
<div class="font-sans text-gray-800">
|
||
<!-- 头部导航 -->
|
||
<header class="flex justify-between items-center bg-blue-100 p-4 border-b border-blue-200">
|
||
<div class="text-2xl font-bold text-blue-700">全能查 APP</div>
|
||
<button
|
||
class="lg:hidden text-blue-700 text-2xl focus:outline-none transition-transform transform hover:scale-110"
|
||
@click="toggleMenu">
|
||
<span v-if="!isMenuOpen">☰</span>
|
||
<span v-else>✕</span>
|
||
</button>
|
||
<nav :class="`lg:flex lg:items-center lg:gap-6 ${isMenuOpen
|
||
? 'flex flex-col items-end absolute top-16 right-0 bg-blue-100 w-full shadow-md py-4 px-6'
|
||
: 'hidden'
|
||
}`">
|
||
<a href="#support" class="text-blue-700 hover:text-blue-500 transition-colors"
|
||
@click="toggleMenu">联系我们</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- 横幅 -->
|
||
<section class="text-center py-16 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800">
|
||
<h1 class="text-4xl lg:text-5xl font-bold mb-4 animate-fade-in">
|
||
防范风险，从全能查开始
|
||
</h1>
|
||
<p class="text-lg lg:text-xl mb-6 animate-fade-in delay-200">
|
||
全能查，为您的安全保驾护航
|
||
</p>
|
||
</section>
|
||
|
||
<!-- APP 预览 -->
|
||
<section id="features" class="py-16 bg-blue-50 text-center">
|
||
<h2 class="text-3xl font-bold text-blue-700 mb-6">APP 预览</h2>
|
||
<div class="flex flex-wrap justify-center gap-6">
|
||
<img class="shadow-lg rounded-lg transition-transform transform hover:scale-105 h-96 object-contain"
|
||
src="/image/app_1.jpg" alt="APP preview" />
|
||
<img class="shadow-lg rounded-lg transition-transform transform hover:scale-105 h-96 object-contain"
|
||
src="/image/app_2.jpg" alt="APP preview" />
|
||
<img class="shadow-lg rounded-lg transition-transform transform hover:scale-105 h-96 object-contain"
|
||
src="/image/app_3.jpg" alt="APP preview" />
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术支持 -->
|
||
<section id="support" class="py-16 bg-blue-100 text-center">
|
||
<h2 class="text-3xl font-bold text-blue-700 mb-4">技术支持</h2>
|
||
<p class="text-lg text-blue-800 mb-2">
|
||
如需帮助，请通过以下邮箱联系我们：
|
||
</p>
|
||
<p class="text-blue-700 underline hover:text-blue-500 transition-colors">
|
||
<a href="mailto:admin@iieeii.com">admin@iieeii.com</a>
|
||
</p>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-blue-200 text-gray-700 text-center py-4">
|
||
<div class="flex items-center justify-center gap-2">
|
||
<img src="https://qcloudimg.tencent-cloud.cn/raw/eed02831a0e201b8d794c8282c40cf2e.png" alt="网安 icon"
|
||
class="w-6 h-6" />
|
||
<p class="text-sm">
|
||
琼公网安备 46010002000443 号 | 琼ICP备 2024038584 号-2
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
|
||
const isMenuOpen = ref(false);
|
||
|
||
function toggleMenu() {
|
||
isMenuOpen.value = !isMenuOpen.value;
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@keyframes fade-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-fade-in {
|
||
animation: fade-in 1s ease-out;
|
||
}
|
||
|
||
.animate-fade-in.delay-200 {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.animate-fade-in.delay-400 {
|
||
animation-delay: 0.4s;
|
||
}
|
||
</style>
|