badl/frontend/src/App.vue

<script setup>
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-icons/font/bootstrap-icons.css";
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 id="wrapper">
    <AudioCard v-bind="p1"></AudioCard>
    <AudioCard v-bind="p2"></AudioCard>
    <AudioCard v-bind="p3"></AudioCard>
    <AudioCard v-bind="p4"></AudioCard>
  </div>
</template>

<style scoped>
#wrapper {
  margin-top: 20px;
  margin-left: 20px;
}
</style>