78 lines
3.0 KiB
Plaintext
78 lines
3.0 KiB
Plaintext
---
|
|
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> |