🎨 优化图片显示细节

src/assets/scss/main.scss

@@ -420,7 +420,7 @@ $small-banner-height: 445px;
   }
   .main-card-box {
     width: auto;
-    transform: translateX(20px);
+    //transform: translateX(20px);
   }
 }
 @media (max-width: 500px) {

src/assets/scss/news.scss

@@ -21,7 +21,7 @@
       column-gap: 0;
     }
     .item {
-      img {
+      img, .ImageTitleBlock {
         width: 200px;
         height: 130px;
         margin-right: 25px;
@@ -74,20 +74,20 @@
         margin-top: 10px;
       }
 
-      img {
+      img, .ImageTitleBlock {
         width: 100%;
         height: 300px;
         margin-right: 0;
       }
     }
     &.row-type3 {
-      img {
+      img, .ImageTitleBlock {
         width: 270px;
         height: 180px;
       }
     }
       &.row-type4 {
-        img {
+        img, .ImageTitleBlock {
           object-fit: contain;
           width: 270px;
           height: 150px;
@@ -138,14 +138,13 @@
     }
 
 
-    img {
+    img, .ImageTitleBlock {
       flex-shrink: 0;
       width: 320px;
       height: 180px;
       margin-right: 25px;
       border-radius: 5px;
       object-fit: cover;
-      background-color: $border-split-color;
     }
 
    
@@ -163,26 +162,26 @@
       background-color: $box-color;
 
       &.row-type2 {
-        img {
+        img, .ImageTitleBlock {
           width: 100%;
           height: 250px;
           margin-right: 0;
         }
       }
       &.row-type3 {
-        img {
+        img, .ImageTitleBlock {
           width: 170px;
           height: 90px;
         }
       }
       &.row-type4 {
-        img {
+        img, .ImageTitleBlock {
           width: 180px;
           height: 110px;
         }
       }
 
-      img {
+      img, .ImageTitleBlock {
         width: 200px;
         height: 140px;
         margin-right: 25px;
@@ -191,7 +190,7 @@
 
     &.grid {
       .item {
-        img {
+        img, .ImageTitleBlock {
           width: 120px;
           height: 90px;
           margin-right: 15px;
@@ -205,7 +204,7 @@
     .item {
       flex-direction: column;
 
-      img {
+      img, .ImageTitleBlock {
         width: 100%;
         height: 180px;
         

src/components/content/CommonListBlock.vue

@@ -85,8 +85,8 @@
             @click="handleShowDetail(item)"
           >
             <a class="d-none" :href="router.resolve({ path: props.detailsPage, query: { id: item.id }}).href" />
-            <img
-              :src="item.image || defaultImage" alt="新闻图片" 
+            <ImageTitleBlock 
+              :image="item.image || defaultImage"
             />
             <TitleDescBlock
               :title="item.title"

src/components/parts/ImageTitleBlock.vue

@@ -8,6 +8,12 @@
     :style="{ backgroundImage: `url('${image || (title ? ImageFailed : '')}')` }"
     @click="$emit('click')"
   >
+    <img 
+      v-if="image"
+      :src="image"
+      alt=""
+      class="image"
+    >
     <div class="desc">
       <h5>{{ title }}</h5>
       <p>{{ desc }}</p>
@@ -52,6 +58,16 @@ defineEmits([
   height: 270px;
   margin-right: 24px;
 
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain !important;
+    z-index: 1;
+  }
+
   &.fit {
     width: 100%;
     margin-right: 0;
@@ -65,6 +81,7 @@ defineEmits([
       left: 0;
       bottom: 0;
       height: 120px;
+      z-index: 20;
       background: linear-gradient(
         180deg,
         rgba(#000, 0) 0%,
@@ -82,6 +99,7 @@ defineEmits([
     flex-direction: column;
     padding: 24px;
     color: #fff;
+    z-index: 20;
 
     h5 {
       font-family: SourceHanSerifCNBold;

src/pages/about/index.vue

@@ -88,7 +88,9 @@
             class="item"
             :to="{ path: 'news/detail', query: { id: item.id }}"
           >
-            <img :src="item.image" alt="新闻图片" />
+            <ImageTitleBlock 
+              :image="item.image"
+            />
             <TitleDescBlock
               :title="item.title"
               :desc="item.desc || item.title"

src/pages/index.vue

@@ -425,10 +425,16 @@ const recordData = await useSSrSimpleDataLoader('record', async () => {
 }
 
 .main-grid9 {
+  gap: 10px;
+
+  a {
+    display: flex;
+    max-width: 100%;
+    flex: 1 1 31%;
+  }
   .ImageTitleBlock {
-    flex-basis: 33%;
+    flex-basis: 100%;
     margin-right: 0;
-    margin-bottom: 10px;
   }
 }
 
@@ -545,6 +551,18 @@ const recordData = await useSSrSimpleDataLoader('record', async () => {
       flex-basis: 100%;
     }
   }
+  .main-introd-bg {
+    .a {
+      display: none;
+    }
+    .b {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: -2;
+    }
+  }
   .main-time-line {
     .item {
       width: 100%;

src/pages/news/index.vue

@@ -66,7 +66,9 @@
             class="item"
             :to="{ path: '/news/detail', query: { id: item.id }}"
           >
-            <img :src="item.image" alt="新闻图片" />
+            <ImageTitleBlock 
+              :image="item.image"
+            />
             <TitleDescBlock
               :title="item.title"
               :desc="item.desc || item.title"