🎨 Organize cards into view

frontend/src/views/AudioDownload.vue

@@ -0,0 +1,40 @@
+<script setup>
+import AudioCard from "../components/AudioCard.vue";
+
+const p1 = {
+  number: "BV1es41127Fd",
+  received: 0,
+  total: 0,
+};
+const p2 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 0,
+  total: 0,
+};
+const p3 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 1314514,
+  total: 1919810,
+};
+const p4 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 1919810,
+  total: 1919810,
+};
+</script>
+
+<template>
+  <div
+    class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100"
+  >
+    <AudioCard v-bind="p1"></AudioCard>
+    <AudioCard v-bind="p2"></AudioCard>
+    <AudioCard v-bind="p3"></AudioCard>
+    <AudioCard v-bind="p4"></AudioCard>
+  </div>
+</template>
+
+<style scoped></style>