\u6f14\u5531\u4f1a<\/title>\n <style>\n :root {\n --primary-color: #1a1a2e;\n --secondary-color: #16213e;\n --accent-color: #0f3460;\n --highlight-color: #e94560;\n --text-color: #f1f1f1;\n --card-bg: rgba(255, 255, 255, 0.1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--text-color);\n min-height: 100vh;\n padding-bottom: 50px;\n }\n\n header {\n text-align: center;\n padding: 40px 20px;\n position: relative;\n overflow: hidden;\n }\n\n header::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n\n h1 {\n font-size: 3rem;\n margin-bottom: 10px;\n background-clip: text;\n color: #e94560;\n text-shadow: 0 0 20px rgba(108, 92, 231, 0.3);\n letter-spacing: 2px;\n margin-left: -150px;\n }\n\n .subtitle {\n font-size: 1.2rem;\n opacity: 0.8;\n margin-bottom: 30px;\n margin-left: -150px;\n }\n\n .search-container {\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n margin-left: 50px;\n }\n\n #searchInput {\n width: 100%;\n padding: 15px 20px;\n border: none;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text-color);\n font-size: 1.1rem;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n\n #searchInput:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);\n }\n\n #searchInput::placeholder {\n color: rgba(255, 255, 255, 0.6);\n }\n\n .alphabet-nav {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin: 30px 0;\n padding: 0 20px;\n }\n\n .alphabet-nav button {\n background: transparent;\n border: none;\n color: var(--text-color);\n font-size: 1.2rem;\n margin: 5px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 5px;\n transition: all 0.3s ease;\n }\n\n .alphabet-nav button:hover {\n background: rgba(233, 69, 96, 0.3);\n }\n\n .alphabet-nav button.active {\n background: var(--highlight-color);\n color: var(--primary-color);\n font-weight: bold;\n }\n\n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 20px;\n margin-top: 30px;\n max-width: 800px;\n }\n\n .card {\n background: var(--card-bg);\n border-radius: 15px;\n overflow: hidden;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n .card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);\n border-color: var(--highlight-color);\n }\n\n .card-header {\n padding: 15px;\n background: rgba(0, 0, 0, 0.2);\n text-align: center;\n }\n\n .card-title {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 5px;\n }\n\n .card-subtitle {\n font-size: 0.9rem;\n opacity: 0.7;\n }\n\n .card-content {\n padding: 15px;\n }\n\n .card-content p {\n margin-bottom: 10px;\n font-size: 0.9rem;\n line-height: 1.4;\n text-align: center;\n }\n\n .card-link {\n display: block;\n background: var(--accent-color);\n color: var(--text-color);\n text-align: center;\n padding: 10px;\n border-radius: 5px;\n text-decoration: none;\n margin-top: 10px;\n transition: all 0.3s ease;\n font-weight: bold;\n }\n\n .card-link:hover {\n background: var(--highlight-color);\n transform: scale(1.05);\n }\n\n .no-results {\n text-align: center;\n padding: 40px;\n font-size: 1.2rem;\n grid-column: 1 \/ -1;\n }\n\n @media (max-width: 768px) {\n .cards-container {\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n }\n\n h1 {\n font-size: 2.2rem;\n }\n\n .alphabet-nav button {\n font-size: 1rem;\n padding: 6px 10px;\n }\n }\n\n @media (max-width: 480px) {\n .cards-container {\n grid-template-columns: repeat(2, 1fr);\n }\n\n h1 {\n font-size: 1.8rem;\n }\n }\n\n .pulse {\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);\n }\n\n 70% {\n box-shadow: 0 0 0 10px rgba(233, 69, 96, 0);\n }\n\n 100% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <header>\n <h1>\u6f14\u5531\u4f1a<\/h1>\n <div class=\"subtitle\">\u6536\u85cf\u73b0\u573a\u72c2\u6b22\u7684\u97f3\u4e50\u8bb0\u5fc6<\/div>\n <div class=\"search-container\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u6f14\u5531\u4f1a\u7684\u540d\u79f0...\">\n <\/div>\n <\/header>\n\n <div class=\"alphabet-nav\" id=\"alphabetNav\">\n \n <\/div>\n\n <div class=\"container\">\n <div class=\"cards-container\" id=\"cardsContainer\">\n \n <\/div>\n <\/div>\n\n <script>\n \/\/ \u6570\u636e - \u6b4c\u624b\u548c\u4e13\u8f91\u4fe1\u606f\n const artistsData = [\n {\n name: \"\u6cf0\u52d2\u00b7\u65af\u5a01\u592b\u7279\uff1a\u65f6\u4ee3\u5de1\u56de\u6f14\u5531\u4f1a(2023)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/12\/13\/%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%892023%e5%b9%b4the-eras-tour%e3%80%8a%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9\/\"\n },\n {\n name: \"\u9093\u7d2b\u68cb G.E.M.XXX.LIVE.\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a(2013)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/13\/%e9%82%93%e7%b4%ab%e6%a3%8b-g-e-m-xxx-live-2013%e4%b8%96%e7%95%8c%e5%b7%a1%e5%9b%9e%e6%bc%94%e5%94%b1%e4%bc%9a%e9%a6%99%e6%b8%af%e7%ba%a2%e9%a6%86%e7%ab%99%e3%80%8aremux-mkv-32-4g%e3%80%8b\/\"\n },\n {\n name: \"\u53cc\u9762\u78a7\u6602\u65af\uff1a\u975e\u6211\u83ab\u5c5e\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a(2010)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/13\/%e5%8f%8c%e9%9d%a2%e7%a2%a7%e6%98%82%e6%96%af%ef%bc%9a%e9%9d%9e%e6%88%91%e8%8e%ab%e5%b1%9e%e4%b8%96%e7%95%8c%e5%b7%a1%e5%9b%9e%e6%bc%94%e5%94%b1%e4%bc%9a-2010-beyonce-i-am-world-tour-14-1g\/\"\n },\n {\n name: \"\u4e94\u6708\u5929\u966a\u4f60\u8de8\u5e74\u6f14\u5531\u4f1a(2022)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/12\/%e4%ba%94%e6%9c%88%e5%a4%a9-%e5%a5%bd%e5%a5%bd%e5%a5%bd%e6%83%b3%e8%a7%81%e5%88%b0%e4%bd%a0-mayday-fly-to-2022-uhd-4k-%e4%ba%94%e6%9c%88%e5%a4%a9%e9%99%aa%e4%bd%a0%e8%b7%a8%e5%b9%b4%e6%bc%94\/\"\n },\n {\n name: \"\u5218\u82e5\u82f1 Renext \u6211\u6562\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a(2016)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/12\/%e5%88%98%e8%8b%a5%e8%8b%b1-2016-renext-%e6%88%91%e6%95%a2%e4%b8%96%e7%95%8c%e5%b7%a1%e5%9b%9e%e6%bc%94%e5%94%b1%e4%bc%9a%e3%80%8aweb-dl-mkv-5-37g%e3%80%8b\/\"\n },\n {\n name: \"S.H.E \u2013 2gether 4ever \u6700\u76f8\u7231\u6f14\u5531\u4f1a(2014)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/12\/s-h-e-2gether-4ever-2014-%e6%9c%80%e7%9b%b8%e7%88%b1%e6%bc%94%e5%94%b1%e4%bc%9a%e5%ae%89%e5%8f%af%e5%9c%ba%e5%8f%b0%e5%8c%97%e7%ab%99%e8%8a%b1%e7%b5%ae%ef%bc%88bluray-1080p-15-9gb%ef%bc%89\/\"\n },\n {\n name: \"\u6cf0\u52d2\u00b7\u65af\u5a01\u592b\u7279\u4e3e\u4e16\u76db\u540d :\u2002Reputation \u9999\u6e2f\u5de1\u56de\u6f14\u5531\u4f1a(2018)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%89%e4%b8%be%e4%b8%96%e7%9b%9b%e5%90%8d-reputation-2018%e9%a6%99%e6%b8%af%e5%b7%a1%e5%9b%9e\/\"\n },\n {\n name: \"\u6cf0\u52d2.\u65af\u5a01\u592b\u7279\u57ce\u5e02\u604b\u4eba(City of Lover Concert)\u5df4\u9ece\u6f14\u5531\u4f1a(2020)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e6%b3%b0%e5%8b%92-%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%89-%e5%9f%8e%e5%b8%82%e6%81%8b%e4%ba%ba%ef%bc%88city-of-lover-concert%ef%bc%89-2020%e5%b9%b4%e5%b7%b4%e9%bb%8e\/\"\n },\n {\n name: \"\u6cf0\u52d2\u00b7\u65af\u5a01\u592b\u7279 Storytellers\u6545\u4e8b\u4f1a\u6f14\u5531\u4f1a(2012)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%89-2012-storytellers%e6%95%85%e4%ba%8b%e4%bc%9a%e6%bc%94%e5%94%b1%e4%bc%9a-palladia%e5%ae%8c%e6%95%b4%e7%89%88\/\"\n },\n {\n name: \"\u963f\u9edb\u5c14\/Adele One Night Only(2021)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e9%98%bf%e9%bb%9b%e5%b0%94-adele-one-night-only-2021-1080i-hdtv-dd-5-1%e3%80%8ahdtv-mkv-8-47g%e3%80%8b\/\"\n },\n {\n name: \"S.H.E \u7231\u800c\u4e3a\u4e00\u6f14\u5531\u4f1a(2009)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/10\/%e8%93%9d%e5%85%89%e5%bd%b1%e5%83%8f-dts-hd%e3%80%8as-h-e-%e7%88%b1%e8%80%8c%e4%b8%ba%e4%b8%80%e6%bc%94%e5%94%b1%e4%bc%9a%e3%80%8bmkv8-10gb\/\"\n },\n {\n name: \"\u5f20\u78a7\u6668\u201c\u6781\u5149\u201d\u5317\u4eac\u6f14\u5531\u4f1a(2018)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/05\/%e5%bc%a0%e7%a2%a7%e6%99%a8-2018-%e6%9e%81%e5%85%89-%e5%8c%97%e4%ba%ac%e6%bc%94%e5%94%b1%e4%bc%9a-diamond-zhang-halo-2018-concert-tour-in-beijing1080p7-5gb\/\"\n },\n {\n name: \"\u5468\u6770\u4f26 \u8d85\u65f6\u4ee3\u6f14\u5531\u4f1a(2010)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/02\/%e8%93%9d%e5%85%89%e5%bd%b1%e5%83%8f-dts-hd%e3%80%8a%e5%91%a8%e6%9d%b0%e4%bc%a6-2010%e8%b6%85%e6%97%b6%e4%bb%a3%e6%bc%94%e5%94%b1%e4%bc%9a%e3%80%8bmkv11-5gb\/\"\n }\n ];\n\n \/\/ \u83b7\u53d6\u59d3\u6c0f\u9996\u5b57\u6bcd\n function getLastNameInitial(name) {\n \/\/ \u5904\u7406\u7279\u6b8a\u60c5\u51b5\n if (name.startsWith(\"The \")) {\n name = name.substring(4);\n }\n\n const words = name.split(' ');\n const lastName = words[words.length - 1];\n return lastName.charAt(0).toUpperCase();\n }\n\n \/\/ \u6309\u59d3\u6c0f\u9996\u5b57\u6bcd\u6392\u5e8f\n artistsData.sort((a, b) => {\n const initialA = getLastNameInitial(a.name);\n const initialB = getLastNameInitial(b.name);\n return initialA.localeCompare(initialB);\n });\n\n \/\/ \u751f\u6210\u5b57\u6bcd\u5bfc\u822a\n function generateAlphabetNav() {\n const alphabetNav = document.getElementById('alphabetNav');\n const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n\n \/\/ \/\/ \u6dfb\u52a0\"\u5168\u90e8\"\u6309\u94ae\n \/\/ const allButton = document.createElement('button');\n \/\/ allButton.textContent = '\u5168\u90e8';\n \/\/ allButton.classList.add('active');\n \/\/ allButton.addEventListener('click', () => {\n \/\/ filterByLetter('\u5168\u90e8');\n \/\/ setActiveButton(allButton);\n \/\/ });\n \/\/ alphabetNav.appendChild(allButton);\n\n \/\/ \/\/ \u6dfb\u52a0\u5b57\u6bcd\u6309\u94ae\n \/\/ for (let letter of alphabet) {\n \/\/ const button = document.createElement('button');\n \/\/ button.textContent = letter;\n \/\/ button.addEventListener('click', () => {\n \/\/ filterByLetter(letter);\n \/\/ setActiveButton(button);\n \/\/ });\n \/\/ alphabetNav.appendChild(button);\n \/\/ }\n }\n\n \/\/ \u8bbe\u7f6e\u6d3b\u52a8\u6309\u94ae\n function setActiveButton(activeButton) {\n const buttons = document.querySelectorAll('.alphabet-nav button');\n buttons.forEach(button => button.classList.remove('active'));\n activeButton.classList.add('active');\n }\n\n \/\/ \u6309\u5b57\u6bcd\u7b5b\u9009\n function filterByLetter(letter) {\n const cards = document.querySelectorAll('.card');\n\n cards.forEach(card => {\n if (letter === '\u5168\u90e8') {\n card.style.display = 'block';\n } else {\n const cardInitial = card.dataset.initial;\n card.style.display = cardInitial === letter ? 'block' : 'none';\n }\n });\n }\n\n \/\/ \u751f\u6210\u5361\u7247\n function generateCards() {\n const cardsContainer = document.getElementById('cardsContainer');\n\n artistsData.forEach(artist => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.initial = getLastNameInitial(artist.name);\n\n const cardHeader = document.createElement('div');\n cardHeader.className = 'card-header';\n\n const cardTitle = document.createElement('div');\n cardTitle.className = 'card-title';\n cardTitle.textContent = artist.name;\n\n const cardSubtitle = document.createElement('div');\n cardSubtitle.className = 'card-subtitle';\n cardSubtitle.textContent = artist.chineseName;\n\n cardHeader.appendChild(cardTitle);\n cardHeader.appendChild(cardSubtitle);\n\n const cardContent = document.createElement('div');\n cardContent.className = 'card-content';\n\n const description = document.createElement('p');\n description.textContent = artist.description;\n\n const link = document.createElement('a');\n link.className = 'card-link';\n link.href = artist.link;\n link.target = '_blank';\n link.textContent = '\u8bbf\u95ee\u8d44\u6e90';\n\n cardContent.appendChild(description);\n cardContent.appendChild(link);\n\n card.appendChild(cardHeader);\n card.appendChild(cardContent);\n\n cardsContainer.appendChild(card);\n });\n }\n\n \/\/ \u641c\u7d22\u529f\u80fd\n function setupSearch() {\n const searchInput = document.getElementById('searchInput');\n\n searchInput.addEventListener('input', function () {\n const searchTerm = this.value.toLowerCase();\n const cards = document.querySelectorAll('.card');\n\n cards.forEach(card => {\n const title = card.querySelector('.card-title').textContent.toLowerCase();\n const subtitle = card.querySelector('.card-subtitle').textContent.toLowerCase();\n const description = card.querySelector('p').textContent.toLowerCase();\n\n if (title.includes(searchTerm) || subtitle.includes(searchTerm) || description.includes(searchTerm)) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n });\n });\n }\n\n \/\/ \u521d\u59cb\u5316\n document.addEventListener('DOMContentLoaded', function () {\n generateAlphabetNav();\n generateCards();\n setupSearch();\n });\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6f14\u5531\u4f1a \u6f14\u5531\u4f1a \u6536\u85cf\u73b0\u573a\u72c2\u6b22\u7684\u97f3\u4e50\u8bb0\u5fc6<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/14008"}],"collection":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/comments?post=14008"}],"version-history":[{"count":2,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/14008\/revisions"}],"predecessor-version":[{"id":14011,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/14008\/revisions\/14011"}],"wp:attachment":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/media?parent=14008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":14008,"date":"2026-01-06T11:13:02","date_gmt":"2026-01-06T03:13:02","guid":{"rendered":"https:\/\/www.guaniumusic.com\/?page_id=14008"},"modified":"2026-01-06T11:13:42","modified_gmt":"2026-01-06T03:13:42","slug":"%e6%bc%94%e5%94%b1%e4%bc%9a","status":"publish","type":"page","link":"https:\/\/www.guaniumusic.com\/index.php\/%e6%bc%94%e5%94%b1%e4%bc%9a\/","title":{"rendered":"\u6f14\u5531\u4f1a"},"content":{"rendered":"\n\n\n\n\n \n \n \u6f14\u5531\u4f1a<\/title>\n <style>\n :root {\n --primary-color: #1a1a2e;\n --secondary-color: #16213e;\n --accent-color: #0f3460;\n --highlight-color: #e94560;\n --text-color: #f1f1f1;\n --card-bg: rgba(255, 255, 255, 0.1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--text-color);\n min-height: 100vh;\n padding-bottom: 50px;\n }\n\n header {\n text-align: center;\n padding: 40px 20px;\n position: relative;\n overflow: hidden;\n }\n\n header::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n\n h1 {\n font-size: 3rem;\n margin-bottom: 10px;\n background-clip: text;\n color: #e94560;\n text-shadow: 0 0 20px rgba(108, 92, 231, 0.3);\n letter-spacing: 2px;\n margin-left: -150px;\n }\n\n .subtitle {\n font-size: 1.2rem;\n opacity: 0.8;\n margin-bottom: 30px;\n margin-left: -150px;\n }\n\n .search-container {\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n margin-left: 50px;\n }\n\n #searchInput {\n width: 100%;\n padding: 15px 20px;\n border: none;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text-color);\n font-size: 1.1rem;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n\n #searchInput:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);\n }\n\n #searchInput::placeholder {\n color: rgba(255, 255, 255, 0.6);\n }\n\n .alphabet-nav {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin: 30px 0;\n padding: 0 20px;\n }\n\n .alphabet-nav button {\n background: transparent;\n border: none;\n color: var(--text-color);\n font-size: 1.2rem;\n margin: 5px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 5px;\n transition: all 0.3s ease;\n }\n\n .alphabet-nav button:hover {\n background: rgba(233, 69, 96, 0.3);\n }\n\n .alphabet-nav button.active {\n background: var(--highlight-color);\n color: var(--primary-color);\n font-weight: bold;\n }\n\n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 20px;\n margin-top: 30px;\n max-width: 800px;\n }\n\n .card {\n background: var(--card-bg);\n border-radius: 15px;\n overflow: hidden;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n .card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);\n border-color: var(--highlight-color);\n }\n\n .card-header {\n padding: 15px;\n background: rgba(0, 0, 0, 0.2);\n text-align: center;\n }\n\n .card-title {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 5px;\n }\n\n .card-subtitle {\n font-size: 0.9rem;\n opacity: 0.7;\n }\n\n .card-content {\n padding: 15px;\n }\n\n .card-content p {\n margin-bottom: 10px;\n font-size: 0.9rem;\n line-height: 1.4;\n text-align: center;\n }\n\n .card-link {\n display: block;\n background: var(--accent-color);\n color: var(--text-color);\n text-align: center;\n padding: 10px;\n border-radius: 5px;\n text-decoration: none;\n margin-top: 10px;\n transition: all 0.3s ease;\n font-weight: bold;\n }\n\n .card-link:hover {\n background: var(--highlight-color);\n transform: scale(1.05);\n }\n\n .no-results {\n text-align: center;\n padding: 40px;\n font-size: 1.2rem;\n grid-column: 1 \/ -1;\n }\n\n @media (max-width: 768px) {\n .cards-container {\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n }\n\n h1 {\n font-size: 2.2rem;\n }\n\n .alphabet-nav button {\n font-size: 1rem;\n padding: 6px 10px;\n }\n }\n\n @media (max-width: 480px) {\n .cards-container {\n grid-template-columns: repeat(2, 1fr);\n }\n\n h1 {\n font-size: 1.8rem;\n }\n }\n\n .pulse {\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);\n }\n\n 70% {\n box-shadow: 0 0 0 10px rgba(233, 69, 96, 0);\n }\n\n 100% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <header>\n <h1>\u6f14\u5531\u4f1a<\/h1>\n <div class=\"subtitle\">\u6536\u85cf\u73b0\u573a\u72c2\u6b22\u7684\u97f3\u4e50\u8bb0\u5fc6<\/div>\n <div class=\"search-container\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u6f14\u5531\u4f1a\u7684\u540d\u79f0...\">\n <\/div>\n <\/header>\n\n <div class=\"alphabet-nav\" id=\"alphabetNav\">\n \n <\/div>\n\n <div class=\"container\">\n <div class=\"cards-container\" id=\"cardsContainer\">\n \n <\/div>\n <\/div>\n\n <script>\n \/\/ \u6570\u636e - \u6b4c\u624b\u548c\u4e13\u8f91\u4fe1\u606f\n const artistsData = [\n {\n name: \"\u6cf0\u52d2\u00b7\u65af\u5a01\u592b\u7279\uff1a\u65f6\u4ee3\u5de1\u56de\u6f14\u5531\u4f1a(2023)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/12\/13\/%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%892023%e5%b9%b4the-eras-tour%e3%80%8a%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9\/\"\n },\n {\n name: \"\u9093\u7d2b\u68cb G.E.M.XXX.LIVE.\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a(2013)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/13\/%e9%82%93%e7%b4%ab%e6%a3%8b-g-e-m-xxx-live-2013%e4%b8%96%e7%95%8c%e5%b7%a1%e5%9b%9e%e6%bc%94%e5%94%b1%e4%bc%9a%e9%a6%99%e6%b8%af%e7%ba%a2%e9%a6%86%e7%ab%99%e3%80%8aremux-mkv-32-4g%e3%80%8b\/\"\n },\n {\n name: \"\u53cc\u9762\u78a7\u6602\u65af\uff1a\u975e\u6211\u83ab\u5c5e\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a(2010)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/13\/%e5%8f%8c%e9%9d%a2%e7%a2%a7%e6%98%82%e6%96%af%ef%bc%9a%e9%9d%9e%e6%88%91%e8%8e%ab%e5%b1%9e%e4%b8%96%e7%95%8c%e5%b7%a1%e5%9b%9e%e6%bc%94%e5%94%b1%e4%bc%9a-2010-beyonce-i-am-world-tour-14-1g\/\"\n },\n {\n name: \"\u4e94\u6708\u5929\u966a\u4f60\u8de8\u5e74\u6f14\u5531\u4f1a(2022)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/12\/%e4%ba%94%e6%9c%88%e5%a4%a9-%e5%a5%bd%e5%a5%bd%e5%a5%bd%e6%83%b3%e8%a7%81%e5%88%b0%e4%bd%a0-mayday-fly-to-2022-uhd-4k-%e4%ba%94%e6%9c%88%e5%a4%a9%e9%99%aa%e4%bd%a0%e8%b7%a8%e5%b9%b4%e6%bc%94\/\"\n },\n {\n name: \"\u5218\u82e5\u82f1 Renext \u6211\u6562\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a(2016)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/12\/%e5%88%98%e8%8b%a5%e8%8b%b1-2016-renext-%e6%88%91%e6%95%a2%e4%b8%96%e7%95%8c%e5%b7%a1%e5%9b%9e%e6%bc%94%e5%94%b1%e4%bc%9a%e3%80%8aweb-dl-mkv-5-37g%e3%80%8b\/\"\n },\n {\n name: \"S.H.E \u2013 2gether 4ever \u6700\u76f8\u7231\u6f14\u5531\u4f1a(2014)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/12\/s-h-e-2gether-4ever-2014-%e6%9c%80%e7%9b%b8%e7%88%b1%e6%bc%94%e5%94%b1%e4%bc%9a%e5%ae%89%e5%8f%af%e5%9c%ba%e5%8f%b0%e5%8c%97%e7%ab%99%e8%8a%b1%e7%b5%ae%ef%bc%88bluray-1080p-15-9gb%ef%bc%89\/\"\n },\n {\n name: \"\u6cf0\u52d2\u00b7\u65af\u5a01\u592b\u7279\u4e3e\u4e16\u76db\u540d :\u2002Reputation \u9999\u6e2f\u5de1\u56de\u6f14\u5531\u4f1a(2018)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%89%e4%b8%be%e4%b8%96%e7%9b%9b%e5%90%8d-reputation-2018%e9%a6%99%e6%b8%af%e5%b7%a1%e5%9b%9e\/\"\n },\n {\n name: \"\u6cf0\u52d2.\u65af\u5a01\u592b\u7279\u57ce\u5e02\u604b\u4eba(City of Lover Concert)\u5df4\u9ece\u6f14\u5531\u4f1a(2020)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e6%b3%b0%e5%8b%92-%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%89-%e5%9f%8e%e5%b8%82%e6%81%8b%e4%ba%ba%ef%bc%88city-of-lover-concert%ef%bc%89-2020%e5%b9%b4%e5%b7%b4%e9%bb%8e\/\"\n },\n {\n name: \"\u6cf0\u52d2\u00b7\u65af\u5a01\u592b\u7279 Storytellers\u6545\u4e8b\u4f1a\u6f14\u5531\u4f1a(2012)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e6%b3%b0%e5%8b%92%c2%b7%e6%96%af%e5%a8%81%e5%a4%ab%e7%89%b9%ef%bc%88taylor-swift%ef%bc%89-2012-storytellers%e6%95%85%e4%ba%8b%e4%bc%9a%e6%bc%94%e5%94%b1%e4%bc%9a-palladia%e5%ae%8c%e6%95%b4%e7%89%88\/\"\n },\n {\n name: \"\u963f\u9edb\u5c14\/Adele One Night Only(2021)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/11\/%e9%98%bf%e9%bb%9b%e5%b0%94-adele-one-night-only-2021-1080i-hdtv-dd-5-1%e3%80%8ahdtv-mkv-8-47g%e3%80%8b\/\"\n },\n {\n name: \"S.H.E \u7231\u800c\u4e3a\u4e00\u6f14\u5531\u4f1a(2009)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/10\/%e8%93%9d%e5%85%89%e5%bd%b1%e5%83%8f-dts-hd%e3%80%8as-h-e-%e7%88%b1%e8%80%8c%e4%b8%ba%e4%b8%80%e6%bc%94%e5%94%b1%e4%bc%9a%e3%80%8bmkv8-10gb\/\"\n },\n {\n name: \"\u5f20\u78a7\u6668\u201c\u6781\u5149\u201d\u5317\u4eac\u6f14\u5531\u4f1a(2018)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/05\/%e5%bc%a0%e7%a2%a7%e6%99%a8-2018-%e6%9e%81%e5%85%89-%e5%8c%97%e4%ba%ac%e6%bc%94%e5%94%b1%e4%bc%9a-diamond-zhang-halo-2018-concert-tour-in-beijing1080p7-5gb\/\"\n },\n {\n name: \"\u5468\u6770\u4f26 \u8d85\u65f6\u4ee3\u6f14\u5531\u4f1a(2010)\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/02\/%e8%93%9d%e5%85%89%e5%bd%b1%e5%83%8f-dts-hd%e3%80%8a%e5%91%a8%e6%9d%b0%e4%bc%a6-2010%e8%b6%85%e6%97%b6%e4%bb%a3%e6%bc%94%e5%94%b1%e4%bc%9a%e3%80%8bmkv11-5gb\/\"\n }\n ];\n\n \/\/ \u83b7\u53d6\u59d3\u6c0f\u9996\u5b57\u6bcd\n function getLastNameInitial(name) {\n \/\/ \u5904\u7406\u7279\u6b8a\u60c5\u51b5\n if (name.startsWith(\"The \")) {\n name = name.substring(4);\n }\n\n const words = name.split(' ');\n const lastName = words[words.length - 1];\n return lastName.charAt(0).toUpperCase();\n }\n\n \/\/ \u6309\u59d3\u6c0f\u9996\u5b57\u6bcd\u6392\u5e8f\n artistsData.sort((a, b) => {\n const initialA = getLastNameInitial(a.name);\n const initialB = getLastNameInitial(b.name);\n return initialA.localeCompare(initialB);\n });\n\n \/\/ \u751f\u6210\u5b57\u6bcd\u5bfc\u822a\n function generateAlphabetNav() {\n const alphabetNav = document.getElementById('alphabetNav');\n const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n\n \/\/ \/\/ \u6dfb\u52a0\"\u5168\u90e8\"\u6309\u94ae\n \/\/ const allButton = document.createElement('button');\n \/\/ allButton.textContent = '\u5168\u90e8';\n \/\/ allButton.classList.add('active');\n \/\/ allButton.addEventListener('click', () => {\n \/\/ filterByLetter('\u5168\u90e8');\n \/\/ setActiveButton(allButton);\n \/\/ });\n \/\/ alphabetNav.appendChild(allButton);\n\n \/\/ \/\/ \u6dfb\u52a0\u5b57\u6bcd\u6309\u94ae\n \/\/ for (let letter of alphabet) {\n \/\/ const button = document.createElement('button');\n \/\/ button.textContent = letter;\n \/\/ button.addEventListener('click', () => {\n \/\/ filterByLetter(letter);\n \/\/ setActiveButton(button);\n \/\/ });\n \/\/ alphabetNav.appendChild(button);\n \/\/ }\n }\n\n \/\/ \u8bbe\u7f6e\u6d3b\u52a8\u6309\u94ae\n function setActiveButton(activeButton) {\n const buttons = document.querySelectorAll('.alphabet-nav button');\n buttons.forEach(button => button.classList.remove('active'));\n activeButton.classList.add('active');\n }\n\n \/\/ \u6309\u5b57\u6bcd\u7b5b\u9009\n function filterByLetter(letter) {\n const cards = document.querySelectorAll('.card');\n\n cards.forEach(card => {\n if (letter === '\u5168\u90e8') {\n card.style.display = 'block';\n } else {\n const cardInitial = card.dataset.initial;\n card.style.display = cardInitial === letter ? 'block' : 'none';\n }\n });\n }\n\n \/\/ \u751f\u6210\u5361\u7247\n function generateCards() {\n const cardsContainer = document.getElementById('cardsContainer');\n\n artistsData.forEach(artist => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.initial = getLastNameInitial(artist.name);\n\n const cardHeader = document.createElement('div');\n cardHeader.className = 'card-header';\n\n const cardTitle = document.createElement('div');\n cardTitle.className = 'card-title';\n cardTitle.textContent = artist.name;\n\n const cardSubtitle = document.createElement('div');\n cardSubtitle.className = 'card-subtitle';\n cardSubtitle.textContent = artist.chineseName;\n\n cardHeader.appendChild(cardTitle);\n cardHeader.appendChild(cardSubtitle);\n\n const cardContent = document.createElement('div');\n cardContent.className = 'card-content';\n\n const description = document.createElement('p');\n description.textContent = artist.description;\n\n const link = document.createElement('a');\n link.className = 'card-link';\n link.href = artist.link;\n link.target = '_blank';\n link.textContent = '\u8bbf\u95ee\u8d44\u6e90';\n\n cardContent.appendChild(description);\n cardContent.appendChild(link);\n\n card.appendChild(cardHeader);\n card.appendChild(cardContent);\n\n cardsContainer.appendChild(card);\n });\n }\n\n \/\/ \u641c\u7d22\u529f\u80fd\n function setupSearch() {\n const searchInput = document.getElementById('searchInput');\n\n searchInput.addEventListener('input', function () {\n const searchTerm = this.value.toLowerCase();\n const cards = document.querySelectorAll('.card');\n\n cards.forEach(card => {\n const title = card.querySelector('.card-title').textContent.toLowerCase();\n const subtitle = card.querySelector('.card-subtitle').textContent.toLowerCase();\n const description = card.querySelector('p').textContent.toLowerCase();\n\n if (title.includes(searchTerm) || subtitle.includes(searchTerm) || description.includes(searchTerm)) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n });\n });\n }\n\n \/\/ \u521d\u59cb\u5316\n document.addEventListener('DOMContentLoaded', function () {\n generateAlphabetNav();\n generateCards();\n setupSearch();\n });\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6f14\u5531\u4f1a \u6f14\u5531\u4f1a \u6536\u85cf\u73b0\u573a\u72c2\u6b22\u7684\u97f3\u4e50\u8bb0\u5fc6<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/14008"}],"collection":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/comments?post=14008"}],"version-history":[{"count":2,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/14008\/revisions"}],"predecessor-version":[{"id":14011,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/14008\/revisions\/14011"}],"wp:attachment":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/media?parent=14008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}