一款融合前沿交互与便捷管理的企业展示网站。前台采用暗黑科技风,集成粒子光标、GSAP滚动动画和高德地图,带来炫酷视觉体验。后台提供完全零代码的可视化内容管理,支持实时修改所有图文。实现快速搭建、全设备适配的企业级展示方案。
暗黑科技风格企业展示网站(带后台管理)
这是一个融合暗黑科技风格的企业展示网站,配备完整的后台管理系统。前台采用粒子动画、炫酷光标和滚动动画效果,后台支持可视化修改所有文字和图片内容,无需编写代码。适合需要快速搭建企业展示页面的用户。
前台功能亮点
交互细节
- 粒子光标:系统光标替换为粒子效果,移动时产生彩色拖尾,点击时呈现爆炸动画
- 地图集成:点击联系区域的地址卡片可跳转至高德地图搜索该地址
- 流畅动画:采用GSAP驱动的滚动淡入动画,比传统CSS动画更流畅
- 全设备适配:响应式设计覆盖手机、平板和桌面设备
默认登录信息
| 字段 | 默认值 |
|---|---|
| 账号 | admin |
| 密码 | admin123 |
| 安全码 | 888888 |
后台管理系统
功能模块
| 模块图标 | 模块名称 | 可修改内容 |
|---|---|---|
| 🏠 | 首页内容 | 徽章文字、标题、描述、按钮文字、统计数字、Hero背景图片 |
| ⚡ | 服务卡片 | 每张卡片的图标、标题、描述,支持动态增删卡片 |
| ℹ️ | 关于我们 | 标题、两段描述文字、特色列表、展示图片、徽章数字 |
| 📬 | 联系方式 | 邮箱、电话、地址(同步更新地图跳转链接) |
| 🔻 | 页脚设置 | 品牌名称、版权声明、浏览器标签页标题 |
| 🔑 | 账号管理 | 修改密码、修改安全码、查看后台访问地址 |
常见问题解答
Q1:修改内容后前台未更新?
- 确认已点击「保存更改」按钮
- 数据实时存储在localStorage,保存后刷新前台即可生效
Q2:清除浏览器缓存后内容丢失?
- localStorage数据被清除会重置为默认值
- 纯前端方案的局限性,如需持久化需连接后端数据库
Q3:忘记后台地址?
- 登录后台 → 账号管理 → 底部「后台访问地址」可查看并复制
Q4:忘记登录密码?
- 打开浏览器开发者工具(F12)
- 在Console执行:
javascript
localStorage.removeItem('nexus_admin_accounts')
- 账号将重置为默认值(admin/admin123/888888)
Q5:如何修改配色方案?
- 打开
src/style.css文件 - 修改
:root中的CSS变量值 - 重新执行
pnpm build构建项目
Q6:为什么设计这么花哨的光标效果?
- 因为技术上可行(开发者备注:确实有点中二但很酷)


