فهرست منبع

fix: ArticleBookshelf 书籍横向排列 — scroll-view 内包 inline-flex 容器

scroll-view 自身设 display:flex 时 white-space:nowrap 失效,子元素按 inline 流换行。
改为 scroll-view 保持默认 block,内部 .bs-books-inner 用 inline-flex 横向排列
Xiaogang Liao 1 ماه پیش
والد
کامیت
9d53b42231
1فایلهای تغییر یافته به همراه51 افزوده شده و 46 حذف شده
  1. 51 46
      cfc-frontend/components/ArticleBookshelf.vue

+ 51 - 46
cfc-frontend/components/ArticleBookshelf.vue

@@ -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;
 }