书册整理中，敬请期待...
{{ article.title }}
{{ article.title }}
{{ article.title }}
import { primaryPale } from '@/utils/brand-colors.js'
/* ======================================
ArticleBookshelf — 四列网格推荐阅读组件
浠艾福 (Care Family) 设计系统
====================================== */
/* ---- Section Container ---- */
.bs-section {
margin: 24rpx 0;
padding: 0 0 16rpx;
}
/* ---- Empty State ---- */
.bs-empty {
padding: 40rpx 0;
display: flex;
justify-content: center;
}
.bs-empty-text {
font-size: 24rpx;
color: $facade-text-gray-400;
}
/* ---- Skeleton ---- */
.bs-shelf-skeleton {
padding: 0 28rpx;
}
.bs-skeleton-grid {
display: flex;
flex-wrap: wrap;
padding-top: 16rpx;
}
.bs-skeleton-card {
width: calc(33.33% - 12rpx);
margin-right: 16rpx;
margin-bottom: 16rpx;
}
.bs-skeleton-card:nth-child(3n) {
margin-right: 0;
}
.bs-skeleton-cover {
width: 100%;
height: 0;
padding-top: 133.33%; /* 3:4 书封比例 */
border-radius: 12rpx;
background: linear-gradient(180deg, $facade-fill-4 0%, $facade-fill 50%, $facade-fill-4 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, $facade-fill-4 0%, $facade-fill 50%, $facade-fill-4 100%);
background-size: 200% 100%;
animation: skeleton-wave 1.4s ease-in-out infinite;
}
@keyframes skeleton-wave {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---- 三列文章网格 ---- */
.bs-grid {
display: flex;
flex-wrap: wrap;
}
.bs-card {
width: calc(33.33% - 12rpx);
margin-right: 16rpx;
margin-bottom: 16rpx;
}
.bs-card:nth-child(3n) {
margin-right: 0;
}
.bs-card-cover {
width: 100%;
height: 0;
padding-top: 133.33%; /* 3:4 书封比例 */
border-radius: 12rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
transition: transform 0.18s, box-shadow 0.18s;
}
.bs-card:active .bs-card-cover {
transform: translateY(-4rpx) scale(1.02);
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.18);
}
/* 封面图 */
.bs-cover-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 无封面图时：渐变底 + 书名 */
.bs-cover-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 16rpx 12rpx;
box-sizing: border-box;
}
.bs-cover-title {
font-size: 22rpx;
font-weight: 700;
line-height: 1.5;
letter-spacing: 1rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
}
/* 有封面图时：底部叠加文章标题 */
.bs-cover-title-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 10rpx 8rpx 8rpx;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
}
.bs-cover-title-overlay {
font-size: 18rpx;
font-weight: 700;
line-height: 1.4;
color: $app-surface;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
max-width: 90%;
}
/* 卡片底部标题 */
.bs-card-name {
display: block;
margin-top: 8rpx;
font-size: 22rpx;
color: $facade-text-strong;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}