add caseNotification page

src/components/common/caseNotification/CaseNotification.jsx

@@ -1,4 +1,6 @@
 import React, {Component} from 'react';
+import {Input, Tooltip, Icon, Button} from 'antd';
+import './index.css';
 
 class CaseNotification extends Component {
     constructor() {
@@ -8,9 +10,59 @@ class CaseNotification extends Component {
     render() {
         return (
             <div>
-                Case Notification
+                <span className='table-title'> Notification Settings</span>
+                <div className='kind'>
+                    <p><b>Ding Talk</b></p>
+                    <div className='item'>
+                        <p>
+                            <span className='item-title'>
+                                <span>Web hook  </span>
+                                <Tooltip placement="top" title='hahahha'>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input style={{width: 900}}/>
+                        </p>
+                        <p>
+                            <span className='item-title'>
+                                <span>Notification Name  </span>
+                                <Tooltip placement="top" title='heheheheh'>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input style={{width: 300}}/></p>
+                    </div>
+                </div>
+
+                <div className='kind'>
+                    <p><b>QQ</b></p>
+                    <div className='item'>
+                        <p>
+                            <span className='item-title'>
+                                <span>Web hook  </span>
+                                <Tooltip placement="top" title='hahahha'>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input style={{width: 900}}/>
+                        </p>
+                        <p>
+                            <span className='item-title'>
+                                <span>Notification Name  </span>
+                                <Tooltip placement="top" title='heheheheh'>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input style={{width: 300}}/></p>
+                    </div>
+                </div>
+
+                <Button type="primary" onClick={() => {
+                    console.log('hello');
+                }}>SUBMIT</Button>
             </div>
         )
+
     }
 }
 

src/components/common/caseNotification/index.css

@@ -0,0 +1,27 @@
+.table-title {
+  font-weight: bold;
+  font-size: large;
+  display: block;
+  height: 35px;
+}
+
+.table-title::before {
+  content: '|';
+  display: inline-block;
+  font-weight: 900;
+  color: #0B7FC7;
+  /*border-right: */
+}
+
+.kind {
+  margin-top: 20px;
+}
+
+.item {
+
+}
+
+.item-title {
+  display: inline-block;
+  width: 180px;
+}

src/components/common/notification/Notification1.jsx

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import {Input} from 'antd';
+import './index1.css';
+
+class Notification1 extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                <span className='table-title'> Notification Settings</span>
+                <div className='kind'>
+                    <p><b>Ding Talk</b></p>
+                    <p><span className='item-title'>Web hook</span><Input style={{width: 900}}/></p>
+                    <p><span className='item-title'>Notification Name</span><Input style={{width: 300}}/></p>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Notification1;

src/components/monitorNotify/notification/index.css → src/components/common/notification/index1.css

@@ -11,4 +11,13 @@
   font-weight: 900;
   color: #0B7FC7;
   /*border-right: */
+}
+
+.kind {
+  margin-top: 20px
+}
+
+.item-title {
+  width: 200px;
+  display: inline-block;
 }

src/components/monitorNotify/notification/Notification.jsx

@@ -1,6 +1,4 @@
 import React, {Component} from 'react';
-import {Input} from 'antd';
-import './index.css';
 
 class Notification extends Component {
     constructor() {
@@ -10,9 +8,7 @@ class Notification extends Component {
     render() {
         return (
             <div>
-                <span className='table-title'> Notification Settings</span>
-                <p><b>Ding Talk</b></p>
-                <p>Web hook <Input/></p>
+                <p>Notification</p>
             </div>
         )
     }