Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38: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>

106
src/components/overlay/to-loading.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<TOverlay v-model="show" :blur-val="'5px'">
<div class="tol-div">
<div class="tol-box">
<div class="tol-title">
<slot name="title">
{{ title }}
</slot>
<v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
</div>
<div v-if="subtitle" class="tol-subtitle">
<slot name="subtitle">
{{ subtitle }}
</slot>
</div>
<div class="tol-img">
<slot name="img">
<img v-if="!empty" src="/source/UI/loading.webp" alt="loading">
<img v-else src="/source/UI/empty.webp" alt="empty">
</slot>
</div>
</div>
</div>
</TOverlay>
</template>
<script lang="ts" setup>
// vue
import { ref, watch } from "vue";
import TOverlay from "../main/t-overlay.vue";
interface LoadingProps {
modelValue: boolean;
title?: string;
subtitle?: string;
empty?: boolean;
}
const show = ref(true);
const props = withDefaults(defineProps<LoadingProps>(), {
modelValue: true,
title: "加载中",
empty: false,
});
watch(() => props.modelValue, (v) => {
show.value = v;
});
</script>
<style lang="css" scoped>
.tol-div {
display: flex;
min-width: 800px;
min-height: 300px;
padding: 15px;
background: rgb(255 255 255 / 5%);
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
border-radius: 15px;
}
.tol-box {
width: 100%;
padding: 10px;
display: flex;
box-sizing: content-box;
border: #f4d8a8 1px solid;
color: #f4d8a8;
border-radius: 5px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tol-title {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-family: Genshin, serif;
font-weight: 600;
}
.tol-subtitle {
width: 100%;
text-align: center;
font-size: 1rem;
height: 25px;
font-family: Genshin-Light, serif;
}
.tol-img {
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.tol-img:deep(img) {
max-height: 200px;
max-width: 100%;
border-radius: 5px;
}
</style>