float reader

public/react/src/modules/page/MainContent.js

@@ -13,7 +13,7 @@ import ChooseEvaluateView from './main/ChooseEvaluateView'
 
 import { CircularProgress } from 'material-ui/Progress';
 import Button from 'material-ui/Button';
-import VNCDisplay from './VNCDisplay'
+import VNCContainer from './VNCContainer'
 
 import './tpiPage.css';
 import './tpiPageForMobile.css';
@@ -94,9 +94,9 @@ class MainContent extends Component {
 						    <div className="fl pr tip-right-con" id="update_game_tip"></div>
 						</div>*/}
 
-						{ showIframeContent && vnc_url ? <VNCDisplay
+						{ showIframeContent && vnc_url ? <VNCContainer
 							vnc_url={vnc_url}
-						></VNCDisplay>
+						></VNCContainer>
 						:
 						<React.Fragment>
 

public/react/src/modules/page/VNC.css

@@ -0,0 +1,16 @@
+.float_button {
+    background-image: url(./images/float_switch.jpg);
+    height: 112px;
+    width: 38px;
+    position: absolute;
+    left: -38px;
+    top: 32%;
+    cursor: pointer;
+}
+.float_button .text {
+    position: relative;
+    writing-mode: vertical-rl;
+    top: 36px;
+    color: #fff;
+    left: 10px;
+}

public/react/src/modules/page/VNCContainer.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import VNCDisplay from './VNCDisplay'
+import FloatButton from './component/FloatButton'
+import SecondDrawer from './component/SecondDrawer'
+
+import './VNC.css'
+const $ = window.$;
+class VNCContainer extends Component {
+	componentDidMount() {
+		
+
+	}
+	
+  	render() {
+  		const { challenge,  vnc_url } = this.props
+
+	    return (
+	      	<React.Fragment>
+                <SecondDrawer
+                    floatText={'版本库'}
+                ></SecondDrawer>
+                <FloatButton></FloatButton>
+                <VNCDisplay
+                    {...this.props}
+                ></VNCDisplay>
+
+                
+		    </React.Fragment>
+	    );
+  	}
+}
+
+export default VNCContainer;

public/react/src/modules/page/component/FloatButton.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+const $ = window.$;
+class FloatButton extends Component {
+	componentDidMount() {
+		
+
+	}
+	
+  	render() {
+  		const { challenge,  vnc_url, children } = this.props
+
+	    return (
+            <div className="float_button" onClick={this.props.onClick}>
+                <style>{`
+                    
+                `}</style>
+                <span class="text">{children || '版本库'}</span>
+            </div>
+	    );
+  	}
+}
+
+export default FloatButton;

public/react/src/modules/page/component/SecondDrawer.js

@@ -0,0 +1,117 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Drawer } from "antd";
+import FloatButton from './FloatButton'
+
+export default class SecondDrawer extends React.Component {
+  state = { visible: false, childrenDrawer: false };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  showChildrenDrawer = () => {
+    this.setState({
+      childrenDrawer: true
+    });
+  };
+
+  onChildrenDrawerClose = () => {
+    this.setState({
+      childrenDrawer: false
+    });
+  };
+  onCloseInner = () => {};
+  swtichFirstDrawer = () => {
+    this.setState({
+      visible: !this.state.visible,
+      childrenDrawer: false
+    });
+  };
+  componentDidMount() {
+    this.setState({ visible: true }, () => {
+      this.setState({ visible: false });
+    });
+  }
+  render() {
+    const { floatText } = this.props
+    return (
+      <div>
+        <Drawer
+          title="Multi-level drawer"
+          width={520}
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <button type="primary" onClick={this.showChildrenDrawer}>
+            Two-level drawer
+          </button>
+          <FloatButton onClick={this.swtichFirstDrawer}>{floatText}</FloatButton>
+          {/* <button
+            type="primary"
+            onClick={this.swtichFirstDrawer}
+            style={{
+              left: "-48px",
+              position: "absolute"
+            }}
+          >
+            Show first
+          </button> */}
+          <Drawer
+            mask={false}
+            title="Two-level Drawer"
+            width={320}
+            closable={false}
+            onClose={this.onChildrenDrawerClose}
+            visible={this.state.childrenDrawer}
+          >
+            This is two-level drawer
+            <button
+              style={{
+                marginRight: 8
+              }}
+              onClick={this.onChildrenDrawerClose}
+            >
+              Cancel
+            </button>
+          </Drawer>
+          <div
+            style={{
+              position: "absolute",
+              bottom: 0,
+              width: "100%",
+              borderTop: "1px solid #e8e8e8",
+              padding: "10px 16px",
+              textAlign: "right",
+              left: 0,
+              background: "#fff",
+              borderRadius: "0 0 4px 4px"
+            }}
+          >
+            <button
+              style={{
+                marginRight: 8
+              }}
+              onClick={this.onClose}
+            >
+              Cancel
+            </button>
+            <button onClick={this.onClose} type="primary">
+              Submit
+            </button>
+          </div>
+        </Drawer>
+      </div>
+    );
+  }
+}
+