142 lines
3.2 KiB
Plaintext
142 lines
3.2 KiB
Plaintext
<template>
|
|
<view class="skeleton-order-card">
|
|
<!-- 头部骨架 -->
|
|
<view class="skeleton-order-header">
|
|
<view class="skeleton-shop-avatar"></view>
|
|
<view class="skeleton-shop-info">
|
|
<view class="skeleton-shop-name"></view>
|
|
<view class="skeleton-order-time"></view>
|
|
</view>
|
|
<view class="skeleton-order-status"></view>
|
|
</view>
|
|
|
|
<!-- 详情骨架 -->
|
|
<view class="skeleton-order-details">
|
|
<view class="skeleton-detail-row">
|
|
<view class="skeleton-detail-label"></view>
|
|
<view class="skeleton-detail-value"></view>
|
|
</view>
|
|
<view class="skeleton-detail-row">
|
|
<view class="skeleton-detail-label"></view>
|
|
<view class="skeleton-detail-value-short"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.skeleton-order-card {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* 头部骨架 */
|
|
.skeleton-order-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #F5F5F5;
|
|
}
|
|
|
|
.skeleton-shop-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 12rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skeleton-shop-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6rpx;
|
|
}
|
|
|
|
.skeleton-shop-name {
|
|
height: 28rpx;
|
|
width: 200rpx;
|
|
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;
|
|
}
|
|
|
|
.skeleton-order-time {
|
|
height: 22rpx;
|
|
width: 180rpx;
|
|
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;
|
|
}
|
|
|
|
.skeleton-order-status {
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
border-radius: 24rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 详情骨架 */
|
|
.skeleton-order-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.skeleton-detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.skeleton-detail-label {
|
|
width: 120rpx;
|
|
height: 24rpx;
|
|
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;
|
|
}
|
|
|
|
.skeleton-detail-value {
|
|
flex: 1;
|
|
height: 26rpx;
|
|
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;
|
|
}
|
|
|
|
.skeleton-detail-value-short {
|
|
width: 100rpx;
|
|
height: 26rpx;
|
|
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>
|