From e4aa14195c028ae09eaeb6f9408957cb70a64876 Mon Sep 17 00:00:00 2001
From: 1012414140@qq.com <1012414140@qq.com>
Date: 星期五, 26 十二月 2025 17:21:24 +0800
Subject: [PATCH] feat: 智慧停车场添加loading
---
src/components/page/smartPark.vue | 67 ++++++++++++++++++++++++++++++++-
1 files changed, 65 insertions(+), 2 deletions(-)
diff --git a/src/components/page/smartPark.vue b/src/components/page/smartPark.vue
index 1cf07dd..2efa0a6 100644
--- a/src/components/page/smartPark.vue
+++ b/src/components/page/smartPark.vue
@@ -1,7 +1,18 @@
<template>
<div>
<div style="padding-top:10px;"></div>
- <table border="1" class="dataframe" v-loading="loading">
+
+ <div class="loading-tips" v-if="loading">
+ <div class="tips-text">璇风◢鍚�...</div>
+ <!-- 鍙�夛細鍔犱釜鍔犺浇鍔ㄧ敾鍦嗙偣 -->
+ <div class="loading-dots">
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+ </div>
+
+ <table border="1" class="dataframe" v-else>
<thead>
<tr style="text-align: right;">
<th>鍋滆溅鍦�</th>
@@ -23,6 +34,7 @@
</template>
<script>
+import 'element-ui/lib/theme-chalk/index.css';
export default {
data() {
return {
@@ -92,7 +104,58 @@
}
</script>
-<style scoped>
+<style scoped lang="scss">
+//楠ㄦ灦灞忔牱寮�
+.loading-tips {
+ width: 100%;
+ height: 80vh; // 鍗犳弧灞忓箷涓昏鍖哄煙
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .tips-text {
+ font-size: 4.27vw; // 閫傞厤绉诲姩绔瓧鍙�
+ color: #666;
+ margin-bottom: 3vw;
+ }
+
+ // 鍔犺浇鍦嗙偣鍔ㄧ敾锛堝彲閫夛紝澧炲姞鍔ㄦ晥锛�
+ .loading-dots {
+ display: flex;
+ gap: 1.33vw;
+
+ span {
+ width: 1.87vw;
+ height: 1.87vw;
+ border-radius: 50%;
+ background: #666;
+ animation: dot-flash 1.5s infinite ease-in-out;
+
+ &:nth-child(2) {
+ animation-delay: 0.3s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.6s;
+ }
+ }
+ }
+}
+
+// 鍔犺浇鍦嗙偣鍔ㄧ敾
+@keyframes dot-flash {
+
+ 0%,
+ 100% {
+ opacity: 0.3;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
table {
width: 100%;
border-collapse: collapse;
--
Gitblit v1.9.1