广告修改
This commit is contained in:
谢宇宁
@@ -737,13 +737,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Figma: 1431×178 banner frame — stretch, 178px, radius 12, image cover-crop */
|
||||
/* 详情横幅：按素材 720×150 等比展示，避免裁切 */
|
||||
.content-ad-stack a {
|
||||
display: block;
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
height: 178px;
|
||||
aspect-ratio: 720 / 150;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@@ -865,7 +865,6 @@
|
||||
.content-ad-stack { gap: calc(12px * var(--detail-s)); }
|
||||
|
||||
.content-ad-stack a {
|
||||
height: calc(166px * var(--detail-s));
|
||||
border-radius: calc(12px * var(--detail-s));
|
||||
}
|
||||
|
||||
@@ -1001,9 +1000,11 @@
|
||||
.detail-h5-top-actions,
|
||||
.square-promo--pc-only,
|
||||
.content-official-info,
|
||||
.content-ad-stack,
|
||||
.content-column-divider { display: none !important; }
|
||||
|
||||
.content-ad-stack { gap: 10px; }
|
||||
.content-ad-stack a { border-radius: 8px; }
|
||||
|
||||
.detail-layout,
|
||||
.detail-main,
|
||||
.detail-sidebar { display: contents; }
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
/* Shared home banner ad row (PC 2-col flex / H5 stack). */
|
||||
|
||||
/* PC Figma: stretch row, 94px, gap 36, two equal flex slots */
|
||||
.home-ad-row {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 36px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-ad-row.home-ad-row--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner {
|
||||
position: relative;
|
||||
flex: 1 1 calc((100% - 36px) / 2);
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: calc((100% - 36px) / 2);
|
||||
height: 94px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.home-ad-row {
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner {
|
||||
flex: 1 1 calc((100% - 36px) / 2);
|
||||
max-width: calc((100% - 36px) / 2);
|
||||
height: 94px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.home-ad-row,
|
||||
.home-ad-row.home-ad-row--mobile {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-self: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.home-ad-row.home-ad-row--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* H5 Figma: 343×43 banner — stretch, 43px, radius 6, image cover-crop */
|
||||
.home-ad-row .home-ad-banner {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
flex: 0 0 43px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 43px;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: #464646;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/* 九宫格弹窗：深色模糊遮罩 + 4 列应用图标 + 底部关闭按钮（对齐 huangguocg.com） */
|
||||
.nine-grid-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1900;
|
||||
padding: 40px 24px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nine-grid-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nine-grid-panel {
|
||||
width: min(520px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.nine-grid-list {
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 28px 24px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.nine-grid-item {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nine-grid-item[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nine-grid-icon {
|
||||
width: 100%;
|
||||
max-width: 80px;
|
||||
aspect-ratio: 1;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.nine-grid-name {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nine-grid-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nine-grid-close img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nine-grid-panel {
|
||||
width: min(360px, 100%);
|
||||
}
|
||||
|
||||
.nine-grid-list {
|
||||
gap: 20px 12px;
|
||||
}
|
||||
|
||||
.nine-grid-icon {
|
||||
max-width: 70px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.nine-grid-name {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
@@ -2784,7 +2784,6 @@ a.play-info-tag:focus-visible {
|
||||
|
||||
.square-promo--pc-only,
|
||||
.content-official-info,
|
||||
.content-ad-stack,
|
||||
.content-column-divider,
|
||||
.play-sidebar,
|
||||
.play-download-btn { display: none !important; }
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
(function () {
|
||||
// 弹窗广告队列结束（含没有 / 已关闭过）后通知九宫格弹窗：年龄确认 → 弹窗广告 → 九宫格
|
||||
function markDone() {
|
||||
if (window.__dialogAdDone) return;
|
||||
window.__dialogAdDone = true;
|
||||
document.dispatchEvent(new CustomEvent("dialogad:done"));
|
||||
}
|
||||
|
||||
var QUEUE_VERSION = "2";
|
||||
var DISMISSED_KEY = "dialogAdDismissed";
|
||||
var PROGRESS_KEY = "dialogAdProgress";
|
||||
var mask = document.querySelector("[data-dialog-ad]");
|
||||
var previousBodyOverflow = "";
|
||||
var hasDisplayedItem = false;
|
||||
if (!mask) return;
|
||||
if (!mask) return markDone();
|
||||
|
||||
var items = Array.prototype.slice.call(mask.querySelectorAll("[data-dialog-ad-item]"));
|
||||
if (!items.length) return;
|
||||
if (!items.length) return markDone();
|
||||
|
||||
var queueSignature =
|
||||
QUEUE_VERSION +
|
||||
@@ -111,7 +118,8 @@
|
||||
mask.classList.remove("is-open");
|
||||
mask.hidden = true;
|
||||
mask.setAttribute("hidden", "");
|
||||
document.body.style.overflow = previousBodyOverflow;
|
||||
document.body.style.overflow = previousBodyOverflow === "hidden" ? "" : previousBodyOverflow;
|
||||
markDone();
|
||||
}
|
||||
|
||||
function showWhenAgeGateAllows() {
|
||||
@@ -215,7 +223,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
if (isDismissed()) return;
|
||||
if (isDismissed()) return markDone();
|
||||
if (currentIndex >= items.length) {
|
||||
finishQueue();
|
||||
return;
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
(function () {
|
||||
// 九宫格弹窗（对齐 huangguocg.com）：年龄确认 → 弹窗广告 → 九宫格。
|
||||
// 点任一应用 / 关闭按钮 / 空白处 / Esc 即关闭；同一会话内容不变时不再弹出。
|
||||
var DISMISSED_KEY = "gridAdDismissed";
|
||||
var mask = document.querySelector("[data-nine-grid]");
|
||||
if (!mask) return;
|
||||
|
||||
var items = Array.prototype.slice.call(mask.querySelectorAll("[data-nine-grid-item]"));
|
||||
if (!items.length) return;
|
||||
|
||||
var signature = JSON.stringify(
|
||||
items.map(function (item) {
|
||||
var image = item.querySelector("[data-nine-grid-src]");
|
||||
return [
|
||||
item.getAttribute("data-creative-id") || "",
|
||||
image ? image.getAttribute("data-nine-grid-src") : "",
|
||||
item.getAttribute("href") || "",
|
||||
];
|
||||
}),
|
||||
);
|
||||
|
||||
function readSession(key) {
|
||||
try {
|
||||
return window.sessionStorage.getItem(key) || "";
|
||||
} catch (error) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function writeSession(key, value) {
|
||||
try {
|
||||
window.sessionStorage.setItem(key, value);
|
||||
} catch (error) {
|
||||
// sessionStorage 不可用时仅本页关闭。
|
||||
}
|
||||
}
|
||||
|
||||
if (readSession(DISMISSED_KEY) === signature) return;
|
||||
|
||||
function waitForImage(image) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
if (image.complete && image.naturalWidth > 0 && image.src.indexOf("placeholder") === -1) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
var timeout = window.setTimeout(function () {
|
||||
cleanup();
|
||||
reject(new Error("image load timeout"));
|
||||
}, 12000);
|
||||
function cleanup() {
|
||||
window.clearTimeout(timeout);
|
||||
image.removeEventListener("load", handleLoad);
|
||||
image.removeEventListener("error", handleError);
|
||||
}
|
||||
function handleLoad() {
|
||||
cleanup();
|
||||
if (image.naturalWidth > 0) resolve();
|
||||
else reject(new Error("image decode failed"));
|
||||
}
|
||||
function handleError() {
|
||||
cleanup();
|
||||
reject(new Error("image load failed"));
|
||||
}
|
||||
image.addEventListener("load", handleLoad);
|
||||
image.addEventListener("error", handleError);
|
||||
});
|
||||
}
|
||||
|
||||
function loadIcon(image) {
|
||||
var source = image.getAttribute("data-nine-grid-src") || "";
|
||||
if (!source) return Promise.reject(new Error("image source is empty"));
|
||||
if (typeof window.processImage === "function") {
|
||||
return window.processImage(source, image).then(function (result) {
|
||||
if (!result) throw new Error("image decrypt failed");
|
||||
return waitForImage(image);
|
||||
});
|
||||
}
|
||||
image.src = source;
|
||||
return waitForImage(image);
|
||||
}
|
||||
|
||||
var opened = false;
|
||||
|
||||
function open() {
|
||||
if (opened) return;
|
||||
opened = true;
|
||||
mask.hidden = false;
|
||||
mask.removeAttribute("hidden");
|
||||
mask.classList.add("is-open");
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!opened) return;
|
||||
opened = false;
|
||||
writeSession(DISMISSED_KEY, signature);
|
||||
mask.classList.remove("is-open");
|
||||
mask.hidden = true;
|
||||
mask.setAttribute("hidden", "");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
// 依次等待：年龄确认关闭 → 弹窗广告队列结束（没有弹窗广告时直接放行）
|
||||
function whenStartupReady(callback) {
|
||||
var ageGate = document.getElementById("eightPop");
|
||||
if (ageGate && ageGate.classList.contains("is-open")) {
|
||||
document.addEventListener(
|
||||
"eightpop:closed",
|
||||
function () {
|
||||
whenStartupReady(callback);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
return;
|
||||
}
|
||||
var hasDialogAd = !!document.querySelector("[data-dialog-ad]");
|
||||
if (hasDialogAd && !window.__dialogAdDone) {
|
||||
document.addEventListener("dialogad:done", callback, { once: true });
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
// 只展示图标加载成功的应用；一个都没加载成功则不弹
|
||||
var ready = Promise.all(
|
||||
items.map(function (item) {
|
||||
var image = item.querySelector("[data-nine-grid-src]");
|
||||
if (!image) return Promise.resolve(false);
|
||||
return loadIcon(image)
|
||||
.then(function () {
|
||||
item.hidden = false;
|
||||
item.removeAttribute("hidden");
|
||||
return true;
|
||||
})
|
||||
.catch(function () {
|
||||
return false;
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
whenStartupReady(function () {
|
||||
ready.then(function (loaded) {
|
||||
if (loaded.some(Boolean)) open();
|
||||
});
|
||||
});
|
||||
|
||||
mask.addEventListener("click", function (event) {
|
||||
if (event.target === mask || event.target.closest("[data-nine-grid-close]") || event.target.closest("[data-nine-grid-item]")) {
|
||||
close();
|
||||
}
|
||||
});
|
||||
|
||||
mask.querySelector(".nine-grid-panel").addEventListener("click", function (event) {
|
||||
if (event.target === event.currentTarget) close();
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape" && opened) close();
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user