69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
rows: { type: Number, default: 3 },
|
|
avatar: { type: Boolean, default: false },
|
|
card: { type: Boolean, default: false },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="skeleton" :class="{ 'skeleton-card': card }">
|
|
<view v-if="avatar" class="sk-avatar shimmer" />
|
|
<view class="sk-body">
|
|
<view class="sk-title shimmer" />
|
|
<view
|
|
v-for="i in rows"
|
|
:key="i"
|
|
class="sk-row shimmer"
|
|
:style="{ width: i === rows ? '60%' : '100%' }"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.skeleton {
|
|
display: flex;
|
|
padding: 24rpx;
|
|
gap: 20rpx;
|
|
}
|
|
.skeleton-card {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
.sk-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
flex-shrink: 0;
|
|
background: #e2e8f0;
|
|
}
|
|
.sk-body {
|
|
flex: 1;
|
|
}
|
|
.sk-title {
|
|
height: 32rpx;
|
|
width: 45%;
|
|
border-radius: 6rpx;
|
|
background: #e2e8f0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.sk-row {
|
|
height: 24rpx;
|
|
border-radius: 6rpx;
|
|
background: #e2e8f0;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.shimmer {
|
|
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
</style>
|