!DOCTYPE html
html lang=zh-CN
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0, viewport-fit=cover
meta name=description content=指南影院 - 你的私人观影指南针。精选全球高分冷门佳片、口碑剧集与深度纪录片，真实评分+导演视角，每日更新一份不随大流的片单。
meta name=keywords content=指南影院,私人观影指南,冷门高分电影,口碑剧集,深度纪录片,导演推荐,不随大流片单
title指南影院 - 私人观影指南针 冷门高分电影深度片单每日更新title
style
{
margin 0;
padding 0;
box-sizing border-box;
}
body {
font-family system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background #eef2f0;
color #1f2c28;
opacity 0;
animation compassFade 0.25s ease forwards;
}
@keyframes compassFade {
to { opacity 1; }
}
.compass-container {
max-width 1400px;
margin 0 auto;
padding 0 28px;
}
导航 - 指南针风格
.compass-header {
padding 1.2rem 0;
display flex;
justify-content space-between;
align-items center;
flex-wrap wrap;
border-bottom 2px solid #b7ad90;
}
h1 {
font-size 1.9rem;
font-weight 600;
letter-spacing 1px;
background linear-gradient(145deg, #2f6b55, #4a7c6b);
-webkit-background-clip text;
background-clip text;
color transparent;
}
.compass-nav {
display flex;
gap 1.8rem;
align-items center;
}
.nav-compass {
background none;
border none;
font-size 0.9rem;
color #3c564c;
cursor pointer;
transition 0.2s;
}
.search-compass {
background #e0e2db;
border-radius 48px;
padding 0.3rem 1rem;
display flex;
gap 0.5rem;
}
.avatar-compass {
width 38px;
height 38px;
border-radius 50%;
background #cbd6ce;
display flex;
align-items center;
justify-content center;
cursor pointer;
font-weight bold;
}
主视觉——指北针双栏
.needle-hero {
margin 2rem 0 2.8rem;
display grid;
grid-template-columns 1.3fr 0.9fr;
gap 1.8rem;
}
.hero-compass {
background #fefcf5;
border-radius 48px;
overflow hidden;
box-shadow 0 15px 30px -10px rgba(0,0,0,0.05);
border 1px solid #ddd7c2;
}
.hero-img {
height 380px;
background-size cover;
background-position center;
position relative;
}
.hero-caption {
padding 1.6rem;
background white;
}
.guide-badge {
background #6b8f7a;
color white;
padding 0.2rem 1rem;
border-radius 40px;
font-size 0.7rem;
display inline-block;
}
.side-guide {
background #f3f0e6;
border-radius 48px;
padding 1.6rem;
border 1px solid #e2dac8;
}
向导卡片 —— 指南针辐射状
.compass-grid {
display grid;
grid-template-columns repeat(3, 1fr);
gap 1.8rem;
margin 2rem 0;
}
.guide-card {
background white;
border-radius 32px;
overflow hidden;
transition all 0.25s;
cursor pointer;
box-shadow 0 4px 12px rgba(0,0,0,0.02);
border 1px solid #e5dccc;
}
.guide-cardhover {
transform translateY(-5px);
box-shadow 0 20px 28px -12px rgba(0,0,0,0.1);
border-color #a6beae;
}
.card-media {
position relative;
aspect-ratio 23;
background #e2e0d4;
}
.card-media img {
width 100%;
height 100%;
object-fit cover;
}
.play-compass {
position absolute;
inset 0;
background rgba(0,0,0,0.25);
display flex;
align-items center;
justify-content center;
opacity 0;
transition 0.2s;
font-size 1.8rem;
}
.guide-cardhover .play-compass {
opacity 1;
}
.info-compass {
padding 0.9rem;
}
.rating-compass {
color #c2823a;
}
.status-compass {
font-size 0.7rem;
background #efeee5;
display inline-block;
padding 0.2rem 0.6rem;
border-radius 20px;
}
.btn-compass {
background #eae7db;
border none;
width 100%;
padding 0.45rem;
border-radius 40px;
margin-top 0.6rem;
cursor pointer;
font-weight 500;
}
指南针排行
.compass-rank {
background #f8f6ef;
border-radius 48px;
padding 1.6rem;
margin 2rem 0;
border 1px solid #e2d9cb;
}
.rank-compass-item {
display flex;
align-items center;
gap 1rem;
padding 0.7rem;
border-bottom 1px solid #e2dbc8;
cursor pointer;
}
复古档案馆——泛黄指南
.retro-compass {
background #efe7d7;
border-radius 48px;
padding 1.6rem;
margin 2rem 0;
}
.retro-flex {
display flex;
gap 1.5rem;
flex-wrap wrap;
margin-top 1rem;
}
.retro-card {
flex 1;
background #fffaf0;
border-radius 28px;
padding 0.6rem;
min-width 160px;
box-shadow 0 3px 6px rgba(0,0,0,0.02);
}
.coming-compass {
display flex;
gap 1.5rem;
margin-top 1rem;
}
footer {
background #2c3a33;
color #dfe6dc;
margin-top 3rem;
padding 2rem 0;
border-radius 32px 32px 0 0;
}
.modal-compass {
position fixed;
top 0;
left 0;
width 100%;
height 100%;
background rgba(0,0,0,0.8);
display flex;
align-items center;
justify-content center;
z-index 1000;
visibility hidden;
opacity 0;
transition 0.2s;
}
.modal-compass.active {
visibility visible;
opacity 1;
}
.modal-compass-content {
background #fffef7;
max-width 520px;
width 90%;
border-radius 48px;
padding 1.6rem;
color #1e2c26;
}
.toast-compass {
position fixed;
bottom 28px;
left 50%;
transform translateX(-50%);
background #2f3f38e6;
backdrop-filter blur(8px);
padding 0.5rem 1.2rem;
border-radius 60px;
color #f3e8c2;
z-index 1100;
}
@media (max-width 950px) {
.compass-grid {
grid-template-columns repeat(2, 1fr);
}
.needle-hero {
grid-template-columns 1fr;
}
}
@media (max-width 600px) {
.compass-grid {
grid-template-columns 1fr;
}
}
.footer-link {
background none;
border none;
color #dfe6dc;
margin-right 1.2rem;
cursor pointer;
}
.bread-compass {
font-size 0.75rem;
color #8b9a8a;
margin 0.8rem 0;
}
style
head
body
div class=compass-container
div class=compass-header
h1指南影院h1
div class=compass-nav
button class=nav-compass data-toast=指南片单即将开放指南片单button
button class=nav-compass data-toast=深度剧集深度剧集button
button class=nav-compass data-toast=纪录之光纪录之光button
div class=search-compass
span🧭span
input type=text placeholder=搜电影或导演... style=backgroundtransparent; bordernone; width130px; outlinenone; data-toast=指南搜索开发中
div
div class=avatar-compass data-toast=我的指南📘div
div
div
div class=bread-compass🧭 指南针 今日观影方向div
div class=needle-hero
div class=hero-compass
div class=hero-img style=background-image url('uploadvod008-banner.webp');div
div class=hero-caption
span class=guide-badge📌 指南编辑推荐span
h2 style=margin 0.3rem 0;《我的章鱼老师》h2
p奥斯卡最佳纪录长片，治愈无数人的生命之课。p
button class=btn-compass style=width auto; padding0.3rem 1rem; data-toast=指南影院筹备中🎞️ 开启指南button
div
div
div class=side-guide
div style=display flex; gap0.6rem; align-itemscenter;span style=font-size1.6rem;🧭spanspan style=font-weight bold;指南针·今日力荐spandiv
p style=margin 1rem 0;《惠子，凝视》—— 三宅唱导演，听障拳击手的坚韧日常，豆瓣8.8。p
button class=btn-compass data-toast=指南收藏标记📌 标记想看button
div
div
h3 style=font-size1.3rem; font-weight500; margin-bottom0.5rem;📖 本周指南推荐 · 高分甄选h3
div class=compass-grid id=compassGriddiv
div class=compass-rank
h3📈 指南针热度榜 · 真实观影指南h3
div id=compassRankListdiv
div
div class=retro-compass
h3📀 时光指南针 · 必看经典 (1980-2005)h3
div class=retro-flex id=retroCompassdiv
div
div style=background #f3efe5; border-radius 48px; padding 1.5rem; margin 2rem 0;
h3⏳ 新片指南 · 即将抵达h3
div class=coming-compass id=comingCompassdiv
div
div style=background #e7e4d8; border-radius 32px; padding 1.5rem; margin-bottom 1.5rem;
pstrong指南影院strong —— 你的私人观影指南针。我们不追逐流量，只为你呈现真正值得一看的冷门高分电影、口碑剧集与深度纪录片。所有影视信息均来自真实作品数据库，评分真实可查，不含广告。指南影院每日更新一份不随大流的片单，让你的每一次选择都有方向。播放功能正在开发中，敬请期待纯净观影体验。p
p style=margin-top0.6rem;✨ 所有标记“想看”将保留提醒，正式版上线后通知。p
div
div
footer
div class=compass-container
div© 2026 指南影院 · 观影风向标 侵权联系删除div
div style=margin-top 0.6rem;
button class=footer-link data-footer-help=about关于指南button
button class=footer-link data-footer-help=help指南帮助button
button class=footer-link data-footer-help=links友链申请button
button class=footer-link data-footer-help=complain内容反馈button
div
div京ICP备20261239号 · 指南影视文化div
div
footer
div class=modal-compass id=compassModal
div class=modal-compass-content id=compassModalInnerdiv
div
script
(function() {
const guideMovies = [
{ id601, title我的章鱼老师, year2020, type纪录片, director皮帕·埃尔利希, rating9.3, status4K典藏, desc一名电影人与章鱼跨越物种的友谊，生命启示录。, actors克雷格·福斯特, poster008, genremanga },
{ id602, title惠子，凝视, year2022, type电影, director三宅唱, rating8.8, statusHD高清, desc听障拳击手的平静与坚韧，日常即战斗。, actors岸井雪乃, poster020, genremovie },
{ id603, title伊尼舍林的报丧女妖, year2022, type电影, director马丁·麦克唐纳, rating8.7, status4K, desc友谊破裂，荒诞内战寓言。, actors科林·法瑞尔, poster030, genremovie },
{ id604, title天下乌鸦, year2021, type短片电影, director唐艺, rating8.3, statusHD, desc饭局上的黑色幽默与女性觉醒。, actors陈宣宇, poster041, genremovie },
{ id605, title疼痛难免, year2022, type电视剧, director露西·福布斯, rating9.4, status全7集, desc英国公立医院妇产科医生的崩溃日常。, actors本·卫肖, poster055, genretv },
{ id606, title万物生灵, year2020, type电视剧, director安迪·海伊, rating9.5, status第4季, desc兽医与大自然的温暖治愈故事。, actors尼古拉斯·瑞夫, poster060, genretv },
{ id607, title克拉克森的农场, year2021, type纪录片综艺, director加文·怀特海德, rating9.6, status第3季, desc暴躁老农务农爆笑纪实。, actors杰里米·克拉克森, poster070, genrevariety },
{ id608, title跃动青春, year2023, type动画, director出合小都美, rating9.4, status全12集, desc纯粹治愈的校园青春群像。, actors黑泽朋世, poster087, genreanime }
];
const retroGuide = [
{ title肖申克的救赎, year1994, country美国, rating9.7, desc希望永存，自由无价。, director弗兰克·德拉邦特, poster002, actors蒂姆·罗宾斯 },
{ title海上钢琴师, year1998, country意大利, rating9.2, desc1900的传奇人生。, director朱塞佩·托纳多雷, poster016, actors蒂姆·罗斯 },
{ title饮食男女, year1994, country中国台湾, rating9.1, desc李安家庭三部曲，美食与情感。, director李安, poster027, actors郎雄 },
{ title天使爱美丽, year2001, country法国, rating8.9, desc巴黎少女的可爱异想。, director让-皮埃尔·热内, poster035, actors奥黛丽·塔图 }
];
const comingGuide = [
{ title法拉利, daysLeft16, year2023, director迈克尔·曼, rating0, desc恩佐·法拉利传奇人生, poster073, type电影 },
{ title内战, daysLeft22, year2024, director亚历克斯·加兰, rating0, desc近未来美国内战寓言, poster082, type电影 }
];
const compassRank = [
{ name万物生灵, heat指南值 298.4w, rank1, id606 },
{ name疼痛难免, heat指南热度 274.2w, rank2, id605 },
{ name我的章鱼老师, heat指南星值 259.3w, rank3, id601 },
{ name跃动青春, heat观众选择 238.7w, rank4, id608 }
];
function toastGuide(msg) {
let t = document.querySelector('.toast-compass');
if(t) t.remove();
let div = document.createElement('div');
div.className = 'toast-compass';
div.innerText = msg;
document.body.appendChild(div);
setTimeout(()=div.remove(), 2000);
}
function renderCompassGrid() {
const container = document.getElementById('compassGrid');
container.innerHTML = guideMovies.map(m = `
div class=guide-card data-guidefilm='${JSON.stringify(m)}'
div class=card-mediaimg src=uploadvod${m.poster}-${m.genre}.webp alt=${m.title} loading=lazydiv class=play-compass🧭 指南放映divdiv
div class=info-compassdivstrong${m.title}strong span class=rating-compass⭐${m.rating}spandivdiv class=status-compass${m.status}divbutton class=btn-compass want-guide data-want='${JSON.stringify(m)}'📘 指南想看buttondiv
div
`).join('');
}
function renderRetroCompass() {
const retroDiv = document.getElementById('retroCompass');
retroDiv.innerHTML = retroGuide.map(r = `
div class=retro-card data-guideretro='${JSON.stringify(r)}'
div class=card-media style=aspect-ratio11.3;img src=uploadvod${r.poster}-movie.webp alt=${r.title} loading=lazydiv
div class=info-compassstrong${r.title}strong (${r.year}) span class=rating-compass✨${r.rating}spandiv${r.country}divbutton class=btn-compass want-retroGuide data-retro='${JSON.stringify(r)}'📀 时光标记buttondiv
div
`).join('');
}
function renderComingCompass() {
const upDiv = document.getElementById('comingCompass');
upDiv.innerHTML = comingGuide.map(u = `
div class=guide-card data-guideup='${JSON.stringify(u)}' style=flex1;
div class=card-mediaimg src=uploadvod${u.poster}-movie.webp alt=${u.title} loading=lazydiv
div class=info-compassstrong${u.title}strongdiv⏰ ${u.daysLeft}天后上映divbutton class=btn-compass want-upGuide data-up='${JSON.stringify(u)}'🔔 指南预约buttondiv
div
`).join('');
}
function renderCompassRank() {
const rankDiv = document.getElementById('compassRankList');
rankDiv.innerHTML = compassRank.map(r = `
div class=rank-compass-item data-guiderankid=${r.id}
div style=font-size1.6rem; width48px;${r.rank===1'🥇'r.rank===2'🥈'r.rank===3'🥉''🧭'}div
divstrong${r.name}strongdiv${r.heat}divdiv
div
`).join('');
}
function showModal(content) {
const modal = document.getElementById('compassModal');
const inner = document.getElementById('compassModalInner');
if(content.footerType) {
let title='', body='';
if(content.footerType==='about') { title=关于指南影院; body=p指南影院诞生于2025年，致力成为影迷的私人观影指南针，拒绝盲目跟风。pp联系邮箱：guide@zhinan.comp;}
else if(content.footerType==='help') { title=指南帮助; body=p正式版将提供多线路纯净播放，所有想看标记都会保留上线提醒。p;}
else if(content.footerType==='links') { title=友链申请; body=p欢迎迷影型网站友链，要求内容优质。申请：links@zhinan.comp;}
else { title=内容反馈; body=p如涉及版权问题请邮件 copyright@zhinan.com，我们快速处理。p;}
inner.innerHTML = `h2${title}h2${body}button class=btn-compass id=closeCompassModal关闭指南button`;
} else {
inner.innerHTML = `h2${content.title}h2img src=uploadvod${content.img}-movie.webp width=100% style=border-radius28px; margin0.6rem 0;pstrong年份strong ${content.year} strong导演strong ${content.director}brstrong指南评分strong ${content.rating} strong类型strong ${content.type'电影'}ppstrong剧情指南strong ${content.desc}ppstrong领衔主演strong ${content.actors'实力阵容'}pbutton class=btn-compass id=closeCompassModal关闭buttonbutton class=btn-compass style=margin-left0.5rem; data-toast=指南影院即将开放🎬 前往观影button`;
}
modal.classList.add('active');
document.getElementById('closeCompassModal').addEventListener('click',()=modal.classList.remove('active'));
}
document.body.addEventListener('click', (e) = {
if(e.target.closest('[data-toast]') e.target.closest('.nav-compass') e.target.closest('.avatar-compass') e.target.closest('.search-compass') (e.target.closest('.btn-compass') && !e.target.closest('.guide-card') && !e.target.closest('.retro-card'))) {
if(!e.target.closest('.modal-compass')) toastGuide(指南针正在校准，功能即将开放🧭);
}
if(e.target.closest('.want-guide') e.target.closest('.want-retroGuide') e.target.closest('.want-upGuide')) {
e.stopPropagation();
toastGuide(已加入指南想看清单，正式上线后通知你📌);
}
const filmDiv = e.target.closest('[data-guidefilm]');
if(filmDiv && !e.target.closest('.want-guide')) {
let data = JSON.parse(filmDiv.dataset.guidefilm);
showModal({titledata.title, yeardata.year, directordata.director, ratingdata.rating, descdata.desc, typedata.type, actorsdata.actors, imgdata.poster});
}
const retroDivEl = e.target.closest('[data-guideretro]');
if(retroDivEl && !e.target.closest('.want-retroGuide')) {
let d = JSON.parse(retroDivEl.dataset.guideretro);
showModal({titled.title, yeard.year, directord.director, ratingd.rating, descd.desc, type时光经典, actorsd.actors, imgd.poster});
}
const upEl = e.target.closest('[data-guideup]');
if(upEl && !e.target.closest('.want-upGuide')) {
let u = JSON.parse(upEl.dataset.guideup);
showModal({titleu.title, yearu.year, directoru.director, rating待上映, descu.desc, typeu.type, actors待揭晓, imgu.poster});
}
const rankLine = e.target.closest('[data-guiderankid]');
if(rankLine) {
let id = rankLine.dataset.guiderankid;
let film = guideMovies.find(f = f.id == id);
if(film) showModal({titlefilm.title, yearfilm.year, directorfilm.director, ratingfilm.rating, descfilm.desc, typefilm.type, actorsfilm.actors, imgfilm.poster});
}
if(e.target.closest('[data-footer-help]')) {
let fType = e.target.closest('[data-footer-help]').dataset.footerHelp;
showModal({footerType fType});
}
});
renderCompassGrid();
renderRetroCompass();
renderComingCompass();
renderCompassRank();
})();
script
body
html