From 1a529db84bd165ef2b4feca49b77d6e86d3234e0 Mon Sep 17 00:00:00 2001
From: Zhao Zuohong <zhbaor@zhaozuohong.vip>
Date: Thu, 23 Feb 2023 20:06:20 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20New=20component=20DownloadButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DownloadButton.vue | 13 +++++++++++++
 frontend/src/views/AudioDownload.vue       |  6 ++++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/DownloadButton.vue

diff --git a/frontend/src/components/DownloadButton.vue b/frontend/src/components/DownloadButton.vue
new file mode 100644
index 0000000..5c2109c
--- /dev/null
+++ b/frontend/src/components/DownloadButton.vue
@@ -0,0 +1,13 @@
+<script setup></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>
+</template>
+
+<style scoped>
+/* .button-text {
+  font-size: 18px;
+} */
+</style>
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
index 773d438..c3357b0 100644
--- a/frontend/src/views/AudioDownload.vue
+++ b/frontend/src/views/AudioDownload.vue
@@ -1,6 +1,7 @@
 <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 = {
   number: "BV1es41127Fd",
@@ -47,7 +48,8 @@ const p4 = {
         </div>
       </div>
     </div>
-    <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress>
+    <!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> -->
+    <DownloadButton></DownloadButton>
   </div>
 </template>