增加loading
This commit is contained in:
BianLzhaoMin
parent
81b98899d7
commit
733ae26a22
|
|
@ -1,6 +1,30 @@
|
|||
<template>
|
||||
<!-- 施工人员 ---- 出入场管理 ---- 人员入场 -->
|
||||
<div class="app-container">
|
||||
<!-- 自定义全屏Loading -->
|
||||
<div v-if="fullScreenLoading" class="custom-fullscreen-loading">
|
||||
<div class="loading-content">
|
||||
<div class="loading-icon-wrapper">
|
||||
<i class="el-icon-loading loading-icon"></i>
|
||||
<div class="loading-circle"></div>
|
||||
</div>
|
||||
<div class="loading-dots">
|
||||
<span class="dot dot-1"></span>
|
||||
<span class="dot dot-2"></span>
|
||||
<span class="dot dot-3"></span>
|
||||
</div>
|
||||
<p class="loading-text">
|
||||
<span
|
||||
class="text-char"
|
||||
v-for="(char, index) in loadingText"
|
||||
:key="index"
|
||||
:style="{ animationDelay: index * 0.1 + 's' }"
|
||||
>
|
||||
{{ char }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<TableModel
|
||||
:formLabel="formLabel"
|
||||
:showOperation="true"
|
||||
|
|
@ -266,6 +290,8 @@ export default {
|
|||
idNumber: '', // 身份证号码
|
||||
getEntryPersonListAPI,
|
||||
loading: false,
|
||||
fullScreenLoading: false, // 全屏loading状态
|
||||
loadingText: '正在保存，请稍候...', // loading文字
|
||||
queryDownloadTask: {
|
||||
proId: '',
|
||||
subId: '',
|
||||
|
|
@ -355,6 +381,8 @@ export default {
|
|||
|
||||
onHandleConfirmAddOrEdit() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// 显示全屏loading
|
||||
this.fullScreenLoading = true
|
||||
try {
|
||||
await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
||||
this.$refs.personEntryTableRef.getTableList()
|
||||
|
|
@ -362,11 +390,11 @@ export default {
|
|||
resolve()
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
} finally {
|
||||
// 无论成功还是失败，都关闭loading
|
||||
this.fullScreenLoading = false
|
||||
}
|
||||
})
|
||||
// await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
||||
// this.$refs.personEntryTableRef.getTableList()
|
||||
// this.handleCloseDialogOuter()
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
|
|
@ -583,3 +611,188 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-fullscreen-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 158, 255, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0.7) 100%
|
||||
);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
|
||||
padding: 50px 60px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba(64, 158, 255, 0.1) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
animation: shine 3s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-icon-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 48px;
|
||||
color: #409eff;
|
||||
animation: rotate 1.5s linear infinite;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
text-shadow: 0 0 20px rgba(64, 158, 255, 0.5);
|
||||
}
|
||||
|
||||
.loading-circle {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #409eff;
|
||||
border-right-color: #67c23a;
|
||||
border-bottom-color: #e6a23c;
|
||||
border-left-color: #f56c6c;
|
||||
border-radius: 50%;
|
||||
animation: rotate 2s linear infinite;
|
||||
box-shadow: 0 0 30px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
|
||||
animation: bounce 1.4s ease-in-out infinite;
|
||||
box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
|
||||
|
||||
&.dot-1 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&.dot-2 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&.dot-3 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #303133;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.text-char {
|
||||
display: inline-block;
|
||||
animation: textWave 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textWave {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue