fix: 更新过渡页样式

src/pages/bootpage/index.js

@@ -5,9 +5,7 @@ import { appService } from '@/api';
 import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
 import PandaBootPage from './panda';
 
-
-const system_item_name = '引导页模板'; // 系统配置项名称
-
+const systemItemName = '引导页模板'; // 系统配置项名称
 
 const BootPageTemplate = {
   default: PandaBootPage,
@@ -25,12 +23,12 @@ const BootPage = props => {
   useEffect(() => {
     appService
       .sysConfiguration({
-        moduleName: system_item_name,
+        moduleName: systemItemName,
         ignoreSite: true,
       })
       .then(res => {
         const { code, data } = res;
-        if (code != SERVICE_INTERFACE_SUCCESS_CODE) {
+        if (code !== SERVICE_INTERFACE_SUCCESS_CODE) {
           notification.error({ message: '提示', duration: 3, description: '系统引导页配置错误' });
           setInfo({ first: false, loading: false, error: true });
           return;

src/pages/bootpage/panda/index.js

 /* eslint-disable global-require */
 // 云平台引导页
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 
 import { Space, Spin, Progress } from 'antd';
 import classNames from 'classnames';
@@ -32,7 +32,10 @@ const industries = [
 
 // let loginAction = null;
 const BootPage = props => {
+  const dataRef = useRef();
+  const process = useRef();
   const [Industries] = useState(props.global.userInfo.Industries);
+  const [percentBottom, setPercentBottom] = useState(-40);
   const [percentNum, setPercentNum] = useState(0);
   const [currentType, setCurrentType] = useState('');
   // const [loadding, setLoadding] = useState(false);
@@ -40,26 +43,41 @@ const BootPage = props => {
   const [scale, setScale] = useState(1);
   const [loginAction, setAction] = useState(() => new LoginAction(props));
   const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length);
-
   // const history = useHistory();
   useDocumentTitle(
     { title: defaultSetting.title, id: '', pageName: '行业切换' },
     props.global.title || defaultSetting.title,
   );
-
+  useEffect(() => {
+    dataRef.current = percentNum;
+  }, [percentNum]);
   // eslint-disable-next-line no-shadow
   const handlePage = (event, type, loginAction) => {
-    setPercentNum(Math.ceil(Math.random() * 50));
+    let count = 1;
+    setPercentBottom(-40 + Math.ceil(Math.random() * 8 * count));
+    setPercentNum(Math.ceil(Math.random() * 10));
     setCurrentType(type);
     //
     // event.persist();
     // event.preventDefault();
-
+    process.current = setInterval(() => {
+      setTimeout(() => {
+        const perBottom = -40 + 8 * count + Math.ceil(Math.random() * 8);
+        const perNum = 10 * count + Math.ceil(Math.random() * 10);
+        if (perNum >= 80 || dataRef.current >= 80 || count === 10) {
+          return clearInterval(process.current);
+        }
+        setPercentBottom(perBottom);
+        setPercentNum(perNum);
+        count += 1;
+      }, 0);
+    }, 3000);
     // 新增熊猫新产品引导页
     if (type === '熊猫新产品') {
       setTimeout(() => {
+        setPercentBottom(40);
         setPercentNum(100);
-
+        clearInterval(process.current);
         setTimeout(() => {
           props.history.push('/cloud/introduction/newproducts');
           // window.history.pushState('', null, `/cloud/introduction/newproducts`);
@@ -95,8 +113,9 @@ const BootPage = props => {
     window.addEventListener('resize', handleResize);
 
     const handleToggleIndustry = event => {
+      setPercentBottom(38);
       setPercentNum(98);
-
+      clearInterval(process.current);
       setTimeout(() => {
         props.history.push(`/?client=${props.global.client}`);
       }, 1000);
@@ -117,8 +136,9 @@ const BootPage = props => {
   useEffect(() => {
     window.share.event.on('visible', ret => {
       setTimeout(() => {
+        setPercentBottom(40);
         setPercentNum(100);
-
+        clearInterval(process.current);
         setTimeout(() => {
           window.history.pushState(null, '', ret);
         }, 500);
@@ -196,14 +216,28 @@ const BootPage = props => {
                       </div>
                     </div>
                     {currentType === item.type && (
-                      <Progress
-                        style={{ width: '96%' }}
-                        strokeColor={item.color}
-                        percent={percentNum}
-                        status="active"
-                        format={percent => <span style={{ color: '#fff' }}>{percent}%</span>}
-                        className={styles.bootProgress}
-                      />
+                      <div className={styles.bootProgress}>
+                        <div className={styles.inner} style={{ bottom: percentBottom }}>
+                          <svg
+                            className={styles.wave}
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                            viewBox="0 24 150 68"
+                            preserveAspectRatio="none"
+                          >
+                            <defs>
+                              <path
+                                id="gentle-wave"
+                                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+                              />
+                            </defs>
+                            <g className={styles.parallax}>
+                              <use xlinkHref="#gentle-wave" x="50" y="0" fill={item.color} opacity="0.1" />
+                              <use xlinkHref="#gentle-wave" x="50" y="-1" fill={item.color} opacity="0.2" />
+                            </g>
+                          </svg>
+                        </div>
+                      </div>
                     )}
                   </li>
                 ),

src/pages/bootpage/panda/index.less

 @import '~antd/es/style/themes/default.less';
 
+@-webkit-keyframes move {
+  0% {
+    -webkit-transform: translate(-90px,0%);
+    transform: translate(-90px,0%);
+  }
+  100% {
+    -webkit-transform: translate(85px,0%);
+    transform: translate(85px,0%);
+  }
+}
+
+@keyframes move {
+  0% {
+    -webkit-transform: translate(-90px,0%);
+    transform: translate(-90px,0%);
+  }
+  100% {
+    -webkit-transform: translate(85px,0%);
+    transform: translate(85px,0%);
+  }
+}
+
 .bootPage {
   width: 100%;
   height: 100%;
@@ -71,7 +93,7 @@
             }
             .bootProgress {
               transform: scale(1.1);
-              bottom: -14px;
+              bottom: -10px;
             }
           }
           .bootPageList {
@@ -176,7 +198,36 @@
   .bootProgress {
     transition: all .2s ease-out;
     position: absolute;
-    bottom: -5px;
+    height: 80px;
+    margin: 0;
+    width: 100%;
+    border-radius: 0 0 14% 14%;
+    overflow: hidden;
+    bottom: 0px;
+  }
+
+  .bootProgress .inner{
+    transition: all .2s ease-out;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    bottom: 10%;
+  }
+
+  .bootProgress .wave {
+    display: block;
+    width: 100%;
+    height: 10em;
+    max-height: 100vh;
+    margin: 0;
+  }
+
+  .bootProgress .wave .parallax>use {
+    animation: move 2s linear infinite;
+  }
+
+  .bootProgress .wave .parallax>use:nth-child(2) {
+    animation-delay: -0.1s;
   }
 }