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

🎨 Organize cards into view

Browse source
This commit is contained in:
zhbaor 2023-02-23 11:08:38 +08:00
parent e75d604a01
commit 761cb651ab
5 changed files with 52 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/App.vue
View file

@ -1,45 +1,11 @@
<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,
};
import AudioDownload from "./views/AudioDownload.vue";
</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>
<AudioDownload></AudioDownload>
</template>
<style scoped>
#wrapper {
margin-top: 20px;
margin-left: 20px;
}
</style>
<style scoped></style>

6
frontend/src/components/AudioCard.vue
View file

@ -44,7 +44,7 @@ const progress = computed(() => {
</script>
<template>
<div class="card">
<div class="card mb-2 w-100 shadow-sm">
<div class="card-body position-relative">
<h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
<div v-else class="placeholder-wave">
@ -68,7 +68,9 @@ const progress = computed(() => {
role="progressbar"
:style="{ width: progress + '%' }"
>
<span v-if="status == 'Fetching'" class="text-dark">Fetching Information</span>
<span v-if="status == 'Fetching'" class="text-dark"
>Fetching Information</span
>
<span v-else-if="status == 'Ready'">Ready</span>
<span v-else-if="status == 'Downloading'"
>{{ progress }}%<span class="px-1"></span>({{ received_mib }} /

40
frontend/src/views/AudioDownload.vue Normal file
View file

@ -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>