novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增首页骨架屏并优化页面体验

Browse Source
This commit is contained in:
future
2026-06-06 13:25:58 +08:00
parent 823d626440
commit be7eabdbb1
10 changed files with 578 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/components/Skeleton/HomeSkeleton.vue
+131
View File
@@ -0,0 +1,131 @@
<template>
<SkeletonBase>
<view class="skeleton-banner"></view>
<view class="skeleton-entry">
<view v-for="i in 4" :key="i" class="skeleton-entry-item">
<view class="skeleton-icon"></view>
<view class="skeleton-text"></view>
</view>
</view>
<view class="skeleton-section">
<view class="skeleton-section-title"></view>
<view v-for="i in 3" :key="i" class="skeleton-course-item">
<view class="skeleton-course-img"></view>
<view class="skeleton-course-info">
<view class="skeleton-course-title"></view>
<view class="skeleton-course-desc"></view>
</view>
</view>
</view>
</SkeletonBase>
</template>
<script setup>
import SkeletonBase from './SkeletonBase.vue'
</script>
<style lang="scss" scoped>
.skeleton-banner {
height: 300rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
margin: 20rpx;
border-radius: 20rpx;
}
.skeleton-entry {
display: flex;
justify-content: space-around;
padding: 30rpx 20rpx;
}
.skeleton-entry-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
}
.skeleton-icon {
width: 80rpx;
height: 80rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 40rpx;
}
.skeleton-text {
width: 60rpx;
height: 24rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 12rpx;
}
.skeleton-section {
padding: 20rpx;
}
.skeleton-section-title {
height: 40rpx;
width: 200rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8rpx;
margin-bottom: 24rpx;
}
.skeleton-course-item {
display: flex;
gap: 20rpx;
margin-bottom: 24rpx;
padding: 20rpx;
background: #fff;
border-radius: 20rpx;
}
.skeleton-course-img {
width: 160rpx;
height: 160rpx;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 16rpx;
}
.skeleton-course-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.skeleton-course-title {
height: 36rpx;
width: 80%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8rpx;
}
.skeleton-course-desc {
height: 28rpx;
width: 60%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8rpx;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>