cfc/cfc-frontend/components/ArticleBookshelf.vue

<template>
  <view class="bs-section">
    <!-- 书册头部 -->
    <view class="bs-header">
      <view class="bs-header-left">
        <text class="bs-book-icon">&#x1F4DA;</text>
        <view class="bs-header-text">
          <text class="bs-title">推荐阅读</text>
          <text class="bs-subtitle">Knowledge · 知识</text>
        </view>
      </view>
      <view class="bs-header-right" @click="$emit('moreArticles')">
        <text class="bs-more-text">书库</text>
        <text class="bs-more-arrow">&#x203A;</text>
      </view>
    </view>

    <!-- 无数据 -->
    <view v-if="(!articles || articles.length === 0) && !loading" class="bs-empty">
      <text class="bs-empty-text">书册整理中，敬请期待...</text>
    </view>

    <!-- 骨架屏 -->
    <view v-else-if="loading && (!articles || articles.length === 0)" class="bs-shelf-skeleton">
      <view class="bs-skeleton-shelf">
        <view v-for="n in 5" :key="n" class="bs-skeleton-book" :style="{ height: (160 + n * 20) + 'rpx', opacity: 1 - n * 0.1 }"></view>
      </view>
    </view>

    <!-- 书册展示区 -->
    <view v-else class="bs-bookcase">
      <!-- 书架装饰线 -->
      <view class="bs-shelf-top-border"></view>

      <!-- 书籍横向滚动 -->
      <scroll-view
        scroll-x
        class="bs-books-scroll"
        :scroll-left="scrollLeft"
        scroll-with-animation
        :show-scrollbar="false"
      >
        <!-- 左内边距起始 -->
        <view class="bs-book-spacer"></view>

        <!-- 书籍列表 -->
        <view
          v-for="(article, idx) in displayArticles"
          :key="idx"
          class="bs-book-wrap"
          @click="openSpread(idx)"
        >
          <!-- 书脊主体 -->
          <view
            class="bs-book-spine"
            :style="{
              background: getBookColor(article, idx),
              height: getBookHeight(idx) + 'rpx'
            }"
          >
            <!-- 书脊顶部装饰条 -->
            <view class="bs-book-top-stripe"></view>

            <!-- 书页纹理（顶部） -->
            <view class="bs-book-pages-top"></view>

            <!-- 竖排标题 -->
            <view class="bs-book-title-wrap">
              <text
                class="bs-book-title"
                :style="{ color: getTextColor(article, idx) }"
              >{{ article.title }}</text>
            </view>

            <!-- 书脊底部标签 -->
            <view class="bs-book-bottom">
              <text
                class="bs-book-category"
                :style="{
                  background: getTextColor(article, idx),
                  color: getBookColor(article, idx)
                }"
              >{{ getCategoryLabel(article) }}</text>
            </view>

            <!-- 书页纹理（底部） -->
            <view class="bs-book-pages-bottom"></view>

            <!-- 右侧书页切边 -->
            <view class="bs-book-edge"></view>
          </view>

          <!-- 书脊底部阴影（书架效果） -->
          <view
            class="bs-book-shadow"
            :style="{
              background: 'linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 100%)',
              width: (getBookHeight(idx) * 0.15) + 'rpx'
            }"
          ></view>
        </view>

        <!-- 右内边距结尾 -->
        <view class="bs-book-spacer"></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 > 4">
        <view
          v-for="n in Math.min(5, Math.ceil(displayArticles.length / 4))"
          :key="n"
          class="bs-dot"
          :class="{ 'bs-dot-active': isActiveDot(n) }"
        ></view>
      </view>
    </view>

    <!-- 杂志展开页（点击书籍后显示） -->
    <view
      class="bs-spread-overlay"
      v-if="spreadActive"
      @click="closeSpread"
    >
      <view class="bs-spread" @click.stop="">

        <!-- 关闭按钮 -->
        <view class="bs-spread-close" @click="closeSpread">
          <text class="bs-spread-close-text">&#x2715;</text>
        </view>

        <!-- 杂志页眉 -->
        <view class="bs-spread-header">
          <view class="bs-spread-header-line"></view>
          <text class="bs-spread-header-title">&#x1F4DA; 阅读精选</text>
          <view class="bs-spread-header-line"></view>
        </view>

        <!-- 双页展开 -->
        <view class="bs-spread-pages">
          <!-- 左页 -->
          <view
            class="bs-spread-page bs-spread-page-left"
            v-if="spreadArticles[0]"
            @click="$emit('articleClick', spreadArticles[0])"
          >
            <view class="bs-spread-page-cover" v-if="spreadArticles[0].coverImage">
              <image
                class="bs-spread-cover-img"
                :src="spreadArticles[0].coverImage"
                mode="aspectFill"
              />
              <view
                class="bs-spread-cover-overlay"
                :style="{ background: getBookColor(spreadArticles[0], 0) }"
              ></view>
            </view>
            <view class="bs-spread-page-body">
              <text class="bs-spread-page-category" :style="{ color: getBookColor(spreadArticles[0], 0) }">
                {{ getCategoryLabel(spreadArticles[0]) }}
              </text>
              <text class="bs-spread-page-title">{{ spreadArticles[0].title }}</text>
              <text class="bs-spread-page-summary" v-if="spreadArticles[0].summary">
                {{ spreadArticles[0].summary }}
              </text>
              <view class="bs-spread-page-footer">
                <text class="bs-spread-page-author" v-if="spreadArticles[0].author">
                  {{ spreadArticles[0].author }}
                </text>
                <text class="bs-spread-page-date" v-if="spreadArticles[0].date">
                  {{ spreadArticles[0].date }}
                </text>
              </view>
            </view>
          </view>

          <!-- 书脊分隔 -->
          <view class="bs-spread-spine"></view>

          <!-- 右页 -->
          <view
            class="bs-spread-page bs-spread-page-right"
            v-if="spreadArticles[1]"
            @click="$emit('articleClick', spreadArticles[1])"
          >
            <view class="bs-spread-page-cover" v-if="spreadArticles[1].coverImage">
              <image
                class="bs-spread-cover-img"
                :src="spreadArticles[1].coverImage"
                mode="aspectFill"
              />
              <view
                class="bs-spread-cover-overlay"
                :style="{ background: getBookColor(spreadArticles[1], 1) }"
              ></view>
            </view>
            <view class="bs-spread-page-body">
              <text class="bs-spread-page-category" :style="{ color: getBookColor(spreadArticles[1], 1) }">
                {{ getCategoryLabel(spreadArticles[1]) }}
              </text>
              <text class="bs-spread-page-title">{{ spreadArticles[1].title }}</text>
              <text class="bs-spread-page-summary" v-if="spreadArticles[1].summary">
                {{ spreadArticles[1].summary }}
              </text>
              <view class="bs-spread-page-footer">
                <text class="bs-spread-page-author" v-if="spreadArticles[1].author">
                  {{ spreadArticles[1].author }}
                </text>
                <text class="bs-spread-page-date" v-if="spreadArticles[1].date">
                  {{ spreadArticles[1].date }}
                </text>
              </view>
            </view>
          </view>

          <!-- 无右页时占位 -->
          <view class="bs-spread-page bs-spread-page-right bs-spread-page-empty" v-else>
            <view class="bs-spread-empty-inner">
              <text class="bs-spread-empty-icon">&#x1F4D6;</text>
              <text class="bs-spread-empty-text">更多好文</text>
              <text class="bs-spread-empty-text2">即将上架</text>
            </view>
          </view>
        </view>

        <!-- 翻页提示 -->
        <view class="bs-spread-hint">
          <text class="bs-spread-hint-text">点击封面阅读全文</text>
          <text class="bs-spread-hint-text" @click="prevSpreadPair">&#x25C0; 上一页</text>
          <text class="bs-spread-hint-text" @click="nextSpreadPair">下一页 &#x25B6;</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 五维配色体系（书脊颜色）
