125 lines
4.1 KiB
Vue
125 lines
4.1 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">
|
|||
|
|
全能查 APP，为您的安全保驾护航
|
|||
|
|
</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>
|