Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(loading): 写了个 loading 组件

Browse Source
This commit is contained in:
BTMuli
2023-03-24 14:13:04 +08:00
parent 62b1a195fc
commit b260c2538a
7 changed files with 92 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/t-loading.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div class="loading-div">
<div class="loading-content">
<div class="loading-title">
{{ props.title }}
<v-progress-circular indeterminate color="#f4d8a8" />
</div>
<div class="loading-subtitle" v-show="props.subtitle">{{ props.subtitle }}</div>
<div class="loading-img">
<img src="/source/UI/loading.webp" alt="loading" />
</div>
<div class="loading-text" v-show="props.content">{{ props.content }}</div>
</div>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
title: {
type: String,
default: "加载中",
},
subtitle: {
type: String,
},
content: {
type: String,
},
});
</script>
<style lang="css">
.loading-div {
position: fixed;
display: flex;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background: rgba(57, 59, 64, 0.5);
backdrop-filter: blur(10px);
border-radius: 20px;
}
.loading-content {
width: 100%;
margin: 20px;
display: flex;
border: #f4d8a8 1px solid;
border-radius: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Genshin, serif;
}
.loading-title {
font-size: 2rem;
font-weight: 600;
color: #f4d8a8;
}
.loading-subtitle {
font-size: 1.5rem;
font-weight: 500;
color: #38393a;
}
.loading-img {
width: 256px;
height: 256px;
display: flex;
justify-content: center;
align-items: center;
}
.loading-text {
font-size: 1.5rem;
font-weight: 500;
color: #38393a;
}
</style>