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

♻️ TLoading → TOLoading

Browse Source
This commit is contained in:
BTMuli
2023-05-26 13:33:08 +08:00
parent 5a14b90b67
commit f48b7ef6ed
2 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/main/t-loading.vue
View File

@@ -1,93 +0,0 @@
<template>
<TOverlay v-model="show">
<div class="loading-div">
<div class="loading-content">
<div class="loading-title">
{{ title }}
<v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
</div>
<div v-if="subtitle !== ''" class="loading-subtitle">
{{ subtitle }}
</div>
<div v-if="!empty" class="loading-img">
<img src="/source/UI/loading.webp" alt="loading">
</div>
<div v-else class="loading-img">
<img src="/source/UI/empty.webp" alt="empty">
</div>
<div v-if="content !== ''" class="loading-text">
{{ content }}
</div>
</div>
</div>
</TOverlay>
</template>
<script lang="ts" setup>
// vue
import { watch, ref } from "vue";
import TOverlay from "./t-overlay.vue";
interface LoadingProps {
modelValue: boolean;
title?: string;
subtitle?: string;
content?: string;
empty?: boolean;
}
const show = ref(true);
const props = withDefaults(defineProps<LoadingProps>(), {
modelValue: true,
title: "加载中",
subtitle: "",
content: "",
empty: false,
});
watch(() => props.modelValue, (v) => {
show.value = v;
});
</script>
<style lang="css" scoped>
.loading-div {
display: flex;
width: 50%;
height: 50%;
background: rgb(255 255 255 / 10%);
box-shadow: 0 0 10px rgb(0 0 0 / 40%);
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;
}
.loading-title {
font-size: 2rem;
font-family: Genshin, serif;
font-weight: 600;
color: #f4d8a8;
}
.loading-subtitle {
font-size: 1rem;
font-family: Genshin-Light, serif;
color: #f4d8a8;
}
.loading-img {
width: 256px;
height: 256px;
display: flex;
justify-content: center;
align-items: center;
}
</style>