第一次上传
This commit is contained in:
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<view class="skeleton-shop-detail">
|
||||
<!-- 状态栏 -->
|
||||
<view class="skeleton-status-bar"></view>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<view class="skeleton-nav-bar">
|
||||
<view class="skeleton-nav-back"></view>
|
||||
<view class="skeleton-nav-title"></view>
|
||||
<view class="skeleton-nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图骨架 -->
|
||||
<view class="skeleton-swiper"></view>
|
||||
|
||||
<!-- 店铺信息卡片骨架 -->
|
||||
<view class="skeleton-shop-info">
|
||||
<!-- 店名行 -->
|
||||
<view class="skeleton-shop-name-row">
|
||||
<view class="skeleton-shop-name"></view>
|
||||
<view class="skeleton-actions">
|
||||
<view class="skeleton-action-pill"></view>
|
||||
<view class="skeleton-action-pill"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<view class="skeleton-stats">
|
||||
<view class="skeleton-stat-item"></view>
|
||||
<view class="skeleton-stat-divider"></view>
|
||||
<view class="skeleton-stat-item"></view>
|
||||
<view class="skeleton-stat-divider"></view>
|
||||
<view class="skeleton-stat-item"></view>
|
||||
</view>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="skeleton-tags">
|
||||
<view class="skeleton-tag"></view>
|
||||
<view class="skeleton-tag"></view>
|
||||
<view class="skeleton-tag"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab栏骨架 -->
|
||||
<view class="skeleton-tab-bar">
|
||||
<view class="skeleton-tab-item"></view>
|
||||
<view class="skeleton-tab-item"></view>
|
||||
<view class="skeleton-tab-item"></view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表骨架 -->
|
||||
<view class="skeleton-products">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-product-item">
|
||||
<view class="skeleton-product-image"></view>
|
||||
<view class="skeleton-product-info">
|
||||
<view class="skeleton-product-name"></view>
|
||||
<view class="skeleton-product-desc"></view>
|
||||
<view class="skeleton-product-price-row">
|
||||
<view class="skeleton-product-price"></view>
|
||||
<view class="skeleton-product-sales"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skeleton-shop-detail {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.skeleton-status-bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.skeleton-nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.skeleton-nav-back {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-white 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-nav-title {
|
||||
flex: 1;
|
||||
height: 36rpx;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-white 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.skeleton-swiper {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 店铺信息卡片 */
|
||||
.skeleton-shop-info {
|
||||
background: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-shop-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-shop-name {
|
||||
flex: 1;
|
||||
height: 40rpx;
|
||||
width: 300rpx;
|
||||
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-actions {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-action-pill {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 28rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-stat-item:first-child {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.skeleton-stat-item:nth-child(3) {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.skeleton-stat-item::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 36rpx;
|
||||
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-stat-item::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80rpx;
|
||||
height: 28rpx;
|
||||
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-stat-divider {
|
||||
width: 1rpx;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
height: 80rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.skeleton-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-tag {
|
||||
width: 140rpx;
|
||||
height: 48rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Tab栏 */
|
||||
.skeleton-tab-bar {
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
padding: 24rpx 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-tab-item {
|
||||
flex: 1;
|
||||
height: 40rpx;
|
||||
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-products {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-product-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-product-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 8rpx;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-product-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-product-name {
|
||||
height: 36rpx;
|
||||
width: 80%;
|
||||
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-product-desc {
|
||||
height: 28rpx;
|
||||
width: 60%;
|
||||
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-product-price-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.skeleton-product-price {
|
||||
width: 100rpx;
|
||||
height: 36rpx;
|
||||
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-product-sales {
|
||||
width: 120rpx;
|
||||
height: 28rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-white {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user