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

💄 Designed card component

Browse source
This commit is contained in:
zhbaor 2023-02-22 11:13:06 +08:00
parent 1d963e6f5b
commit 3a7cb3e9bc
9 changed files with 980 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/App.vue Normal file
View file

@ -0,0 +1,18 @@
<script setup>
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-icons/font/bootstrap-icons.css"
import AudioCard from "./components/AudioCard.vue";
</script>
<template>
<div id="wrapper">
<AudioCard></AudioCard>
</div>
</template>
<style scoped>
#wrapper {
margin-top: 20px;
margin-left: 20px;
}
</style>

88
frontend/src/components/AudioCard.vue Normal file
View file

@ -0,0 +1,88 @@
<script setup></script>
<template>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<div class="placeholder-wave">
<h5 class="placeholder w-75" style="height: 24px"></h5>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-dark"
role="progressbar"
style="width: 100%"
>
Fetching Information
</div>
</div>
<i
class="text-warning bi-info-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
<div class="progress">
<div
class="progress-bar bg-secondary"
role="progressbar"
style="width: 100%"
>
Ready
</div>
</div>
<i
class="text-secondary bi-slash-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 45%"
>
<span>45%<span class="px-1"></span>(4.9 / 10.8 MiB)</span>
</div>
</div>
<i
class="text-primary bi-arrow-down-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
<div class="progress">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 100%"
>
Download Complete
</div>
</div>
<i
class="text-success bi-check-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
</template>
<style scoped>
.card {
max-width: 600px;
}
i {
font-size: 36px;
}
</style>

4
frontend/src/main.js Normal file
View file

@ -0,0 +1,4 @@
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");