提交一下

1

src/components/headerSection.vue

@@ -156,6 +156,7 @@ export default {
   width: 100%;
   top: 0px;
   z-index: 1000;
+  // backdrop-filter: saturate(180%) blur(20px);
   .header-container {
     margin: 0 auto;
     // overflow: hidden;

src/views/index/blocks/banner.vue

@@ -1,13 +1,18 @@
 <template>
   <header class="banner">
     <img src="../images/banner.png" width="100%" alt="" />
-    <div class="width1200 bannerWrap">
-      <img class="font" src="../images/font.png" width="100%" alt="" />
+    <div class="bannerWrap">
+      <div class="font">
+        <img src="../images/font.png" width="100%" alt="" />
+      </div>
+      <div class="animateList">
+        <div class="imgWrap">
+          <img src="../images/1.png" width="100%" alt="" />
+          <!-- <img src="../images/2.png" width="100%" alt="" />
+        <img src="../images/3.png" width="100%" alt="" /> -->
+        </div>
+      </div>
     </div>
-
-    <img src="../images/banner.png" width="100%" alt="" />
-    <img src="../images/banner.png" width="100%" alt="" />
-    <img src="../images/banner.png" width="100%" alt="" />
   </header>
 </template>
 <style lang="less" scoped>
@@ -24,7 +29,10 @@
   // background-color: #2a2c41;
   // background-size: 100% 100%;
   // height: 763px;
+  max-height: 588px;
   .bannerWrap {
+    width: 1180px;
+    top: 0;
     position: absolute;
     left: 50%;
     margin-left: -590px;
@@ -33,6 +41,18 @@
     justify-content: space-between;
     .font {
       width: 35%;
+      margin-top: 44%;
+    }
+    .animateList {
+      width: 40%;
+      position: relative;
+      .imgWrap {
+        position: absolute;
+        img {
+          top: 0;
+          width: 100%;
+        }
+      }
     }
   }