|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <a-layout class="layout">
|
|
|
+ <a-layout class="layout" v-if="isRefresh">
|
|
|
<web-socket></web-socket>
|
|
|
<div class="flex">
|
|
|
<asideTemp style="flex:1 0 auto;"></asideTemp>
|
|
|
@@ -24,16 +24,25 @@
|
|
|
Copyright © 2023 嘉兴市云链信息技术有限公司
|
|
|
</a-layout-footer>
|
|
|
</a-layout>
|
|
|
+ <div class="flex-loading" v-else>
|
|
|
+ <div style="text-align:center">
|
|
|
+ <div class="loading"></div>
|
|
|
+ <p style="margin-top:40px;color:rgb(100, 108, 255)">站点切换中,正在加载站点配置...</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import headTemp from './modules/header.vue';
|
|
|
import asideTemp from './modules/aside.vue'
|
|
|
import historyTabs from './modules/historyTabs.vue'
|
|
|
import webSocket from '../webSocket/index.vue'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { useAuthStore } from '@/stores/modules/auth'
|
|
|
import { useRouter } from "vue-router";
|
|
|
const router = useRouter()
|
|
|
|
|
|
-
|
|
|
+const store = useAuthStore()
|
|
|
+let { isRefresh } = storeToRefs(store)
|
|
|
</script>
|
|
|
<style>
|
|
|
.layout{
|
|
|
@@ -77,4 +86,51 @@ const router = useRouter()
|
|
|
.fade-leave-to {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
+.flex-loading{
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ background-image: url(@/assets/bg.png);
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.loading {
|
|
|
+ position: relative;
|
|
|
+ width: 205px;
|
|
|
+ perspective: 200px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.loading:before,
|
|
|
+.loading:after {
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ content: "";
|
|
|
+ animation: jumping 0.5s infinite alternate;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.loading:before {
|
|
|
+ left: 55%;
|
|
|
+}
|
|
|
+
|
|
|
+.loading:after {
|
|
|
+ right: 55%;
|
|
|
+ animation-delay: 0.15s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes jumping {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1) translateY(0px) rotateX(0deg);
|
|
|
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: scale(1.2) translateY(-25px) rotateX(45deg);
|
|
|
+ background: rgb(100, 108, 255);
|
|
|
+ box-shadow: 0 25px 40px #000;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|