hw-gs-player

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

TrackList.vue (1253B)

      1 <script setup lang="ts">
      2 import { computed } from "vue";
      3 import queue from '../queue';
      4 
      5 const queueTitleList = computed(() => queue.get_queueTitleList());
      6 </script>
      7 
      8 <template>
      9   <div class="page">
     10     <h1>{{ $t('menu.tracklist') }}</h1>
     11     <table>
     12       <tbody>
     13         <tr v-for="(Title, index) in queueTitleList" :key="index" @click="queue.play_in_queue(index)">
     14           <td class="index">{{ String(index).padStart(3, '0') }}</td>
     15           <td class="title">{{ Title }}</td>
     16         </tr>
     17       </tbody>
     18     </table>
     19   </div>
     20 </template>
     21 
     22 <style scoped>
     23 /* default style */
     24 .page{
     25   padding: 20px;
     26   transition: opacity 0.3s ease-in-out;
     27 }
     28 
     29 h1{
     30   font-size: 24px;
     31   padding-bottom: 10px;
     32 }
     33 
     34 .index{
     35   font-family: "Lekton", monospace;
     36   font-size: 14px;
     37 }
     38 
     39 .index::after {
     40   content: "\00A0";
     41 }
     42 
     43 .title {
     44   font-size: 20px;
     45 }
     46 
     47 table td {
     48   display: table-cell;
     49   vertical-align: middle; /* 上下中央揃え */
     50   padding: 1px; /* セル内の余白を調整 */
     51 }
     52 
     53 /* 2column style (PC) */
     54 @media (min-aspect-ratio: 1/1) {
     55   .fstracklist-container .page {
     56     position: block;
     57     top: 0;
     58     padding: 30px;
     59     z-index: 30;
     60     width: calc(50vw - 60px);
     61     height: calc(100% - 60px);
     62     background: #000000;
     63     font-size: 20px;
     64   }
     65 }
     66 </style>