新增glcc弹框

src/App.js

@@ -18,6 +18,7 @@ import moment from 'moment'
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
 import SiderBar from './forge/Component/SiderBar';
 import SiderBarHelp from './glcc/siderBarHelp';
+import GlccModal from './modules/glccModal';
 
 import { SnackbarHOC } from 'educoder';
 import { initAxiosInterceptors } from './AppConfig'
@@ -292,6 +293,7 @@ class App extends Component {
         <ConfigProvider locale={zhCN}>
           <MuiThemeProvider theme={theme}>
             <LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
+            <GlccModal />
             {!pathName || (pathName && pathName.indexOf("glcc") === -1) ? <SiderBar /> : <SiderBarHelp/>}
             {/* <Router> */}
             <Switch>

src/forge/css/index.scss

@@ -225,7 +225,8 @@ form{
   margin-bottom: 12px;
   border-radius:2px;
   background-color: #fff;
-  box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+  // box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+  border:1px solid rgba(79, 108, 188, 0.21);
   &>li{
     font-size: 1rem;
     padding:0px 0px 0px 20px;
@@ -236,7 +237,6 @@ form{
       height: 62px; 
       line-height: 62px;
       width: 100%;
-      border-bottom: 1px solid #eee;
       display: flex;
       justify-content: space-between;
       cursor: pointer;
@@ -244,6 +244,7 @@ form{
       margin:0px;
       a{
         width:100%;
+        color: #202d40;
       }
       & span:last-child{
         color: #999;
@@ -253,11 +254,11 @@ form{
       border-bottom: none;
     }
     &:not(.MenuTitle):hover{
-      background-color: #fafafa;
+    background-color:rgba(70, 106, 255, 0.06);
     }
   }
   & li.active{
-    background-color: #fafafa;
+    background-color:rgba(70, 106, 255, 0.06);
   }
   & li.active::before{
     position: absolute;

src/modules/glccModal/index.jsx

@@ -0,0 +1,46 @@
+import React, { memo, useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+
+import bg from './glcc.png';
+import './index.scss';
+
+
+
+function QzModal() {
+
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    let qzModalTime = localStorage.qzModalTime;
+    let nowTime = new Date().getTime();
+    if (qzModalTime) {
+      if (nowTime - qzModalTime > 24 * 3600 * 1000) {
+        // 延时展示，保证渲染modal不会白屏
+        setTimeout(()=>{setVisible(true);},800)
+        localStorage.setItem('qzModalTime', nowTime);
+      }
+    } else {
+      setTimeout(()=>{setVisible(true);},800)
+      localStorage.setItem('qzModalTime', nowTime);
+    }
+  }, [])
+
+  return (
+    <Modal
+      title="Basic Modal"
+      visible={visible}
+      onCancel={() => { setVisible(false) }}
+      footer={null}
+      className='qzModal'
+      width='728px'
+      maskClosable={false}
+      centered
+    >
+      {/* <img src={window.location.href.indexOf('osredm.jk')>-1?bg_local: bg} /> */}
+      <img src={bg} />
+      <a target="_blank" href="/glcc" className="qz-btn"></a>
+    </Modal>
+  )
+}
+
+export default memo(QzModal);

src/modules/glccModal/index.scss

@@ -0,0 +1,49 @@
+.qzModal {
+  top:calc(50vh - 250px);
+  .ant-modal-body {
+    padding: 0;
+    background: rgb(48,118,207);
+
+    img {
+      border-radius: 2px;
+      width: 100%;
+    }
+  }
+
+  .ant-modal-header {
+    height: 0;
+    background: rgb(48,118,207);
+    display: none !important;
+  }
+
+  .ant-modal-close {
+    top: -50px !important;
+    right:-50px;
+  }
+  .ant-modal-close-icon {
+    border: 1px solid #fff;
+    color: #fff;
+    border-radius: 50%;
+    padding: 5%;
+  }
+
+  .qz-btn {
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+    width: 250px;
+    height: 40px;
+    // background-color: #e96d2a;
+    // border-color: #e96d2a;
+    // border-radius: 6px;
+    // color: #fff;
+    // font-size:16px;
+    // text-align: center;
+    // line-height: 49px;
+    // &:hover{
+    //   color: #fff !important;
+    //   background-color: #f96d2a;
+    //   border-color: #f96d2a;
+    // }
+  }
+}