修复编译工具区域超出屏幕外不可操作问题

商艳涛
1 parent c56de56f
Showing 7 changed files with 6 additions and 316 deletions
dist/css/ide.css
dist/css/layout.css
dist/css/main.css
dist/scss/main.scss
src/css/ide.css
src/css/main.css
src/scss/main.scss
@@ -265,7 +265,7 @@ html, body {
   padding-bottom: 260px; }
  
 .console-wrap {
-  width: 100%;
+  width: calc(100% - 170px);
   background-color: #FFF;
   height: 200px;
   position: absolute;
-.box-border {
-  border: 1px solid #ccc;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box; }
-
-.flx {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex; }
-
-.f1 {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -moz-box-flex: 1;
-  -moz-flex: 1;
-  -ms-flex: 1;
-  flex: 1; }
-
-.f2 {
-  -webkit-box-flex: 2;
-  -webkit-flex: 2;
-  -moz-box-flex: 2;
-  -moz-flex: 2;
-  -ms-flex: 2;
-  flex: 2; }
-
-.f3 {
-  -webkit-box-flex: 3;
-  -webkit-flex: 3;
-  -moz-box-flex: 3;
-  -moz-flex: 3;
-  -ms-flex: 3;
-  flex: 3; }
-
-.f4 {
-  -webkit-box-flex: 4;
-  -webkit-flex: 4;
-  -moz-box-flex: 4;
-  -moz-flex: 4;
-  -ms-flex: 4;
-  flex: 4; }
-
-.f5 {
-  -webkit-box-flex: 5;
-  -webkit-flex: 5;
-  -moz-box-flex: 5;
-  -moz-flex: 5;
-  -ms-flex: 5;
-  flex: 5; }
-
-.f20 {
-  -webkit-box-flex: 20%;
-  -webkit-flex: 20%;
-  -moz-box-flex: 20%;
-  -moz-flex: 20%;
-  -ms-flex: 20%;
-  flex: 20%; }
-
-.f25 {
-  -webkit-box-flex: 25%;
-  -webkit-flex: 25%;
-  -moz-box-flex: 25%;
-  -moz-flex: 25%;
-  -ms-flex: 25%;
-  flex: 25%; }
-
-.center-lv {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  -moz-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -moz-align-items: center;
-  align-items: center; }
-
-.both-lr {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -moz-align-items: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
-  -moz-justify-content: space-between;
-  justify-content: space-between; }
-
-.both-ud {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-direction: normal;
-  -webkit-box-orient: vertical;
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
-  -moz-justify-content: space-between;
-  justify-content: space-between; }
-
-.flex-direction .row {
-  -webkit-box-direction: normal;
-  -webkit-box-orient: horizontal;
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row; }
-
-.flex-direction .row-reverse {
-  -webkit-box-direction: reverse;
-  -webkit-box-orient: horizontal;
-  -webkit-flex-direction: row-reverse;
-  -moz-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse; }
-
-.flex-direction .column {
-  -webkit-box-direction: normal;
-  -webkit-box-orient: vertical;
-  -webkit-flex-direction: column;
-  -moz-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column; }
-
-.flex-direction .column-reverse {
-  -webkit-box-direction: reverse;
-  -webkit-box-orient: vertical;
-  -webkit-flex-direction: column-reverse;
-  -moz-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse; }
-
-.flex-wrap .nowrap {
-  -webkit-flex-wrap: nowrap;
-  -moz-flex-wrap: nowrap;
-  -ms-flex-wrap: none;
-  flex-wrap: nowrap; }
-
-.flex-wrap .nowrap {
-  -webkit-flex-wrap: wrap;
-  -moz-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap; }
-
-.flex-wrap .nowrap {
-  -webkit-flex-wrap: wrap-reverse;
-  -moz-flex-wrap: wrap-reverse;
-  -ms-flex-wrap: wrap-reverse;
-  flex-wrap: wrap-reverse; }
-
-.justify-content .start {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  -moz-justify-content: flex-start;
-  justify-content: flex-start; }
-
-.justify-content .end {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  -moz-justify-content: flex-end;
-  justify-content: flex-end; }
-
-.justify-content .between {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
-  -moz-justify-content: space-between;
-  justify-content: space-between; }
-
-.justify-content .center {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  -moz-justify-content: center;
-  justify-content: center; }
-
-.justify-content .around {
-  -webkit-box-pack: space-around;
-  -ms-flex-pack: space-around;
-  -webkit-justify-content: space-around;
-  -moz-justify-content: space-around;
-  justify-content: space-around; }
-
-.align-items .start {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  -webkit-align-items: flex-start;
-  -moz-align-items: flex-start;
-  align-items: flex-start; }
-
-.align-items .end {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  -webkit-align-items: flex-end;
-  -moz-align-items: flex-end;
-  align-items: flex-end; }
-
-.align-items .center {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -moz-align-items: center;
-  align-items: center; }
-
-.align-items .stretch {
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  -webkit-align-items: stretch;
-  -moz-align-items: stretch;
-  align-items: stretch; }
-
-.align-items .baseline {
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  -webkit-align-items: baseline;
-  -moz-align-items: baseline;
-  align-items: baseline; }
-
-.align-content .start {
-  -webkit-align-content: flex-start;
-  -moz-align-content: flex-start;
-  -ms-flex-line-pack: start;
-  align-content: flex-start; }
-
-.align-content .end {
-  -webkit-align-content: flex-end;
-  -moz-align-content: flex-end;
-  -ms-flex-line-pack: end;
-  align-content: flex-end; }
-
-.align-content .center {
-  -webkit-align-content: center;
-  -moz-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center; }
-
-.align-content .between {
-  -webkit-align-content: space-between;
-  -moz-align-content: space-between;
-  -ms-flex-line-pack: space-between;
-  align-content: space-between; }
-
-.align-content .around {
-  -webkit-align-content: space-around;
-  -moz-align-content: space-around;
-  -ms-flex-line-pack: space-around;
-  align-content: space-around; }
-
-.align-content .stretch {
-  -webkit-align-content: stretch;
-  -moz-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch; }
-
-.align-self .auto {
-  -webkit-align-self: auto;
-  -moz-align-self: auto;
-  -ms-flex-item-align: auto;
-  align-self: auto; }
-
-.align-self .start {
-  -webkit-align-self: flex-start;
-  -moz-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start; }
-
-.align-self .end {
-  -webkit-align-self: flex-end;
-  -moz-align-self: flex-end;
-  -ms-flex-item-align: end;
-  align-self: flex-end; }
-
-.align-self .center {
-  -webkit-align-self: center;
-  -moz-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center; }
-
-.align-self .baseline {
-  -webkit-align-self: baseline;
-  -moz-align-self: baseline;
-  -ms-flex-item-align: baseline;
-  align-self: baseline; }
-
-.align-self .stretch {
-  -webkit-align-self: stretch;
-  -moz-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch; }
@@ -137,7 +137,7 @@ html, body {
   padding-bottom: 260px; }
  
 .console-wrap {
-  width: 100%;
+  width: calc(100% - 170px);
   background-color: #FFF;
   height: 200px;
   position: absolute;
@@ -181,7 +181,7 @@ html, body{
 }
  
 .console-wrap{
-    width: 100%;
+    width: calc(100% - 170px);
     background-color: #FFF;
     height: 200px;
     position: absolute;
@@ -265,7 +265,7 @@ html, body {
   padding-bottom: 260px; }
  
 .console-wrap {
-  width: 100%;
+  width: calc(100% - 170px);
   background-color: #FFF;
   height: 200px;
   position: absolute;
@@ -137,7 +137,7 @@ html, body {
   padding-bottom: 260px; }
  
 .console-wrap {
-  width: 100%;
+  width: calc(100% - 170px);
   background-color: #FFF;
   height: 200px;
   position: absolute;
@@ -181,7 +181,7 @@ html, body{
 }
  
 .console-wrap{
-    width: 100%;
+    width: calc(100% - 170px);
     background-color: #FFF;
     height: 200px;
     position: absolute;