Review changes batch 6 of 6

2026-07-20 06:52:33 +08:00
parent db97d3da27
commit 5a31a75da0
160 changed files with 9206 additions and 572 deletions
@@ -0,0 +1,155 @@
+<template>
+  <view class="app-loading" :class="`app-loading--${variant}`">
+    <view class="app-loading__emblem" aria-hidden="true">
+      <image
+        class="app-loading__seal"
+        src="/static/assets/foundation/transparent/brand-seal.png"
+        mode="aspectFit"
+      />
+      <image
+        class="app-loading__knot"
+        src="/static/assets/foundation/transparent/auth-divider-knot.png"
+        mode="aspectFit"
+      />
+    </view>
+    <text class="app-loading__copy">{{ text }}</text>
+    <text v-if="description" class="app-loading__description">{{
+      description
+    }}</text>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  variant: {
+    type: String,
+    default: "page",
+    validator: (value) => ["page", "section"].includes(value),
+  },
+  text: { type: String, default: "正在展开，请稍候…" },
+  description: { type: String, default: "" },
+});
+</script>
+
+<style scoped lang="scss">
+.app-loading {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #62584c;
+  text-align: center;
+}
+.app-loading__emblem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.app-loading__seal {
+  animation: app-loading-seal-breathe 1.6s ease-in-out infinite;
+}
+.app-loading__knot {
+  margin-top: 8rpx;
+  opacity: 0.72;
+  animation: app-loading-knot-breathe 1.6s ease-in-out infinite;
+}
+.app-loading__copy {
+  font-weight: 500;
+  letter-spacing: 2rpx;
+}
+.app-loading__description {
+  color: #62584c;
+  line-height: 1.65;
+}
+
+.app-loading--page {
+  min-height: 320rpx;
+}
+.app-loading--page .app-loading__seal {
+  width: 132rpx;
+  height: 136rpx;
+}
+.app-loading--page .app-loading__knot {
+  width: 56rpx;
+  height: 18rpx;
+}
+.app-loading--page .app-loading__copy {
+  margin-top: 22rpx;
+  font-size: 30rpx;
+}
+.app-loading--page .app-loading__description {
+  margin-top: 14rpx;
+  font-size: 24rpx;
+}
+
+.app-loading--section {
+  min-height: 180rpx;
+}
+.app-loading--section .app-loading__seal {
+  width: 88rpx;
+  height: 90rpx;
+}
+.app-loading--section .app-loading__knot {
+  width: 42rpx;
+  height: 14rpx;
+  margin-top: 5rpx;
+}
+.app-loading--section .app-loading__copy {
+  margin-top: 14rpx;
+  font-size: 24rpx;
+}
+.app-loading--section .app-loading__description {
+  margin-top: 10rpx;
+  font-size: 22rpx;
+}
+@keyframes app-loading-seal-breathe {
+  0%,
+  100% {
+    opacity: 0.82;
+    transform: scale(0.96);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes app-loading-knot-breathe {
+  0%,
+  100% {
+    opacity: 0.44;
+  }
+  50% {
+    opacity: 0.76;
+  }
+}
+@keyframes app-loading-seal-essential-pulse {
+  0%,
+  100% {
+    opacity: 0.58;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes app-loading-knot-essential-pulse {
+  0%,
+  100% {
+    opacity: 0.28;
+  }
+  50% {
+    opacity: 0.86;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .app-loading__seal {
+    animation: app-loading-seal-essential-pulse 1.2s ease-in-out infinite;
+    transform: none;
+  }
+  .app-loading__knot {
+    animation: app-loading-knot-essential-pulse 1.2s ease-in-out 0.2s infinite;
+    transform: none;
+  }
+}
+</style>