diff --git a/src/main.js b/src/main.js index 29dc2b7..acce779 100644 --- a/src/main.js +++ b/src/main.js @@ -100,6 +100,9 @@ Vue.config.productionTip = false } }) */ + // 创建全局事件总线 $bus +Vue.prototype.$bus = new Vue() + new Vue({ el: '#app', router, diff --git a/src/views/common/UploadFile.vue b/src/views/common/UploadFile.vue index 50b6f3c..cd1166b 100644 --- a/src/views/common/UploadFile.vue +++ b/src/views/common/UploadFile.vue @@ -130,26 +130,29 @@ export default { if(Object.keys(this.fileUploadRule).length !== 0){ // 文件需要ocr识别 - this.uploadFile(file); + this.uploadFile(file,'识别中'); }else{ // 文件不需要ocr识别 - this.uploadFile(file); + this.uploadFile(file,'上传中'); } } }, // 上传文件 - uploadFile(file){ + uploadFile(file,text){ console.log(file); + this.$bus.$emit('startUpload', text); const formData = new FormData(); formData.append('file', file.raw); formData.append('params', JSON.stringify(this.fileUploadRule)); uploadSmallFileByOcr(formData).then(res => { console.log(res); this.$message.success(res.msg); + this.$bus.$emit('endUpload'); }).catch(err => { this.$message.error(err.msg); + this.$bus.$emit('endUpload'); }) }, // 处理文件超出限制 diff --git a/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue b/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue index c418d76..74f8848 100644 --- a/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue +++ b/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue @@ -1,6 +1,16 @@ + @@ -86,6 +138,86 @@ export default { background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%); min-height: 100vh; overflow-y: auto; + position: relative; +} + +// 全局上传动画样式 +.global-upload-animation { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + + .animation-mask { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + // background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(4px); + } + + .animation-content { + position: relative; + z-index: 10000; + text-align: center; + background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%); + padding: 40px 50px; + border-radius: 20px; + box-shadow: + 0 10px 40px rgba(31, 114, 234, 0.15), + 0 0 0 1px rgba(31, 114, 234, 0.1); + min-width: 280px; + animation: slideInUp 0.3s ease-out; + + .spinner { + width: 60px; + height: 60px; + border: 4px solid #f3f7ff; + border-top: 4px solid #1F72EA; + border-radius: 50%; + animation: spin 1.2s linear infinite; + margin: 0 auto 20px; + position: relative; + + &::after { + content: ''; + position: absolute; + top: -4px; + left: -4px; + right: -4px; + bottom: -4px; + border: 4px solid transparent; + border-top: 4px solid #4A8BFF; + border-radius: 50%; + animation: spin 0.8s linear infinite reverse; + } + } + + .animation-text { + font-size: 20px; + font-weight: 600; + color: #1F72EA; + margin-bottom: 8px; + background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .animation-subtext { + font-size: 14px; + color: #666; + opacity: 0.8; + } + } } .content-body { @@ -106,14 +238,12 @@ export default { border-radius: 16px 16px 16px 16px; min-height: 600px; box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1); - // border: 1px solid #e8f4ff; padding: 0; margin-bottom: 20px; flex: 1; min-width: 0; } - .content-header { display: flex; justify-content: flex-end; @@ -156,4 +286,27 @@ export default { box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3); } } + +// 动画定义 +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(30px) scale(0.9); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} \ No newline at end of file