---
title: 影像收藏
---

import MovieCard from '@site/src/components/MovieCard';

<style>{`
  .container,.main-wrapper,main>div,.theme-doc-markdown{max-width:100%!important;padding:0!important;margin:0!important}
  body,html{overflow-x:hidden;width:100%}
  .movie-grid>div{padding:4px!important}
  .movie-grid .movie-card-wrapper,.movie-grid .movie-card-wrapper>*{padding:0!important;margin:0!important;line-height:0!important;font-size:0!important;display:block!important}
  .movie-grid .movie-card-wrapper img,.movie-grid .movie-card-wrapper picture,.movie-grid .movie-card-wrapper figure{display:block!important;margin:0!important;padding:0!important}
  .movie-grid .movie-title{font-size:16px;font-weight:600;color:var(--ifm-font-color-base);line-height:1.3;margin:4px 0 0!important;padding:0!important}
  [data-theme=dark] .movie-grid>div{border-color:rgba(255,255,255,0.15)!important;background:rgba(255,255,255,0.03)!important}
  
  /* 桌面端：5列 */
  @media(min-width:1201px){.movie-grid{grid-template-columns:repeat(5,1fr)!important;gap:16px!important}}
  
  /* 平板：4列 */
  @media(max-width:1200px){.movie-grid{grid-template-columns:repeat(4,1fr)!important;gap:14px!important}}
  
  /* 小平板：3列 */
  @media(max-width:768px){.movie-grid{grid-template-columns:repeat(3,1fr)!important;gap:12px!important}}
  
  /* 手机：2列 */
  @media(max-width:480px){.movie-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}}
  
  /* 小屏手机：1列 */
  @media(max-width:360px){.movie-grid{grid-template-columns:repeat(1,1fr)!important;gap:10px!important}}

  /* ===== 移动端修复：统一左对齐 ===== */
  @media(max-width:768px){
    div[style*="paddingLeft:200px"] {
      padding-left:16px!important;
      padding-right:16px!important;
    }
    .movie-grid {
      max-width:100%!important;
      width:100%!important;
      margin-left:0!important;
      margin-right:0!important;
    }
    .movie-grid .movie-card-wrapper img {
      max-width:100%!important;
      height:auto!important;
    }
  }

  @media(max-width:480px){
    div[style*="paddingLeft:200px"] {
      padding-left:12px!important;
      padding-right:12px!important;
    }
  }

  h3 {margin-top: 40px !important;}
`}</style>

<div style={{paddingLeft:'200px',paddingRight:'40px',width:'100%',boxSizing:'border-box'}}>
## 标题
### 电影

<div className="movie-grid" style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:'16px',width:'100%',maxWidth:'900px'}}>
  {[
    // 在此添加更多电影，格式：{imdb:'ttxxxxxx', title:'片名'}
    {imdb:'tt0095497', title:'基督最后的诱惑'},
    // 添加更多...
  ].map(item => (
    <div key={item.imdb} style={{border:'1px solid rgba(128,128,128,0.25)',background:'rgba(128,128,128,0.02)',padding:'4px',textAlign:'center'}}>
      <div className="movie-card-wrapper" style={{lineHeight:0,fontSize:0,padding:0,margin:0}}>
        <MovieCard imdbId={item.imdb} />
      </div>
      <p className="movie-title">{item.title}</p>
    </div>
  ))}
</div>

</div>