From 8c2c9093aaa6ce40d3f2acff665fa4a8c86f831f Mon Sep 17 00:00:00 2001 From: Snowz <372492339@qq.com> Date: Mon, 14 Apr 2025 03:17:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=BA=94=E7=94=A8?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=8F=8A?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增应用图标搜索功能，包括搜索表单、图标展示、加载更多和返回顶部按钮。页面结构、样式和交互逻辑均已实现。 --- old/css/styles.css | 125 +++++++++++++++++++++++++++++++++++++++++++++ old/index.php | 57 +++++++++++++++++++++ old/js/scripts.js | 43 ++++++++++++++++ 3 files changed, 225 insertions(+) create mode 100644 old/css/styles.css create mode 100644 old/index.php create mode 100644 old/js/scripts.js diff --git a/old/css/styles.css b/old/css/styles.css new file mode 100644 index 0000000..1281c6d --- /dev/null +++ b/old/css/styles.css @@ -0,0 +1,125 @@ +body { + font-family: 'Roboto', sans-serif; + background-color: #f0f2f5; + color: #333; + margin: 0; + padding: 0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + text-align: center; +} + +h1 { + color: #444; +} + +form { + margin-bottom: 20px; +} + +input[type="text"] { + padding: 10px; + width: 70%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0056b3; +} + +.icon-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + justify-items: center; +} + +.icon-grid div { + flex: 1 1 calc(25% - 20px); + text-align: center; +} + +.icon-grid img { + max-width: 120px; + border-radius: 15px; + transition: transform 0.3s ease; +} + +.icon-grid img:hover { + transform: scale(1.1); +} +/* 返回顶部按钮 */ +#back-to-top { + position: fixed; + bottom: 40px; + right: 20px; + display: none; + width: 50px; + height: 50px; + background-color: #007bff; + color: white; + border: none; + border-radius: 50%; + font-size: 24px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease; +} + +#back-to-top:hover { + background-color: #0056b3; +} + +/* 页脚样式 */ +footer { + background-color: #333; + color: white; + padding: 20px 0; + text-align: center; +} + +.footer-content { + max-width: 800px; + margin: 0 auto; +} + +.footer-content p { + font-size: 18px; + margin-bottom: 10px; +} + +.footer-content ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; +} + +.footer-content ul li { + margin: 0 15px; +} + +.footer-content ul li a { + color: white; + text-decoration: none; +} + +.footer-content ul li a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/old/index.php b/old/index.php new file mode 100644 index 0000000..855cff9 --- /dev/null +++ b/old/index.php @@ -0,0 +1,57 @@ + + + + + + App图标搜索器 + + + + + + +
+

搜索应用图标

+
+ + +
+
+ ' . $app['trackName'] . '

' . $app['trackName'] . '

'; + } + } else { + echo "

没有这个应用.

"; + } + } + ?> +
+ + + + + + + + + + \ No newline at end of file diff --git a/old/js/scripts.js b/old/js/scripts.js new file mode 100644 index 0000000..ab8f014 --- /dev/null +++ b/old/js/scripts.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", function() { + const loadMoreButton = document.getElementById("load-more"); + const backToTopButton = document.getElementById("back-to-top"); + + if (loadMoreButton) { + loadMoreButton.addEventListener("click", function() { + let offset = parseInt(this.getAttribute("data-offset")); + const searchTerm = this.getAttribute("data-term"); + const limit = 40; + + fetch(`index.php?term=${searchTerm}&offset=${offset}`) + .then(response => response.text()) + .then(data => { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = data; + const newContent = tempDiv.querySelectorAll('.icon-grid div'); + newContent.forEach(item => document.querySelector('.icon-grid').appendChild(item)); + // 更新偏移量 + loadMoreButton.setAttribute("data-offset", offset + limit); + }); + + }); + } + + // 显示返回顶部按钮的逻辑 + window.onscroll = function() { + if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { + backToTopButton.style.display = "block"; + } else { + backToTopButton.style.display = "none"; + } + }; + + // 返回顶部按钮点击事件 + backToTopButton.onclick = function() { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; +}); +document.getElementById('submit').addEventListener('keydown', function(event) { + if (event.key === 'Enter') { + searchMovies(); // 按下回车键时执行搜索 + } +}); \ No newline at end of file