var DIMENSION_COLORS = {
  body:    { bg: 'linear-gradient(180deg, #FF8C42 0%, #E8762A 100%)', text: '#FFF5EE' },
  mind:    { bg: 'linear-gradient(180deg, #FF6B9D 0%, #E84A7F 100%)', text: '#FFF0F5' },
  wisdom:  { bg: 'linear-gradient(180deg, #6366F1 0%, #4F46E5 100%)', text: '#EEF2FF' },
  action:  { bg: 'linear-gradient(180deg, #10B981 0%, #059669 100%)', text: '#ECFDF5' },
  wealth:  { bg: 'linear-gradient(180deg, #F59E0B 0%, #D97706 100%)', text: '#FFFBEB' }
}

// 回退渐变（用于无维度分类的文章）
var FALLBACK_GRADIENTS = [
  { bg: 'linear-gradient(180deg, #8B5CF6 0%, #7C3AED 100%)', text: '#F5F3FF' },
  { bg: 'linear-gradient(180deg, #06B6D4 0%, #0891B2 100%)', text: '#ECFEFF' },
  { bg: 'linear-gradient(180deg, #EC4899 0%, #DB2777 100%)', text: '#FDF2F8' },
  { bg: 'linear-gradient(180deg, #14B8A6 0%, #0D9488 100%)', text: '#F0FDFA' },
  { bg: 'linear-gradient(180deg, #F97316 0%, #EA580C 100%)', text: '#FFF7ED' }
]

