小说在线观看网站产品系统

广泛用于 PC 端小说网站、小说 H5、阅读 APP，面向读者、平台运营方、作者，当前大部分小说网站都需要充值VIP或者缴费观看，本项目旨在免费阅读各种小说内容，面向读者提供热门作品检索、题材筛选、书籍收藏阅读能力；支撑平台运营流量分发、商业化运营；同时为网文作者提供曝光通道与数据参考，是网文平台内容分发体系里的核心功能。

整体分为三大功能区域：

一、顶部导航区

提供全品类快速切换入口：排行榜、免费、完本、古言、现言、玄幻仙侠、悬疑科幻、青春游戏、风尚阁、动漫专区。
点击对应标签，可一键跳转至对应分类专区，快速筛选想看题材的小说。

二、左侧榜单菜单栏

罗列平台全部榜单类型，包含：热销榜、风云榜、阅文风云榜、新书榜、周推荐榜、完本榜、更新榜、礼物榜、点击榜、收藏榜、签约作者新书榜、公众作品人气榜、男生榜。
读者可自由切换不同榜单，从热度、新书、收藏、更新、打赏等不同维度查看小说排名。

三、榜单主内容区

1. **细分题材筛选标签**：在热销榜下，支持二次细分筛选，包含全部、现代言情、古代言情、浪漫青春、玄幻言情、仙侠奇缘、悬疑侦探、科幻空间、游戏竞技、短篇小说、轻小说、短篇、打赏榜，精准缩小题材范围。
2. **书籍卡片展示**：每本小说以卡片形式展示，包含封面、书名、题材标签、简介，直观展示作品信息。
3. 操作按钮

- 【书籍详情】：点击进入小说详情页，查看完整简介、章节、作者信息；
- 【加入书架】：一键收藏本书到个人书架，方便后续追读。

一、技术选型

- 前端：HTML + CSS + JavaScript（可选 Vue2/Vue3）
- 样式：原生 CSS / Tailwind CSS
- 数据：先用模拟 JSON 数据（后期可对接后端接口）
- 布局：Flex + Grid 实现响应式布局
说明：页面分为三大模块：顶部导航栏、左侧榜单菜单、右侧主内容区

二、页面结构实现（和截图一一对应）

1. 顶部导航栏（全局导航）

功能：分类跳转入口
菜单：排行榜、免费、完本、古言、现言、玄幻仙侠、悬疑科幻、青春游戏、风尚阁、动漫专区
实现要点：

- 黑色背景、白色文字，横向排列
- 选中项高亮（当前在【排行榜】）
- 点击切换页面路由 / 刷新内容

### 2. 左侧榜单侧边栏

菜单列表：热销榜、风云榜、阅文风云榜、新书榜、周推荐榜、完本榜、更新榜、礼物榜、点击榜、收藏榜、签约作者新书榜、公众作品人气榜、男生
实现要点：

- 固定侧边，纵向排列
- 点击榜单项，右侧区域刷新对应榜单数据（当前选中：热销榜）
- 选中菜单高亮样式

3. 右侧主内容区域

分为两层：榜单子分类标签 + 书籍列表
1）子分类标签（热销榜内二次筛选）
标签：全部、现代言情、古代言情、浪漫青春、玄幻言情、仙侠奇缘、悬疑侦探、科幻空间、游戏竞技、短篇小说、轻小说、短篇、打赏榜
效果：点击标签，过滤当前榜单内小说数据

2）书籍卡片列表
单条卡片结构：

- 左侧：小说封面图片
- 中间：书名、题材标签、作品简介
- 右侧：两个功能按钮
- 书籍详情：跳转详情页
- 加入书架：调用收藏方法，存入本地存储 / 后端

三、核心功能逻辑实现

1. 榜单切换（左侧菜单）
监听左侧菜单点击事件，传入榜单标识（如 `hotSale`、`newBook`），请求 / 渲染对应榜