第一次上传

.svn/pristine/ee/ee43dee756428d43e613226a755d3a477a2f2a71.svn-base

@@ -0,0 +1,70 @@
+<template>
+  <view class="skeleton-base" :class="{ loading: loading }">
+    <view v-if="loading" class="skeleton-shimmer"></view>
+    <slot v-else></slot>
+    <view v-if="loading" class="skeleton-content">
+      <slot name="skeleton"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  loading: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.skeleton-base {
+  position: relative;
+  overflow: hidden;
+  min-height: 40rpx;
+}
+
+.skeleton-content {
+  width: 100%;
+  height: 100%;
+}
+
+.skeleton-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.6),
+    transparent
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.skeleton-base.loading {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>