骨架屏细节

2025-12-31 07:12:53 -08:00
parent 4d153b4149
commit 107d950771
4 changed files with 287 additions and 101 deletions
@@ -0,0 +1,64 @@
+<template>
+  <div class="user-center-skeleton custom-pulse" :class="[layout === 'desktop' ? 'w-full' : '']">
+    <!-- --- Header Part --- -->
+    <template v-if="type === 'header'">
+      <div v-if="layout === 'mobile'" class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
+        <div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
+        <div class="flex flex-col gap-2">
+          <div class="h-5 w-40 rounded bg-[#A8FF53]/60"></div>
+          <div class="h-3 w-24 rounded bg-[#A8FF53]/40"></div>
+        </div>
+      </div>
+      <div v-else class="mb-3 flex flex-col items-center">
+        <div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
+        <div class="mt-2 h-6 w-32 rounded bg-[#A8FF53]/60"></div>
+      </div>
+    </template>
+
+    <!-- --- Devices Part --- -->
+    <template v-if="type === 'devices'">
+      <div v-if="layout === 'mobile'" class="h-[76px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
+      <div v-else class="h-[160px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
+    </template>
+
+    <!-- --- Plans Part --- -->
+    <template v-if="type === 'plans'">
+      <div class="space-y-4">
+        <div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
+        <div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
+      </div>
+    </template>
+
+    <!-- --- Payments Part --- -->
+    <template v-if="type === 'payments'">
+      <div class="h-[300px] w-full rounded-2xl bg-black/15"></div>
+    </template>
+
+    <!-- --- Full Layouts (Backward Compatibility) --- -->
+    <template v-if="!type">
+      <!-- Old Full Layout implementation if needed, but we'll use type-based now -->
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  type?: 'header' | 'devices' | 'plans' | 'payments'
+  layout?: 'mobile' | 'desktop'
+}>()
+</script>
+
+<style scoped>
+.custom-pulse {
+  animation: fast-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes fast-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+</style>