fix：api落地页滚动渐变动画

src/web/staticres/common-module/solution/css/data-interface.css

@@ -10,7 +10,7 @@
 }
 
 .content-banner {
-  position: relative;
+  /* position: relative; */
   flex-shrink: 0;
 }
 
@@ -25,9 +25,10 @@
 
 
 .data-card {
-  position: absolute;
+  /* position: absolute;
   left: 0;
-  top: -1.4rem;
+  top: -1.4rem; */
+  margin-top: -1.4rem;
   width: 100%;
 }
 
@@ -91,7 +92,7 @@
 }
 
 .interface-desc-card {
-  margin-top: 2.6rem;
+  /* margin-top: 2.6rem; */
   padding: .32rem .6rem .64rem;
   border-radius: .16rem;
   background: linear-gradient(#FFFFFF, #E3F5FF);
@@ -336,12 +337,13 @@
 
 @keyframes fadeAnimation {
   from {
-      transform: translateY(50px);
+    opacity: 0.3;
+    transform: translateY(50px);
   }
 
   to {
-      transform: translateY(0px);
-      opacity: 1;
+    transform: translateY(0px);
+    opacity: 1;
   }
 }
 

src/web/staticres/common-module/solution/js/data-interface.js

@@ -26,12 +26,16 @@ var page = new Vue({
       var scrollEle = document.querySelector('#main-app ')
       var scrollTop = scrollEle.scrollTop
       var animateEle = document.querySelectorAll('.fadeOut')
+      var windowHeight = window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight;
       animateEle[0].classList.add('fadeIn')
       animateEle[1].classList.add('fadeIn')
       animateEle.forEach(function (item) {
         var itemTop = item.offsetTop
-        var itemHeight = item.offsetHeight
-        if (scrollTop >= itemTop - itemHeight / 2) {
+        // var itemHeight = item.offsetHeight
+        var flag = itemTop < scrollTop + windowHeight
+        if (scrollTop && flag) {
           item.classList.add('fadeIn')
         }
       })