first commit

2026-02-26 09:32:03 +08:00
commit 36a8e4c51b
845 changed files with 116474 additions and 0 deletions
@@ -0,0 +1,77 @@
+<template>
+  <view class="">
+    <!-- 食品类型分类 -->
+    <view class="food-type-section mt-36rpx">
+      <view class="food-type-list">
+        <view
+            v-for="i in 5"
+            :key="i"
+            class="food-type-item-skeleton skeleton-item"
+        ></view>
+      </view>
+    </view>
+
+    <view class="flex-center-sb px-30rpx mb-36rpx">
+      <view class="w-200rpx h-36rpx rounded-8rpx skeleton-item"></view>
+      <view class="flex items-center gap-20rpx">
+        <view class="w-200rpx h-64rpx rounded-64rpx px-24rpx skeleton-item"></view>
+        <view class="w-200rpx h-64rpx rounded-64rpx px-24rpx skeleton-item"></view>
+      </view>
+    </view>
+
+    <view class="px-30rpx">
+      <template v-for="(item, index) in 5">
+         <view  :class="[index === 0 ? '' : 'mt-52rpx']" class="flex items-center">
+           <view class="skeleton-item w-210rpx h-200rpx mr-28rpx shrink-0 rounded-24rpx"></view>
+          <view class="w-full py-10rpx h-200rpx flex flex-col justify-between flex-1">
+            <view class="w-100% h-36rpx rounded-8rpx skeleton-item"></view>
+            <view class="w-50% h-36rpx rounded-8rpx skeleton-item"></view>
+            <view class="w-60% h-36rpx rounded-8rpx skeleton-item"></view>
+          </view>
+         </view>
+      </template>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'FoodSkeleton',
+};
+</script>
+
+<style scoped lang="scss">
+// 通用骨架屏样式
+.skeleton-item {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+// 闪烁动画
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+// 食品类型分类
+.food-type-section {
+  padding: 22rpx 30rpx;
+
+  .food-type-list {
+    display: flex;
+    gap: 20rpx;
+    overflow-x: auto;
+
+    .food-type-item-skeleton {
+      flex-shrink: 0;
+      width: 112rpx;
+      height: 112rpx;
+      border-radius: 56rpx;
+    }
+  }
+}
+</style>