jupyter tpi布局

public/react/src/modules/tpm/jupyter/index.js

@@ -4,20 +4,33 @@
  * @Github: 
  * @Date: 2019-12-11 08:35:23
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-11 08:48:20
+ * @LastEditTime: 2019-12-11 09:13:09
  */
-import './index.css';
+import './index.scss';
 import React from 'react';
 import SplitPane from 'react-split-pane';
-// import UserInfo from '../../developer/components/'
+import { Button } from 'antd';
+
+import UserInfo from '../../developer/components/userInfo';
 
 function JupyterTPI (props) {
 
   return (
     <div className="jupyter_area">
-      <div className="jupyter_header"></div>
+      <div className="jupyter_header">
+        <UserInfo userInfo={{}} />
+        <p className="jupyter_title">
+          <span className="title_desc">MySQL数据库编程开发实训(基础篇)</span>
+          <span className="title_time">时间</span>
+        </p>
+        <p className="jupyter_btn">
+          {/* sync | poweroff */}
+          <Button className="btn_common" type="link" icon="sync">重置实训</Button> 
+          <Button className="btn_common" type="link" icon="poweroff">退出实训</Button> 
+        </p>
+      </div>
       <div className="jupyter_ctx">
-      <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="40%">
+        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
           <div className={'split-pane-left'}>
             左侧内容
           </div>

public/react/src/modules/tpm/jupyter/index.scss

@@ -47,3 +47,47 @@
 .Resizer.disabled:hover {
   border-color: transparent;
 }
+
+.jupyter_area{
+
+  .jupyter_header{
+    position: relative;
+    height: 60px;
+    line-height: 60px;
+    background-color: #070F1A;
+    
+    .jupyter_title{
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-around;
+      align-items: center;
+      height: 100%;
+      color: #fff;
+      .title_desc{
+        margin-top: 12px;
+        font-size: 16px;
+      }
+      .title_time{
+        font-size: 12px;
+      }
+      // text-align: center;
+    }
+
+    .jupyter_btn{
+      position: absolute;
+      right: 10px;
+      top: 14px;
+
+      .btn_common:hover{
+        // background-color: #29BD8B;
+        color: #29BD8B;
+      }
+    }
+  }
+  
+
+  .jupyter_ctx{
+    position: relative;
+    height: calc(100vh - 60px);
+  }
+}