perf: 优化引导页

src/pages/transitionalpage/index.js

@@ -104,8 +104,6 @@ class ProjectBox extends React.Component {
                     onMouseLeave={e =>  this.mouseOutHandle(item)}
                />
               <div>{item}</div>
-              {/* <div className={styles.bootPageitemImgB}>
-            </div> */}
             </div>
           </div>
         );
@@ -122,6 +120,20 @@ class ProjectBox extends React.Component {
 class RightBox extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      智能大数据: false,
+      智能实验室: false,
+    };
+  }
+  mouseOveHandle(type) {
+    this.setState({
+      [type]: true,
+    });
+  }
+  mouseOutHandle(type) {
+    this.setState({
+      [type]: false,
+    });
   }
   renderList(data) {
     const { callback } = this.props;
@@ -135,13 +147,15 @@ class RightBox extends React.Component {
             type={item}
             key={item}
             onClick={event => callback(event, item)}
+            style={{
+              background: `url(${require('../../assets/transitionalpage/'+item + '图.jpg')})`,
+            }}
           >
+             <img src={  this.state[item] ? require(`../../assets/transitionalpage/${item}图动.gif`): require(`../../assets/transitionalpage/${item}图.jpg`) }
+                    onMouseEnter={e =>  this.mouseOveHandle(item)}
+                    onMouseLeave={e =>  this.mouseOutHandle(item)}
+               />
             <div className={styles.bootPagebTitle}>{item}</div>
-            <div className={styles.bootPagebContent}>
-              <img
-                src={require(`../../assets/transitionalpage/${item}图.png`)}
-              />
-            </div>
           </div>
         );
       })

src/pages/transitionalpage/index.less

@@ -186,8 +186,13 @@
             flex-direction: column;
             width: 323px;
             height: 278px;
+            position: relative;
+            cursor: pointer;
             .bootPagebTitle {
               padding: 20px 15px;
+              position: absolute;
+              left: 0;
+              top: 0;
             }
             .bootPagebContent {
               width: 100%;

src/routes/config.js

 import BasicLayout from '../layouts/BasicLayout';
 import UserLayout from '../layouts/UserLayout';
-// import BootPage from '../pages/bootpage';
-import BootPage from '../pages/transitionalpage';
+import BootPage from '../pages/bootpage';
+// import BootPage from '../pages/transitionalpage';
 import NotFound from '../pages/exception/404';
 import ServiceFail from '../pages/exception/500';
 import Login from '../pages/user/login';