master

分支 (1)

标签 (2)

管理

管理

master

v.ray.1

v.lod.1

threejs-animation
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>StringTokGame</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="search">
      <input type="text" id="search" placeholder="搜索" />
      <button>搜索</button>
    </div>
    <ul class="menuList"></ul>
    <div class="link">
      <p>友情链接</p>
      <ul class="linkList">

      </ul>
    </div>
  </body>
  <script type="module">
    const ul = document.querySelector(".menuList");
    const linkList = document.querySelector(".linkList");
    const input = document.querySelector("input");
    const button = document.querySelector("button");
    let filterStr = "";
    button.addEventListener("click", () => {
      filterStr = input.value;
      setUlHtml();
    });
    let dataList = [];
    fetch(`${import.meta.env.VITE_ASSETS_URL}/assets/json/data.json`)
      .then((res) => res.json())
      .then((data) => {
        dataList = data;
        setUlHtml();
      });

    fetch(`${import.meta.env.VITE_ASSETS_URL}/assets/json/link.json`)
      .then((res) => res.json())
      .then((data) => {
        linkList.innerHTML = data.map((item) => `<li><a href="${item.url}" target="_blank">${item.name}</a></li>`).join("");
      });
    const setUlHtml = () => {
      ul.innerHTML = dataList
        .filter((item) => item.name.includes(filterStr))
        .map(
          (item) => `
    <li>
      <div class="face-img">
        <img src="${import.meta.env.VITE_FACE_URL}${item.face_url}" alt="">
         <div class="handle">
        <div><a href="${item.demo_url}" target="_blank">演示</a></div>
        <div><a href="${item.article_url}" target="_blank">掘金</a></div>
      ${
        item.buy_url
          ? `<div><a href="${item.buy_url}" target="_blank">源码</a></div>`
          : ""
      }
      </div>
      </div>
      <div class="name">
        ${item.name}
      </div>
      <div class="price" style="background-color: ${
        item.type === "free" ? "#ef1952" : "rgb(25, 129, 239)"
      }">${item.type === "free" ? "免费" : `￥${item.price}`}</div>

  </li>
`
        )
        .join("");
    };
  </script>
</html>