🎨 修改细节问题

src/pages/discover.vue

@@ -85,7 +85,11 @@
               <image 
                 class="width-300 height-200 radius-base"
                 :src="item.image"
-                mode="aspectFill"
+                :style="{
+                  backgroundImage: `url('${item.image}')`,
+                  backgroundSize: 'cover',
+                }"
+                mode="aspectFit"
               />
             </view>
           </view>

src/pages/home.vue

@@ -132,7 +132,11 @@
             <image
               class="w-100 height-250 radius-base"
               :src="tab.thumbnail || tab.image || AppCofig.defaultImage"
-              mode="aspectFill"
+              :style="{
+                backgroundImage: `url('${tab.thumbnail || tab.image}')`,
+                backgroundSize: 'cover',
+              }"
+              mode="aspectFit"
             />
           </view>
         </view>

src/pages/inhert.vue

@@ -135,7 +135,10 @@
             v-for="s in mingnanSongsData.content.value" 
             :key="s.id"
             :title="s.title" 
-            class="w-100 mt-3" 
+            :showPrev="false"
+            :showNext="false"
+            innerClass="w-100 mt-3" 
+            @playPauseClick="goMingnanSongsDetail(s.id)"
             @click="goMingnanSongsDetail(s.id)"
           />
         </SimplePageContentLoader>

src/pages/parts/Box1AudioPlay.vue

@@ -1,6 +1,6 @@
 <template>
     <view 
-      class="position-relative d-flex w-100 flex-row align-center bg-light-light-primary radius-base p-25"
+      :class="'position-relative d-flex w-100 flex-row align-center bg-light-light-primary radius-base p-25 '+ innerClass"
     >
     <image 
       class="width-150 height-150 radius-base" 
@@ -85,6 +85,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  innerClass: {
+    type: String,
+    default: '',
+  },
 })
 
 </script>

src/pages/parts/Box2LineImageRightShadow.vue

@@ -15,10 +15,14 @@
           wideImage ? 'width-250' : 'width-150', 
           'height-150', 
           'radius-base',
-          'flex-shrink-0'
+          'flex-shrink-0',
         ]"
         :src="image"
-        mode="aspectFill"
+        :style="{
+          backgroundImage: `url('${image}')`,
+          backgroundSize: 'cover',
+        }"
+        mode="aspectFit"
       />
       <view class="d-flex flex-col ml-3 flex-one width-500">
         <view class="d-flex flex-row">

src/pages/parts/Box2LineLargeImageUserShadow.vue

@@ -18,7 +18,11 @@
       v-if="image" 
       class="w-100 height-300 radius-base" 
       :src="image" 
-      mode="aspectFill" 
+      :style="{
+        backgroundImage: `url('${image}')`,
+        backgroundSize: 'cover',
+      }"
+      mode="aspectFit" 
     />
     <image 
       v-if="videoMark" 

src/pages/parts/ImageGrid.vue

@@ -1,17 +1,26 @@
 <template>
   <view class="w-100 d-flex flex-row flex-wrap" :style="{ gap: `${gap}rpx` }">
-    <image 
+    <view 
       v-for="(v, k) in images"
       :key="k"
-      :src="imagekey ? v[imagekey] : v" 
       :style="{ 
         width: `calc(${100 / rowCount}% - ${gap}rpx)`,
         height: imageHeight,
         borderRadius: '10rpx',
+        backgroundImage: `url('${imagekey ? v[imagekey] : v}')`,
+        backgroundSize: 'cover',
       }"
-      mode="aspectFill"
-      @click="itemClick(v, k)"
-    />
+    >
+      <image 
+        :src="imagekey ? v[imagekey] : v" 
+        :style="{ 
+          width: `100%`,
+          height: `100%`,
+        }"
+        mode="aspectFit"
+        @click="itemClick(v, k)"
+      />
+    </view>
   </view>
 </template>