export default {
  name: 'ArticleBookshelf',
  props: {
    articles: { type: Array, default: function() { return [] } },
    loading: { type: Boolean, default: false },
    isLoggedIn: { type: Boolean, default: false }
  },
  data: function() {
    return {
      spreadActive: false,
      spreadIndex: 0,
      scrollLeft: 0
    }
  },
  computed: {
    displayArticles: function() {
      if (!this.articles || this.articles.length === 0) {
        return [
          { title: '培养孩子自驱力的关键', category: '家庭成长', summary: '如何帮助孩子建立内在动机' },
          { title: '五维能量与家庭健康管理', category: '健康科普', summary: '科学理解健康的五个维度' },
          { title: '亲子沟通的心理学智慧', category: '心理养育', summary: '有效的倾听与表达技巧' },
          { title: '规划师推荐的书单', category: '成长规划', summary: '培养未来领导力的阅读路径' },
          { title: '儿童营养均衡完全指南', category: '营养健康', summary: '0-12岁各阶段营养需求' }
        ]
      }
      return this.articles.slice(0, 12)
    },
    spreadArticles: function() {
      var base = this.spreadIndex * 2
      return [
        this.displayArticles[base],
        this.displayArticles[base + 1]
      ].filter(function(a) { return a })
    },
    maxSpreadIndex: function() {
      return Math.floor((this.displayArticles.length - 1) / 2)
    }
  },
  methods: {
    getBookColor: function(article, idx) {
      if (article && article.relatedDimensions) {
        var dims = article.relatedDimensions.split(',')
        var firstDim = (dims[0] || '').trim().toLowerCase()
        if (DIMENSION_COLORS[firstDim]) {
          return DIMENSION_COLORS[firstDim].bg
        }
      }
      if (article && article.dimensionCode && DIMENSION_COLORS[article.dimensionCode]) {
        return DIMENSION_COLORS[article.dimensionCode].bg
      }
      return FALLBACK_GRADIENTS[idx % FALLBACK_GRADIENTS.length].bg
    },
    getTextColor: function(article, idx) {
      if (article && article.relatedDimensions) {
        var dims = article.relatedDimensions.split(',')
        var firstDim = (dims[0] || '').trim().toLowerCase()
        if (DIMENSION_COLORS[firstDim]) {
          return DIMENSION_COLORS[firstDim].text
        }
      }
      if (article && article.dimensionCode && DIMENSION_COLORS[article.dimensionCode]) {
        return DIMENSION_COLORS[article.dimensionCode].text
      }
      return FALLBACK_GRADIENTS[idx % FALLBACK_GRADIENTS.length].text
    },
    getCategoryLabel: function(article) {
      if (!article) return '推荐'
      if (article.categoryName) return article.categoryName
      if (article.category) return article.category
      return '推荐'
    },
    getBookHeight: function(idx) {
      // 书高度错落有致，营造书架感
      var heights = [220, 200, 240, 210, 230, 195, 225, 205, 235, 215, 228, 198]
      return heights[idx % heights.length]
    },
    openSpread: function(idx) {
      this.spreadIndex = Math.floor(idx / 2)
      this.spreadActive = true
    },
    closeSpread: function() {
      this.spreadActive = false
    },
    prevSpreadPair: function() {
      if (this.spreadIndex > 0) {
        this.spreadIndex--
      } else {
        this.spreadIndex = this.maxSpreadIndex
      }
    },
    nextSpreadPair: function() {
      if (this.spreadIndex < this.maxSpreadIndex) {
        this.spreadIndex++
      } else {
        this.spreadIndex = 0
      }
    },
    isActiveDot: function(dotIndex) {
      var currentDot = Math.floor(this.spreadIndex / 1) + 1
      return dotIndex === Math.min(currentDot, Math.ceil(this.displayArticles.length / 4))
    }
  }
}
</script>

