diff --git a/miniprogram/pages/chapters/chapters.wxml b/miniprogram/pages/chapters/chapters.wxml
index 1f2c9eba..5d584051 100644
--- a/miniprogram/pages/chapters/chapters.wxml
+++ b/miniprogram/pages/chapters/chapters.wxml
@@ -17,10 +17,21 @@
-
-
-
- 加载目录中...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/miniprogram/pages/chapters/chapters.wxss b/miniprogram/pages/chapters/chapters.wxss
index 7fa6b02d..c7e3f11f 100644
--- a/miniprogram/pages/chapters/chapters.wxss
+++ b/miniprogram/pages/chapters/chapters.wxss
@@ -75,32 +75,75 @@
width: 100%;
}
-/* ===== 目录加载中 ===== */
-.parts-loading {
+/* ===== 目录骨架屏 ===== */
+.parts-skeleton {
+ padding: 32rpx;
+}
+
+.skeleton-book-card {
+ display: flex;
+ align-items: center;
+ gap: 24rpx;
+ padding: 32rpx;
+ background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
+ border-radius: 32rpx;
+ margin-bottom: 32rpx;
+}
+
+.skeleton-book-icon {
+ width: 96rpx;
+ height: 96rpx;
+ border-radius: 24rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ flex-shrink: 0;
+}
+
+.skeleton-book-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16rpx;
+}
+
+.skeleton-line {
+ height: 32rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 8rpx;
+}
+
+.skeleton-title { width: 70%; }
+.skeleton-subtitle { width: 50%; }
+
+.skeleton-count {
+ width: 80rpx;
+ height: 64rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 16rpx;
+}
+
+.skeleton-part-list {
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 120rpx 0;
gap: 24rpx;
}
-.parts-loading-spinner {
- width: 64rpx;
- height: 64rpx;
- border: 6rpx solid rgba(255, 255, 255, 0.1);
- border-top-color: #00CED1;
- border-radius: 50%;
- animation: parts-spin 0.8s linear infinite;
+.skeleton-part-item .skeleton-part-header {
+ height: 100rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 16rpx;
}
-.parts-loading-text {
- font-size: 28rpx;
- color: rgba(255, 255, 255, 0.5);
-}
-
-@keyframes parts-spin {
- to { transform: rotate(360deg); }
+@keyframes skeleton-shimmer {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
}
/* ===== 书籍信息卡 ===== */
diff --git a/miniprogram/pages/gift-pay/detail.wxml b/miniprogram/pages/gift-pay/detail.wxml
index 02dcce2a..244559b7 100644
--- a/miniprogram/pages/gift-pay/detail.wxml
+++ b/miniprogram/pages/gift-pay/detail.wxml
@@ -14,9 +14,20 @@
-
-
- 加载中...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/miniprogram/pages/gift-pay/detail.wxss b/miniprogram/pages/gift-pay/detail.wxss
index 7134086b..9ce4aa5c 100644
--- a/miniprogram/pages/gift-pay/detail.wxss
+++ b/miniprogram/pages/gift-pay/detail.wxss
@@ -56,32 +56,97 @@
padding: 24rpx 24rpx 200rpx;
}
-/* 加载 */
-.loading-box {
+/* 骨架屏 */
+.skeleton-wrap {
+ padding: 24rpx 0;
+}
+
+.skeleton-hero {
+ background: rgba(24, 24, 27, 0.8);
+ border-radius: 32rpx;
+ padding: 40rpx;
+ margin-bottom: 32rpx;
+}
+
+.skeleton-hero-badge {
+ width: 120rpx;
+ height: 40rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 8rpx;
+ margin-bottom: 24rpx;
+}
+
+.skeleton-hero-title {
+ width: 80%;
+ height: 48rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 8rpx;
+ margin-bottom: 16rpx;
+}
+
+.skeleton-hero-desc {
+ width: 60%;
+ height: 32rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 8rpx;
+ margin-bottom: 32rpx;
+}
+
+.skeleton-hero-amount {
+ width: 200rpx;
+ height: 64rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 12rpx;
+}
+
+.skeleton-card {
+ display: flex;
+ align-items: center;
+ gap: 24rpx;
+ padding: 32rpx;
+ background: rgba(24, 24, 27, 0.6);
+ border-radius: 24rpx;
+}
+
+.skeleton-avatar {
+ width: 96rpx;
+ height: 96rpx;
+ border-radius: 50%;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ flex-shrink: 0;
+}
+
+.skeleton-info {
+ flex: 1;
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 120rpx 0;
+ gap: 16rpx;
}
-.loading-spinner {
- width: 48rpx;
- height: 48rpx;
- border: 4rpx solid rgba(20, 184, 166, 0.2);
- border-top-color: #14b8a6;
- border-radius: 50%;
- animation: spin 0.8s linear infinite;
+.skeleton-info .skeleton-line {
+ height: 32rpx;
+ background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s ease-in-out infinite;
+ border-radius: 8rpx;
}
-@keyframes spin {
- to { transform: rotate(360deg); }
-}
+.skeleton-info .skeleton-line { width: 70%; }
+.skeleton-info .skeleton-line.short { width: 45%; }
-.loading-text {
- margin-top: 24rpx;
- font-size: 28rpx;
- color: rgba(255, 255, 255, 0.45);
+@keyframes skeleton-shimmer {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
}
/* 产品 Hero 卡片 */
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index 39f037f5..13001d69 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -52,19 +52,6 @@
开始阅读→
-
-
-
-
-
-
-
-
-
-