187 lines
4.0 KiB
Vue
187 lines
4.0 KiB
Vue
<template>
|
|
<view class="cart-skeleton">
|
|
<!-- 购物车列表 -->
|
|
<view class="cart-list-section">
|
|
<template v-for="i in 3" :key="i">
|
|
<view class="cart-store-skeleton">
|
|
<!-- 店铺信息 -->
|
|
<view class="store-info">
|
|
<!-- 店铺图片 -->
|
|
<view class="store-image-skeleton skeleton-item"></view>
|
|
|
|
<!-- 店铺详情 -->
|
|
<view class="store-details">
|
|
<view class="store-name-skeleton skeleton-item"></view>
|
|
<view class="store-items-skeleton skeleton-item"></view>
|
|
<view class="store-address-skeleton skeleton-item"></view>
|
|
</view>
|
|
|
|
<!-- 删除按钮 -->
|
|
<view class="delete-btn-skeleton skeleton-item"></view>
|
|
</view>
|
|
|
|
<!-- 查看购物车按钮 -->
|
|
<view class="view-cart-btn-skeleton skeleton-item"></view>
|
|
|
|
<!-- 查看店铺按钮 -->
|
|
<view class="view-store-btn-skeleton skeleton-item"></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 空购物车状态 -->
|
|
<view class="empty-cart-section" style="display: none;">
|
|
<view class="empty-image-skeleton skeleton-item"></view>
|
|
<view class="empty-text-skeleton skeleton-item"></view>
|
|
<view class="explore-btn-skeleton skeleton-item"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 骨架屏组件
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// 通用骨架屏样式
|
|
.skeleton-item {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
// 闪烁动画
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
// 导航栏区域
|
|
.navbar-skeleton {
|
|
height: 88rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
// 标题区域
|
|
.title-section {
|
|
padding: 20rpx 30rpx 0;
|
|
|
|
.title-skeleton {
|
|
width: 120rpx;
|
|
height: 46rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
// 购物车列表
|
|
.cart-list-section {
|
|
padding: 54rpx 30rpx 0;
|
|
|
|
.cart-store-skeleton {
|
|
margin-bottom: 30rpx;
|
|
border-radius: 24rpx;
|
|
border: 2rpx solid #E8E8E8;
|
|
overflow: hidden;
|
|
|
|
// 店铺信息
|
|
.store-info {
|
|
padding: 30rpx;
|
|
display: flex;
|
|
|
|
// 店铺图片
|
|
.store-image-skeleton {
|
|
width: 118rpx;
|
|
height: 118rpx;
|
|
border-radius: 59rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// 店铺详情
|
|
.store-details {
|
|
margin-left: 30rpx;
|
|
flex: 1;
|
|
|
|
.store-name-skeleton {
|
|
width: 200rpx;
|
|
height: 30rpx;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.store-items-skeleton {
|
|
width: 150rpx;
|
|
height: 28rpx;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.store-address-skeleton {
|
|
width: 250rpx;
|
|
height: 28rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
|
|
// 删除按钮
|
|
.delete-btn-skeleton {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
|
|
// 查看购物车按钮
|
|
.view-cart-btn-skeleton {
|
|
height: 88rpx;
|
|
margin: 0 30rpx 20rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
// 查看店铺按钮
|
|
.view-store-btn-skeleton {
|
|
height: 88rpx;
|
|
margin: 0 30rpx 30rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 空购物车状态
|
|
.empty-cart-section {
|
|
padding: 100rpx 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.empty-image-skeleton {
|
|
width: 318rpx;
|
|
height: 318rpx;
|
|
border-radius: 159rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.empty-text-skeleton {
|
|
width: 200rpx;
|
|
height: 32rpx;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.explore-btn-skeleton {
|
|
width: 400rpx;
|
|
height: 88rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 750rpx) {
|
|
.cart-list-section {
|
|
padding-bottom: 20rpx;
|
|
}
|
|
}
|
|
</style> |