zhao/badl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

💄 Use floating button

Browse source
This commit is contained in:
zhbaor 2023-02-23 20:26:43 +08:00
parent 1a529db84b
commit 8783a91a65
3 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.vue
View file

@ -7,5 +7,3 @@ import AudioDownload from "./views/AudioDownload.vue";
<template> <template>
<AudioDownload></AudioDownload> <AudioDownload></AudioDownload>
</template> </template>
<style scoped></style>

21
frontend/src/components/DownloadButton.vue
View file

@ -1,13 +1,22 @@
<script setup></script> <script setup>
const props = defineProps({
disabled: Boolean,
});
</script>
<template> <template>
<button class="btn btn-lg btn-primary z-3 m-2 p-3 shadow"> <button
<span class="button-text"><i class="bi-download"></i><span class="mx-1"></span>Download All</span> class="btn btn-lg btn-primary px-3 mb-4 z-3 shadow position-absolute bottom-0 start-50 translate-middle-x"
:disabled="disabled"
>
<span class="button-text"
><i class="bi-download"></i><span class="mx-1"></span>Download All</span
>
</button> </button>
</template> </template>
<style scoped> <style scoped>
/* .button-text { button {
font-size: 18px; border-radius: 14px;
} */ }
</style> </style>

8
frontend/src/views/AudioDownload.vue
View file

@ -1,6 +1,6 @@
<script setup> <script setup>
import AudioCard from "../components/AudioCard.vue"; import AudioCard from "../components/AudioCard.vue";
// import TotalProgress from "../components/TotalProgress.vue"; import TotalProgress from "../components/TotalProgress.vue";
import DownloadButton from "../components/DownloadButton.vue"; import DownloadButton from "../components/DownloadButton.vue";
const p1 = { const p1 = {
@ -30,7 +30,7 @@ const p4 = {
<template> <template>
<div <div
class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column" class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column position-relative"
> >
<div class="container overflow-y-scroll flex-grow-1"> <div class="container overflow-y-scroll flex-grow-1">
<div class="row g-3 py-3"> <div class="row g-3 py-3">
@ -49,8 +49,6 @@ const p4 = {
</div> </div>
</div> </div>
<!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> --> <!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> -->
<DownloadButton></DownloadButton> <!-- <DownloadButton></DownloadButton> -->
</div> </div>
</template> </template>
<style scoped></style>