修正排版

This commit is contained in:
jasonchenwork 2025-06-20 13:12:24 +08:00
parent 4d09ed914a
commit 4a76e14102
2 changed files with 9 additions and 15 deletions

View File

@ -350,15 +350,15 @@
const row = document.createElement('tr'); const row = document.createElement('tr');
const songNameCell = document.createElement('td'); const songNameCell = document.createElement('td');
const singerCell = document.createElement('td'); const singerCell = document.createElement('td');
const languageCell = document.createElement('td'); // const languageCell = document.createElement('td');
songNameCell.textContent = song.Song; songNameCell.textContent = song.Song;
singerCell.textContent = song.ArtistA; singerCell.textContent = song.ArtistA;
languageCell.textContent = song.Category; // languageCell.textContent = song.Category;
row.appendChild(songNameCell); row.appendChild(songNameCell);
row.appendChild(singerCell); row.appendChild(singerCell);
row.appendChild(languageCell); // row.appendChild(languageCell);
row.addEventListener('click', (e) => { row.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
@ -369,7 +369,7 @@
document.getElementById('detail-song-name').textContent = song.Song; document.getElementById('detail-song-name').textContent = song.Song;
document.getElementById('detail-song-number').textContent = song.SongNumber; document.getElementById('detail-song-number').textContent = song.SongNumber;
document.getElementById('detail-singer').textContent = song.ArtistA; document.getElementById('detail-singer').textContent = song.ArtistA;
document.getElementById('detail-language').textContent = song.Category; // document.getElementById('detail-language').textContent = song.Category;
document.getElementById('song-details').style.display = 'block'; document.getElementById('song-details').style.display = 'block';
}); });

View File

@ -80,26 +80,20 @@
} }
.content { .content {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); /* 固定3欄 */ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 5px; /* 移除格子之間的空隙 */ gap: 5px;
margin: 0; /* 沒有外邊距 */
padding: 0; /* 沒有內邊距 */
width: 36.5vw; /* 滿版寬度 */
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.content { .content {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); /* 固定3欄 */ grid-template-columns: repeat(3, 1fr);
gap: 5px; /* 移除格子之間的空隙 */ gap: 5px;
margin: 0; /* 沒有外邊距 */
padding: 0; /* 沒有內邊距 */
width: 78vw; /* 滿版寬度 */
} }
} }
.card { .card {
background: linear-gradient(135deg, #FF4081, #FF4081); background: linear-gradient(135deg, #FF4081, #FF4081);
color: white; color: white;
width: 130px; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;