77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<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> |