<style scoped>
/* ======================================
   ArticleBookshelf — 书册风格推荐阅读组件
   浠艾福 (Care Family) 设计系统
   ====================================== */

/* ---- Section Container ---- */
.bs-section {
  margin: 24rpx 0;
  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;
  display: flex;
  justify-content: center;
}
.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 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12rpx;
  padding-top: 16rpx;
}
.bs-skeleton-book {
  width: 56rpx;
  border-radius: 4rpx 4rpx 0 0;
  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;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.bs-book-spacer {
  width: 28rpx;
  flex-shrink: 0;
}

/* ---- Single Book ---- */
.bs-book-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-shrink: 0;
  margin-right: 10rpx;
  position: relative;
}
.bs-book-spine {
  width: 72rpx;
  border-radius: 6rpx 6rpx 2rpx 2rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow:
    4rpx 0 8rpx rgba(0,0,0,0.15),
    -2rpx 0 4rpx rgba(0,0,0,0.08),
    0 4rpx 12rpx rgba(0,0,0,0.1);
  transition: transform 0.18s, box-shadow 0.18s;
}
.bs-book-wrap:active .bs-book-spine {
  transform: translateY(-6rpx) rotate(-2deg);
  box-shadow:
    6rpx 0 12rpx rgba(0,0,0,0.2),
    -3rpx 0 6rpx rgba(0,0,0,0.1),
    0 8rpx 20rpx rgba(0,0,0,0.15);
}

/* 书脊顶部金色装饰条 */
.bs-book-top-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8rpx;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
}

/* 书页纹理（上） */
.bs-book-pages-top {
  width: 100%;
  height: 12rpx;
  margin-top: 6rpx;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.15) 0px,
    rgba(255,255,255,0.15) 2rpx,
    transparent 2rpx,
    transparent 6rpx
  );
  flex-shrink: 0;
}

/* 书脊标题（竖排） */
.bs-book-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 6rpx;
  overflow: hidden;
}
.bs-book-title {
  font-size: 22rpx;
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 3rpx;
  line-height: 1.4;
  max-height: 160rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: horizontal;
  white-space: nowrap;
}

/* 书脊底部分类 */
.bs-book-bottom {
  width: 100%;
  padding: 6rpx 4rpx 10rpx;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.bs-book-category {
  font-size: 16rpx;
  font-weight: 600;
  padding: 2rpx 4rpx;
  border-radius: 3rpx;
  writing-mode: horizontal-tb;
  letter-spacing: 0;
  max-width: 64rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
}

/* 书页纹理（下） */
.bs-book-pages-bottom {
  width: 100%;
  height: 10rpx;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.12) 0px,
    rgba(255,255,255,0.12) 1rpx,
    transparent 1rpx,
    transparent 4rpx
  );
  flex-shrink: 0;
}

