mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-16 09:58:13 +08:00
💄 样式调整，透明色感觉挺好看的
This commit is contained in:
BTMuli
171
src/components/overlay/t-confirm.vue
Normal file
171
src/components/overlay/t-confirm.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<v-overlay v-model="visible">
|
||||
<div class="confirm-div">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-show="subtitle!=='' && !isInput" class="confirm-subtitle">
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
<div v-show="isInput" class="confirm-input">
|
||||
<v-text-field v-model="inputVal" :label="subtitle||''" hide-details="auto" @keyup.enter="onConfirm" />
|
||||
</div>
|
||||
<div class="confirm-btn-box">
|
||||
<button class="confirm-btn" @click="onCancel">
|
||||
<img class="btn-icon" src="../../assets/icons/circle-cancel.svg" alt="cancel">
|
||||
<span class="btn-text">
|
||||
{{ cancel }}
|
||||
</span>
|
||||
</button>
|
||||
<button class="confirm-btn" @click="onConfirm">
|
||||
<img class="btn-icon" src="../../assets/icons/circle-check.svg" alt="confirm">
|
||||
<span class="btn-text">
|
||||
{{ confirm }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-overlay>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { computed } from "vue";
|
||||
|
||||
interface TConfirmProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
isInput?: boolean;
|
||||
cancel?: string;
|
||||
confirm?: string;
|
||||
/** 此值为 true 时显示对话框 */
|
||||
modelValue: boolean;
|
||||
modelInput: string;
|
||||
}
|
||||
|
||||
interface TConfirmEmits {
|
||||
(e: "update:show", v: boolean): void;
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "update:modelInput", v: string): void;
|
||||
(e: "confirm"): void;
|
||||
(e: "cancel"): void;
|
||||
}
|
||||
|
||||
const emits = defineEmits<TConfirmEmits>();
|
||||
const props = withDefaults(defineProps<TConfirmProps>(), {
|
||||
title: "确认",
|
||||
subtitle: "",
|
||||
isInput: false,
|
||||
cancel: "取消",
|
||||
confirm: "确定",
|
||||
});
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emits("update:modelValue", v),
|
||||
});
|
||||
|
||||
const inputVal = computed({
|
||||
get: () => props.modelInput,
|
||||
set: (v) => emits("update:modelInput", v),
|
||||
});
|
||||
|
||||
const onCancel = () => {
|
||||
visible.value = false;
|
||||
emits("cancel");
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
visible.value = false;
|
||||
emits("confirm");
|
||||
if (props.isInput) {
|
||||
inputVal.value = "";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.confirm-div {
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 20vh;
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
background: var(--content-bg-2);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.confirm-box {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.confirm-title {
|
||||
font-family: Genshin, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: var(--content-text-2);
|
||||
margin: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.confirm-subtitle {
|
||||
border-top: 1px solid var(--btn-bg-2);
|
||||
font-family: Genshin-Light, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: var(--content-text-2);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.confirm-input {
|
||||
font-family: Genshin-Light, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: var(--content-text-2);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.confirm-btn-box {
|
||||
position: absolute;
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 30%;
|
||||
min-width: 150px;
|
||||
min-height: 30px;
|
||||
background: var(--btn-bg-2);
|
||||
color: var(--btn-text-1);
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
width: calc(100% - 70px);
|
||||
text-align: center;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
84
src/components/overlay/t-loading.vue
Normal file
84
src/components/overlay/t-loading.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
interface LoadingProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
empty?: boolean;
|
||||
position?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<LoadingProps>(), {
|
||||
title: "加载中",
|
||||
subtitle: "",
|
||||
content: "",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
});
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.loading-div {
|
||||
position: v-bind(position);
|
||||
display: flex;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: rgb(57 59 64 / 50%);
|
||||
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;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user