111

Web/src/components/Base/PageLoading.vue

@@ -0,0 +1,88 @@
+<template>
+  <Transition name="page-loading-fade">
+    <div v-if="appStore.isLoading" class="page-loading" role="status" aria-live="polite" aria-busy="true">
+      <div class="gif">
+        <!-- <van-image round width="6rem" height="8rem" src="/images/logo.png" /> -->
+        <div style="width: 200px; height: 200px;">
+          <img src="/images/loading4.gif" />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const appStore = useAppStore()
+const defaultImage = '/images/page-loading-cover.png'
+const fallbackImage = '/images/logo.png'
+const loadingImage = ref(defaultImage)
+
+const handleImageError = (): void => {
+  if (loadingImage.value !== fallbackImage) {
+    loadingImage.value = fallbackImage
+  }
+}
+</script>
+
+<style scoped>
+.page-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: #ffffff;
+}
+
+
+.gif {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.page-loading__panel {
+  width: min(100%, 280px);
+  text-align: center;
+}
+
+.page-loading__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 18px;
+  box-shadow: 0 16px 48px rgba(12, 40, 74, 0.18);
+  margin-bottom: 18px;
+}
+
+.page-loading__title {
+  color: #103b63;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  margin-bottom: 8px;
+}
+
+.page-loading__text {
+  color: #4f6476;
+  font-size: 16px;
+  line-height: 1.6;
+  letter-spacing: 0.04em;
+}
+
+.page-loading-fade-enter-active,
+.page-loading-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.page-loading-fade-enter-from,
+.page-loading-fade-leave-to {
+  opacity: 0;
+}
+</style>