From 3d13a89f457f5b81441d7e3d7a00f33d56b42eeb Mon Sep 17 00:00:00 2001
From: lzx_win <2602107437@qq.com>
Date: Mon, 20 Oct 2025 10:30:35 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E4=BC=98=E5=8C=96=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E9=A1=B5=E9=9D=A2=E7=9A=84UI=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整按钮样式保持一致性
- 修改标签栏宽度为视窗单位
- 恢复书籍网格信息显示并优化图片模式
- 优化推荐项图片显示和高度设置
- 调整书籍页面图片显示模式和宽度设置
---
 pages/index/home.vue                      | 13 ++++++-------
 subPages/home/book.vue                    | 14 ++++++++------
 subPages/home/components/CustomTabbar.vue |  3 ++-
 subPages/home/directory.vue               |  2 +-
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/pages/index/home.vue b/pages/index/home.vue
index 6f40f53..0c9ecf5 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -144,14 +144,14 @@
           <view class="book-grid-cover">
             <image :src="book.booksImg || '/static/default-image.png'" mode="aspectFill"></image>
           </view>
-          <!-- <view class="book-grid-info">
+          <view class="book-grid-info">
             <text class="book-grid-title">{{ book.booksName }}</text>
-            <view class="book-grid-meta">
+            <!-- <view class="book-grid-meta">
               <text class="book-grid-grade">{{ book.categoryName }}/</text>
               <image src="/static/play-icon.png" class="book-grid-duration-icon" />
               <text class="book-grid-duration">{{ book.duration }}</text>
-            </view>
-          </view> -->
+            </view> -->
+          </view>
         </view>
       </view>
     </view>
@@ -165,7 +165,7 @@
           :key="index" 
           class="recommend-item"
         >
-          <image :src="item.img" mode="aspectFill" class="recommend-image"></image>
+          <image :src="item.img" mode="widthFix" class="recommend-image"></image>
         </view>
       </view>
     </view>
@@ -897,7 +897,6 @@ export default {
   
   .recommend-item {
     width: 100%;
-    height: 200rpx;
     margin-bottom: 48rpx;
     border-radius: 32rpx;
     overflow: hidden;
@@ -908,7 +907,7 @@ export default {
     
     .recommend-image {
       width: 100%;
-      height: 100%;
+      height: 200rpx;
     }
   }
 }
diff --git a/subPages/home/book.vue b/subPages/home/book.vue
index 35d445a..7b353d8 100644
--- a/subPages/home/book.vue
+++ b/subPages/home/book.vue
@@ -42,7 +42,7 @@
                             </view>
                             <view v-for="(item, itemIndex) in page" :key="itemIndex" class="text-content">
                                 <image class="card-image" v-if="item && item.type === 'image'" :src="item.imageUrl"
-                                    mode="aspectFill"></image>
+                                    mode="widthFix"></image>
                                 <!-- <view :class="['english-text-container', 'clickable-text', { 'lead-text': isCardTextHighlighted(page, itemIndex) }]" v-else-if="item && item.type === 'text' && item.language === 'en' && item.content" @click.stop="handleTextClick(item.content, item, index)" >
                   <text 
                     v-for="(token, tokenIndex) in splitEnglishSentence(item.content)" 
@@ -1912,7 +1912,7 @@ export default {
     .content-image {
         width: 100%;
         height: auto;
-        max-width: 600rpx;
+        //max-width: 600rpx;
         /* 限制最大宽度，避免在大屏设备上过大 */
         display: block;
         border-radius: 12rpx;
@@ -1921,9 +1921,9 @@ export default {
         /* 添加阴影，增强层次感 */
 
         /* 平板设备适配 */
-        @media screen and (min-width: 768px) {
-            max-width: 500rpx;
-        }
+        // @media screen and (min-width: 768px) {
+        //     max-width: 500rpx;
+        // }
     }
 
     .video-content {
@@ -1935,6 +1935,7 @@ export default {
         .video-player {
             // height: 100%;
             width: 100%;
+            height: 60vw;
             // margin: 0 auto;
             // height: auto;
         }
@@ -1989,7 +1990,8 @@ export default {
     }
 
     .card-image {
-        width: 590rpx;
+        // width: 590rpx;
+        width: 100%;
         height: 268rpx;
         border-radius: 24rpx;
         margin: 30rpx auto;
diff --git a/subPages/home/components/CustomTabbar.vue b/subPages/home/components/CustomTabbar.vue
index 9b801e4..229b2c8 100644
--- a/subPages/home/components/CustomTabbar.vue
+++ b/subPages/home/components/CustomTabbar.vue
@@ -213,7 +213,8 @@ export default {
   align-items: center;
   gap: 8rpx;
   overflow-x: auto;
-  max-width: 400rpx;
+  // max-width: 400rpx;
+  max-width: 50vw;
   
   &::-webkit-scrollbar {
     display: none;
diff --git a/subPages/home/directory.vue b/subPages/home/directory.vue
index e0d9b82..22d8c3d 100644
--- a/subPages/home/directory.vue
+++ b/subPages/home/directory.vue
@@ -102,7 +102,7 @@
           borderRadius: '198rpx',
           background: '#06DADC',
           fontSize: '28rpx',
-          fontWeight: '600'
+          fontWeight: '600',
         }" >开始学习</uv-button>
       </view>
       <uv-safe-bottom></uv-safe-bottom>