pref: 修改引导页，添加 自动滚动

src/pages/bootpage/template/demonstration/index.js

@@ -42,6 +42,9 @@ const Demonstration = props => {
   const progressRef2 = useRef(0);
   const timer2 = useRef(null);
   const timer3 = useRef(null);
+  const scollTimer = useRef(null);
+  const loadPageRef = useRef(null);
+  const loadPageImgRef = useRef(null);
   const [progressValue2, setProgressValue2] = useState(0);
   const [loading, setLoading] = useState(true);
   const [projectConfig, setProjectConfig] = useState({}); // 项目案例是否可免密跳转
@@ -96,10 +99,41 @@ const Demonstration = props => {
       }
     }, 100);
   };
+  const onEndScoll = () => {
+    if (scollTimer.current) {
+      clearInterval(scollTimer.current);
+      scollTimer.current = null;
+    }
+  };
+  const startScoll = time => {
+    if (scollTimer.current) {
+      clearInterval(scollTimer.current);
+      scollTimer.current = null;
+    }
+    scollTimer.current = setInterval(() => {
+      const pageHeight = loadPageRef.current?.clientHeight;
+      const imgHeight = loadPageImgRef.current?.clientHeight;
+      if (pageHeight && imgHeight && imgHeight > pageHeight) {
+        const height = imgHeight - pageHeight;
+        const { scrollTop } = loadPageRef.current;
+        const offset = Math.ceil(height / time / 20);
+        if (scrollTop >= height) {
+          onEndScoll();
+        }
+        loadPageRef.current.scrollTop = scrollTop + offset;
+      }
+    }, 50);
+  };
   const startLoading = name => {
     console.log('🚀 ~ name:', name, pageData[name]);
     if (pageData?.[name]) {
       setTransitionImg(pageData[name]);
+      const time = pageData[`${name}time`];
+      if (time) {
+        setTimeout(() => {
+          startScoll(time);
+        }, 500);
+      }
     } else {
       setJumpLoading(true);
       jumpProgressStart();
@@ -363,6 +397,7 @@ const Demonstration = props => {
     appService.getAccountPageList(params).then(res => {
       const dataStr1 = res?.data?.jsonData || '';
       const data1 = dataStr1 ? JSON.parse(dataStr1) : [];
+      console.log('🚀 ~ data1:', data1);
       const obj = {};
       const reqArr = [];
       data1.forEach(d => {
@@ -373,6 +408,7 @@ const Demonstration = props => {
             imgLoad({
               name: key,
               url,
+              time: d['时间'] * 1 || 0,
             }),
           );
         }
@@ -382,6 +418,7 @@ const Demonstration = props => {
           result.forEach(r => {
             if (r) {
               obj[r.name] = r.url;
+              obj[`${r.name}time`] = r.time;
             }
           });
           setPageData(obj);
@@ -459,6 +496,7 @@ const Demonstration = props => {
   };
   const onEndPage = () => {
     setTransitionImg('');
+    onEndScoll();
   };
   const onendLoading = () => {
     jumpProgressEnd();
@@ -534,6 +572,7 @@ const Demonstration = props => {
       window.removeEventListener('resize', onResize);
       timer2.current && clearInterval(timer2.current);
       timer2.current = null;
+      onEndScoll();
     };
   }, []);
   useEffect(() => {
@@ -558,10 +597,16 @@ const Demonstration = props => {
         </div>
       ) : null} */}
       {transitionImg ? (
-        <div className={styles.demonstrationLoadPage} key="jumpLoading">
-          <div className={styles.demonstrationLoadPageImg}>
+        <div
+          ref={loadPageRef}
+          className={classNames(styles.demonstrationLoadPage, 'wkt-scroll-light', 'demonstrationLoadPage')}
+          key="jumpLoading"
+        >
+          <div ref={loadPageImgRef} className={classNames(styles.demonstrationLoadPageImg, 'demonstrationLoadPageImg')}>
             <img src={transitionImg} alt="" />
-            <div className={classNames(styles.demonstrationLoadPageBtn)} onClick={onEndPage} />
+            <div className={classNames(styles.demonstrationLoadPageBtn)} onClick={onEndPage}>
+              点击体验系统
+            </div>
           </div>
         </div>
       ) : null}

src/pages/bootpage/template/demonstration/index.less

@@ -91,6 +91,7 @@
     left: 0;
     z-index: 1090;
     overflow-y: auto;
+    background-color: #fff;
   }
 
   .demonstrationLoadPageImg {
@@ -113,10 +114,16 @@
       z-index: 1095;
       cursor: pointer;
       transition: all 0.2s;
-
+      -webkit-animation: heartbeat 1.5s linear 0.5s infinite both;
+      animation: heartbeat 1.5s linear 0.5s infinite both;
+      line-height: 70px;
+      padding-left: 70px;
+      font-size: 22px;
+      letter-spacing: 5px;
     }
+
     .demonstrationLoadPageBtn:hover {
-      transform: scale(1.1);
+      animation-duration: 0;
     }
   }
 
@@ -454,3 +461,104 @@
   animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 
+@-webkit-keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+&:global {
+
+  .wkt-scroll-light::-webkit-scrollbar,
+  .wkt-scroll-light *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  .wkt-scroll-light::-webkit-scrollbar-track,
+  .wkt-scroll-light *::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 8px rgba(193, 193, 193, 0.45);
+    box-shadow: inset 0 0 8px rgba(193, 193, 193, 0.45);
+    border-radius: 10px;
+  }
+
+  .wkt-scroll-light::-webkit-scrollbar-thumb,
+  .wkt-scroll-light *::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: inset 0 0 8px rgba(177, 177, 177, 0.5);
+    box-shadow: inset 0 0 8px rgba(177, 177, 177, 0.5);
+  }
+}
\ No newline at end of file