/* 右侧书页切边（3D效果） */
.bs-book-edge {
  position: absolute;
  top: 8rpx;
  bottom: 8rpx;
  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 3rpx 3rpx 0;
}

/* 书脊投影 */
.bs-book-shadow {
  width: 8rpx;
  height: 16rpx;
  margin-left: -2rpx;
  margin-bottom: 2rpx;
  border-radius: 0 0 4rpx 4rpx;
  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;
}

/* ========================================
   Magazine Spread Overlay
   ======================================== */
.bs-spread-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.22s ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bs-spread {
  width: 90vw;
  height: 85vh;
  background: #FDFAF6;
  border-radius: 24rpx;
  position: relative;
  box-shadow: 0 20rpx 60rpx rgba(0,0,0,0.3);
  overflow: hidden;
  animation: slide-up 0.25s ease-out;
}
@keyframes slide-up {
  from { transform: translateY(40rpx); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 关闭按钮 */
.bs-spread-close {
  position: absolute;
  top: 20rpx;
  right: 24rpx;
  width: 56rpx;
  height: 56rpx;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s;
}
.bs-spread-close:active {
  background: rgba(0,0,0,0.3);
}
.bs-spread-close-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

/* 杂志页眉 */
.bs-spread-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 32rpx 48rpx 20rpx;
  gap: 16rpx;
}
.bs-spread-header-line {
  flex: 1;
  height: 2rpx;
  background: #C4A882;
}
.bs-spread-header-title {
  font-size: 26rpx;
  color: #8B7355;
  font-family: 'Georgia', serif;
  font-weight: 600;
  white-space: nowrap;
}

/* 双页布局 */
.bs-spread-pages {
  display: flex;
  flex-direction: row;
  height: calc(100% - 140rpx);
  padding: 0 32rpx 24rpx;
  gap: 0;
}
.bs-spread-spine {
  width: 12rpx;
  background: linear-gradient(180deg, #C4A882 0%, #A0896A 50%, #8B7355 100%);
  flex-shrink: 0;
  box-shadow: 2rpx 0 8rpx rgba(0,0,0,0.2);
  border-radius: 2rpx;
}

.bs-spread-page {
  flex: 1;
  background: #FFFFFF;
  border-radius: 12rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  transition: transform 0.15s;
}
.bs-spread-page-left {
  border-radius: 12rpx 0 0 12rpx;
}
.bs-spread-page-right {
  border-radius: 0 12rpx 12rpx 0;
}
.bs-spread-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-spread-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bs-spread-empty-icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
  opacity: 0.3;
}
.bs-spread-empty-text {
  font-size: 28rpx;
  color: #C4A882;
  font-family: 'Georgia', serif;
}
.bs-spread-empty-text2 {
  font-size: 22rpx;
  color: #D1D5DB;
  margin-top: 8rpx;
}

.bs-spread-page-cover {
  width: 100%;
  height: 220rpx;
  position: relative;
  overflow: hidden;
}
.bs-spread-cover-img {
  width: 100%;
  height: 100%;
}
.bs-spread-cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60rpx;
  opacity: 0.5;
}

.bs-spread-page-body {
  flex: 1;
  padding: 24rpx 28rpx;
  display: flex;
  flex-direction: column;
}
.bs-spread-page-category {
  font-size: 20rpx;
  font-weight: 700;
  margin-bottom: 10rpx;
  letter-spacing: 1rpx;
}
.bs-spread-page-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.45;
  margin-bottom: 12rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.bs-spread-page-summary {
  font-size: 22rpx;
  color: #6B7280;
  line-height: 1.6;
  flex: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.bs-spread-page-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
  padding-top: 12rpx;
  border-top: 1rpx solid #F3F4F6;
}
.bs-spread-page-author {
  font-size: 20rpx;
  color: #9CA3AF;
}
.bs-spread-page-date {
  font-size: 20rpx;
  color: #9CA3AF;
}

/* 翻页提示 */
.bs-spread-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rpx 24rpx;
}
.bs-spread-hint-text {
  font-size: 22rpx;
  color: #9CA3AF;
}
</style>