56 lines
1.1 KiB
Plaintext
56 lines
1.1 KiB
Plaintext
<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>
|