feat: 智慧停车场添加loading

1012414140@qq.com

2 天以前 e4aa14195c028ae09eaeb6f9408957cb70a64876

 src/components/page/smartPark.vue

@@ -1,7 +1,18 @@
<template>
  <div>
    <div style="padding-top:10px;"></div>
    <table border="1" class="dataframe">

    <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,9 +34,11 @@
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css';
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      urlPath: this.$systemconfig.basePath + '/ffzf/park/',
    }
@@ -37,8 +50,10 @@

  methods: {
    getTableData() {
      this.loading = true
      this.$byutil.postData4(this, this.urlPath + 'findPage', { size: 50 }, res => {
        this.tableData = res.data.records
        this.loading = false
      });
    },

@@ -89,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;