Added next/previous and seek buttons and adjusted the control layout
parent
27601f6901
commit
64b3c0aca8
|
|
@ -14,10 +14,12 @@
|
|||
<p class="remainingTime">{{duration}}</p>
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
<div class="play-pause-button" @click="togglePlay">
|
||||
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
|
||||
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -159,6 +161,9 @@ section.player
|
|||
border-top: 1px solid rgba(0,0,0,0.1)
|
||||
height: 4.5rem
|
||||
min-height: 4.5rem
|
||||
.control-buttons
|
||||
display: flex
|
||||
align-items: center
|
||||
img.artwork
|
||||
height: 4.5rem
|
||||
width: 4.5rem
|
||||
|
|
|
|||
Loading…
Reference in New Issue