新增嵌入式代码块；优化通知书推送时机
This commit is contained in:
anian
@@ -0,0 +1,285 @@
|
||||
<style>
|
||||
.adventure-quest-show-wrap * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.adventure-quest-show-wrap {
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
--aq-show-g2: #E1E9E5;
|
||||
--aq-show-g3: #8fdbb5;
|
||||
--aq-show-g4: #22BB6D;
|
||||
--aq-show-text: #7aa1a1;
|
||||
--aq-mask-bg: rgba(143, 219, 181, 0.9);
|
||||
uk-width-2-3@m;
|
||||
width: 100%;
|
||||
max-width: calc(100% - 20px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
margin-bottom: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tab {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--aq-show-text);
|
||||
background: var(--aq-show-g2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tab:hover {
|
||||
background: #22BB6D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tab.adventure-quest-show-active {
|
||||
background: var(--aq-show-g4);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.adventure-quest-show-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
margin: 0 auto;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card {
|
||||
--aq-hover-text: #fff;
|
||||
background: #f7f7f8;
|
||||
border-radius: 5px;
|
||||
/* 卡片基础圆角（遮罩可继承此值） */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1/1 !important;
|
||||
flex: 0 0 calc(50% - 8px) !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card__hover-text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
color: var(--aq-hover-text);
|
||||
border-radius: 15px;
|
||||
background: var(--aq-mask-bg);
|
||||
font-weight: bold;
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.6, 0.4, 0, 1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card:hover .adventure-quest-show-card__hover-text {
|
||||
transform: scale(1);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.adventure-quest-show-card {
|
||||
flex: 0 0 100% !important;
|
||||
aspect-ratio: 1/1 !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-container {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.adventure-quest-show-load {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-load button {
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: #22BB6D;
|
||||
color: white;
|
||||
transition: 0.2s;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-load button:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="adventure-quest-show-wrap">
|
||||
<div class="adventure-quest-show-tabs" id="adventure-quest-show-tabs"></div>
|
||||
<div class="adventure-quest-show-container" id="adventure-quest-show-container"></div>
|
||||
<div class="adventure-quest-show-load">
|
||||
<button id="adventure-quest-show-load-btn">翻阅更多</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let globalAdventureQuestState = {
|
||||
adventureQuestCurrent: ''
|
||||
};
|
||||
|
||||
function initializeAdventureQuestEvents() {
|
||||
const wrap = document.querySelector(".adventure-quest-show-wrap");
|
||||
if (!wrap) return;
|
||||
|
||||
const container = document.getElementById("adventure-quest-show-container");
|
||||
const loadBtn = document.getElementById("adventure-quest-show-load-btn");
|
||||
container.innerHTML = "";
|
||||
loadBtn.style.display = "inline-block";
|
||||
|
||||
const adventureQuestData = {
|
||||
"山林奇遇": [
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "偶遇小鹿<br>aaa" },
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "清凉沁心" }
|
||||
|
||||
],
|
||||
"都市秘境": [
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "偶遇小鹿" },
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "清凉沁心" }
|
||||
]
|
||||
};
|
||||
|
||||
const ALL_TAB = "全部";
|
||||
|
||||
function getTabFromUrl() {
|
||||
const url = new URL(window.location.href);
|
||||
return url.searchParams.get("tab");
|
||||
}
|
||||
|
||||
function setTabToUrl(tab) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("tab", tab);
|
||||
history.replaceState(null, "", url.toString());
|
||||
}
|
||||
|
||||
function getAllList() {
|
||||
let arr = [];
|
||||
Object.keys(adventureQuestData).forEach(k => arr = arr.concat(adventureQuestData[k]));
|
||||
return arr;
|
||||
}
|
||||
|
||||
function getCurrentList() {
|
||||
return globalAdventureQuestState.adventureQuestCurrent === ALL_TAB ? getAllList() : adventureQuestData[globalAdventureQuestState.adventureQuestCurrent];
|
||||
}
|
||||
|
||||
const tabNames = [ALL_TAB, ...Object.keys(adventureQuestData)];
|
||||
let initialTab = getTabFromUrl();
|
||||
|
||||
if (!globalAdventureQuestState.adventureQuestCurrent) {
|
||||
globalAdventureQuestState.adventureQuestCurrent = tabNames.includes(initialTab) ? initialTab : tabNames[0];
|
||||
}
|
||||
|
||||
let adventureQuestLoaded = 0;
|
||||
const adventureQuestPer = 6;
|
||||
|
||||
const tabs = document.getElementById("adventure-quest-show-tabs");
|
||||
tabs.innerHTML = "";
|
||||
tabNames.forEach(name => {
|
||||
const t = document.createElement("div");
|
||||
t.className = "adventure-quest-show-tab" + (name === globalAdventureQuestState.adventureQuestCurrent ? " adventure-quest-show-active" : "");
|
||||
t.innerText = name;
|
||||
t.onclick = () => switchTab(name);
|
||||
tabs.appendChild(t);
|
||||
});
|
||||
|
||||
function switchTab(name) {
|
||||
globalAdventureQuestState.adventureQuestCurrent = name;
|
||||
adventureQuestLoaded = 0;
|
||||
container.innerHTML = "";
|
||||
setTabToUrl(name);
|
||||
|
||||
document.querySelectorAll(".adventure-quest-show-tab").forEach(t => t.classList.remove("adventure-quest-show-active"));
|
||||
[...tabs.children].find(t => t.innerText === name).classList.add("adventure-quest-show-active");
|
||||
|
||||
loadMore();
|
||||
}
|
||||
|
||||
function createAdventureQuestCard(item) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "adventure-quest-show-card";
|
||||
|
||||
card.innerHTML = `
|
||||
<img class="adventure-quest-show-card__img" src="${item.src}" alt="奇遇图片">
|
||||
<span class="adventure-quest-show-card__hover-text">${item.hoverText}</span>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
const list = getCurrentList();
|
||||
if (!list || list.length === 0) {
|
||||
loadBtn.style.display = "none";
|
||||
return;
|
||||
}
|
||||
const next = list.slice(adventureQuestLoaded, adventureQuestLoaded + adventureQuestPer);
|
||||
if (next.length === 0) {
|
||||
loadBtn.style.display = "none";
|
||||
return;
|
||||
}
|
||||
adventureQuestLoaded += next.length;
|
||||
|
||||
next.forEach(item => {
|
||||
const card = createAdventureQuestCard(item);
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
if (adventureQuestLoaded >= list.length) {
|
||||
loadBtn.style.display = "none";
|
||||
} else {
|
||||
loadBtn.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
|
||||
loadBtn.onclick = () => {
|
||||
loadMore();
|
||||
};
|
||||
|
||||
loadMore();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
requestAnimationFrame(() => {
|
||||
container.style.opacity = "1";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initializeAdventureQuestEvents);
|
||||
document.addEventListener("pjax:complete", initializeAdventureQuestEvents);
|
||||
</script>
|
||||
Reference in New Issue
Block a user