zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加了商品详情页的骨架屏请求效果

Browse Source
This commit is contained in:
zoujing
2026-08-17 21:07:26 +08:00
parent d567d1a2c4
commit ebad453023
2 changed files with 186 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/goods/components/GoodsDetailSkeleton/index.vue Normal file
View File

@@ -0,0 +1,64 @@
<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>