|
|
| 第38行： |
第38行： |
| {{角色图鉴行|图片=角色02.png|名称=辛美尔|稀有度=SSR|费用=5费|角色技能=天下大同|羁绊=皇室|元素=光|弱点元素=暗}} | | {{角色图鉴行|图片=角色02.png|名称=辛美尔|稀有度=SSR|费用=5费|角色技能=天下大同|羁绊=皇室|元素=光|弱点元素=暗}} |
| |} | | |} |
|
| |
| <style>
| |
| /* 筛选器样式 */
| |
| .filter-container {
| |
| background: rgba(0, 0, 0, 0.6);
| |
| backdrop-filter: blur(8px);
| |
| border-radius: 16px;
| |
| padding: 15px 20px;
| |
| margin: 20px 0;
| |
| color: white;
| |
| }
| |
| .filter-group {
| |
| margin-bottom: 15px;
| |
| }
| |
| .filter-label {
| |
| font-size: 0.9em;
| |
| font-weight: bold;
| |
| margin-bottom: 8px;
| |
| letter-spacing: 1px;
| |
| }
| |
| .filter-buttons {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 8px;
| |
| }
| |
| .filter-chip {
| |
| background: rgba(255, 255, 255, 0.15);
| |
| border-radius: 32px;
| |
| padding: 6px 16px;
| |
| font-size: 0.85em;
| |
| cursor: pointer;
| |
| transition: all 0.2s;
| |
| user-select: none;
| |
| }
| |
| .filter-chip:hover {
| |
| background: rgba(255, 255, 255, 0.3);
| |
| transform: translateY(-2px);
| |
| }
| |
| .filter-chip.active {
| |
| background: #e67e22;
| |
| color: white;
| |
| box-shadow: 0 2px 6px rgba(230, 126, 34, 0.5);
| |
| }
| |
| .filter-input {
| |
| background: rgba(255, 255, 255, 0.15);
| |
| border: 1px solid rgba(255, 255, 255, 0.3);
| |
| border-radius: 32px;
| |
| padding: 6px 16px;
| |
| font-size: 0.85em;
| |
| color: white;
| |
| width: 200px;
| |
| outline: none;
| |
| transition: all 0.2s;
| |
| }
| |
| .filter-input:focus {
| |
| background: rgba(255, 255, 255, 0.25);
| |
| border-color: #e67e22;
| |
| }
| |
| .filter-input::placeholder {
| |
| color: rgba(255, 255, 255, 0.6);
| |
| }
| |
| /* 表格居中 */
| |
| #character-table {
| |
| width: 100%;
| |
| margin: 0 auto;
| |
| background: rgba(255, 255, 255, 0.95);
| |
| }
| |
| @media (max-width: 768px) {
| |
| .filter-chip {
| |
| padding: 4px 12px;
| |
| font-size: 0.75em;
| |
| }
| |
| .filter-input {
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
| <script>
| |
| // 筛选逻辑
| |
| (function() {
| |
| function updateFilter() {
| |
| var table = document.getElementById('character-table');
| |
| if (!table) return;
| |
| var rows = table.querySelectorAll('tbody tr');
| |
| var activeRarity = document.querySelector('.filter-buttons[data-filter-type="rarity"] .filter-chip.active')?.getAttribute('data-value') || 'all';
| |
| var activeCost = document.querySelector('.filter-buttons[data-filter-type="cost"] .filter-chip.active')?.getAttribute('data-value') || 'all';
| |
| var bondKeyword = document.getElementById('bond-filter-input')?.value.toLowerCase() || '';
| |
|
| |
| rows.forEach(function(row) {
| |
| var cells = row.cells;
| |
| if (!cells.length) return;
| |
| var rarity = cells[2]?.innerText.trim() || '';
| |
| var costText = cells[3]?.innerText.trim() || '';
| |
| var bond = cells[5]?.innerText.trim().toLowerCase() || '';
| |
|
| |
| // 费用提取数字
| |
| var costNum = parseInt(costText.match(/\d+/)?.[0] || '0');
| |
| var costMatch = (activeCost === 'all' || costNum === parseInt(activeCost));
| |
|
| |
| var rarityMatch = (activeRarity === 'all' || rarity === activeRarity);
| |
| var bondMatch = (bondKeyword === '' || bond.includes(bondKeyword));
| |
|
| |
| row.style.display = (rarityMatch && costMatch && bondMatch) ? '' : 'none';
| |
| });
| |
| }
| |
|
| |
| // 绑定稀有度按钮
| |
| document.querySelectorAll('.filter-buttons[data-filter-type="rarity"] .filter-chip').forEach(function(btn) {
| |
| btn.addEventListener('click', function() {
| |
| var parent = this.parentNode;
| |
| parent.querySelectorAll('.filter-chip').forEach(function(c) { c.classList.remove('active'); });
| |
| this.classList.add('active');
| |
| updateFilter();
| |
| });
| |
| });
| |
| // 绑定费用按钮
| |
| document.querySelectorAll('.filter-buttons[data-filter-type="cost"] .filter-chip').forEach(function(btn) {
| |
| btn.addEventListener('click', function() {
| |
| var parent = this.parentNode;
| |
| parent.querySelectorAll('.filter-chip').forEach(function(c) { c.classList.remove('active'); });
| |
| this.classList.add('active');
| |
| updateFilter();
| |
| });
| |
| });
| |
| // 绑定羁绊输入框
| |
| var bondInput = document.getElementById('bond-filter-input');
| |
| if (bondInput) {
| |
| bondInput.addEventListener('input', updateFilter);
| |
| }
| |
|
| |
| // 初始执行一次，确保表格正确显示
| |
| updateFilter();
| |
| })();
| |
| </script>
| |
