|
|
@@ -41,60 +41,62 @@
|
|
|
: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-cover"
|
|
|
- :style="{
|
|
|
- background: getBookColor(article, idx)
|
|
|
- }"
|
|
|
+ v-for="(article, idx) in displayArticles"
|
|
|
+ :key="idx"
|
|
|
+ class="bs-book-wrap"
|
|
|
+ @click="openSpread(idx)"
|
|
|
>
|
|
|
- <!-- 封面图 -->
|
|
|
- <image
|
|
|
- v-if="article.coverImage"
|
|
|
- class="bs-cover-img"
|
|
|
- :src="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
|
|
|
+ class="bs-book-cover"
|
|
|
+ :style="{
|
|
|
+ background: getBookColor(article, idx)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- 封面图 -->
|
|
|
+ <image
|
|
|
+ v-if="article.coverImage"
|
|
|
+ class="bs-cover-img"
|
|
|
+ :src="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 class="bs-cover-bottom">
|
|
|
- <text
|
|
|
- class="bs-cover-category"
|
|
|
- :style="{
|
|
|
- background: getTextColor(article, idx),
|
|
|
- color: getBookColor(article, idx)
|
|
|
- }"
|
|
|
- >{{ getCategoryLabel(article) }}</text>
|
|
|
+ <!-- 底部分类标签 -->
|
|
|
+ <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>
|
|
|
|
|
|
- <!-- 右侧书页切边(3D效果) -->
|
|
|
- <view class="bs-cover-edge"></view>
|
|
|
+ <!-- 封面底部阴影(书架效果) -->
|
|
|
+ <view class="bs-book-shadow"></view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 封面底部阴影(书架效果) -->
|
|
|
- <view class="bs-book-shadow"></view>
|
|
|
+ <!-- 右内边距结尾 -->
|
|
|
+ <view class="bs-book-spacer"></view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 右内边距结尾 -->
|
|
|
- <view class="bs-book-spacer"></view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 书架底板装饰 -->
|
|
|
@@ -494,7 +496,10 @@ 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-start;
|
|
|
}
|