halo-theme-pix/embed-code/page/qiyu-dev.html

<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>