模板概述
这套影视模板完整复刻腾讯视频官网的UI视觉风格，全面适配苹果CMS V10程序，采用扁平化现代前端设计，内置视频与文章两大模块页面，全端自适应，非常适合搭建影视观影站与影视资讯门户。
配色体系
- 主题主色 #0052D9：全局导航、按钮、超链接与标题装饰；
- 主色悬浮加深 #0040B0：按钮与导航hover状态；
- 主色浅色背景 #E8F0FE：导航悬浮底色与搜索框聚焦光晕；
- 功能强调色 #FF6F00：评分、榜单前三与收藏按钮；
- 强调色浅底色 #FFF3E0：收藏按钮浅色背景。
目录结构
muban/ 根目录含 css/style.css 全局样式、js/script.js 交互脚本、images/ 素材目录，以及 html/ 目录。html/public/ 下为公共组件：head.html 头部（导航、搜索、会员面板）、foot.html 底部（友链、版权）、include.html 资源引入、paging.html 分页。html/index/index.html 为首页。html/vod/ 含 detail、play、search、type、show 五个影视页面。html/art/ 含 detail、search、type、show 四个资讯页面。
核心功能特性
- 悬浮固定导航：滚动时顶部导航自动吸顶，随时切换分类与搜索；
- 移动端汉堡菜单：宽度小于768px自动折叠为全屏导航面板；
- 首页Banner轮播：自动轮播，支持左右箭头与圆点切换；
- 多档响应式：5个屏幕断点，自动适配平板与手机卡片列数；
- 多播放源Tab切换：详情页多线路无刷新切换；
- 返回顶部悬浮按钮：下滑400px自动显示；
- 浏览历史下拉面板：头部展示近期观看记录；
- 搜索框聚焦动效：点击触发高亮边框动画；
- CSS Grid网格：影视卡片6列、资讯卡片3列规整排列；
- HTML5语义化：header/nav/main/section/footer标签，利于SEO；
- 图片懒加载：data-original延迟加载，降低首页耗时。
响应式断点
- >1280px：影视6列、文章3列，完整导航与搜索框；
- 1024~1280px：影视5列、文章2列，搜索框收窄；
- 768~1024px：影视4列、文章2列，详情页改上下布局；
- 480~768px：影视3列、文章2列，隐藏顶部导航并启用汉堡菜单；
- <480px：影视2列、文章1列，紧凑移动端排版。
依赖前端资源
- jquery.js：JS基础库，系统自带；
- jquery.lazyload.js：图片懒加载；
- jquery.autocomplete.js：搜索框自动联想；
- jquery.superslide.js：Banner轮播插件；
- base.js：系统基础交互脚本；
- home.css：系统基础默认样式。
开发规范
- 编码统一UTF-8无BOM，避免中文乱码；
- 强制使用HTML5语义化标签；
- 自定义样式统一写在 css/style.css，不改系统文件；
- 自定义交互JS统一存放 js/script.js；
- CMS列表标签仅改num参数控制卡片数量。
适用场景
适合影视在线观影站、动漫资源站、剧集资讯门户与短视频合集站点，具备腾讯视频同款简洁商务UI，多端自适应，搭配筛选、播放、收藏、历史记录等功能，开箱即用，便于二次修改配色与模块。
