feat(frontend): 书架封面有图时底部叠加文章标题

cfc-frontend/components/ArticleBookshelf.vue

@@ -75,15 +75,9 @@
                 >{{ article.title }}</text>
               </view>
 
-              <!-- 底部分类标签 -->
-              <view class="bs-cover-bottom">
-                <text
-                  class="bs-cover-category"
-                  :style="{
-                    background: getTextColor(article, idx),
-                    color: getBookColor(article, idx)
-                  }"
-                >{{ getCategoryLabel(article) }}</text>
+              <!-- 有封面图时：底部叠加文章标题 -->
+              <view v-if="article.coverImage" class="bs-cover-title-bottom">
+                <text class="bs-cover-title-overlay">{{ article.title }}</text>
               </view>
 
               <!-- 右侧书页切边（3D效果） -->
@@ -168,7 +162,7 @@ export default {
           { title: '儿童营养均衡完全指南', category: '营养健康', summary: '0-12岁各阶段营养需求' }
         ]
       }
-      return this.articles.slice(0, 12)
+      return this.articles.slice(0, 3)
     }
   },
   methods: {
@@ -218,12 +212,6 @@ export default {
     getImageUrl: function(path) {
       return config.API_BASE_URL + path
     },
-    getCategoryLabel: function(article) {
-      if (!article) return '推荐'
-      if (article.categoryName) return article.categoryName
-      if (article.category) return article.category
-      return '推荐'
-    },
     // 滚动时计算当前指示器位置（每 3 本一组）
     onScroll: function(e) {
       var scrollLeft = e.detail.scrollLeft || 0
@@ -443,28 +431,31 @@ export default {
   word-break: break-all;
 }
 
-/* 底部分类标签 */
-.bs-cover-bottom {
+/* 有封面图时：底部叠加文章标题 */
+.bs-cover-title-bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
-  padding: 10rpx 0 12rpx;
-  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%);
-}
-.bs-cover-category {
-  font-size: 16rpx;
-  font-weight: 600;
-  padding: 3rpx 8rpx;
-  border-radius: 4rpx;
-  max-width: 160rpx;
+  align-items: center;
+  padding: 14rpx 12rpx 10rpx;
+  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
+}
+.bs-cover-title-overlay {
+  font-size: 20rpx;
+  font-weight: 700;
+  line-height: 1.4;
+  color: #FFFFFF;
+  text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  text-align: center;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  max-width: 176rpx;
 }
 
 /* 右侧书页切边（3D效果） */