修正排版
This commit is contained in:
parent
4d09ed914a
commit
4a76e14102
@ -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';
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user