|
|
@@ -7,83 +7,48 @@
|
|
|
|
|
|
<!-- 骨架屏 -->
|
|
|
<view v-else-if="loading && (!articles || articles.length === 0)" class="bs-shelf-skeleton">
|
|
|
- <view class="bs-skeleton-shelf">
|
|
|
- <view v-for="n in 3" :key="n" class="bs-skeleton-book"></view>
|
|
|
+ <view class="bs-skeleton-grid">
|
|
|
+ <view v-for="n in 4" :key="n" class="bs-skeleton-card">
|
|
|
+ <view class="bs-skeleton-cover"></view>
|
|
|
+ <view class="bs-skeleton-line"></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 书册展示区 -->
|
|
|
- <view v-else class="bs-bookcase">
|
|
|
- <!-- 书架装饰线 -->
|
|
|
- <view class="bs-shelf-top-border"></view>
|
|
|
-
|
|
|
- <!-- 书籍横向滚动(每屏3本) -->
|
|
|
- <scroll-view
|
|
|
- scroll-x
|
|
|
- class="bs-books-scroll"
|
|
|
- :scroll-left="scrollLeft"
|
|
|
- scroll-with-animation
|
|
|
- :show-scrollbar="false"
|
|
|
- @scroll="onScroll"
|
|
|
+ <!-- 四列文章网格 -->
|
|
|
+ <view v-else class="bs-grid">
|
|
|
+ <view
|
|
|
+ v-for="(article, idx) in displayArticles"
|
|
|
+ :key="idx"
|
|
|
+ class="bs-card"
|
|
|
+ @click="$emit('articleClick', article)"
|
|
|
>
|
|
|
- <view class="bs-books-inner">
|
|
|
- <view class="bs-book-spacer"></view>
|
|
|
-
|
|
|
- <view
|
|
|
- v-for="(article, idx) in displayArticles"
|
|
|
- :key="idx"
|
|
|
- class="bs-book-wrap"
|
|
|
- @click="$emit('articleClick', article)"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="bs-book-cover"
|
|
|
- :style="{
|
|
|
- background: getBookColor(article, idx)
|
|
|
- }"
|
|
|
- >
|
|
|
- <image
|
|
|
- v-if="article.coverImage"
|
|
|
- class="bs-cover-img"
|
|
|
- :src="getImageUrl(article.coverImage)"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
-
|
|
|
- <view v-else class="bs-cover-text">
|
|
|
- <text
|
|
|
- class="bs-cover-title"
|
|
|
- :style="{ color: getTextColor(article, idx) }"
|
|
|
- >{{ article.title }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="article.coverImage" class="bs-cover-title-bottom">
|
|
|
- <text class="bs-cover-title-overlay">{{ article.title }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bs-cover-edge"></view>
|
|
|
- </view>
|
|
|
+ <view
|
|
|
+ class="bs-card-cover"
|
|
|
+ :style="{
|
|
|
+ background: getBookColor(article, idx)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ v-if="article.coverImage"
|
|
|
+ class="bs-cover-img"
|
|
|
+ :src="getImageUrl(article.coverImage)"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
|
|
|
- <view class="bs-book-shadow"></view>
|
|
|
+ <view v-else class="bs-cover-text">
|
|
|
+ <text
|
|
|
+ class="bs-cover-title"
|
|
|
+ :style="{ color: getTextColor(article, idx) }"
|
|
|
+ >{{ article.title }}</text>
|
|
|
</view>
|
|
|
|
|
|
- <view class="bs-book-spacer"></view>
|
|
|
+ <view v-if="article.coverImage" class="bs-cover-title-bottom">
|
|
|
+ <text class="bs-cover-title-overlay">{{ article.title }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
|
|
|
- <view class="bs-shelf-bottom">
|
|
|
- <view class="bs-shelf-plank"></view>
|
|
|
- <view class="bs-shelf-bracket bs-shelf-bracket-left"></view>
|
|
|
- <view class="bs-shelf-bracket bs-shelf-bracket-right"></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bs-page-dots" v-if="displayArticles.length > 3">
|
|
|
- <view
|
|
|
- v-for="n in dotCount"
|
|
|
- :key="n"
|
|
|
- class="bs-dot"
|
|
|
- :class="{ 'bs-dot-active': isActiveDot(n) }"
|
|
|
- >
|
|
|
- <text class="bs-dot-text">{{ (n - 1) * 3 + 1 }}-{{ Math.min(n * 3, displayArticles.length) }}</text>
|
|
|
- </view>
|
|
|
+ <text class="bs-card-name">{{ article.title }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -118,16 +83,9 @@ export default {
|
|
|
isLoggedIn: { type: Boolean, default: false }
|
|
|
},
|
|
|
data: function() {
|
|
|
- return {
|
|
|
- scrollLeft: 0,
|
|
|
- activeDot: 1
|
|
|
- }
|
|
|
+ return {}
|
|
|
},
|
|
|
computed: {
|
|
|
- // 每屏 3 本,指示器数量 = ceil(n/3)
|
|
|
- dotCount: function() {
|
|
|
- return Math.max(1, Math.ceil(this.displayArticles.length / 3))
|
|
|
- },
|
|
|
displayArticles: function() {
|
|
|
if (!this.articles || this.articles.length === 0) {
|
|
|
return [
|
|
|
@@ -136,9 +94,9 @@ export default {
|
|
|
{ title: '亲子沟通的心理学智慧', category: '心理养育', summary: '有效的倾听与表达技巧' },
|
|
|
{ title: '规划师推荐的书单', category: '成长规划', summary: '培养未来领导力的阅读路径' },
|
|
|
{ title: '儿童营养均衡完全指南', category: '营养健康', summary: '0-12岁各阶段营养需求' }
|
|
|
- ]
|
|
|
+ ].slice(0, 4)
|
|
|
}
|
|
|
- return this.articles.slice(0, 3)
|
|
|
+ return this.articles.slice(0, 4)
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -187,17 +145,6 @@ export default {
|
|
|
},
|
|
|
getImageUrl: function(path) {
|
|
|
return config.API_BASE_URL + path
|
|
|
- },
|
|
|
- // 滚动时计算当前指示器位置(每 3 本一组)
|
|
|
- onScroll: function(e) {
|
|
|
- var scrollLeft = e.detail.scrollLeft || 0
|
|
|
- // 每本封面宽 200rpx + 间距 24rpx ≈ 224rpx/本;scrollLeft 为 px,需转 px 后按 3 本一组
|
|
|
- var groupWidth = uni.upx2px(224) * 3
|
|
|
- var groupIndex = Math.floor(scrollLeft / groupWidth)
|
|
|
- this.activeDot = Math.min(groupIndex + 1, this.dotCount)
|
|
|
- },
|
|
|
- isActiveDot: function(dotIndex) {
|
|
|
- return dotIndex === this.activeDot
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -205,7 +152,7 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
|
/* ======================================
|
|
|
- ArticleBookshelf — 书册风格推荐阅读组件
|
|
|
+ ArticleBookshelf — 四列网格推荐阅读组件
|
|
|
浠艾福 (Care Family) 设计系统
|
|
|
====================================== */
|
|
|
|
|
|
@@ -215,61 +162,6 @@ export default {
|
|
|
padding: 0 0 16rpx;
|
|
|
}
|
|
|
|
|
|
-/* ---- Header ---- */
|
|
|
-.bs-header {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 32rpx 20rpx;
|
|
|
-}
|
|
|
-.bs-header-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.bs-book-icon {
|
|
|
- font-size: 48rpx;
|
|
|
- margin-right: 14rpx;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
-.bs-header-text {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.bs-title {
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 700;
|
|
|
- color: #1a1a2e;
|
|
|
- letter-spacing: 2rpx;
|
|
|
- line-height: 1.2;
|
|
|
-}
|
|
|
-.bs-subtitle {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #9CA3AF;
|
|
|
- font-family: 'Georgia', serif;
|
|
|
- font-style: italic;
|
|
|
- margin-top: 2rpx;
|
|
|
-}
|
|
|
-.bs-header-right {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- background: rgba(91, 155, 213, 0.08);
|
|
|
- border-radius: 20rpx;
|
|
|
-}
|
|
|
-.bs-more-text {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #5B9BD5;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-.bs-more-arrow {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #5B9BD5;
|
|
|
- margin-left: 4rpx;
|
|
|
-}
|
|
|
-
|
|
|
/* ---- Empty State ---- */
|
|
|
.bs-empty {
|
|
|
padding: 40rpx 0;
|
|
|
@@ -279,102 +171,74 @@ export default {
|
|
|
.bs-empty-text {
|
|
|
font-size: 24rpx;
|
|
|
color: #9CA3AF;
|
|
|
- font-family: 'Georgia', serif;
|
|
|
- font-style: italic;
|
|
|
}
|
|
|
|
|
|
/* ---- Skeleton ---- */
|
|
|
.bs-shelf-skeleton {
|
|
|
padding: 0 28rpx;
|
|
|
}
|
|
|
-.bs-skeleton-shelf {
|
|
|
+.bs-skeleton-grid {
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 24rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
padding-top: 16rpx;
|
|
|
}
|
|
|
-.bs-skeleton-book {
|
|
|
- width: 200rpx;
|
|
|
- height: 280rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
+.bs-skeleton-card {
|
|
|
+ width: calc(25% - 12rpx);
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.bs-skeleton-card:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.bs-skeleton-cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 50%, #e8e8e8 100%);
|
|
|
+ background-size: 200% 100%;
|
|
|
+ animation: skeleton-wave 1.4s ease-in-out infinite;
|
|
|
+}
|
|
|
+.bs-skeleton-line {
|
|
|
+ height: 24rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 50%, #e8e8e8 100%);
|
|
|
background-size: 200% 100%;
|
|
|
animation: skeleton-wave 1.4s ease-in-out infinite;
|
|
|
- flex-shrink: 0;
|
|
|
}
|
|
|
@keyframes skeleton-wave {
|
|
|
0% { background-position: 200% 0; }
|
|
|
100% { background-position: -200% 0; }
|
|
|
}
|
|
|
|
|
|
-/* ---- Bookcase ---- */
|
|
|
-.bs-bookcase {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-/* 书架顶部装饰线 */
|
|
|
-.bs-shelf-top-border {
|
|
|
- height: 6rpx;
|
|
|
- margin: 0 28rpx;
|
|
|
- background: linear-gradient(90deg,
|
|
|
- transparent 0%,
|
|
|
- #8B7355 10%,
|
|
|
- #A0896A 30%,
|
|
|
- #C4A882 50%,
|
|
|
- #A0896A 70%,
|
|
|
- #8B7355 90%,
|
|
|
- transparent 100%
|
|
|
- );
|
|
|
- border-radius: 3rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* ---- Books Scroll ---- */
|
|
|
-.bs-books-scroll {
|
|
|
- white-space: nowrap;
|
|
|
- padding: 20rpx 0 0;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.bs-books-inner {
|
|
|
- display: inline-flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: flex-start;
|
|
|
+/* ---- 四列文章网格 ---- */
|
|
|
+.bs-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
-.bs-book-spacer {
|
|
|
- width: 28rpx;
|
|
|
- flex-shrink: 0;
|
|
|
+.bs-card {
|
|
|
+ width: calc(25% - 12rpx);
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
}
|
|
|
-
|
|
|
-/* ---- Single Book (竖版封面) ---- */
|
|
|
-.bs-book-wrap {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-right: 24rpx;
|
|
|
- position: relative;
|
|
|
+.bs-card:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
-.bs-book-cover {
|
|
|
- width: 200rpx;
|
|
|
- height: 280rpx;
|
|
|
- border-radius: 8rpx 8rpx 4rpx 4rpx;
|
|
|
+.bs-card-cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
overflow: hidden;
|
|
|
- box-shadow:
|
|
|
- 4rpx 0 10rpx rgba(0,0,0,0.18),
|
|
|
- -2rpx 0 4rpx rgba(0,0,0,0.08),
|
|
|
- 0 6rpx 14rpx rgba(0,0,0,0.12);
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
|
|
|
transition: transform 0.18s, box-shadow 0.18s;
|
|
|
}
|
|
|
-.bs-book-wrap:active .bs-book-cover {
|
|
|
- transform: translateY(-6rpx) scale(1.02);
|
|
|
- box-shadow:
|
|
|
- 6rpx 0 14rpx rgba(0,0,0,0.25),
|
|
|
- -3rpx 0 6rpx rgba(0,0,0,0.1),
|
|
|
- 0 10rpx 22rpx rgba(0,0,0,0.18);
|
|
|
+.bs-card:active .bs-card-cover {
|
|
|
+ transform: translateY(-4rpx) scale(1.02);
|
|
|
+ box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.18);
|
|
|
}
|
|
|
|
|
|
/* 封面图 */
|
|
|
@@ -390,11 +254,11 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- padding: 20rpx 16rpx;
|
|
|
+ padding: 16rpx 12rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.bs-cover-title {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
font-weight: 700;
|
|
|
line-height: 1.5;
|
|
|
letter-spacing: 1rpx;
|
|
|
@@ -402,7 +266,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
- -webkit-line-clamp: 4;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
@@ -416,11 +280,11 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- padding: 14rpx 12rpx 10rpx;
|
|
|
+ padding: 10rpx 8rpx 8rpx;
|
|
|
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
|
|
|
}
|
|
|
.bs-cover-title-overlay {
|
|
|
- font-size: 20rpx;
|
|
|
+ font-size: 18rpx;
|
|
|
font-weight: 700;
|
|
|
line-height: 1.4;
|
|
|
color: #FFFFFF;
|
|
|
@@ -431,79 +295,18 @@ export default {
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-break: break-all;
|
|
|
- max-width: 176rpx;
|
|
|
+ max-width: 90%;
|
|
|
}
|
|
|
|
|
|
-/* 右侧书页切边(3D效果) */
|
|
|
-.bs-cover-edge {
|
|
|
- position: absolute;
|
|
|
- top: 10rpx;
|
|
|
- bottom: 10rpx;
|
|
|
- right: 0;
|
|
|
- width: 6rpx;
|
|
|
- background: linear-gradient(180deg,
|
|
|
- rgba(0,0,0,0.25) 0%,
|
|
|
- rgba(0,0,0,0.1) 50%,
|
|
|
- rgba(0,0,0,0.2) 100%
|
|
|
- );
|
|
|
- border-radius: 0 4rpx 4rpx 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* 封面底部投影(书架效果) */
|
|
|
-.bs-book-shadow {
|
|
|
- width: 160rpx;
|
|
|
- height: 14rpx;
|
|
|
+/* 卡片底部标题 */
|
|
|
+.bs-card-name {
|
|
|
+ display: block;
|
|
|
margin-top: 8rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 70%);
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* ---- 书架底板 ---- */
|
|
|
-.bs-shelf-bottom {
|
|
|
- position: relative;
|
|
|
- height: 24rpx;
|
|
|
- margin: 0 20rpx;
|
|
|
-}
|
|
|
-.bs-shelf-plank {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 14rpx;
|
|
|
- background: linear-gradient(180deg, #C4A882 0%, #A0896A 100%);
|
|
|
- border-radius: 2rpx;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
|
|
|
-}
|
|
|
-.bs-shelf-bracket {
|
|
|
- position: absolute;
|
|
|
- bottom: 6rpx;
|
|
|
- width: 16rpx;
|
|
|
- height: 20rpx;
|
|
|
- background: #8B7355;
|
|
|
- border-radius: 2rpx 2rpx 0 0;
|
|
|
-}
|
|
|
-.bs-shelf-bracket-left { left: 32rpx; }
|
|
|
-.bs-shelf-bracket-right { right: 32rpx; }
|
|
|
-
|
|
|
-/* ---- Page Dots ---- */
|
|
|
-.bs-page-dots {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- padding-top: 16rpx;
|
|
|
- gap: 8rpx;
|
|
|
-}
|
|
|
-.bs-dot {
|
|
|
- width: 10rpx;
|
|
|
- height: 10rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: #D1D5DB;
|
|
|
- transition: all 0.25s;
|
|
|
-}
|
|
|
-.bs-dot-active {
|
|
|
- background: #8B7355;
|
|
|
- width: 24rpx;
|
|
|
- border-radius: 5rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
</style>
|