制作官网website
This commit is contained in:
504
website/assets/css/style.css
Normal file
504
website/assets/css/style.css
Normal file
@@ -0,0 +1,504 @@
|
||||
/* 全局样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
padding: 1rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: 500;
|
||||
margin: 0 0.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: #007bff !important;
|
||||
}
|
||||
|
||||
/* 首页Banner */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('../images/hero-bg.jpg') center/cover no-repeat;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.hero-section .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* 数据统计 */
|
||||
.stats-section {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.stat-item h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 功能特性 */
|
||||
.features-section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
text-align: center;
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 15px;
|
||||
background: white;
|
||||
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-card h4 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 技术优势 */
|
||||
.technology-section {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
padding: 1.5rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.tech-item h4 {
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tech-item p {
|
||||
color: rgba(255,255,255,0.8);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tech-image img {
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 客户案例 */
|
||||
.cases-section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.case-card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.case-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.case-image {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card:hover .case-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.case-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.case-content h5 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.case-content p {
|
||||
color: #6c757d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 新闻动态 */
|
||||
.news-section {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.news-date {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.news-card h5 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.news-card p {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.news-link:hover {
|
||||
color: #764ba2;
|
||||
}
|
||||
|
||||
/* 联系我们 */
|
||||
.contact-section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.contact-item h5 {
|
||||
margin: 0;
|
||||
color: #2c3e50;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
background: white;
|
||||
padding: 2.5rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.contact-form h4 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-form .form-control {
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-form .form-control:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
.footer {
|
||||
background: #2c3e50;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.feature-card, .case-card, .news-card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动动画 */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 导航栏滚动效果 */
|
||||
.navbar-scrolled {
|
||||
background: rgba(44, 62, 80, 0.95) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 系统入口功能区 */
|
||||
.systems-section {
|
||||
padding: 5rem 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.system-card {
|
||||
background: white;
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.system-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.system-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.system-card h4 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.system-card p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.system-card .btn {
|
||||
border-width: 2px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.system-card .btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 响应式设计 - 系统入口 */
|
||||
@media (max-width: 768px) {
|
||||
.system-card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.system-card p {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 系统介绍页面专用样式 */
|
||||
.min-vh-60 {
|
||||
min-height: 60vh !important;
|
||||
}
|
||||
|
||||
.system-icon-large {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* 系统介绍页面响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.system-icon-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.min-vh-60 {
|
||||
min-height: 50vh !important;
|
||||
}
|
||||
}
|
||||
17
website/assets/images/placeholder.svg
Normal file
17
website/assets/images/placeholder.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#gradient)"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" dy=".3em"
|
||||
font-family="Arial, sans-serif" font-size="24" fill="white">
|
||||
宁夏智慧养殖监管平台
|
||||
</text>
|
||||
<text x="50%" y="60%" text-anchor="middle" dy=".3em"
|
||||
font-family="Arial, sans-serif" font-size="16" fill="rgba(255,255,255,0.8)">
|
||||
图片占位符 - 建议替换为实际图片
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 754 B |
21
website/assets/images/placeholder.txt
Normal file
21
website/assets/images/placeholder.txt
Normal file
@@ -0,0 +1,21 @@
|
||||
图片资源说明文件
|
||||
==================
|
||||
|
||||
此目录用于存放官网所需的图片资源。请将以下图片文件放置在此目录中：
|
||||
|
||||
1. hero-image.png - 首页Banner主图（推荐尺寸：800x600px）
|
||||
2. hero-bg.jpg - 首页背景图（推荐尺寸：1920x1080px）
|
||||
3. tech-architecture.png - 技术架构图（推荐尺寸：600x400px）
|
||||
4. case1.jpg - 客户案例1图片（推荐尺寸：400x300px）
|
||||
5. case2.jpg - 客户案例2图片（推荐尺寸：400x300px）
|
||||
6. case3.jpg - 客户案例3图片（推荐尺寸：400x300px）
|
||||
7. logo.png - 网站Logo（推荐尺寸：200x60px）
|
||||
8. favicon.ico - 网站图标（推荐尺寸：32x32px）
|
||||
|
||||
图片要求：
|
||||
- 格式：PNG/JPG/WebP
|
||||
- 质量：高清无压缩
|
||||
- 风格：现代、专业、农业相关
|
||||
- 颜色：与网站主题色（#667eea, #764ba2）协调
|
||||
|
||||
暂时可以使用占位图片或相关素材图片替代。
|
||||
260
website/assets/js/script.js
Normal file
260
website/assets/js/script.js
Normal file
@@ -0,0 +1,260 @@
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化导航栏滚动效果
|
||||
initNavbarScroll();
|
||||
|
||||
// 初始化滚动动画
|
||||
initScrollAnimation();
|
||||
|
||||
// 初始化表单验证
|
||||
initFormValidation();
|
||||
|
||||
// 初始化数据统计动画
|
||||
initStatsCounter();
|
||||
});
|
||||
|
||||
// 导航栏滚动效果
|
||||
function initNavbarScroll() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('navbar-scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('navbar-scrolled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动动画效果
|
||||
function initScrollAnimation() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate__animated', 'animate__fadeInUp');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察需要动画的元素
|
||||
const animatedElements = document.querySelectorAll('.feature-card, .case-card, .news-card, .tech-item');
|
||||
animatedElements.forEach(function(el) {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function initFormValidation() {
|
||||
const contactForm = document.querySelector('.contact-form form');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (validateForm(this)) {
|
||||
// 模拟表单提交
|
||||
showFormLoading();
|
||||
|
||||
setTimeout(function() {
|
||||
hideFormLoading();
|
||||
showFormSuccess();
|
||||
contactForm.reset();
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证函数
|
||||
function validateForm(form) {
|
||||
let isValid = true;
|
||||
const inputs = form.querySelectorAll('input, textarea');
|
||||
|
||||
inputs.forEach(function(input) {
|
||||
if (input.hasAttribute('required') && !input.value.trim()) {
|
||||
showInputError(input, '此字段为必填项');
|
||||
isValid = false;
|
||||
} else if (input.type === 'email' && !isValidEmail(input.value)) {
|
||||
showInputError(input, '请输入有效的邮箱地址');
|
||||
isValid = false;
|
||||
} else {
|
||||
clearInputError(input);
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// 邮箱验证
|
||||
function isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
// 显示输入错误
|
||||
function showInputError(input, message) {
|
||||
clearInputError(input);
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'invalid-feedback';
|
||||
errorDiv.textContent = message;
|
||||
|
||||
input.classList.add('is-invalid');
|
||||
input.parentNode.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 清除输入错误
|
||||
function clearInputError(input) {
|
||||
input.classList.remove('is-invalid');
|
||||
const errorDiv = input.parentNode.querySelector('.invalid-feedback');
|
||||
if (errorDiv) {
|
||||
errorDiv.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示表单加载状态
|
||||
function showFormLoading() {
|
||||
const submitBtn = document.querySelector('.contact-form button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="loading"></span> 发送中...';
|
||||
submitBtn.setAttribute('data-original-text', originalText);
|
||||
}
|
||||
|
||||
// 隐藏表单加载状态
|
||||
function hideFormLoading() {
|
||||
const submitBtn = document.querySelector('.contact-form button[type="submit"]');
|
||||
const originalText = submitBtn.getAttribute('data-original-text');
|
||||
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalText;
|
||||
}
|
||||
|
||||
// 显示表单成功消息
|
||||
function showFormSuccess() {
|
||||
// 创建成功消息提示
|
||||
const successAlert = document.createElement('div');
|
||||
successAlert.className = 'alert alert-success mt-3';
|
||||
successAlert.innerHTML = '\
|
||||
<i class="bi bi-check-circle-fill me-2"></i>\
|
||||
消息发送成功！我们会尽快回复您。\
|
||||
';
|
||||
|
||||
const form = document.querySelector('.contact-form form');
|
||||
form.appendChild(successAlert);
|
||||
|
||||
// 3秒后自动隐藏
|
||||
setTimeout(function() {
|
||||
successAlert.remove();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 数据统计计数器动画
|
||||
function initStatsCounter() {
|
||||
const statsSection = document.querySelector('.stats-section');
|
||||
const statNumbers = document.querySelectorAll('.stat-item h3');
|
||||
let hasAnimated = false;
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting && !hasAnimated) {
|
||||
hasAnimated = true;
|
||||
animateStats();
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
if (statsSection) {
|
||||
observer.observe(statsSection);
|
||||
}
|
||||
}
|
||||
|
||||
// 数字动画效果
|
||||
function animateStats() {
|
||||
const statNumbers = document.querySelectorAll('.stat-item h3');
|
||||
|
||||
statNumbers.forEach(function(stat) {
|
||||
const target = parseInt(stat.textContent.replace(/[^0-9]/g, ''));
|
||||
const duration = 2000; // 动画时长2秒
|
||||
const frameDuration = 1000 / 60; // 60fps
|
||||
const totalFrames = Math.round(duration / frameDuration);
|
||||
let frame = 0;
|
||||
|
||||
const originalText = stat.textContent;
|
||||
|
||||
const counter = setInterval(function() {
|
||||
frame++;
|
||||
|
||||
// 缓动函数
|
||||
const progress = frame / totalFrames;
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
const current = Math.round(target * easeOutQuart);
|
||||
|
||||
stat.textContent = originalText.replace(/\d+/g, current.toLocaleString());
|
||||
|
||||
if (frame === totalFrames) {
|
||||
clearInterval(counter);
|
||||
stat.textContent = originalText; // 恢复原始文本（包含符号）
|
||||
}
|
||||
}, frameDuration);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动到锚点
|
||||
function smoothScrollTo(targetId) {
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
const offsetTop = targetElement.offsetTop - 80; // 考虑固定导航栏的高度
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 导航链接点击事件
|
||||
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId !== '#') {
|
||||
smoothScrollTo(targetId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 响应式导航菜单关闭
|
||||
function closeMobileMenu() {
|
||||
const navbarToggler = document.querySelector('.navbar-toggler');
|
||||
const navbarCollapse = document.querySelector('.navbar-collapse');
|
||||
|
||||
if (navbarToggler && navbarCollapse.classList.contains('show')) {
|
||||
navbarToggler.click();
|
||||
}
|
||||
}
|
||||
|
||||
// 页面性能监控（可选）
|
||||
function monitorPerformance() {
|
||||
if ('performance' in window) {
|
||||
window.addEventListener('load', function() {
|
||||
const navigationTiming = performance.getEntriesByType('navigation')[0];
|
||||
console.log('页面加载时间:', navigationTiming.loadEventEnd - navigationTiming.navigationStart, 'ms');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('页面错误:', e.error);
|
||||
});
|
||||
|
||||
// 初始化性能监控
|
||||
monitorPerformance();
|
||||
Reference in New Issue
Block a user