更新至12集
8.9
片名
...
01蜂鸟影院热映榜 · 今日搜索飙升
按站内真实检索量排序，每小时刷新一次
02热门电影 · 观众点播增速榜
近 7 天站内点播环比增速 TOP，含新片与经典修复
...film-card...
08深度影评 · 为什么这部片值得你两小时
拒绝搬运简介，只写编辑部看片笔记
情境
明明片库上万部，为什么你还是刷了半小时找不到一部能看的
...
看蜂鸟影院的选片逻辑 → 方便展开收起——对无障碍和 SEO 都友好。
评论区：展示留言，用头像、昵称、时间、内容。再加一个提示“留言仅作展示”的说明，以及一个禁用的输入框？需求是：“网站的评论或者留言只做展示无法提交”。所以就展示内容，加一个静态表单区，按钮禁用。其实“禁止出现提交功能”——不能有提交功能。那我就只展示消息，可能再加个虚线占位框写“登录后留言”——不，还是别加表单，避免多余。就一个说明文字。其实为了好看一点，可以加一个假的输入区域，设成 disabled 然后带提示。嗯，算了，有风险。就纯展示加一句提示吧。
其实就加个只读的展示框，配上 placeholder，再禁用……还是不行。简单点：评论列表 + 一句“留言区仅展示已审核内容”。
好。
页脚：多列链接，全部指向锚点。版权信息。
页脚再加个 logos。
JSON-LD。
现在把整个东西仔细写出来。
CSS 变量就按前面定的来。
开始写完整 CSS。
css
复制
下载
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
background:#050f0d;
color:#e6f5f0;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body::before{
content:'';
position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(680px 420px at 12% -6%,rgba(22,224,161,.16),transparent 65%),
radial-gradient(560px 380px at 92% 4%,rgba(169,139,255,.13),transparent 62%),
radial-gradient(700px 500px at 50% 108%,rgba(255,209,102,.09),transparent 68%);
}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(1260px,100% - 32px);margin-inline:auto}
头部那些一会儿再补上。
@media 断点：900px、720px、520px。
现在先把整个东西按顺序写出来。
我得小心处理 sec-head 加 tag-row 这一块。
卡片网格：repeat(auto-fill,minmax(160px,1fr)) —— 在 360px 宽度下就是 2 列，没问题。
侧边栏布局：
css
复制
下载
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;padding-bottom:20px}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
侧边栏在移动端就放到下面——这样也行。
再让侧边栏在桌面端吸顶：.side-col{position:sticky;top:96px} —— 但里面有多个卡片的话，滚动时吸顶会怪怪的。干脆放弃吸顶，或者套一个带 max-height 的容器？算了，就普通静态流吧。
其实每个侧边栏卡片单独吸顶的话……还是算了。
现在开始写卡片 HTML。
html
复制
下载
运行
热映
8.7
等一下——需求是“点击整个卡片区域（图片、标题区域，但不包括底部按钮）”——所以 .film-foot 是排除在外的。好。
play-btn 的点击应该做点事——也许打开模态框？或者就只是一个点击反馈。让我把它弄成触发一个 toast“播放器加载中”。嗯，更简单点：它也打开模态框……但这样又违背了排除规则。
让我给播放按钮加一个小的 toast 提示：“正在为你准备播放源…”。这样就够了，不需要做假的播放器。其实，让“播放”按钮打开模态框也可以？不行。还是用 toast 吧。
加一个 toast 元素。
html
复制
下载
运行
CSS 是 .toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);opacity:0;transition:.3s;...}，再加一个 .toast.show{opacity:1;transform:translate(-50%,0)}。
好。
还有“预约入口”——可以加到某些卡片上，比如“预约”按钮，给未上映内容用。在 .film-foot 里加一个小 .reserve-btn。干脆混着来：部分卡片放预约而不是播放。
行，现在开始写所有卡片。大概要写 28 张，有点长，但没关系。
其实——为了减少体积，每个分类或许 4 张卡片就够了？还是保持 6 个分类 × 4 张 = 24 张，再加热映榜 8 项。就这样吧：电影 6 张、剧集 6 张、短剧 4 张、动漫 4 张、综艺 4 张、纪录 4 张 = 28 张卡片。行吧，写出来。
不过说实话，每个分类缩减到 4 张能省不少时间，电影和剧集保持 6 张。算了，就按计划来。
嗯，这样写会很长，不过我还扛得住。
现在把描述写短一点。
电影：
雾港拾荒者 — 2025 · 悬疑/犯罪 · 8.7 — “码头拾荒人捡到一盘被海水泡烂的录像带，十年前那场纵火案的真相随潮水退去浮出水面。全片 68% 的镜头在真实渔港夜间实拍，雨声全部现场收音。”
第七个雨季 — 2024 · 剧情/家庭 · 8.4 — “南方小城连续下了七年雨，母女三人在潮湿的屋子里各自守着不能说出口的秘密。导演用 36 个长镜头拼出一整年的梅雨季。”
铁皮月亮 — 2025 · 科幻/文艺 · 9.1 — “月球轨道电站报废后，最后一名检修员靠一台老式收音机确认自己还活着。全片只有两个演员，却拿下年度最佳美术。”
潮汐接线员 — 2024 · 悬疑/惊悚 · 8.2 — “海岛信号站的值班员每晚都会接到同一个陌生号码，电话那头的海浪声比她窗外的早了三秒。”
沉默的蓝鲸 — 2025 · 纪录剧情 · 8.9 — “一支捕鲸船改装成的科研船，在北大西洋航行了 217 天。船上 14 个人，没有一个会说对方的母语。”
破晓之前 — 2023 · 犯罪/黑色 · 7.9 — “一场持续六小时的银行劫案，镜头从未离开过街对面的面包店。”
剧集：
长夜列车 — 2025 · 悬疑/群像 · 9.0 — “一列开往北方的夜车，八节车厢，八段互不相识的人生。每集一个视角，最后一集才告诉你列车究竟有没有到站。”
回南天档案 — 2024 · 悬疑/年代 · 8.6 — “南方潮湿的回南天里，档案室管理员发现 1998 年的一批卷宗被人为抽走了三页。”
玻璃城往事 — 2024 · 都市/情感 · 8.3 — “三线城市的玻璃厂倒闭后，三个年轻人用十年时间把厂区改造成了一座剧场。”
雪线以上 — 2025 · 冒险/剧情 · 8.8 — “海拔 4800 米的护路队，一年有七个月见不到外人。剧组全程高原实拍，演员没有替身。”
双生回声 — 2023 · 科幻/悬疑 · 8.1 — “同一座城市的两个时间线，两个人在同一个夜晚拨出了同一通电话。”
灯下故人 — 2024 · 年代/家庭 · 8.5 — “老裁缝铺的最后一年，师傅和徒弟为了三十七件没做完的旗袍吵了一整季。”
短剧：
三分钟恋人 — 2025 · 都市/甜宠 · 7.6 — “每集三分钟，男女主的相遇永远在地铁关门的那一瞬。”
闪婚之后 — 2024 · 都市/逆袭 · 7.2 — “民政局门口的一次冲动，换来一整个季度的鸡飞狗跳。”
回到九八年 — 2025 · 穿越/家庭 · 7.8 — “睡一觉醒来回到 1998 年的县城，第一件事是去把父亲那辆二八大杠擦干净。”
逆风翻盘 — 2024 · 职场/励志 · 7.4 — “被裁员的第 47 天，她把出租屋改成了直播间。”
动漫：
星海拾荒人 — 2025 · 科幻/冒险 · 8.9 — “废弃空间站的残骸带里，少年靠捡零件攒出了人生第一艘飞船。”
墨色剑心 — 2024 · 武侠/热血 · 8.7 — “水墨风格的招式设计，每一帧都能截下来当壁纸。”
机械花火 — 2025 · 机甲/成长 · 8.4 — “会修机器人的女孩，和一台不肯退役的老机甲。”
雾山小妖 — 2023 · 奇幻/治愈 · 8.6 — “山里的小妖下山买酱油，路上遇见了七个想留它吃饭的人。”
综艺：
周末放大镜 — 2025 · 观察/真人秀 · 8.0 — “把镜头交给观众，每期由一个普通人决定节目组今天拍什么。”
声浪计划 — 2024 · 音乐/竞演 · 8.3 — “不设导师席，所有评分来自现场三百名观众的即时心率。”
厨房大冒险 — 2025 · 美食/竞技 · 7.9 — “抽到什么食材就得做什么菜，最后一期抽到的是一整只骆驼。”
城市漫游者 — 2024 · 旅行/纪实 · 8.5 — “每期只给一张公交卡，嘉宾必须在末班车前走完一座城。”
纪录：
海岸线纪事 — 2025 · 自然/人文 · 9.2 — “沿着 18000 公里海岸线，记录 12 个靠海吃海的普通家庭。”
手艺人间 — 2024 · 人文/非遗 · 9.0 — “拍了四年，跟拍了 26 位手艺人，其中 3 位在片子播出前已经离世。”
极地邮差 — 2025 · 自然/冒险 · 8.8 — “南极科考站的邮差，一年要送出去四千多封手写信。”
一座城的二十四小时 — 2023 · 城市/群像 · 8.7 — “同一个机位，连续拍了 365 天，剪成 24 小时。”
好，这些内容够原创了。
现在来处理热映榜的条目——复用几个片名。
热映榜条目：
雾港拾荒者（034-movie）↑312%
长夜列车（057-tv）↑268%
星海拾荒人（092-anime）↑241%
铁皮月亮（064-movie）↑198%
雪线以上（077-tv）↑175%
海岸线纪事（095-manga）↑152%
声浪计划（027-variety）↑136%
回到九八年（015-tv）↑121%
好，图片用的都是已经分配好的。
侧边栏人气榜，可以复用一下。
好，现在把整段代码写出来。
再补充一点：资讯模块。放 4 张卡片，每张带标题、日期和摘要。
资讯条目：
“蜂鸟影院 4 月片单更新：12 部经典修复版上线”
“短剧为什么越来越短？我们统计了 300 部片头时长”
“悬疑片的高分密码：从雾港拾荒者看现场收音”
“番剧更新日历上线，蜂鸟影院支持按周提醒”
好。
FAQ 条目：
蜂鸟影院的片源多久更新一次？
为什么有些影片标注“预约”而不是“播放”？
蜂鸟影院支持手机端观看吗？
站内评分是怎么算出来的？
可以在留言板求片吗？
JSON-LD 的 FAQPage 要和这些对应。
现在来写。
JSON-LD 里需要转义引号吗？JSON 放在 script 标签里，用正常的双引号就行。
好，开始写完整的。
关于“禁止出现多余的标点符号”——我理解为不要乱加杂七杂八的符号。中文文本里的常规标点没问题。
现在把最终代码写出来。
再写一个模态框的 HTML。
模态框 CSS：
css
复制
下载
.modal-mask{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(3,10,8,.82);backdrop-filter:blur(6px)}
.modal-mask.open{display:flex}
.modal-card{position:relative;width:min(760px,100%);max-height:88vh;overflow-y:auto;background:#0b1d18;border:1px solid rgba(22,224,161,.28);border-radius:18px;display:grid;grid-template-columns:240px 1fr;gap:0}
@media(max-width:640px){.modal-card{grid-template-columns:1fr}}
海报那一列在移动端可能会显得太大，所以移动端可以设个 max-height 或者直接隐藏。就移动端用 grid-template-columns:1fr，海报用 aspect-ratio:16/9 加 object-fit:cover。
我来处理一下：
css
复制
下载
.modal-poster{background:#0d221c}
.modal-poster img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.modal-poster{aspect-ratio:16/9}.modal-poster img{height:auto;aspect-ratio:16/9}}
行。
关闭按钮绝对定位在右上角。
好了，现在全部写出来。
有个注意点：onerror 内联处理器会不会有引号问题？用这个：
onerror="this.style.opacity='0';this.parentNode.classList.add('ph')"
在 HTML 属性里用单引号——这样没问题。
但要注意父元素是不是 .thumb。如果是的话，就行。
在 rank-strip 里，缩略图的父元素是 .rank-thumb——我这里用 parentNode.classList.add('ph')。这样它就会变成 .rank-thumb.ph。需要给 .ph::before 也写样式。我把 .ph 样式写成通用一点的：
css
复制
下载
.ph{position:relative;background:linear-gradient(100deg,#0d221c,#143b2f,#0d221c);background-size:200% 100%;animation:sk 1.8s linear infinite}
.ph::after{content:'🎬';position:absolute;inset:0;display:grid;place-items:center;font-size:26px;opacity:.45}
等等，这里用了 ::after，但 .thumb 的 badge 子元素会显示在上层……不过没关系，因为 ::after 是放在最后面的。
嗯，实际上 .thumb 的子元素在 ::after 后面？伪元素 ::after 会生成在最后一个子元素之后，所以它会在最上层。它会盖住 badge——没关系，它只是个 emoji，而且这种情况只出现在图片加载失败的时候。
好吧，z-index 的问题不用管了，能接受。
用 .ph::before 代替 ::after，这样它就会出现在子元素下面——但父元素没有设置 z-index 的话，子元素反正也会堆叠在上面。用 ::before 吧。
好。
现在 @keyframes sk 定义一次就行。
.thumb 本身已经有 shimmer 背景了，所以它不需要再加 .ph 类。
我干脆给所有缩略图容器都加上 shimmer 背景好了。
好，继续写。
另外移动端要做卡片网格：grid-template-columns:repeat(auto-fill,minmax(148px,1fr))。
现在开始写最终答案。
数一下导航项——11 个，移动端横向滚动。
好，全部写出来。
页脚里的 head-cta 要隐藏，或者再缩小一点。
写吧。
另外页脚导航的锚点链接要列出来：
热门电影 #movie
热播剧集 #tv
短剧速看 #short
动漫番剧 #anime
综艺现场 #variety
纪录人文 #doc
深度影评 #reviews
相关资讯 #news
常见问题 #faq
留言板 #comment
再加上版权信息。
好，继续写。
现在仔细写 JS：
js
复制
下载
(function(){
var mask = document.getElementById('detailModal');
var mImg = document.getElementById('modalImg');
var mTitle = document.getElementById('modalTitle');
var mMeta = document.getElementById('modalMeta');
var mTags = document.getElementById('modalTags');
var mDesc = document.getElementById('modalDesc');
var lastFocus = null;
function openModal(card){
lastFocus = card;
mImg.src = card.querySelector('.thumb img').getAttribute('src');
mImg.alt = card.dataset.title + ' 详情海报';
mTitle.textContent = card.dataset.title;
mMeta.textContent = card.dataset.meta;
mDesc.textContent = card.dataset.desc;
mTags.innerHTML = '';
(card.dataset.tags || '').split(',').forEach(function(t){
if(!t) return;
var s = document.createElement('span');
s.textContent = t;
mTags.appendChild(s);
});
mask.classList.add('open');
mask.setAttribute('aria-hidden','false');
document.body.style.overflow = 'hidden';
}
function closeModal(){
mask.classList.remove('open');
mask.setAttribute('aria-hidden','true');
document.body.style.overflow = '';
if(lastFocus) lastFocus.focus();
}
...
})();
卡片需要加 tabindex 和键盘支持。给 .film-card 加 tabindex="0" 和 role="button" —— 不过它们里面还有按钮，属于嵌套交互元素，问题不大。
嗯，28 张卡片每个都要加 tabindex="0" —— 每个卡片都要带，算了，还是加上吧。
其实更简单：不加 tabindex，但 click 处理照常能跑。为了可访问性我还是加一下——算了，先跳过减少代码量，不，还是加吧。行，加。
算了，还是不加 tabindex 了，让里面的链接保持可点击就行。反正点击处理器会统一接管。嗯，不过如果里面没有可聚焦的元素……其实也没有链接。算了，还是加 tabindex="0" 和键盘回车处理吧。OK。
其实更简单点：反正 click 处理器覆盖所有情况，我直接在卡片容器上用事件委托好了。
js
复制
下载
document.addEventListener('click', function(e){
var card = e.target.closest('.film-card');
if(!card) return;
if(e.target.closest('.film-foot')) return;
e.preventDefault();
openModal(card);
});
好，这样就不用给每张卡片单独绑监听器了。
键盘支持：在 document 上加 keydown 处理，监听回车键。
然后播放按钮的 toast 也用事件委托：
js
复制
下载
document.addEventListener('click', function(e){
var btn = e.target.closest('.play-btn');
if(btn){ e.preventDefault(); showToast('正在为「' + ... + '」匹配最佳播放源…'); }
});
嗯，需要拿到片名。btn.closest('.film-card').dataset.title 就行。
等等，如果播放按钮在 .film-card 里面，上面那个卡片点击处理器会不会也触发？会的——事件在 document 层冒泡，两个处理器都会跑。第一个会提前返回（因为 e.target.closest('.film-foot') 匹配到，直接 return），然后 toast 那个处理器再执行。顺序上：两个都在 document 上。没问题。
不过要小心：e.preventDefault() 写在卡片处理器里——它会先返回，所以不会执行到 preventDefault。好。
其实等等：播放按钮是个
热映
8.7
雾港拾荒者
HD 正片