这是一个完整的“沉鱼”钢笔品牌展示网站项目，包含品牌形象前台与可自主管理的内容后台。前台以优雅的视觉呈现产品故事与书写场景，后台提供轻量级CMS功能，支持产品、内容与订单管理。项目采用纯前端技术，具备响应式设计与丰富的交互体验，适合品牌展示、设计参考与前端学习。
🖋️ "沉鱼"钢笔品牌完整网站项目（HTML源码）
项目概述
一个完整的"沉鱼"钢笔品牌网站项目，包含品牌形象展示前台和内容管理后台两大模块，具备丰富的功能特点和良好的用户体验设计。
🖋️ 品牌展示前台功能
核心展示模块
- 品牌故事与产品介绍
- Hero区域视觉展示
- 三种书写场景呈现：
- 深夜独白
- 纸上情书
- 岁月签名
- 产品特性展示
- 手工打磨笔尖
- 沉墨供墨系统
- 陨石黑树脂笔身
技术参数展示
- 规格参数表格：
markdown
| 参数 | 详情 | |------------|--------------------| | 笔尖类型 | 14K金笔尖 | | 笔身材质 | 陨石黑树脂 | | 尺寸 | 140mm×12mm | | 重量 | 38g | | 供墨方式 | 旋转式上墨器 |
多媒体展示
- 影像展示区（网格布局）：
- 产品整体图
- 笔尖特写
- 书写瞬间
- 礼盒包装
- 背景音乐播放器：
- 轻音乐列表
- 播放/暂停控制
- 音量调节
- 曲目切换
响应式设计
- 适配不同设备屏幕尺寸
- 移动端优化浏览体验
🛠️ 后台管理功能
管理模块
- 概览面板：
- 访问量统计
- 订单数统计
- 销售额统计
- 产品管理：
- 产品新增/编辑/删除
- 产品卡片形式展示
- 内容编辑：
- Hero区域文案修改
- 三种书写场景文字编辑
- 订单管理：
- 订单列表展示
- 状态筛选功能
- 关键词搜索功能
- 系统设置：
- 网站基本信息配置
- 主题色设置
- 深色模式切换
- 数据导出功能
技术实现
- 数据持久化：使用
localStorage存储后台配置 - 弹窗交互：
- 模态框表单（新增产品）
- 拖拽/点击上传图片区域
🎨 交互与体验特色
视觉效果
- 平滑滚动效果
- 元素滚动入场动画
- 钢笔悬停缩放效果（Hero区域）
- 打字机效果（副标题逐字显示）
- 导航栏滚动背景变化
反馈机制
- 后台操作轻提示通知
- 表单验证反馈
- 保存成功确认提示
🚀 本地部署指南
启动方式
- 使用提供的Python简易HTTP服务器：
bash
python server.py - 访问地址：
- 前台：
http://localhost:8080 - 后台：
http://localhost:8080/admin.html
- 前台：
项目特点
- 轻量级内容管理系统
- 品牌方自主维护能力
- 适合设计爱好者参考收藏
- 完整的品牌展示解决方案
这个项目不仅是一个钢笔品牌的展示平台，更是一个功能完备的轻量级CMS系统，能够帮助品牌方轻松管理网站内容，同时为访问者提供优雅的浏览体验。
