baoshi-swms-app-web/src/App.vue

<template>
  <router-view />
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { closeToast, showLoadingToast } from 'vant'

const router = useRouter()

// 在路由跳转前启动加载动画
router.beforeEach((to, from, next) => {
  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: '加载中...',
  });
  next()
})

// 在路由跳转后隐藏加载动画
router.afterEach(() => {
  closeToast();
})
</script>
<style >
.flex {
  display: flex;
}

.flexColumn {
  flex-direction: column;
}

.center {
  align-items: center;
  justify-content: center;
}

.alignCenter {
  align-items: center;
}

.alignStart {
  align-items: flex-start;
}

.alignEnd {
  align-items: flex-end;
}

.spaceBetween {
  justify-content: space-between;
}

.spaceEvenly {
  justify-content: space-evenly;
}

.spaceAround {
  justify-content: space-around;
}

.spaceCenter {
  justify-content: center;
}

.justifyEnd {
  justify-content: flex-end;
}

.allFlex {
  flex: 1;
}

.flexWrap {
  flex-wrap: wrap;
}

.flexNoWrap {
  flex-wrap: nowrap;
}

.width1 {
  width: 10%;
}

.width2 {
  width: 20%;
}

.width3 {
  width: 30%;
}

.width4 {
  width: 40%;
}

.width5 {
  width: 50%;
}

.width6 {
  width: 60%;
}

.width7 {
  width: 70%;
}

.width8 {
  width: 80%;
}

.width9 {
  width: 90%;
}

.width10 {
  width: 100%;
}



</style>