/* ================================================ Grearth 首页自定义样式 — 双绿色装饰色块 使用方法：在页面 内最后一行添加： 真实 HTML 结构： .mainBox ├── .innerbox （文字区） ├── .imgbox （图片/视频区） └── .colorRPhone（绿色块，mainBox 直接子元素） ================================================ */ /* ── 1. mainBox：定位容器，裁切溢出 ─────────────── */ .mainBox { position: relative; overflow: hidden; } /* ── 2. innerbox / imgbox：文字和图片层级 ───────── z-index: 1 确保内容在绿色块之上显示 */ .innerbox { position: relative; z-index: 1; } .imgbox { position: relative; z-index: 1; } /* ── 3. .colorRPhone：右上角绿色正方形 ──────────── 位置：mainBox 右上角 colorRPhone 是 mainBox 的直接子元素， absolute 定位相对于 mainBox */ .colorRPhone { position: absolute; top: 0; right: 0; width: 120px; height: 120px; background-color: #4a9c2f; z-index: 0; pointer-events: none; opacity: 0.94; } /* ── 4. .mainBox::after：右下角绿色正方形 ───────── 用伪元素生成第二块，无需改动 HTML */ .mainBox::after { content: ''; position: absolute; bottom: 0; right: 0; width: 120px; height: 120px; background-color: #4a9c2f; z-index: 0; pointer-events: none; opacity: 0.94; } /* ── 5. .colorR：隐藏 mainBox 外的多余元素 ──────── */ .colorR { display: none; } /* ── 6. 响应式：小屏幕适配 ─────────────────────── */ @media (max-width: 768px) { .colorRPhone, .mainBox::after { width: 70px; height: 70px; } }