157 lines
3.1 KiB
Vue
157 lines
3.1 KiB
Vue
<template>
|
||
<!--
|
||
列表骨架屏：按 type 模拟订单卡等，放在业务分包以控制主包体积。
|
||
order 类型对齐商品订单卡片结构（顶栏/正文/底栏）。
|
||
-->
|
||
<view class="list-skeleton" :class="'list-skeleton--' + type">
|
||
<view
|
||
v-for="i in rowCount"
|
||
:key="i"
|
||
class="sk-row"
|
||
:class="'sk-row--' + type"
|
||
>
|
||
<template v-if="type === 'order'">
|
||
<view class="sk-order-head">
|
||
<view class="sk-line sk-line--md sk-shimmer"></view>
|
||
<view class="sk-line sk-line--xs sk-shimmer"></view>
|
||
</view>
|
||
<view class="sk-order-body">
|
||
<view class="sk-line sk-line--lg sk-shimmer"></view>
|
||
<view class="sk-line sk-line--sm sk-shimmer"></view>
|
||
<view class="sk-line sk-line--md sk-shimmer"></view>
|
||
</view>
|
||
<view class="sk-order-foot">
|
||
<view class="sk-line sk-line--xs sk-shimmer"></view>
|
||
<view class="sk-line sk-line--price sk-shimmer"></view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="sk-line sk-line--lg sk-shimmer"></view>
|
||
<view class="sk-line sk-line--md sk-shimmer"></view>
|
||
<view class="sk-line sk-line--sm sk-shimmer"></view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ListSkeleton',
|
||
props: {
|
||
/** 骨架样式：order=订单卡；default=通用三行 */
|
||
type: {
|
||
type: String,
|
||
default: 'order',
|
||
validator(v) {
|
||
return ['order', 'default'].indexOf(v) !== -1
|
||
},
|
||
},
|
||
/** 行数 */
|
||
rows: {
|
||
type: [Number, String],
|
||
default: 4,
|
||
},
|
||
},
|
||
computed: {
|
||
rowCount() {
|
||
const n = Number(this.rows)
|
||
return n > 0 ? n : 4
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.list-skeleton {
|
||
width: 100%;
|
||
padding: 0 24rpx 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sk-shimmer {
|
||
background: linear-gradient(90deg, #ebebeb 25%, #f5f5f5 50%, #ebebeb 75%);
|
||
background-size: 400% 100%;
|
||
animation: sk-shimmer 1.4s ease infinite;
|
||
}
|
||
|
||
@keyframes sk-shimmer {
|
||
0% {
|
||
background-position: 100% 0;
|
||
}
|
||
100% {
|
||
background-position: 0 0;
|
||
}
|
||
}
|
||
|
||
.sk-row--order {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 28rpx 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
.sk-order-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.sk-order-body {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.sk-order-foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.sk-row--default {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 28rpx 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.sk-line {
|
||
height: 24rpx;
|
||
border-radius: 6rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.sk-line--lg {
|
||
width: 70%;
|
||
}
|
||
|
||
.sk-line--md {
|
||
width: 50%;
|
||
}
|
||
|
||
.sk-line--sm {
|
||
width: 90%;
|
||
}
|
||
|
||
.sk-line--xs {
|
||
width: 120rpx;
|
||
height: 22rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.sk-line--price {
|
||
width: 140rpx;
|
||
height: 32rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.sk-order-head .sk-line--md {
|
||
width: 45%;
|
||
margin-bottom: 0;
|
||
}
|
||
</style>
|