diff --git a/website/assets/css/style.css b/website/assets/css/style.css index 7f44efe..f835093 100644 --- a/website/assets/css/style.css +++ b/website/assets/css/style.css @@ -285,6 +285,48 @@ body { padding: 5rem 0; } +/* 百度地图样式 */ +#baidu-map-container { + border: 2px solid #e9ecef; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +#baidu-map-container:hover { + border-color: #667eea; + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2); +} + +/* 地图加载状态样式 */ +.map-loading { + background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), + linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #f8f9fa 75%), + linear-gradient(-45deg, transparent 75%, #f8f9fa 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; + animation: mapLoading 1s linear infinite; +} + +@keyframes mapLoading { + 0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } + 100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; } +} + +/* 地图控件样式优化 */ +.BMap_cpyCtrl { + display: none !important; +} + +/* 响应式地图 */ +@media (max-width: 768px) { + #baidu-map-container { + height: 250px !important; + margin-bottom: 2rem; + } +} + .contact-info { margin-bottom: 2rem; } @@ -406,6 +448,163 @@ html { 100% { transform: rotate(360deg); } } +/* 页面加载动画 */ +.page-loader { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + transition: opacity 0.5s ease-out; +} + +.page-loader.fade-out { + opacity: 0; + pointer-events: none; +} + +.loader-content { + text-align: center; + color: white; +} + +.spinner { + width: 60px; + height: 60px; + border: 4px solid rgba(255, 255, 255, 0.3); + border-top: 4px solid white; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20px; +} + +.loader-text { + font-size: 18px; + font-weight: 500; + margin-bottom: 10px; +} + +.loader-subtitle { + font-size: 14px; + opacity: 0.8; +} + +/* 性能优化 - 图片懒加载 */ +.lazy-image { + opacity: 0; + transition: opacity 0.3s ease-in-out; +} + +.lazy-image.loaded { + opacity: 1; +} + +/* 按钮悬停效果优化 */ +.btn { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateZ(0); +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +/* 卡片悬停效果优化 */ +.card, .feature-card, .download-card { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateZ(0); +} + +.card:hover, .feature-card:hover, .download-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); +} + +/* 文字渐入动画 */ +.fade-in-up { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease-out; +} + +.fade-in-up.animate { + opacity: 1; + transform: translateY(0); +} + +/* 进度条动画 */ +.progress-bar { + transition: width 1.5s ease-in-out; +} + +/* 数字计数动画 */ +.counter { + font-weight: bold; + color: #667eea; +} + +/* 表单提交状态 */ +.form-submitting { + pointer-events: none; + opacity: 0.7; +} + +.form-submitting .btn { + cursor: not-allowed; +} + +/* 通知样式优化 */ +.alert { + border: none; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.alert-success { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +/* 骨架屏加载效果 */ +.skeleton { + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: loading 1.5s infinite; +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +/* 图片加载优化 */ +img { + max-width: 100%; + height: auto; + loading: lazy; +} + +/* 减少重绘重排 */ +* { + box-sizing: border-box; +} + +/* GPU加速 */ +.gpu-accelerated { + transform: translateZ(0); + will-change: transform; +} + /* 系统入口功能区 */ .systems-section { padding: 5rem 0; diff --git a/website/assets/images/case1.jpg b/website/assets/images/case1.jpg new file mode 100644 index 0000000..e670b72 Binary files /dev/null and b/website/assets/images/case1.jpg differ diff --git a/website/assets/images/case1.svg b/website/assets/images/case1.svg new file mode 100644 index 0000000..fb1ee26 --- /dev/null +++ b/website/assets/images/case1.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 监控中心 + 实时数据 + + + + + + + + + + + + + + + + + ID + + + ID + + + + + + + + + + + + + + + + 智能养殖监控系统 + \ No newline at end of file diff --git a/website/assets/images/case2.jpg b/website/assets/images/case2.jpg new file mode 100644 index 0000000..b360b0e Binary files /dev/null and b/website/assets/images/case2.jpg differ diff --git a/website/assets/images/case2.svg b/website/assets/images/case2.svg new file mode 100644 index 0000000..e35ad80 --- /dev/null +++ b/website/assets/images/case2.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + 养殖数据趋势分析 + + + + + + + + + + + + + + + + + + + + 产量 + + 成本 + + + + + 养殖结构分布 + + + + + + + + + ■ 牛 35% + ■ 羊 25% + ■ 猪 20% + ■ 鸡 20% + + + + + + + + 实时监控数据 + + 温度: 24°C + 湿度: 65% + 存栏: 1,250头 + 预警: 2条 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 数据分析与决策支持 + \ No newline at end of file diff --git a/website/assets/images/case3.jpg b/website/assets/images/case3.jpg new file mode 100644 index 0000000..fd154c8 Binary files /dev/null and b/website/assets/images/case3.jpg differ diff --git a/website/assets/images/case3.svg b/website/assets/images/case3.svg new file mode 100644 index 0000000..dfae9bb --- /dev/null +++ b/website/assets/images/case3.svg @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 养殖管理 + + + + 在线 + + + + 存栏: 125头 + + + 温度: 22°C + + + + 报警 + + + 记录 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GPS定位 + + + + + + + + + + + + 云端同步 + + + + + 移动端智能管理 + \ No newline at end of file diff --git a/website/assets/images/hero-bg.svg b/website/assets/images/hero-bg.svg new file mode 100644 index 0000000..d5f2efe --- /dev/null +++ b/website/assets/images/hero-bg.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/assets/images/hero-image.png b/website/assets/images/hero-image.png new file mode 100644 index 0000000..37ccec2 Binary files /dev/null and b/website/assets/images/hero-image.png differ diff --git a/website/assets/images/logo.svg b/website/assets/images/logo.svg new file mode 100644 index 0000000..dba5701 --- /dev/null +++ b/website/assets/images/logo.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 宁夏智慧养殖 + 监管平台 + + + + \ No newline at end of file diff --git a/website/assets/images/tech-architecture.png b/website/assets/images/tech-architecture.png new file mode 100644 index 0000000..4946378 Binary files /dev/null and b/website/assets/images/tech-architecture.png differ diff --git a/website/assets/images/tech-architecture.svg b/website/assets/images/tech-architecture.svg new file mode 100644 index 0000000..e1a03b6 --- /dev/null +++ b/website/assets/images/tech-architecture.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + 智慧养殖监管平台技术架构 + + + + 表示层 (Presentation Layer) + + + + Web管理界面 + + + 移动端APP + + + 数据大屏 + + + API接口 + + + + 业务层 (Business Layer) + + + + 养殖管理 + + + 监控预警 + + + 数据分析 + + + 用户权限 + + + 系统配置 + + + + 服务层 (Service Layer) + + + + 数据采集 + + + 消息队列 + + + 缓存服务 + + + 文件存储 + + + 第三方集成 + + + + 数据层 (Data Layer) + + + + MySQL数据库 + + + Redis缓存 + + + 时序数据库 + + + 文件系统 + + + + + + + + + + + + + + + + + + + + + + + + + 技术栈：Vue.js 3 + Node.js + MySQL + Redis + Docker + \ No newline at end of file diff --git a/website/assets/js/script.js b/website/assets/js/script.js index e0dcd68..a9c5df6 100644 --- a/website/assets/js/script.js +++ b/website/assets/js/script.js @@ -1,5 +1,8 @@ // 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { + // 页面加载动画 + initPageLoader(); + // 初始化导航栏滚动效果 initNavbarScroll(); @@ -11,8 +14,116 @@ document.addEventListener('DOMContentLoaded', function() { // 初始化数据统计动画 initStatsCounter(); + + // 图片懒加载 + initLazyLoading(); + + // 性能优化 + initPerformanceOptimizations(); }); +// 页面加载动画 +function initPageLoader() { + // 创建加载器 + const loader = document.createElement('div'); + loader.className = 'page-loader'; + loader.innerHTML = ` +
+ +
宁夏智慧养殖监管平台
+
正在加载中...
+
+ `; + + document.body.appendChild(loader); + + // 页面加载完成后隐藏加载器 + window.addEventListener('load', function() { + setTimeout(() => { + loader.classList.add('fade-out'); + setTimeout(() => { + if (loader.parentNode) { + loader.parentNode.removeChild(loader); + } + }, 500); + }, 800); + }); +} + +// 图片懒加载 +function initLazyLoading() { + const images = document.querySelectorAll('img[data-src]'); + + const imageObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.add('lazy-image'); + + img.onload = () => { + img.classList.add('loaded'); + }; + + observer.unobserve(img); + } + }); + }); + + images.forEach(img => imageObserver.observe(img)); +} + +// 性能优化 +function initPerformanceOptimizations() { + // 导航栏滚动优化 + let ticking = false; + + function updateNavbar() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + ticking = false; + } + + window.addEventListener('scroll', () => { + if (!ticking) { + requestAnimationFrame(updateNavbar); + ticking = true; + } + }); + + // 平滑滚动到锚点 + 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' + }); + } + }); + }); + + // 预加载关键资源 + const criticalImages = [ + 'assets/images/hero-bg.svg', + 'assets/images/logo.svg' + ]; + + criticalImages.forEach(src => { + const link = document.createElement('link'); + link.rel = 'preload'; + link.as = 'image'; + link.href = src; + document.head.appendChild(link); + }); +} + // 导航栏滚动效果 function initNavbarScroll() { const navbar = document.querySelector('.navbar'); @@ -79,9 +190,12 @@ function validateForm(form) { if (input.hasAttribute('required') && !input.value.trim()) { showInputError(input, '此字段为必填项'); isValid = false; - } else if (input.type === 'email' && !isValidEmail(input.value)) { + } else if (input.type === 'email' && input.value && !isValidEmail(input.value)) { showInputError(input, '请输入有效的邮箱地址'); isValid = false; + } else if (input.type === 'tel' && input.value && !isValidPhone(input.value)) { + showInputError(input, '请输入有效的手机号码'); + isValid = false; } else { clearInputError(input); } @@ -90,6 +204,84 @@ function validateForm(form) { return isValid; } +// 手机号验证 +function isValidPhone(phone) { + const phoneRegex = /^1[3-9]\d{9}$/; + return phoneRegex.test(phone); +} + +// 提交联系表单 +function submitContactForm(event) { + event.preventDefault(); + + const form = event.target; + if (!validateForm(form)) { + return; + } + + const formData = new FormData(form); + const data = { + name: formData.get('name'), + email: formData.get('email'), + phone: formData.get('phone'), + message: formData.get('message'), + timestamp: new Date().toISOString() + }; + + // 显示提交中状态 + const submitBtn = form.querySelector('button[type="submit"]'); + const originalText = submitBtn.innerHTML; + submitBtn.innerHTML = '提交中...'; + submitBtn.disabled = true; + + // 模拟提交到后端（实际项目中替换为真实API） + setTimeout(() => { + // 这里应该是实际的API调用 + console.log('表单数据:', data); + + // 显示成功消息 + showNotification('消息发送成功！我们会尽快回复您。', 'success'); + + // 重置表单 + form.reset(); + + // 恢复按钮状态 + submitBtn.innerHTML = originalText; + submitBtn.disabled = false; + + // 存储到本地（演示用） + saveContactToLocal(data); + + }, 2000); +} + +// 显示通知消息 +function showNotification(message, type = 'info') { + const notification = document.createElement('div'); + notification.className = `alert alert-${type === 'success' ? 'success' : 'info'} alert-dismissible fade show position-fixed`; + notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;'; + notification.innerHTML = ` + ${message} + + `; + + document.body.appendChild(notification); + + // 自动移除通知 + setTimeout(() => { + if (notification.parentNode) { + notification.parentNode.removeChild(notification); + } + }, 5000); +} + +// 保存联系信息到本地存储（演示用） +function saveContactToLocal(formData) { + let contacts = JSON.parse(localStorage.getItem('contacts') || '[]'); + contacts.push(formData); + localStorage.setItem('contacts', JSON.stringify(contacts)); +} + // 邮箱验证 function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; diff --git a/website/favicon.svg b/website/favicon.svg new file mode 100644 index 0000000..aaf8222 --- /dev/null +++ b/website/favicon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/index.html b/website/index.html index 2b2ee18..7843196 100644 --- a/website/index.html +++ b/website/index.html @@ -5,7 +5,21 @@ 宁夏智慧养殖监管平台 - 数字化养殖管理解决方案 - + + + + + + + + + + + + + + + @@ -24,8 +38,8 @@