fix: 过度页样式修改

src/pages/bootpage/panda/index.js

+/* eslint-disable global-require */
 // 云平台引导页
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -46,6 +47,7 @@ const BootPage = props => {
     props.global.title || defaultSetting.title,
   );
 
+  // eslint-disable-next-line no-shadow
   const handlePage = (event, type, loginAction) => {
     setPercentNum(Math.ceil(Math.random() * 50));
     setCurrentType(type);
@@ -55,7 +57,6 @@ const BootPage = props => {
 
     // 新增熊猫新产品引导页
     if (type === '熊猫新产品') {
-
       setTimeout(() => {
         setPercentNum(100);
 
@@ -77,7 +78,7 @@ const BootPage = props => {
     props.instance && props.instance.updateConfig(config);
     // props.instance && props.instance.getUserInfoAndConfig('', true, type);
     loginAction && loginAction.getUserInfoAndConfig('', true, type);
-  }
+  };
 
   useEffect(() => {
     // eslint-disable-next-line no-use-before-define
@@ -113,8 +114,6 @@ const BootPage = props => {
     };
   }, [loginAction.events, props, currentType]);
 
-
-
   useEffect(() => {
     window.share.event.on('visible', ret => {
       setTimeout(() => {
@@ -137,7 +136,6 @@ const BootPage = props => {
   //   ? props.global.userInfo.Industries.filter(item => !!industries.find(d => d.type === item)).length
   //   : 0`
 
-
   useEffect(() => {
     appService
       .getUserInfo({
@@ -148,12 +146,12 @@ const BootPage = props => {
       })
       .then(res => {
         const roles = res?.data?.roles ?? [];
-        const _hasRole = roles && Array.isArray(roles) && roles.filter(r => r.name == '客户运维管理员').length;
+        // eslint-disable-next-line no-underscore-dangle
+        const _hasRole = roles && Array.isArray(roles) && roles.filter(r => r.name === '客户运维管理员').length;
         setHasRole(!!_hasRole);
       });
   }, [props.global.token]);
 
-
   return (
     <div className={styles.bootPage}>
       <div className={styles.bootPageMain}>
@@ -178,17 +176,18 @@ const BootPage = props => {
               left: '300px',
               bottom: '105px',
               opacity: 1,
-              width: num === 5 ? 960 : num === 9 ||  num === 10 ? 1600 : 1280,
+              width: num === 5 ? 960 : num === 9 || num === 10 ? 1600 : 1280,
             }}
           >
             {industries.map(
               item =>
-              props.global &&
-                Industries.indexOf(item.type) > -1 &&
-                <li
+                props.global &&
+                Industries.indexOf(item.type) > -1 && (
+                  <li
                     className={styles.bootPageLi}
                     key={item.type}
-                    onClick={event => handlePage(event, item.type, loginAction)}>
+                    onClick={event => handlePage(event, item.type, loginAction)}
+                  >
                     <div className={styles.bootPageList}>
                       <div className={styles.listMain}>
                         <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
@@ -198,7 +197,7 @@ const BootPage = props => {
                     </div>
                     {currentType === item.type && (
                       <Progress
-                        style={{ width: '98%' }}
+                        style={{ width: '96%' }}
                         strokeColor={item.color}
                         percent={percentNum}
                         status="active"
@@ -207,6 +206,7 @@ const BootPage = props => {
                       />
                     )}
                   </li>
+                ),
             )}
           </ul>
         </section>

src/pages/bootpage/panda/index.less

@@ -65,6 +65,15 @@
           width: 298px;
           height: 268.8px;
           margin: 10px;
+          &:hover {
+            .listMain {
+              transform: scale(1.1);
+            }
+            .bootProgress {
+              transform: scale(1.1);
+              bottom: -14px;
+            }
+          }
           .bootPageList {
             width: 100%;
             height: 100%;
@@ -77,12 +86,6 @@
             font-size: 24px;
             cursor: pointer;
             position: relative;
-            &:hover {
-
-              .listMain {
-                transform: scale(1.1);
-              }
-            }
             span {
               margin-top: 20px;
               font-weight: 500;
@@ -171,6 +174,7 @@
   }
 
   .bootProgress {
+    transition: all .2s ease-out;
     position: absolute;
     bottom: -5px;
   }