急诊层级关系修改

src/components/CopyRight/CopyModalSon/index.jsx

@@ -1,7 +1,8 @@
 import React, { Component } from "react";
-import style from "../index.less";
+import style from "./index.less";
 import close from '../../../common/images/icon_close.png'
 import { dragBox } from '@utils/drag';
+import ReactDom from "react-dom";
 
 class DiscontentSon extends Component {
   constructor(props) {
@@ -14,10 +15,9 @@ class DiscontentSon extends Component {
   render() {
     const { closeCopyModal,copyVisible,date,copyContent,number } = this.props;
 
-    return <div
-        className={style["copyModal"]}
-        style={copyVisible ? { display: "block" } : { display: "none" }}
-      >
+    
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<React.Fragment>
         <div className={style["shade"]} onClick={closeCopyModal}/>
         <div className={style["copyContent"]} id="CopyModalWrap">
           <div className={`${style["header"]} drag-title`} id="CopyModalTitle">版本信息</div>
@@ -28,7 +28,7 @@ class DiscontentSon extends Component {
           </div>
           <div className={style["content"]}>{copyContent}</div>
         </div>
-      </div>
+        </React.Fragment>,domNode)
   }
 }
 

src/components/CopyRight/CopyModalSon/index.less

@@ -0,0 +1,65 @@
+
+      .copyContent{
+        position: fixed;
+        width: 820px;
+        left: 50%;
+        top: 20%;
+        margin-left: -410px;
+        background: #fff;
+        height: 60%;
+        z-index: 1000;
+        padding: 80px 0 40px;
+        img{
+          cursor: pointer;
+          position: absolute;
+          right: 10px;
+          top: 7px;
+          z-index: 100;
+        }
+        .header {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          font-size: 14px;
+          height: 40px;
+          line-height: 40px;
+          padding: 0 20px;
+          border-bottom: 1px solid #EAEDF1;
+        }
+        .now{
+          position: absolute;
+          width: 100%;
+          top: 35px;
+          font-size: 18px;
+          padding: 15px 10px;
+          border-bottom:1px solid #EAEDF1;
+          margin-bottom: 10px;
+          span{
+            float: right;
+            margin-top: 3px;
+          }
+        }
+        .content {
+          height: 100%;
+          padding: 10px;
+          overflow-y: auto;
+          font-size: 12px;
+          line-height: 20px;
+          div{
+            font-size: 12px;
+            line-height: 20px;
+          }
+        }
+      }
+      .shade {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom:0;
+        background: #000;
+        opacity: 0.6;
+        z-index: 999;
+        filter:alpha(opacity=60);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+      }

src/components/CopyRight/DiscontentSon/index.jsx

@@ -1,7 +1,8 @@
 import React, { Component } from "react";
-import style from "../index.less";
+import style from "./index.less";
 import close from '../../../common/images/icon_close.png'
 import { dragBox } from '@utils/drag';
+import ReactDom from "react-dom";
 
 class DiscontentSon extends Component {
   constructor(props) {
@@ -13,11 +14,8 @@ class DiscontentSon extends Component {
 
   render() {
     const { closeDisclatmerModal,disVisible,disclatmerContent } = this.props;
-
-    return <div
-          className={style["disModal"]}
-          style={disVisible ? { display: "block" } : { display: "none" }}
-        >
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<React.Fragment>
           <div className={style["shade"]} onClick={closeDisclatmerModal}/>
           <div className={style["disContent"]} id="disContentWrap">
             <div className={`${style["header"]} drag-title`} id="DisclatmerTitle">免责声明</div>
@@ -25,7 +23,7 @@ class DiscontentSon extends Component {
             <div className={style["content"]}>{disclatmerContent}</div>
             <div className={style["btnBox"]}><span  className={style["btn"]} onClick={closeDisclatmerModal}>确定</span></div>
           </div>
-      </div>
+          </React.Fragment>,domNode)
   }
 }
 

src/components/CopyRight/DiscontentSon/index.less

@@ -0,0 +1,90 @@
+@import "~@less/mixin.less";
+
+      .disContent{
+        position: fixed;  
+        width: 50%;
+        height: 60%;
+        left: 25%;
+        background: #fff;
+        top: 20%;
+        z-index: 1000;
+        padding: 40px 0 60px 0;
+        img{
+          cursor: pointer;
+          position: absolute;
+          right: 10px;
+          top: 7px;
+          z-index: 100;
+        }
+        .header {
+          position: absolute;
+          top: 0px;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+          padding: 0 20px;
+          background: #fff;
+          width: 100% ;
+          border-bottom: 1px solid #EAEDF1;
+        }
+        .now{
+          font-size: 18px;
+          padding: 15px 10px;
+          border-bottom:1px solid #EAEDF1;
+          margin-bottom: 10px;
+          span{
+            float: right;
+            margin-top: 3px;
+          }
+        }
+        .content {
+          padding: 20px;
+          height: 100%;
+          overflow: auto;
+          font-size: 12px;
+          line-height: 20px;
+          div{
+            font-size: 12px;
+            line-height: 20px;
+          }
+        }
+        .btnBox {
+          position: relative;
+          // bottom: -60px;
+          width: 100%;
+          height: 60px;
+          background: #fff;
+        }
+        .btn{
+          .btnCom;
+          position: relative;
+          display: inline-block;
+          width: 80px;
+          height: 34px;
+          left: 50%;
+          top: 13px;
+          margin-left: -40px;
+          line-height: 34px;
+          font-size: 14px;
+          // border-radius: 4px;
+          background: #3B9ED0;
+          color:#fff;
+          // text-align: center;
+          // cursor: pointer;
+        }
+      }
+      
+    .shade {
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom:0;
+      z-index: 999;
+      background: #000;
+      opacity: 0.6;
+      filter:alpha(opacity=60);
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+    }
+    

src/components/CopyRight/index.less

@@ -45,6 +45,7 @@
       bottom:0;
       background: #000;
       opacity: 0.6;
+      z-index: 9999;
       filter:alpha(opacity=60);
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
     }