From 8783a91a650decd20adb9aacd2ebc95a51c7f19c Mon Sep 17 00:00:00 2001
From: Zhao Zuohong <zhbaor@zhaozuohong.vip>
Date: Thu, 23 Feb 2023 20:26:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Use=20floating=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                       |  2 --
 frontend/src/components/DownloadButton.vue | 21 +++++++++++++++------
 frontend/src/views/AudioDownload.vue       |  8 +++-----
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ec77da1..eb9d106 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,5 +7,3 @@ import AudioDownload from "./views/AudioDownload.vue";
 <template>
   <AudioDownload></AudioDownload>
 </template>
-
-<style scoped></style>
diff --git a/frontend/src/components/DownloadButton.vue b/frontend/src/components/DownloadButton.vue
index 5c2109c..3e9795f 100644
--- a/frontend/src/components/DownloadButton.vue
+++ b/frontend/src/components/DownloadButton.vue
@@ -1,13 +1,22 @@
-<script setup></script>
+<script setup>
+const props = defineProps({
+  disabled: Boolean,
+});
+</script>
 
 <template>
-  <button class="btn btn-lg btn-primary z-3 m-2 p-3 shadow">
-    <span class="button-text"><i class="bi-download"></i><span class="mx-1"></span>Download All</span>
+  <button
+    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>
 </template>
 
 <style scoped>
-/* .button-text {
-  font-size: 18px;
-} */
+button {
+  border-radius: 14px;
+}
 </style>
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
index c3357b0..fd26812 100644
--- a/frontend/src/views/AudioDownload.vue
+++ b/frontend/src/views/AudioDownload.vue
@@ -1,6 +1,6 @@
 <script setup>
 import AudioCard from "../components/AudioCard.vue";
-// import TotalProgress from "../components/TotalProgress.vue";
+import TotalProgress from "../components/TotalProgress.vue";
 import DownloadButton from "../components/DownloadButton.vue";
 
 const p1 = {
@@ -30,7 +30,7 @@ const p4 = {
 
 <template>
   <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="row g-3 py-3">
@@ -49,8 +49,6 @@ const p4 = {
       </div>
     </div>
     <!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> -->
-    <DownloadButton></DownloadButton>
+    <!-- <DownloadButton></DownloadButton> -->
   </div>
 </template>
-
-<style scoped></style>