第一次上传

.svn/pristine/45/452d875c301a3f62e7acd276736cd760c636ea7d.svn-base

@@ -0,0 +1,55 @@
+<template>
+  <view class="skeleton-category">
+    <view v-for="i in 15" :key="i" class="skeleton-category-item">
+      <view class="skeleton-icon"></view>
+      <view class="skeleton-name"></view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.skeleton-category {
+  background: #FFFFFF;
+  padding: 32rpx 20rpx;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 32rpx 20rpx;
+}
+
+.skeleton-category-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.skeleton-icon {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 16rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+  margin-bottom: 12rpx;
+}
+
+.skeleton-name {
+  width: 80rpx;
+  height: 28rpx;
+  border-radius: 4rpx;
+  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>