首页背景图修改

src/views/index-copy.vue

@@ -8,40 +8,42 @@
       </el-carousel>
       </el-carousel>
     </div>
     </div>
     <div class="new-model">
     <div class="new-model">
-      <div class="model-box" v-for="(i,index) in list" :key="i">
-        <div class="new-block">
-          <img v-if="index=== 0" class="resourceLogo" src="@/assets/images/indexImg/resource0-1.png" alt="">
-          <img v-if="index=== 1" class="resourceLogo" src="@/assets/images/indexImg/resource0-2.png" alt="">
-          <img v-if="index=== 2" class="resourceLogo" src="@/assets/images/indexImg/resource0-3.png" alt="">
-          <div class="new-block-details">
-            <div class="details-introduce">
-              <span>{{ i.title }}</span>
-              <span>{{ i.titleEH }}</span>
+      <div style="padding-top: 32px;">
+        <div class="model-box" v-for="(i,index) in list" :key="i">
+          <div class="new-block">
+            <img v-if="index=== 0" class="resourceLogo" src="@/assets/images/indexImg/resource0-1.png" alt="">
+            <img v-if="index=== 1" class="resourceLogo" src="@/assets/images/indexImg/resource0-2.png" alt="">
+            <img v-if="index=== 2" class="resourceLogo" src="@/assets/images/indexImg/resource0-3.png" alt="">
+            <div class="new-block-details">
+              <div class="details-introduce">
+                <span>{{ i.title }}</span>
+                <span>{{ i.titleEH }}</span>
+              </div>
+              <div class="present">{{ i.present }}</div>
             </div>
             </div>
-            <div class="present">{{ i.present }}</div>
           </div>
           </div>
-        </div>
-        <div v-if="index === 2" class="view-more-text"
-             @click="$router.push('/partnership/partnershipList')">
-          查看更多
-        </div>
-        <div class="particulars" v-if="index !== 2">
-          <el-row :gutter="24">
-            <el-col class="resource-col" :span="8" v-for="x in i.assemblyData" :key="i"
-                    @click="i.id === 1? $router.push(x.router):openAssembly(x)"
-            >
-              <div class="resource-box">
-                <div class="title">{{ x.title }}</div>
-                <div class="introduce">{{ x.description }}</div>
-              </div>
-            </el-col>
-          </el-row>
-          <div v-if="index === 1" class="view-more-text" style="margin-top: 40px;"
-               @click="$router.push('/componentServices/componentServicesList')">
+          <div v-if="index === 2" class="view-more-text"
+               @click="$router.push('/partnership/partnershipList')">
             查看更多
             查看更多
           </div>
           </div>
+          <div class="particulars" v-if="index !== 2">
+            <el-row :gutter="24">
+              <el-col class="resource-col" :span="8" v-for="x in i.assemblyData" :key="i"
+                      @click="i.id === 1? $router.push(x.router):openAssembly(x)"
+              >
+                <div class="resource-box">
+                  <div class="title">{{ x.title }}</div>
+                  <div class="introduce">{{ x.description }}</div>
+                </div>
+              </el-col>
+            </el-row>
+            <div v-if="index === 1" class="view-more-text" style="margin-top: 40px;"
+                 @click="$router.push('/componentServices/componentServicesList')">
+              查看更多
+            </div>
+          </div>
+          <img class="light" src="@/assets/images/indexImg/glow.png" alt=""/>
         </div>
         </div>
-        <img class="light" src="@/assets/images/indexImg/glow.png" alt=""/>
       </div>
       </div>
     </div>
     </div>
 
 
@@ -252,10 +254,13 @@ function handleCarousel(url) {
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 .new-model {
 .new-model {
-  background: url("@/assets/images/indexImg/bg-1.png") no-repeat center center / 100%;
+  background-image: url("@/assets/images/indexImg/bg-1.png");
+  background-size: cover; /* 背景图片覆盖整个元素区域 */
+  background-position: center; /* 背景图片居中 */
+  background-repeat: no-repeat; /* 背景图片不重复 */
   //background-color: rgba(153, 155, 163);
   //background-color: rgba(153, 155, 163);
   padding-bottom: 90px;
   padding-bottom: 90px;
-  margin-bottom: -2px;
+  margin-bottom: 0;
 }
 }
 
 
 .view-more-text {
 .view-more-text {
@@ -279,6 +284,7 @@ function handleCarousel(url) {
 
 
   .new-block-details {
   .new-block-details {
     z-index: 2 !important;
     z-index: 2 !important;
+    padding-top: 32px;
   }
   }
 
 
   .resourceLogo {
   .resourceLogo {
@@ -352,7 +358,7 @@ function handleCarousel(url) {
   .title {
   .title {
     font-family: Microsoft YaHei;
     font-family: Microsoft YaHei;
     font-weight: 400;
     font-weight: 400;
-    font-size: 32px;
+    font-size: 27px;
     color: #F0A227;
     color: #F0A227;
     padding-bottom: 22px;
     padding-bottom: 22px;
     z-index: 2 !important;
     z-index: 2 !important;
@@ -411,8 +417,11 @@ function handleCarousel(url) {
 
 
 .block {
 .block {
   //width: 1280px;
   //width: 1280px;
-  background: url("@/assets/images/indexImg/bg-1.png") no-repeat center center / 100%;
+  background-image: url("@/assets/images/indexImg/bg-1.png");
   //width: calc(100% - 214px);
   //width: calc(100% - 214px);
+  background-size: cover; /* 背景图片覆盖整个元素区域 */
+  background-position: center; /* 背景图片居中 */
+  background-repeat: no-repeat; /* 背景图片不重复 */
   margin: 0 auto;
   margin: 0 auto;
   z-index: 4 !important;
   z-index: 4 !important;
 }
 }