屿风 发表于 2026-8-14 15:57:52

电影区发帖代码

<style>
.dz-card-wrap{width:900px !important;background:#161a23 !important;border-radius:14px !important;box-shadow:0 4px 16px rgba(0,0,0,0.35) !important;padding:16px !important;margin:10px auto !important;box-sizing:border-box !important;}
.dz-media-box{width:100% !important;border-radius:10px !important;overflow:hidden !important;margin-top:16px !important;}
.dz-oval-input{width:100% !important;box-sizing:border-box !important;margin-bottom:16px !important;padding:10px 18px !important;border-radius:999px !important;border:none !important;outline:none !important;background:#232935 !important;color:#e8e8e8 !important;font-size:14px !important;}
.dz-oval-input::placeholder{color:#888 !important;}
.dz-middle-row{display:flex !important;gap:18px !important;align-items:flex-start !important;}
.dz-img-left{flex:0 0 420px !important;width:420px !important;max-width:420px !important;position:relative !important;border-radius:12px !important;overflow:hidden !important;cursor:pointer !important;}
.vip-corner-tag{position:absolute !important;top:0 !important;right:0 !important;z-index:2 !important;background:linear-gradient(90deg,#fff1bc,#ffbc5c) !important;color:#5c3800 !important;font-weight:bold !important;font-size:22px !important;padding:4px 16px !important;border-bottom-left-radius:12px !important;}
.dz-text-right{flex:1 !important;min-width:0 !important;}
.inner-text{font-size:14px !important;color:#C0C0C0 !important;line-height:1.55 !important;word-break:break-all !important;white-space:pre-wrap !important;margin-top:-4px !important;margin-bottom:0 !important;}
.text-main-title{font-size:20px !important;color:#FFE4B5 !important;font-weight:bold !important;display:block !important;margin-bottom:8px !important;}
.text-sub-title{font-size:16px !important;color:#FFE4B5 !important;display:block !important;margin:10px 0 4px !important;}
/* ========== 海报轮播CSS【修复塌陷】 ========== */
.poster-slide-item{
    width:100% !important;
    transition:opacity .4s ease !important;
    pointer-events:none !important;
}
.poster-slide-item.active{
    position:relative !important;
    opacity:1 !important;
}
.poster-slide-item:not(.active){
    position:absolute !important;
    inset:0 !important;
    opacity:0 !important;
    z-index:1 !important;
}
.dz-img-left img{width:100% !important;height:auto !important;display:block !important;border-radius:0 !important;box-shadow:0 3px 12px rgba(0,0,0,0.4) !important;pointer-events:none !important;transition:none !important;cursor:default !important;}
.imdb-rate-box{background:#222936 !important;border:1px solid #343c4b !important;border-radius:8px !important;padding:10px 14px !important;margin:4px 0 0 !important;display:flex !important;align-items:center !important;gap:14px !important;}
.imdb-badge{background:#f5c518 !important;color:#000 !important;font-weight:900 !important;font-size:18px !important;padding:2px 8px !important;border-radius:4px !important;line-height:1 !important;}
.imdb-yellow-star{font-size:22px !important;color:#f5c518 !important;line-height:1 !important;}
.imdb-score-num{font-size:26px !important;color:#fff !important;font-weight:bold !important;line-height:1 !important;}
.imdb-rate-btn{margin-left:20px !important;display:flex !important;align-items:center !important;gap:6px !important;font-size:20px !important;color:#63b8ff !important;}
.imdb-votes{margin-left:auto !important;font-size:14px !important;color:#C0C0C0 !important;line-height:1 !important;}
.fold-item{background:#202833 !important;border:1px solid #333b48 !important;border-radius:8px !important;margin-top:12px !important;overflow:hidden !important;}
.fold-header{padding:12px 16px !important;cursor:pointer !important;color:#e2e2e2 !important;display:flex !important;justify-content:space-between !important;align-items:center !important;transition:0.2s !important;}
.fold-header:hover{background:#27303d !important;}
.fold-content{max-height:0 !important;overflow:hidden !important;padding:0 16px !important;background:#161a23 !important;color:#fff !important;transition:max-height .35s ease,padding .35s ease !important;}
.fold-item.open .fold-content{max-height:2000px !important;padding:14px 16px !important;}
.fold-icon{transition:transform .3s !important;}
.fold-item.open .fold-icon{transform:rotate(180deg) !important;}
.dz-hide-block{margin-top:16px !important;border-top:1px solid #2c3340 !important;padding-top:12px !important;}
.dz-toggle-btn{cursor:pointer !important;color:#f0f0f0 !important;font-size:14px !important;}
.dz-hidden-content{display:none !important;margin-top:10px !important;color:#fff !important;line-height:1.65 !important;}
.dz-hidden-content.open{display:block !important;}
</style>
<div class="dz-card-wrap">
<input class="dz-oval-input" placeholder="开始搜索楼主更多发帖内容">
<div class="dz-middle-row">
<div class="dz-img-left">
<div class="vip-corner-tag">VIP</div>
<!-- 海报轮播 -->
<div class="poster-slide-item active"></div>
<div class="poster-slide-item"></div>
<div class="poster-slide-item"></div>
<div class="poster-slide-item"></div>
</div>
<div class="dz-text-right">
<div class="inner-text"><span class="text-main-title">挽救计划</span>
导演: 菲尔·罗德 / 克里斯托弗·米勒
编剧: 德鲁·戈达德
主演: 瑞恩·高斯林 / 桑德拉·惠勒 / 詹姆斯·奥尔蒂斯 / 莱昂内尔·博伊斯 / 梁振邦
类型: 剧情 / 科幻 / 惊悚
制片国家/地区: 美国
语言: 英语
上映日期: 2026-03-20(美国/中国大陆)
片长: 156分钟<br>
<span class="text-sub-title">电影简介：</span>
太阳正在被“吃”掉，绝望吞噬地球。一名“平凡”的中学教师格雷斯背负全人类的希望，踏上“太空不归路”。末路孤旅中，他意外遇到一位外星萌友，一个同样身陷绝境的外星工程师，这对“宇宙搭子”成了两个文明最后的救命稻草。他们能否在资源紧缺的情况下攻克重重科学谜 题，寻回唯一的希望火种？</div><br>
<div class="imdb-rate-box">
<span class="imdb-badge">IMDb</span>
<span class="imdb-yellow-star">评级</span>
<span class="imdb-yellow-star">★</span>
<span class="imdb-score-num">8.9/10</span>
<div class="imdb-rate-btn"><span>☆</span><span>Rate</span></div>
<span class="imdb-votes">100w+</span>
</div>
</div>
</div>
<div class="dz-media-box"></div>
<div style="margin-top:20px;">
<div class="fold-item">
<div class="fold-header"><span>展开预告片</span><span class="fold-icon">▼</span></div>
<div class="fold-content">《预告片》</div>
</div>
<div class="fold-item">
<div class="fold-header"><span>点击查看链接</span><span class="fold-icon">▼</span></div>
<div class="fold-content">
**** Hidden Message *****
</div>
</div>
</div>
</div>
<script>
document.addEventListener('click',e=>{
let hd = e.target.closest('.fold-header');
hd && hd.parentElement.classList.toggle('open');
})
// ========== 海报轮播JS ==========
const posterWrap = document.querySelector('.dz-img-left');
const slides = document.querySelectorAll('.poster-slide-item');
let idx = 0;
const total = slides.length;
// 清除图片自带预览
document.querySelectorAll('.poster-slide-item img').forEach(img=>{
    img.onclick = null;
    img.removeAttribute('onclick');
});
posterWrap.addEventListener('click',function(e){
    e.stopPropagation();
    slides.classList.remove('active');
    idx++;
    if(idx >= total) idx = 0;
    slides.classList.add('active');
});
</script>

屿风 发表于 2026-8-14 16:00:11

<style>
.dz-card-wrap{width:900px !important;background:#161a23 !important;border-radius:14px !important;box-shadow:0 4px 16px rgba(0,0,0,0.35) !important;padding:16px !important;margin:10px auto !important;box-sizing:border-box !important;}
.dz-media-box{width:100% !important;border-radius:10px !important;overflow:hidden !important;margin-top:16px !important;}
.dz-oval-input{width:100% !important;box-sizing:border-box !important;margin-bottom:16px !important;padding:10px 18px !important;border-radius:999px !important;border:none !important;outline:none !important;background:#232935 !important;color:#e8e8e8 !important;font-size:14px !important;}
.dz-oval-input::placeholder{color:#888 !important;}
.dz-middle-row{display:flex !important;gap:18px !important;align-items:flex-start !important;}
.dz-img-left{flex:0 0 420px !important;width:420px !important;max-width:420px !important;position:relative !important;border-radius:12px !important;overflow:hidden !important;cursor:pointer !important;}
.vip-corner-tag{position:absolute !important;top:0 !important;right:0 !important;z-index:2 !important;background:linear-gradient(90deg,#fff1bc,#ffbc5c) !important;color:#5c3800 !important;font-weight:bold !important;font-size:22px !important;padding:4px 16px !important;border-bottom-left-radius:12px !important;}
.dz-text-right{flex:1 !important;min-width:0 !important;}
.inner-text{font-size:14px !important;color:#C0C0C0 !important;line-height:1.55 !important;word-break:break-all !important;white-space:pre-wrap !important;margin-top:-4px !important;margin-bottom:0 !important;}
.text-main-title{font-size:20px !important;color:#FFE4B5 !important;font-weight:bold !important;display:block !important;margin-bottom:8px !important;}
.text-sub-title{font-size:16px !important;color:#FFE4B5 !important;display:block !important;margin:10px 0 4px !important;}
/* ========== 海报轮播CSS【修复塌陷】 ========== */
.poster-slide-item{
    width:100% !important;
    transition:opacity .4s ease !important;
    pointer-events:none !important;
}
.poster-slide-item.active{
    position:relative !important;
    opacity:1 !important;
}
.poster-slide-item:not(.active){
    position:absolute !important;
    inset:0 !important;
    opacity:0 !important;
    z-index:1 !important;
}
.dz-img-left img{width:100% !important;height:auto !important;display:block !important;border-radius:0 !important;box-shadow:0 3px 12px rgba(0,0,0,0.4) !important;pointer-events:none !important;transition:none !important;cursor:default !important;}
.imdb-rate-box{background:#222936 !important;border:1px solid #343c4b !important;border-radius:8px !important;padding:10px 14px !important;margin:4px 0 0 !important;display:flex !important;align-items:center !important;gap:14px !important;}
.imdb-badge{background:#f5c518 !important;color:#000 !important;font-weight:900 !important;font-size:18px !important;padding:2px 8px !important;border-radius:4px !important;line-height:1 !important;}
.imdb-yellow-star{font-size:22px !important;color:#f5c518 !important;line-height:1 !important;}
.imdb-score-num{font-size:26px !important;color:#fff !important;font-weight:bold !important;line-height:1 !important;}
.imdb-rate-btn{margin-left:20px !important;display:flex !important;align-items:center !important;gap:6px !important;font-size:20px !important;color:#63b8ff !important;}
.imdb-votes{margin-left:auto !important;font-size:14px !important;color:#C0C0C0 !important;line-height:1 !important;}
.fold-item{background:#202833 !important;border:1px solid #333b48 !important;border-radius:8px !important;margin-top:12px !important;overflow:hidden !important;}
.fold-header{padding:12px 16px !important;cursor:pointer !important;color:#e2e2e2 !important;display:flex !important;justify-content:space-between !important;align-items:center !important;transition:0.2s !important;}
.fold-header:hover{background:#27303d !important;}
.fold-content{max-height:0 !important;overflow:hidden !important;padding:0 16px !important;background:#161a23 !important;color:#fff !important;transition:max-height .35s ease,padding .35s ease !important;}
.fold-item.open .fold-content{max-height:2000px !important;padding:14px 16px !important;}
.fold-icon{transition:transform .3s !important;}
.fold-item.open .fold-icon{transform:rotate(180deg) !important;}
.dz-hide-block{margin-top:16px !important;border-top:1px solid #2c3340 !important;padding-top:12px !important;}
.dz-toggle-btn{cursor:pointer !important;color:#f0f0f0 !important;font-size:14px !important;}
.dz-hidden-content{display:none !important;margin-top:10px !important;color:#fff !important;line-height:1.65 !important;}
.dz-hidden-content.open{display:block !important;}
</style>
<div class="dz-card-wrap">
<input class="dz-oval-input" placeholder="开始搜索楼主更多发帖内容">
<div class="dz-middle-row">
<div class="dz-img-left">
<div class="vip-corner-tag">VIP</div>
<!-- 海报轮播 -->
<div class="poster-slide-item active">海报1</div>
<div class="poster-slide-item">海报2</div>
<div class="poster-slide-item">海报3</div>
<div class="poster-slide-item">海报4</div>
</div>
<div class="dz-text-right">
<div class="inner-text"><span class="text-main-title">挽救计划</span>
导演: 菲尔·罗德 / 克里斯托弗·米勒
编剧: 德鲁·戈达德
主演: 瑞恩·高斯林 / 桑德拉·惠勒 / 詹姆斯·奥尔蒂斯 / 莱昂内尔·博伊斯 / 梁振邦 / 更多...
类型: 剧情 / 科幻 / 惊悚
制片国家/地区: 美国
语言: 英语
上映日期: 2026-03-20(美国/中国大陆) / 2026-03-18(中国台湾)
片长: 156分钟<br>
<span class="text-sub-title">电影简介：</span>
太阳正在被“吃”掉，绝望吞噬地球。一名“平凡”的中学教师格雷斯（瑞恩·高斯林 饰）背负全人类的希望，踏上“太空不归路”。末路孤旅中，他意外遇到一位外星萌友，一个同样身陷绝境的外星工程师，这对“宇宙搭子”成了两个文明最后的救命稻草。他们能否在资源紧缺的情况下攻克重重科学谜 题，寻回唯一的希望火种？</div><br>
<div class="imdb-rate-box">
<span class="imdb-badge">IMDb</span>
<span class="imdb-yellow-star">评级</span>
<span class="imdb-yellow-star">★</span>
<span class="imdb-score-num">8.9/10</span>
<div class="imdb-rate-btn"><span>☆</span><span>Rate</span></div>
<span class="imdb-votes">100w+</span>
</div>
</div>
</div>
<div class="dz-media-box"></div>
<div style="margin-top:20px;">
<div class="fold-item">
<div class="fold-header"><span>展开预告片</span><span class="fold-icon">▼</span></div>
<div class="fold-content">预告片</div>
</div>
<div class="fold-item">
<div class="fold-header"><span>点击查看链接</span><span class="fold-icon">▼</span></div>
<div class="fold-content">
**** Hidden Message *****
</div>
</div>
</div>
</div>
<script>
document.addEventListener('click',e=>{
let hd = e.target.closest('.fold-header');
hd && hd.parentElement.classList.toggle('open');
})
// ========== 海报轮播JS ==========
const posterWrap = document.querySelector('.dz-img-left');
const slides = document.querySelectorAll('.poster-slide-item');
let idx = 0;
const total = slides.length;
// 清除图片自带预览
document.querySelectorAll('.poster-slide-item img').forEach(img=>{
    img.onclick = null;
    img.removeAttribute('onclick');
});
posterWrap.addEventListener('click',function(e){
    e.stopPropagation();
    slides.classList.remove('active');
    idx++;
    if(idx >= total) idx = 0;
    slides.classList.add('active');
});
</script>
页: [1]
查看完整版本: 电影区发帖代码