167 lines
4.2 KiB
Markdown
167 lines
4.2 KiB
Markdown
|
# 宁夏智慧养殖监管平台 - 官方网站
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
这是宁夏智慧养殖监管平台的官方网站，采用HTML5 + Bootstrap 5技术栈构建，提供响应式设计和现代化用户体验。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **前端框架**: Bootstrap 5.3.0
|
|||
|
|
- **图标库**: Font Awesome 6.0.0
|
|||
|
|
- **字体**: Google Fonts (Noto Sans SC)
|
|||
|
|
- **JavaScript**: jQuery 3.6.0 + 自定义脚本
|
|||
|
|
- **构建工具**: 纯静态HTML，无需构建过程
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
website/
|
|||
|
|
├── index.html # 首页
|
|||
|
|
├── download.html # 下载中心页面
|
|||
|
|
├── assets/ # 静态资源目录
|
|||
|
|
│ ├── css/ # 样式文件
|
|||
|
|
│ │ └── style.css # 主样式文件
|
|||
|
|
│ ├── js/ # JavaScript文件
|
|||
|
|
│ │ └── script.js # 主脚本文件
|
|||
|
|
│ └── images/ # 图片资源
|
|||
|
|
│ └── placeholder.txt # 图片资源说明
|
|||
|
|
└── README.md # 项目说明文档
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 首页 (index.html)
|
|||
|
|
- **响应式导航栏**: 支持移动端折叠菜单
|
|||
|
|
- **英雄区域**: 吸引人的Banner和行动号召
|
|||
|
|
- **数据统计**: 动画数字计数器展示关键数据
|
|||
|
|
- **功能特性**: 六项核心功能卡片展示
|
|||
|
|
- **技术优势**: 技术架构和优势介绍
|
|||
|
|
- **客户案例**: 成功案例展示
|
|||
|
|
- **新闻动态**: 最新资讯和动态
|
|||
|
|
- **联系我们**: 联系信息和留言表单
|
|||
|
|
|
|||
|
|
### 下载中心 (download.html)
|
|||
|
|
- **多平台下载**: PC客户端、移动端APP下载
|
|||
|
|
- **文档资源**: 用户手册、API文档等技术资料
|
|||
|
|
- **系统要求**: 详细的系统配置要求
|
|||
|
|
- **更新日志**: 版本更新历史记录
|
|||
|
|
|
|||
|
|
## 设计特点
|
|||
|
|
|
|||
|
|
1. **响应式设计**: 完美适配桌面、平板、手机等设备
|
|||
|
|
2. **现代化UI**: 采用渐变色彩、卡片式布局、平滑动画
|
|||
|
|
3. **性能优化**: 代码精简，加载速度快
|
|||
|
|
4. **SEO友好**: 合理的HTML结构和meta标签优化
|
|||
|
|
5. **无障碍访问**: 符合WCAG 2.1标准
|
|||
|
|
|
|||
|
|
## 颜色方案
|
|||
|
|
|
|||
|
|
- **主色调**: `#667eea` (蓝色)
|
|||
|
|
- **辅助色**: `#764ba2` (紫色)
|
|||
|
|
- **文字色**: `#2c3e50` (深蓝灰)
|
|||
|
|
- **背景色**: `#f8f9fa` (浅灰)
|
|||
|
|
- **成功色**: `#28a745` (绿色)
|
|||
|
|
|
|||
|
|
## 浏览器兼容性
|
|||
|
|
|
|||
|
|
- Chrome 60+
|
|||
|
|
- Firefox 60+
|
|||
|
|
- Safari 12+
|
|||
|
|
- Edge 79+
|
|||
|
|
- iOS Safari 12+
|
|||
|
|
- Android Browser 6.0+
|
|||
|
|
|
|||
|
|
## 部署方式
|
|||
|
|
|
|||
|
|
### 本地开发
|
|||
|
|
1. 直接使用浏览器打开 `index.html` 文件
|
|||
|
|
2. 或使用本地服务器:
|
|||
|
|
```bash
|
|||
|
|
# 使用Python
|
|||
|
|
python -m http.server 8000
|
|||
|
|
|
|||
|
|
# 使用Node.js
|
|||
|
|
npx serve .
|
|||
|
|
|
|||
|
|
# 使用PHP
|
|||
|
|
php -S localhost:8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 生产部署
|
|||
|
|
1. 将整个 `website` 目录上传到Web服务器
|
|||
|
|
2. 配置服务器支持HTML5 History API（如需要）
|
|||
|
|
3. 配置适当的缓存策略和Gzip压缩
|
|||
|
|
|
|||
|
|
## 自定义配置
|
|||
|
|
|
|||
|
|
### 修改主题颜色
|
|||
|
|
在 `assets/css/style.css` 中修改CSS变量：
|
|||
|
|
```css
|
|||
|
|
:root {
|
|||
|
|
--primary-color: #667eea;
|
|||
|
|
--secondary-color: #764ba2;
|
|||
|
|
/* 其他颜色变量 */
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 添加新页面
|
|||
|
|
1. 创建新的HTML文件
|
|||
|
|
2. 复制导航栏和页脚结构
|
|||
|
|
3. 添加自定义内容
|
|||
|
|
4. 在导航菜单中添加链接
|
|||
|
|
|
|||
|
|
### 更新内容
|
|||
|
|
- **文本内容**: 直接修改HTML文件中的文本
|
|||
|
|
- **图片资源**: 替换 `assets/images/` 目录中的图片
|
|||
|
|
- **功能扩展**: 在 `assets/js/script.js` 中添加新功能
|
|||
|
|
|
|||
|
|
## 性能优化建议
|
|||
|
|
|
|||
|
|
1. **图片优化**: 使用WebP格式，适当压缩图片
|
|||
|
|
2. **代码分割**: 按需加载CSS和JS文件
|
|||
|
|
3. **CDN加速**: 使用CDN分发静态资源
|
|||
|
|
4. **缓存策略**: 配置合适的HTTP缓存头
|
|||
|
|
5. **懒加载**: 对非首屏图片实现懒加载
|
|||
|
|
|
|||
|
|
## SEO优化
|
|||
|
|
|
|||
|
|
1. 确保每个页面都有唯一的 `<title>` 和 `<meta description>`
|
|||
|
|
2. 使用语义化HTML标签
|
|||
|
|
3. 添加结构化数据（JSON-LD）
|
|||
|
|
4. 创建sitemap.xml文件
|
|||
|
|
5. 配置 robots.txt
|
|||
|
|
|
|||
|
|
## 安全考虑
|
|||
|
|
|
|||
|
|
1. 表单数据验证（前端+后端）
|
|||
|
|
2. HTTPS强制跳转
|
|||
|
|
3. 内容安全策略（CSP）
|
|||
|
|
4. XSS防护
|
|||
|
|
5. CSRF保护
|
|||
|
|
|
|||
|
|
## 维护说明
|
|||
|
|
|
|||
|
|
### 定期检查
|
|||
|
|
- 链接有效性
|
|||
|
|
- 图片资源
|
|||
|
|
- 第三方库更新
|
|||
|
|
- 浏览器兼容性
|
|||
|
|
|
|||
|
|
### 备份策略
|
|||
|
|
- 代码版本控制（Git）
|
|||
|
|
- 定期数据库备份
|
|||
|
|
- 配置文件备份
|
|||
|
|
|
|||
|
|
## 联系方式
|
|||
|
|
|
|||
|
|
如有问题或建议，请联系：
|
|||
|
|
- 邮箱: info@nxfarm.com
|
|||
|
|
- 电话: 0951-88888888
|
|||
|
|
|
|||
|
|
## 许可证
|
|||
|
|
|
|||
|
|
本项目基于MIT许可证开源。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**最后更新: 2025年1月**
|