65 lines
2.9 KiB
Vue
65 lines
2.9 KiB
Vue
<template>
|
|
<view class="flex min-h-0 flex-1 flex-col overflow-hidden bg-[#f5f5f5]">
|
|
<view class="skeleton-block relative h-[300px] w-full shrink-0 overflow-hidden bg-[#e7ebef]" />
|
|
|
|
<view class="relative z-10 -mt-[30px] min-h-0 flex-1 rounded-t-[28px] bg-white px-[16px] pb-[24px] pt-[24px]">
|
|
<view class="skeleton-block relative h-[22px] w-[72%] overflow-hidden rounded-[6px] bg-[#e9edf1]" />
|
|
<view class="mt-[12px] flex gap-[8px]">
|
|
<view class="skeleton-block relative h-[20px] w-[64px] overflow-hidden rounded-[4px] bg-[#edf0f3]" />
|
|
<view class="skeleton-block relative h-[20px] w-[76px] overflow-hidden rounded-[4px] bg-[#edf0f3]" />
|
|
<view class="skeleton-block relative h-[20px] w-[56px] overflow-hidden rounded-[4px] bg-[#edf0f3]" />
|
|
</view>
|
|
<view class="mt-[18px] flex items-end">
|
|
<view class="skeleton-block relative h-[28px] w-[110px] overflow-hidden rounded-[6px] bg-[#e9edf1]" />
|
|
<view class="skeleton-block relative ml-[12px] h-[16px] w-[70px] overflow-hidden rounded-[4px] bg-[#f0f2f4]" />
|
|
</view>
|
|
|
|
<view class="mt-[24px] rounded-[12px] bg-[#f8f9fa] p-[14px]">
|
|
<view class="flex items-center">
|
|
<view class="skeleton-block relative h-[24px] w-[24px] overflow-hidden rounded-full bg-[#e5e9ed]" />
|
|
<view class="ml-[10px] min-w-0 flex-1">
|
|
<view class="skeleton-block relative h-[16px] w-[58%] overflow-hidden rounded-[4px] bg-[#e8ecef]" />
|
|
<view class="skeleton-block relative mt-[8px] h-[12px] w-[86%] overflow-hidden rounded-[4px] bg-[#eef1f3]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt-[24px]">
|
|
<view class="skeleton-block relative h-[20px] w-[88px] overflow-hidden rounded-[5px] bg-[#e8ecef]" />
|
|
<view class="skeleton-block relative mt-[14px] h-[14px] w-full overflow-hidden rounded-[4px] bg-[#eef1f3]" />
|
|
<view class="skeleton-block relative mt-[10px] h-[14px] w-[92%] overflow-hidden rounded-[4px] bg-[#eef1f3]" />
|
|
<view class="skeleton-block relative mt-[10px] h-[14px] w-[76%] overflow-hidden rounded-[4px] bg-[#eef1f3]" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex shrink-0 items-center bg-white px-[12px] pb-[24px] pt-[12px]">
|
|
<view class="skeleton-block relative h-[28px] w-[92px] overflow-hidden rounded-[6px] bg-[#e9edf1]" />
|
|
<view class="skeleton-block relative ml-auto h-[48px] w-[120px] overflow-hidden rounded-[10px] bg-[#e4e8ec]" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.skeleton-block {
|
|
&::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.7) 50%,
|
|
transparent 100%
|
|
);
|
|
transform: translateX(-100%);
|
|
animation: skeleton-shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
</style>
|