分离文档

docs/lab/css/common.css

@@ -0,0 +1,84 @@
+html, body {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+}
+
+.part-left {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  border-right: 1px solid #ddd;
+}
+
+.part-right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.part-left .controls {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 20px;
+  border-bottom: 1px solid #ddd;
+  box-sizing: border-box;
+}
+
+.part-left .controls .left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.part-left .controls .left .logo {
+  padding-right: 30px;
+}
+
+.part-left .controls .run {
+  height: 30px;
+  width: 100px;
+}
+
+.part-left .code {
+  flex: 1;
+  overflow: auto;
+}
+
+.part-left .code .CodeMirror {
+  height: 100%;
+}
+
+.part-left .code .CodeMirror pre {
+  padding-left: 7px;
+  line-height: 1.25;
+}
+
+.part-right .video-wrap {
+  display: flex;
+  height: 70%;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #ddd;
+}
+
+.part-right .video-wrap.dark {
+  background: #000;
+}
+
+.part-right .video-wrap .artplayer-app {
+    width: 90%;
+    height: 60%;
+    border: 1px solid #ddd;
+}
+
+.part-right .console {
+  position: relative;
+  height: 30%;
+}