/* ================================================ Grearth 首页自定义样式 — 绿色装饰色块（在视频层下方） 使用方法：在页面 内最后一行添加： 层级顺序（z-index 由低到高）： 0 绿色块（::before / ::after） 1 imgbox 容器 2 建筑图片 3 shade 遮罩 4 play 播放按钮 ================================================ */ /* ── 1. mainBox ─────────────────────────────────── */ .bossgoo-index-about72 .mainBox { position: relative; overflow: hidden; } /* ── 2. innerbox（文字区，层级高于绿色块）────────── */ .bossgoo-index-about72 .innerbox { position: relative; z-index: 2; } /* ── 3. imgbox（图片区容器）─────────────────────── */ .bossgoo-index-about72 .imgbox { position: relative; z-index: 1; } /* ── 4. 图片和播放控件层级，确保在绿色块上方 ────── */ .bossgoo-index-about72 .imgbox > img:first-child { position: relative; z-index: 2; /* 图片盖在绿色块上 */ } .bossgoo-index-about72 .imgbox .shade { z-index: 3; } .bossgoo-index-about72 .imgbox .play { position: absolute; z-index: 4; /* 播放按钮始终可点击 */ } /* ── 5. 右上角绿色块 ──────────────────────────── z-index: 0 → 在图片（z-index: 2）下方 图片未覆盖的区域（上方留白）会露出绿色 */ .bossgoo-index-about72 .imgbox::before { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background-color: #4a9c2f; opacity: 0.94; z-index: 0; pointer-events: none; } /* ── 6. 右下角绿色块 ──────────────────────────── 同上，在图片下方，从图片下方留白处露出 */ .bossgoo-index-about72 .imgbox::after { content: ''; position: absolute; bottom: 0; right: 0; width: 120px; height: 120px; background-color: #4a9c2f; opacity: 0.94; z-index: 0; pointer-events: none; } /* ── 7. 隐藏原来跑偏的 colorRPhone 和 colorR ──── */ .bossgoo-index-about72 .colorRPhone { display: none; } .colorR { display: none; } /* ── 8. 响应式：小屏缩小 ────────────────────────── */ @media (max-width: 768px) { .bossgoo-index-about72 .imgbox::before, .bossgoo-index-about72 .imgbox::after { width: 70px; height: 70px; } }