|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>公司网站</title>
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<script type="module" src="./v.js"></script>
|
|
|
|
|
<script type="module" src="./t.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
div[ref] {
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #999;
|
|
|
|
|
width: 10rem;
|
|
|
|
|
height: 10rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div[ref]::before {
|
|
|
|
|
content: 'dom组件';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fade-in {
|
|
|
|
|
animation: fadeIn 1s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body class="bg-gray-100 text-gray-800">
|
|
|
|
|
|
|
|
|
|
<div id='app'>
|
|
|
|
|
<!-- 导航栏 -->
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-lg z-50">
|
|
|
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href="#" class="text-xl font-bold text-gray-800">公司名称</a>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="hidden md:flex space-x-6">
|
|
|
|
|
<li><a href="#about" class="hover:text-blue-500 transition duration-300">关于我们</a></li>
|
|
|
|
|
<li><a href="#services" class="hover:text-blue-500 transition duration-300">服务</a></li>
|
|
|
|
|
<li><a href="#cases" class="hover:text-blue-500 transition duration-300">案例研究</a></li>
|
|
|
|
|
<li><a href="#testimonials" class="hover:text-blue-500 transition duration-300">客户评价</a></li>
|
|
|
|
|
<li><a href="#contact" class="hover:text-blue-500 transition duration-300">联系我们</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<button class="md:hidden focus:outline-none">
|
|
|
|
|
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
|
|
|
<path d="M4 6h16M4 12h16m-7 6h7"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- 首页 -->
|
|
|
|
|
<div id="home" class="relative h-screen flex items-center justify-center bg-cover bg-no-repeat fade-in"
|
|
|
|
|
style="background-image:url('https://picsum.photos/1600/900');">
|
|
|
|
|
<div class="absolute inset-0 bg-black opacity-50"></div>
|
|
|
|
|
<div class="relative text-center max-w-2xl mx-auto p-4">
|
|
|
|
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white mb-6">欢迎来到我们的公司</h1>
|
|
|
|
|
<p class="text-lg sm:text-xl leading-relaxed text-white">我们专注于提供高质量的服务和解决方案。</p>
|
|
|
|
|
<a href="#contact"
|
|
|
|
|
class="mt-8 inline-block px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-md text-white font-semibold transition duration-300">联系我们</a>
|
|
|
|
|
<div ref="./t2/ta.js"></div>
|
|
|
|
|
<div class="text-red-400" ref="./t2/input.js"></div>
|
|
|
|
|
<div id="terminal"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 关于我们 -->
|
|
|
|
|
<div id="about" class="py-20">
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
<div class="max-w-4xl mx-auto text-center fade-in">
|
|
|
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-6">关于我们</h2>
|
|
|
|
|
<p class="text-lg sm:text-xl leading-relaxed text-gray-600">我们是一家致力于提供优质服务和技术支持的公司。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
|
|
|
<div ref="t2/companyHistory" class="fade-in"></div>
|
|
|
|
|
<div class='abmem' ref="t2/teamMembers" class="fade-in"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 服务 -->
|
|
|
|
|
<div id="services" class="py-20 bg-gray-200">
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
<div class="max-w-4xl mx-auto text-center fade-in">
|
|
|
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-6">我们的服务</h2>
|
|
|
|
|
<p class="text-lg sm:text-xl leading-relaxed text-gray-600">我们提供一系列专业服务，满足不同客户的需求。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
|
|
|
<div ref="serviceOne" class="fade-in"></div>
|
|
|
|
|
<div ref="serviceTwo" class="fade-in"></div>
|
|
|
|
|
<div ref="serviceThree" class="fade-in"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 案例研究 -->
|
|
|
|
|
<div id="cases" class="py-20">
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
<div class="max-w-4xl mx-auto text-center fade-in">
|
|
|
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-6">案例研究</h2>
|
|
|
|
|
<p class="text-lg sm:text-xl leading-relaxed text-gray-600">查看我们过去成功的项目案例。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
|
|
|
|
<div ref="caseStudyOne" class="fade-in"></div>
|
|
|
|
|
<div ref="caseStudyTwo" class="fade-in"></div>
|
|
|
|
|
<div ref="caseStudyThree" class="fade-in"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 客户评价 -->
|
|
|
|
|
<div id="testimonials" class="py-20 bg-gray-200">
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
<div class="max-w-4xl mx-auto text-center fade-in">
|
|
|
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-6">客户评价</h2>
|
|
|
|
|
<p class="text-lg sm:text-xl leading-relaxed text-gray-600">听听我们的客户怎么说。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
|
|
|
<div ref="testimonialOne" class="fade-in"></div>
|
|
|
|
|
<div ref="testimonialTwo" class="fade-in"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 联系我们 -->
|
|
|
|
|
<div id="contact" class="py-20">
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
<div class="max-w-4xl mx-auto text-center fade-in">
|
|
|
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-6">联系我们</h2>
|
|
|
|
|
<p class="text-lg sm:text-xl leading-relaxed text-gray-600">如果您有任何问题或需要帮助，请随时与我们联系。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-12 flex justify-center">
|
|
|
|
|
<div ref="contactForm" class="w-full max-w-md fade-in"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 底部 -->
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8">
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
|
|
|
<div class="mb-4 md:mb-0">
|
|
|
|
|
<p>© 2023 公司名称. All rights reserved.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<ul class="flex space-x-6">
|
|
|
|
|
<li><a href="#" class="hover:text-gray-300 transition duration-300">隐私政策</a></li>
|
|
|
|
|
<li><a href="#" class="hover:text-gray-300 transition duration-300">条款条件</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
import v from './vyes.js'
|
|
|
|
|
// 添加滚动监听事件以激活导航栏高亮
|
|
|
|
|
document.addEventListener("scroll", function () {
|
|
|
|
|
const sections = ["home", "about", "services", "cases", "testimonials", "contact"];
|
|
|
|
|
let currentSection = "";
|
|
|
|
|
|
|
|
|
|
sections.forEach(section => {
|
|
|
|
|
const element = document.getElementById(section);
|
|
|
|
|
if (element.offsetTop <= window.scrollY + 100) {
|
|
|
|
|
currentSection = section;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
sections.forEach(section => {
|
|
|
|
|
const link = document.querySelector(`a[href="#${section}"]`);
|
|
|
|
|
if (link) {
|
|
|
|
|
link.classList.toggle("text-blue-500", section === currentSection);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
