|
|
@@ -23,7 +23,7 @@
|
|
|
<!-- 骨架屏 -->
|
|
|
<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 v-for="n in 3" :key="n" class="bs-skeleton-book"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -32,76 +32,71 @@
|
|
|
<!-- 书架装饰线 -->
|
|
|
<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 class="bs-book-spacer"></view>
|
|
|
+ <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="openSpread(idx)"
|
|
|
- >
|
|
|
- <!-- 书脊主体 -->
|
|
|
+ <!-- 书籍列表 -->
|
|
|
<view
|
|
|
- class="bs-book-spine"
|
|
|
- :style="{
|
|
|
- background: getBookColor(article, idx),
|
|
|
- height: getBookHeight(idx) + 'rpx'
|
|
|
- }"
|
|
|
+ v-for="(article, idx) in displayArticles"
|
|
|
+ :key="idx"
|
|
|
+ class="bs-book-wrap"
|
|
|
+ @click="$emit('articleClick', article)"
|
|
|
>
|
|
|
- <!-- 书脊顶部装饰条 -->
|
|
|
- <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-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-bottom">
|
|
|
- <text
|
|
|
- class="bs-book-category"
|
|
|
- :style="{
|
|
|
- background: getTextColor(article, idx),
|
|
|
- color: getBookColor(article, idx)
|
|
|
- }"
|
|
|
- >{{ getCategoryLabel(article) }}</text>
|
|
|
- </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-pages-bottom"></view>
|
|
|
+ <!-- 底部分类标签 -->
|
|
|
+ <view class="bs-cover-bottom">
|
|
|
+ <text
|
|
|
+ class="bs-cover-category"
|
|
|
+ :style="{
|
|
|
+ background: getTextColor(article, idx),
|
|
|
+ color: getBookColor(article, idx)
|
|
|
+ }"
|
|
|
+ >{{ getCategoryLabel(article) }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 右侧书页切边(3D效果) -->
|
|
|
+ <view class="bs-cover-edge"></view>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 右侧书页切边 -->
|
|
|
- <view class="bs-book-edge"></view>
|
|
|
+ <!-- 封面底部阴影(书架效果) -->
|
|
|
+ <view class="bs-book-shadow"></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 class="bs-book-spacer"></view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 右内边距结尾 -->
|
|
|
- <view class="bs-book-spacer"></view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 书架底板装饰 -->
|
|
|
@@ -112,136 +107,22 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 翻页指示器 -->
|
|
|
- <view class="bs-page-dots" v-if="displayArticles.length > 4">
|
|
|
+ <view class="bs-page-dots" v-if="displayArticles.length > 3">
|
|
|
<view
|
|
|
- v-for="n in Math.min(5, Math.ceil(displayArticles.length / 4))"
|
|
|
+ v-for="n in dotCount"
|
|
|
: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">✕</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 杂志页眉 -->
|
|
|
- <view class="bs-spread-header">
|
|
|
- <view class="bs-spread-header-line"></view>
|
|
|
- <text class="bs-spread-header-title">📚 阅读精选</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">📖</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">◀ 上一页</text>
|
|
|
- <text class="bs-spread-hint-text" @click="nextSpreadPair">下一页 ▶</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// 五维配色体系(书脊颜色)
|
|
|
+import config from '@/config.js'
|
|
|
+
|
|
|
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' },
|
|
|
@@ -268,12 +149,15 @@ export default {
|
|
|
},
|
|
|
data: function() {
|
|
|
return {
|
|
|
- spreadActive: false,
|
|
|
- spreadIndex: 0,
|
|
|
- scrollLeft: 0
|
|
|
+ scrollLeft: 0,
|
|
|
+ activeDot: 1
|
|
|
}
|
|
|
},
|
|
|
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 [
|
|
|
@@ -285,16 +169,6 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
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: {
|
|
|
@@ -324,41 +198,25 @@ export default {
|
|
|
}
|
|
|
return FALLBACK_GRADIENTS[idx % FALLBACK_GRADIENTS.length].text
|
|
|
},
|
|
|
+ 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 '推荐'
|
|
|
},
|
|
|
- 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
|
|
|
- }
|
|
|
+ // 滚动时计算当前指示器位置(每 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) {
|
|
|
- var currentDot = Math.floor(this.spreadIndex / 1) + 1
|
|
|
- return dotIndex === Math.min(currentDot, Math.ceil(this.displayArticles.length / 4))
|
|
|
+ return dotIndex === this.activeDot
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -451,13 +309,14 @@ export default {
|
|
|
.bs-skeleton-shelf {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- align-items: flex-end;
|
|
|
- gap: 12rpx;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 24rpx;
|
|
|
padding-top: 16rpx;
|
|
|
}
|
|
|
.bs-skeleton-book {
|
|
|
- width: 56rpx;
|
|
|
- border-radius: 4rpx 4rpx 0 0;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 280rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 50%, #e8e8e8 100%);
|
|
|
background-size: 200% 100%;
|
|
|
animation: skeleton-wave 1.4s ease-in-out infinite;
|
|
|
@@ -493,112 +352,97 @@ export default {
|
|
|
.bs-books-scroll {
|
|
|
white-space: nowrap;
|
|
|
padding: 20rpx 0 0;
|
|
|
- display: flex;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.bs-books-inner {
|
|
|
+ display: inline-flex;
|
|
|
flex-direction: row;
|
|
|
- align-items: flex-end;
|
|
|
+ align-items: flex-start;
|
|
|
}
|
|
|
.bs-book-spacer {
|
|
|
width: 28rpx;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-/* ---- Single Book ---- */
|
|
|
+/* ---- Single Book (竖版封面) ---- */
|
|
|
.bs-book-wrap {
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: flex-end;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
flex-shrink: 0;
|
|
|
- margin-right: 10rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
-.bs-book-spine {
|
|
|
- width: 72rpx;
|
|
|
- border-radius: 6rpx 6rpx 2rpx 2rpx;
|
|
|
+.bs-book-cover {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 280rpx;
|
|
|
+ border-radius: 8rpx 8rpx 4rpx 4rpx;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ justify-content: center;
|
|
|
overflow: hidden;
|
|
|
box-shadow:
|
|
|
- 4rpx 0 8rpx rgba(0,0,0,0.15),
|
|
|
+ 4rpx 0 10rpx rgba(0,0,0,0.18),
|
|
|
-2rpx 0 4rpx rgba(0,0,0,0.08),
|
|
|
- 0 4rpx 12rpx rgba(0,0,0,0.1);
|
|
|
+ 0 6rpx 14rpx rgba(0,0,0,0.12);
|
|
|
transition: transform 0.18s, box-shadow 0.18s;
|
|
|
}
|
|
|
-.bs-book-wrap:active .bs-book-spine {
|
|
|
- transform: translateY(-6rpx) rotate(-2deg);
|
|
|
+.bs-book-wrap:active .bs-book-cover {
|
|
|
+ transform: translateY(-6rpx) scale(1.02);
|
|
|
box-shadow:
|
|
|
- 6rpx 0 12rpx rgba(0,0,0,0.2),
|
|
|
+ 6rpx 0 14rpx rgba(0,0,0,0.25),
|
|
|
-3rpx 0 6rpx rgba(0,0,0,0.1),
|
|
|
- 0 8rpx 20rpx rgba(0,0,0,0.15);
|
|
|
+ 0 10rpx 22rpx rgba(0,0,0,0.18);
|
|
|
}
|
|
|
|
|
|
-/* 书脊顶部金色装饰条 */
|
|
|
-.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 {
|
|
|
+/* 封面图 */
|
|
|
+.bs-cover-img {
|
|
|
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;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
-/* 书脊标题(竖排) */
|
|
|
-.bs-book-title-wrap {
|
|
|
- flex: 1;
|
|
|
+/* 无封面图时:渐变底 + 书名 */
|
|
|
+.bs-cover-text {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- padding: 8rpx 6rpx;
|
|
|
- overflow: hidden;
|
|
|
+ padding: 20rpx 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
-.bs-book-title {
|
|
|
- font-size: 22rpx;
|
|
|
+.bs-cover-title {
|
|
|
+ font-size: 24rpx;
|
|
|
font-weight: 700;
|
|
|
- writing-mode: vertical-rl;
|
|
|
- text-orientation: mixed;
|
|
|
- letter-spacing: 3rpx;
|
|
|
- line-height: 1.4;
|
|
|
- max-height: 160rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ letter-spacing: 1rpx;
|
|
|
+ text-align: center;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- -webkit-box-orient: horizontal;
|
|
|
- white-space: nowrap;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
-/* 书脊底部分类 */
|
|
|
-.bs-book-bottom {
|
|
|
- width: 100%;
|
|
|
- padding: 6rpx 4rpx 10rpx;
|
|
|
+/* 底部分类标签 */
|
|
|
+.bs-cover-bottom {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- flex-shrink: 0;
|
|
|
+ padding: 10rpx 0 12rpx;
|
|
|
+ background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%);
|
|
|
}
|
|
|
-.bs-book-category {
|
|
|
+.bs-cover-category {
|
|
|
font-size: 16rpx;
|
|
|
font-weight: 600;
|
|
|
- padding: 2rpx 4rpx;
|
|
|
- border-radius: 3rpx;
|
|
|
- writing-mode: horizontal-tb;
|
|
|
- letter-spacing: 0;
|
|
|
- max-width: 64rpx;
|
|
|
+ padding: 3rpx 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ max-width: 160rpx;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
@@ -606,25 +450,11 @@ export default {
|
|
|
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 {
|
|
|
+.bs-cover-edge {
|
|
|
position: absolute;
|
|
|
- top: 8rpx;
|
|
|
- bottom: 8rpx;
|
|
|
+ top: 10rpx;
|
|
|
+ bottom: 10rpx;
|
|
|
right: 0;
|
|
|
width: 6rpx;
|
|
|
background: linear-gradient(180deg,
|
|
|
@@ -632,16 +462,16 @@ export default {
|
|
|
rgba(0,0,0,0.1) 50%,
|
|
|
rgba(0,0,0,0.2) 100%
|
|
|
);
|
|
|
- border-radius: 0 3rpx 3rpx 0;
|
|
|
+ border-radius: 0 4rpx 4rpx 0;
|
|
|
}
|
|
|
|
|
|
-/* 书脊投影 */
|
|
|
+/* 封面底部投影(书架效果) */
|
|
|
.bs-book-shadow {
|
|
|
- width: 8rpx;
|
|
|
- height: 16rpx;
|
|
|
- margin-left: -2rpx;
|
|
|
- margin-bottom: 2rpx;
|
|
|
- border-radius: 0 0 4rpx 4rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
@@ -692,230 +522,4 @@ export default {
|
|
|
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>
|