修正手機點歌

This commit is contained in:
jasonchenwork 2025-06-18 13:43:17 +08:00
parent e9ba3b229e
commit 9f5b51649d
3 changed files with 19 additions and 12 deletions

View File

@ -254,7 +254,7 @@
<tr> <tr>
<th>歌名</th> <th>歌名</th>
<th>歌手</th> <th>歌手</th>
<th>語別</th> <!-- <th>語別</th> -->
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -270,7 +270,7 @@
<p>歌名:<span id="detail-song-name"></span></p> <p>歌名:<span id="detail-song-name"></span></p>
<p>編號:<span id="detail-song-number"></span></p> <p>編號:<span id="detail-song-number"></span></p>
<p>歌手:<span id="detail-singer"></span></p> <p>歌手:<span id="detail-singer"></span></p>
<p>語別:<span id="detail-language"></span></p> <!-- <p>語別:<span id="detail-language"></span></p> -->
<button id="order-song-button">包廂點歌</button> <button id="order-song-button">包廂點歌</button>
<button id="insert-song-button">插播歌曲</button> <button id="insert-song-button">插播歌曲</button>
</div> </div>

View File

@ -80,14 +80,20 @@
} }
.content { .content {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-columns: repeat(3, 1fr); /* 固定3欄 */
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(auto-fill, minmax(120px, 1fr)); grid-template-columns: repeat(3, 1fr); /* 固定3欄 */
gap: 10px; gap: 5px; /* 移除格子之間的空隙 */
margin: 0; /* 沒有外邊距 */
padding: 0; /* 沒有內邊距 */
width: 78vw; /* 滿版寬度 */
} }
} }
.card { .card {

View File

@ -259,7 +259,7 @@
<tr> <tr>
<th>歌名</th> <th>歌名</th>
<th>歌手</th> <th>歌手</th>
<th>語別</th> <!--<th>語別</th>-->
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -275,7 +275,7 @@
<p>歌名:<span id="detail-song-name"></span></p> <p>歌名:<span id="detail-song-name"></span></p>
<p>編號:<span id="detail-song-number"></span></p> <p>編號:<span id="detail-song-number"></span></p>
<p>歌手:<span id="detail-singer"></span></p> <p>歌手:<span id="detail-singer"></span></p>
<p>語別:<span id="detail-language"></span></p> <!---<p>語別:<span id="detail-language"></span></p>-->
<button id="order-song-button">包廂點歌</button> <button id="order-song-button">包廂點歌</button>
<button id="insert-song-button">插播歌曲</button> <button id="insert-song-button">插播歌曲</button>
</div> </div>
@ -348,6 +348,7 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
console.log('回傳資料',data);
const tableBody = document.querySelector('#results-table tbody'); const tableBody = document.querySelector('#results-table tbody');
tableBody.innerHTML = ''; tableBody.innerHTML = '';
@ -355,15 +356,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(); // 阻止默認行為
@ -376,7 +377,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';