问题调整

src/assets/styles/variable.scss

@@ -10,4 +10,6 @@ $font-size-sm:14px;
 $font-size-base:16px;
 $font-size-lg:22px;
 
+$nav-height: 120px;
+
 $defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;

src/components/Footer/index.vue

@@ -175,6 +175,7 @@ export default {
   flex-direction: column;
   color: #fefefe;
   font-size: 14px;
+  position: relative;
   .logo {
     width: 60px;
     height: 60px;

src/components/ListBanner/index.vue

@@ -73,7 +73,7 @@ export default {
   // background-position: 0 -100px;
   > img {
     position: absolute;
-    top: -100px;
+    top: -$nav-height;
     left: 0;
     width: 100%;
     height: calc(100vh);

src/views/culturalRelic/Detail.vue

 <template>
   <div class="content">
     <div class="bg">
-      <img src="@/assets/imgs/show/bg.png" alt="" class="main" />
+      <div class="main">
+        <img src="@/assets/imgs/show/bg.png" alt="" class="main" />
+      </div>
       <!-- <div class="mask"></div> -->
       <div class="color">
         <img src="@/assets/imgs/show/circle-bg.png" alt="" class="cb" />
@@ -605,11 +607,23 @@ $node-w: 700px;
     z-index: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
 
     > img {
       width: 100%;
     }
+    > .main {
+      width: 100%;
+      min-height: 100vh;
+      height: calc(100% + $nav-height);
+      position: absolute;
+      top: -$nav-height;
+      left: 0;
+      overflow: hidden;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
     > .color {
       position: absolute;
       left: 0;

src/views/home/components/banner.vue

@@ -12,7 +12,7 @@
     width: 100%;
     height: 100vh;
     position: absolute;
-    top: -100px;
+    top: -$nav-height;
     left: 0;
     > img {
       width: 100%;