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

✨ Add TotalProgress component

Browse source
This commit is contained in:
zhbaor 2023-02-23 19:46:22 +08:00
parent cd93d3a8a0
commit 1c99ff7d60
3 changed files with 53 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/App.vue
View file

@ -5,9 +5,7 @@ import AudioDownload from "./views/AudioDownload.vue";
</script>
<template>
<div class="vh-100 vw-100 bg-body-secondary">
<AudioDownload></AudioDownload>
</div>
<AudioDownload></AudioDownload>
</template>
<style scoped></style>

33
frontend/src/components/TotalProgress.vue Normal file
View file

@ -0,0 +1,33 @@
<script setup>
import { computed } from "vue";
const props = defineProps({
display: String,
finished: Number,
total: Number,
});
const progress = computed(() => {
return Math.round((props.finished / props.total) * 100);
});
</script>
<template>
<div class="shadow-lg bg-body px-3 pt-2 pb-3 border-top border-2 z-3">
<div class="mb-1 text-center">
{{ display }}<span class="px-2">-</span>{{ finished }} / {{ total }}
</div>
<div class="progress" role="progressbar">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
:style="{ width: progress + '%' }"
></div>
</div>
</div>
</template>
<style scoped>
.progress {
height: 24px;
}
</style>

32
frontend/src/views/AudioDownload.vue
View file

@ -1,5 +1,6 @@
<script setup>
import AudioCard from "../components/AudioCard.vue";
import TotalProgress from "../components/TotalProgress.vue";
const p1 = {
number: "BV1es41127Fd",
@ -27,21 +28,26 @@ const p4 = {
</script>
<template>
<div class="container overflow-hidden">
<div class="row g-3 py-3">
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p1"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p2"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p3"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p4"></AudioCard>
<div
class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column"
>
<div class="container overflow-y-scroll flex-grow-1">
<div class="row g-3 py-3">
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p1"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p2"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p3"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p4"></AudioCard>
</div>
</div>
</div>
<TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress>
</div>
</template>