style(ui): 优化多个页面的UI样式和布局

- 调整按钮样式保持一致性
- 修改标签栏宽度为视窗单位
- 恢复书籍网格信息显示并优化图片模式
- 优化推荐项图片显示和高度设置
- 调整书籍页面图片显示模式和宽度设置

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

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;

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;

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>