梁美英 / programming · Commits

Commit 9b3071d4a0310c0d5a20c2642d418f784fb7fbed

Authored by ykxie
1 parent 85d829b1

初步实现录制编译

Inline Side-by-side
Showing 13 changed files with 408 additions and 48 deletions
src/css/ide.css
  View file @9b3071d
... ... @@ -61,6 +61,21 @@ ul.ztree li span.button.add {
61 61 float: left;
62 62 border-bottom: 0; }
63 63  
  64 +.programing #resultoutput .tab-pane {
  65 + padding: 14px; }
  66 +
  67 +.programing .record-title .nav-tabs > li.active > a, .programing .record-title .nav-tabs > li.active > a:hover, .programing .record-title .nav-tabs > li.active > a:focus {
  68 + color: #fff; }
  69 +
  70 +.programing .record-title .nav-tabs > li > a, .programing .record-title .nav-tabs > li.active > a:hover, .programing .record-title .nav-tabs > li.active > a:focus {
  71 + margin-right: 0;
  72 + line-height: 1.428571429;
  73 + border: none !important;
  74 + background: transparent !important;
  75 + height: 36px;
  76 + line-height: 36px;
  77 + padding: 0 12px; }
  78 +
64 79 html, body {
65 80 width: 100%;
66 81 height: 100%; }
... ... @@ -74,20 +89,21 @@ html, body {
74 89  
75 90 .record-title {
76 91 width: 100%;
77   - height: 60px;
  92 + height: 36px;
78 93 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
79 94 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
80 95 position: absolute;
81 96 top: 0;
82   - z-index: 9999; }
  97 + z-index: 9999;
  98 + padding-left: 28px; }
83 99  
84 100 .record-wrap {
85 101 width: 100%;
86 102 height: 100%;
87 103 position: absolute;
88 104 box-sizing: border-box;
89   - padding-top: 60px;
90   - padding-bottom: 280px; }
  105 + padding-top: 36px;
  106 + padding-bottom: 300px; }
91 107 .record-wrap #ideDir {
92 108 width: 170px;
93 109 height: 100%;
... ... @@ -105,7 +121,8 @@ html, body {
105 121 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
106 122 height: 100%; }
107 123 .record-wrap #folder {
108   - height: 100%; }
  124 + height: 100%;
  125 + min-height: 300px; }
109 126 .record-wrap .gxb-record {
110 127 position: relative;
111 128 height: 100%; }
... ... @@ -114,7 +131,6 @@ html, body {
114 131 width: 100%;
115 132 position: absolute;
116 133 bottom: 0;
117   - background-color: #23383f;
118 134 z-index: 999; }
119 135 .record-toolbox .console-wrap {
120 136 width: 100%;
... ... @@ -124,6 +140,54 @@ html, body {
124 140 .record-toolbox .console-wrap #toolbar {
125 141 width: 100%;
126 142 height: 36px;
127   - background-color: #F0F3F5; }
  143 + overflow: hidden;
  144 + background-color: #e3e3e3; }
  145 + .record-toolbox .console-wrap #toolbar .result-tabs {
  146 + height: 30px;
  147 + border-radius: 30px;
  148 + background-color: #62DCF5;
  149 + overflow: hidden;
  150 + margin: 3px 16px;
  151 + color: #fff; }
  152 + .record-toolbox .console-wrap #toolbar .text {
  153 + color: #fff; }
  154 + .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:focus {
  155 + color: #1FB6FF;
  156 + background-color: #fff;
  157 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  158 + border: none; }
  159 + .record-toolbox .console-wrap #toolbar .result-tabs > li > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover {
  160 + padding: 4px 36px;
  161 + border: none;
  162 + margin: 1px;
  163 + border-radius: 15px;
  164 + font-size: 14px;
  165 + transition: all 0.1s ease; }
  166 + .record-toolbox .console-wrap #toolbar .func {
  167 + height: 36px;
  168 + padding-top: 3px; }
  169 + .record-toolbox #full-screen, .record-toolbox #back-screen {
  170 + margin: 0;
  171 + background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
  172 + border-radius: 100px;
  173 + padding: 6px 7px;
  174 + margin: 0 16px;
  175 + color: #fff; }
  176 + .record-toolbox #resultoutput {
  177 + height: 204px;
  178 + overflow: auto; }
  179 + .record-toolbox #compileBtn {
  180 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  181 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  182 + -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  183 + transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  184 + border: none;
  185 + color: #fff;
  186 + padding-top: 5px;
  187 + padding-bottom: 5px; }
128 188 .record-toolbox .record-ctrl {
129   - height: 60px; }
  189 + height: 60px;
  190 + width: 100%;
  191 + z-index: 999;
  192 + padding: 0 136px;
  193 + background-color: #23383f; }
... ...
src/css/main.css
  View file @9b3071d
... ... @@ -11,20 +11,21 @@ html, body {
11 11  
12 12 .record-title {
13 13 width: 100%;
14   - height: 60px;
  14 + height: 36px;
15 15 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
16 16 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
17 17 position: absolute;
18 18 top: 0;
19   - z-index: 9999; }
  19 + z-index: 9999;
  20 + padding-left: 28px; }
20 21  
21 22 .record-wrap {
22 23 width: 100%;
23 24 height: 100%;
24 25 position: absolute;
25 26 box-sizing: border-box;
26   - padding-top: 60px;
27   - padding-bottom: 280px; }
  27 + padding-top: 36px;
  28 + padding-bottom: 300px; }
28 29 .record-wrap #ideDir {
29 30 width: 170px;
30 31 height: 100%;
... ... @@ -42,7 +43,8 @@ html, body {
42 43 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
43 44 height: 100%; }
44 45 .record-wrap #folder {
45   - height: 100%; }
  46 + height: 100%;
  47 + min-height: 300px; }
46 48 .record-wrap .gxb-record {
47 49 position: relative;
48 50 height: 100%; }
... ... @@ -51,7 +53,6 @@ html, body {
51 53 width: 100%;
52 54 position: absolute;
53 55 bottom: 0;
54   - background-color: #23383f;
55 56 z-index: 999; }
56 57 .record-toolbox .console-wrap {
57 58 width: 100%;
... ... @@ -61,6 +62,54 @@ html, body {
61 62 .record-toolbox .console-wrap #toolbar {
62 63 width: 100%;
63 64 height: 36px;
64   - background-color: #F0F3F5; }
  65 + overflow: hidden;
  66 + background-color: #e3e3e3; }
  67 + .record-toolbox .console-wrap #toolbar .result-tabs {
  68 + height: 30px;
  69 + border-radius: 30px;
  70 + background-color: #62DCF5;
  71 + overflow: hidden;
  72 + margin: 3px 16px;
  73 + color: #fff; }
  74 + .record-toolbox .console-wrap #toolbar .text {
  75 + color: #fff; }
  76 + .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:focus {
  77 + color: #1FB6FF;
  78 + background-color: #fff;
  79 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  80 + border: none; }
  81 + .record-toolbox .console-wrap #toolbar .result-tabs > li > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover {
  82 + padding: 4px 36px;
  83 + border: none;
  84 + margin: 1px;
  85 + border-radius: 15px;
  86 + font-size: 14px;
  87 + transition: all 0.1s ease; }
  88 + .record-toolbox .console-wrap #toolbar .func {
  89 + height: 36px;
  90 + padding-top: 3px; }
  91 + .record-toolbox #full-screen, .record-toolbox #back-screen {
  92 + margin: 0;
  93 + background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
  94 + border-radius: 100px;
  95 + padding: 6px 7px;
  96 + margin: 0 16px;
  97 + color: #fff; }
  98 + .record-toolbox #resultoutput {
  99 + height: 204px;
  100 + overflow: auto; }
  101 + .record-toolbox #compileBtn {
  102 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  103 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  104 + -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  105 + transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  106 + border: none;
  107 + color: #fff;
  108 + padding-top: 5px;
  109 + padding-bottom: 5px; }
65 110 .record-toolbox .record-ctrl {
66   - height: 60px; }
  111 + height: 60px;
  112 + width: 100%;
  113 + z-index: 999;
  114 + padding: 0 136px;
  115 + background-color: #23383f; }
... ...
src/gxb-ide/CodingEditer.js
  View file @9b3071d
... ... @@ -49,7 +49,7 @@
49 49 console.log('---------------------------')
50 50  
51 51 var treeLinkEditor = Dir.treeLinkEditor;
52   -
  52 + console.log(treeLinkEditor)
53 53 CodingEditer.record_startime = new Date().getTime(); // 设置开始录制的时间
54 54  
55 55 initProgramPage(treeLinkEditor);
... ...
src/gxb-ide/Dir.js
  View file @9b3071d
... ... @@ -48,7 +48,6 @@
48 48 treeLinkEditor: [], // 缓存整个目录树结构和代码编辑器的关系
49 49 mainPath: null, // 运行编译时候需要知道当前是哪个文件
50 50 init: function(){
51   - this.resizeWindow();
52 51 },
53 52 initIdePage: function(el, id){
54 53 var _url = "../js/" + id + ".json";
... ... @@ -61,13 +60,14 @@
61 60 dataType: "json",
62 61 contentType: "application/json",
63 62 success: function(res) {
64   -
  63 + console.log(res);
  64 +
65 65 treeData = res[_lang];
66 66 console.log(treeData);
67   -
68 67 treeObj = $.fn.zTree.init($(el), setting, treeData);
69 68  
70 69 addTextareaPage(treeData);
  70 +
71 71 CodingEditer.initCodeMirror(treeLinkEditor);
72 72  
73 73 },
... ... @@ -76,7 +76,6 @@
76 76 console.log(XMLHttpRequest);
77 77 }
78 78 });
79   - this.resizeWindow();
80 79 },
81 80 showEdite: function(obj){
82 81  
... ... @@ -86,6 +85,7 @@
86 85 _CodeMirrorReplayId,
87 86 _num = 0;
88 87  
  88 + console.log(treeLinkEditor)
89 89 // 判断是否是初始化选时候调用 showEdite
90 90 if(obj){
91 91 for (var i = 0; i < treeLinkEditor.length; i++) {
... ... @@ -363,7 +363,7 @@
363 363 var _file = _datalist[i].name;
364 364 var _name = Dir.manageName(_file);
365 365 var defaultValue;
366   - defaultValue = 'package '+ Dir.getTreePath(_file).split('/')[0] +';\n';
  366 + defaultValue = '';
367 367 treeLinkEditor.push({
368 368 "name": _name,
369 369 "file": _file,
... ... @@ -409,7 +409,7 @@
409 409 _langName = "C++";
410 410 break;
411 411 case 29:
412   - _langName = "PHP";
  412 + _langName = "php";
413 413 break;
414 414 case 4:
415 415 _langName = "python";
... ...
src/gxb-ide/ToolBox.js
  View file @9b3071d
... ... @@ -13,7 +13,7 @@
13 13 "mainArgus": "",
14 14 "runtimeArgus": runtimeArgus,
15 15 "rand": "123456",
16   - "fileList": _fileList
  16 + "fileList": _fileList || []
17 17 }
18 18  
19 19 console.log(compileData);
... ...
src/gxb-ide/idedemo.html
  View file @9b3071d
... ... @@ -52,7 +52,7 @@
52 52 var userId = 826920;
53 53 var ide = new GxbIde({
54 54 el: '#folder',
55   - languageid: 10
  55 + languageid: languageid
56 56 });
57 57  
58 58 $('.getValue').click(function(){
... ... @@ -124,14 +124,15 @@
124 124 <div id="toolbar">
125 125 <!-- Nav tabs -->
126 126 <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
127   - <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
128   - <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
129   - <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
130   - <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
  127 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
  128 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
  129 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
  130 + <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
131 131 </ul>
132   - <div class="pull-right">
  132 + <div class="pull-right func">
133 133 <a class="btn btn-success" id="compileBtn">编译运行</a>
134   - <a class="btn btn-success"><i class="icon iconfont icon-quanping1"></i></a>
  134 + <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>
  135 + <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> -->
135 136 </div>
136 137 </div>
137 138  
... ... @@ -149,7 +150,7 @@
149 150 </div>
150 151 </div>
151 152  
152   - <div class="record-contrl">
  153 + <div class="record-ctrl">
153 154 <button class="btn btn-success getValue">
154 155 播放代码
155 156 </button>
... ...
src/gxb-ide/java.html 0 → 100644
  View file @9b3071d
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>IDE</title>
  6 + <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
  7 + <link href="../css/codemirror.css" rel="stylesheet">
  8 + <link href="../css/reset.css" rel="stylesheet">
  9 + <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
  10 +
  11 + <link href="../common/fonts/iconfont.css" rel="stylesheet">
  12 +
  13 + <link href="../css/cm-theme/gbtags.css" rel="stylesheet">
  14 + <link href="../css/cm-theme/eclipse.css" rel="stylesheet">
  15 + <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">
  16 +
  17 + <!-- <link href="../css/layout.css" rel="stylesheet"> -->
  18 + <!-- <link href="../css/main.css" rel="stylesheet"> -->
  19 +
  20 + <!-- <link href="../css/recording.css" rel="stylesheet"> -->
  21 + <!-- <link rel="stylesheet" href="../css/demo.css"> -->
  22 +
  23 + <link rel="stylesheet" href="../css/ide.css">
  24 +
  25 + <script src="../js/jquery-1.7.1.js"></script>
  26 + <script src="../js/bootstrap.js"></script>
  27 + <script src="../js/codemirror.js"></script>
  28 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
  29 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
  30 + <script src="../js/emmet.js"></script>
  31 + <script src="../js/util/util.js"></script>
  32 +
  33 + <script src="Dir.js"></script>
  34 + <script src="CodingEditer.js"></script>
  35 + <script src="ToolBox.js"></script>
  36 + <script src="Ide.js"></script>
  37 +
  38 + <script src="java.js"></script>
  39 +
  40 + <script src="../js/gbdebug/mode/xml/xml.js"></script>
  41 + <script src="../js/gbdebug/mode/javascript/javascript.js"></script>
  42 + <script src="../js/gbdebug/mode/css/css.js"></script>
  43 + <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>
  44 + <script src="../js/gbdebug/mode/clike/clike.js"></script>
  45 +
  46 + <script>
  47 + var gxb_api = "https://restful1.gaoxiaobang.com";
  48 + // var gxb_api = "http://192.168.80.223:8080"
  49 +
  50 + </script>
  51 +
  52 +</head>
  53 +<body>
  54 + <div>
  55 +
  56 +
  57 + </div>
  58 + <div class="programing">
  59 +
  60 + <!-- 控制条 -->
  61 + <div class="record-title">
  62 + <ul id="recordertab" class="nav nav-tabs pull-left">
  63 + <li class="active">
  64 + <a href="#recordzone" data-toggle="tab">
  65 + <i class="icon iconfont icon-suspend"></i>课程录制区
  66 + </a>
  67 + </li>
  68 + <li>
  69 + <a href="#replayzone" data-toggle="tab">
  70 + <i class="icon iconfont icon-yulan"></i>课程预览区
  71 + </a>
  72 + </li>
  73 + </ul>
  74 + </div>
  75 +
  76 + <!-- 录制区 -->
  77 + <div class="record-wrap">
  78 + <!-- 录制区 -->
  79 + <div class="gxb-record">
  80 + <div id="ideDir">
  81 + <div class="tree-header">目录</div>
  82 + <ul id="folder" class="ztree"></ul>
  83 + <div id="handleLM"></div>
  84 + </div>
  85 +
  86 + <div id="ideEditer" class="tab-content">
  87 + <div id="recordzone" class="tab-pane active"></div>
  88 + <div id="replayzone" class="tab-pane"></div>
  89 + </div>
  90 + </div>
  91 + </div>
  92 +
  93 +
  94 +
  95 + <!-- 控录制录制 -->
  96 + <div class="record-toolbox">
  97 + <!-- 运行结果区 -->
  98 + <div class="console-wrap">
  99 + <div id="toolbar">
  100 + <!-- Nav tabs -->
  101 + <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
  102 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
  103 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
  104 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
  105 + <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
  106 + </ul>
  107 + <div class="pull-right">
  108 + <a class="btn btn-success" id="compileBtn">编译运行</a>
  109 + <a class="btn btn-success"><i class="icon iconfont icon-quanping1"></i></a>
  110 + </div>
  111 + </div>
  112 +
  113 + <!-- Tab panes -->
  114 + <div id="resultoutput" class="tab-content need-compile">
  115 + <div class="tab-pane active padall15" id="stdin">
  116 + <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">
  117 + </div>
  118 + <div class="tab-pane padall15" id="cmpinfo"></div>
  119 + <div class="tab-pane padall15" id="stderr"></div>
  120 + <div class="tab-pane padall15" id="output"></div>
  121 + </div>
  122 + <div class="panel-body no-compile" id="ifrcontainer">
  123 + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
  124 + </div>
  125 + </div>
  126 +
  127 + <div class="record-contrl">
  128 + <button class="btn btn-success getValue">
  129 + 播放代码
  130 + </button>
  131 + </div>
  132 +
  133 + </div>
  134 +
  135 + </div>
  136 +
  137 +</body>
  138 +</html>
0 139 \ No newline at end of file
... ...
src/gxb-ide/java.js 0 → 100644
  View file @9b3071d
  1 +$(function(){
  2 + var languageid = 10;
  3 + var userId = 826920;
  4 + var ide = new GxbIde({
  5 + el: '#folder',
  6 + languageid: languageid
  7 + });
  8 +
  9 + $('.getValue').click(function(){
  10 + // var treeLinkEditor = Dir.treeLinkEditor;
  11 + console.log(CodingEditer.records);
  12 + CodingEditer.getCodeMirrorValue();
  13 + CodingEditer.playCoding();
  14 + })
  15 +
  16 + $('#compileBtn').click(function(){
  17 + ToolBox.compileMode(userId, languageid);
  18 + })
  19 +
  20 +
  21 +
  22 +
  23 +})
0 24 \ No newline at end of file
... ...
src/gxb-ide/web.html 0 → 100644
  View file @9b3071d
src/gxb-ide/web.js 0 → 100644
  View file @9b3071d
src/js/29.json
  View file @9b3071d
1 1 {
2 2 "php": [
3 3 { "id": 1, "pId": 0, "name": "package1", "open": true, "isParent": true, "collapse": false },
4   - { "id": 11, "pId": 1, "name": "default1.java", "type": "java" },
5   - { "id": 12, "pId": 1, "name": "default2.java", "type": "java" },
6   - { "id": 13, "pId": 1, "name": "default3.java", "type": "java" },
7   - { "id": 14, "pId": 1, "name": "default4.java", "type": "java" },
8   - { "id": 15, "pId": 1, "name": "default5.java", "type": "java" },
  4 + { "id": 11, "pId": 1, "name": "default1.php", "type": "php" },
  5 + { "id": 12, "pId": 1, "name": "default2.php", "type": "php" },
  6 + { "id": 13, "pId": 1, "name": "default3.php", "type": "php" },
  7 + { "id": 14, "pId": 1, "name": "default4.php", "type": "php" },
  8 + { "id": 15, "pId": 1, "name": "default5.php", "type": "php" },
9 9 { "id": 2, "pId": 0, "name": "package2", "open": true, "isParent": true, "expand": true },
10   - { "id": 21, "pId": 2, "name": "defaultA.java", "type": "java" },
11   - { "id": 22, "pId": 2, "name": "defaultB.java", "type": "java" },
12   - { "id": 23, "pId": 2, "name": "defaultC.java", "type": "java" },
13   - { "id": 24, "pId": 2, "name": "defaultD.java", "type": "java" },
14   - { "id": 25, "pId": 2, "name": "defaultE.java", "type": "java" }
  10 + { "id": 21, "pId": 2, "name": "defaultA.php", "type": "php" },
  11 + { "id": 22, "pId": 2, "name": "defaultB.php", "type": "php" },
  12 + { "id": 23, "pId": 2, "name": "defaultC.php", "type": "php" },
  13 + { "id": 24, "pId": 2, "name": "defaultD.php", "type": "php" },
  14 + { "id": 25, "pId": 2, "name": "defaultE.php", "type": "php" }
15 15 ]
16 16 }
17 17 \ No newline at end of file
... ...
src/scss/_bootstrapReset.scss
  View file @9b3071d
... ... @@ -2,7 +2,29 @@
2 2 .nav-tabs{
3 3 float: left;
4 4 border-bottom: 0;
5   - }
  5 + }
  6 + #resultoutput{
  7 + .tab-pane{
  8 + padding: 14px;
  9 + }
  10 + }
  11 +
  12 + .record-title{
  13 + .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  14 + color: #fff;
  15 + }
  16 +
  17 + .nav-tabs > li > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  18 + margin-right: 0;
  19 + line-height: 1.428571429;
  20 + border: none !important;
  21 + background: transparent !important;
  22 + height: 36px;
  23 + line-height: 36px;
  24 + padding: 0 12px;
  25 + }
  26 + }
  27 +
6 28 }
7 29  
8 30  
9 31 \ No newline at end of file
... ...
src/scss/main.scss
  View file @9b3071d
... ... @@ -13,12 +13,14 @@ html, body{
13 13 // 头部菜单
14 14 .record-title{
15 15 width: 100%;
16   - height: 60px;
  16 + height: 36px;
17 17 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
18 18 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
19 19 position: absolute;
20 20 top: 0;
21 21 z-index: 9999;
  22 + padding-left: 28px;
  23 +
22 24 }
23 25  
24 26 // 录制区
... ... @@ -27,8 +29,8 @@ html, body{
27 29 height: 100%;
28 30 position: absolute;
29 31 box-sizing: border-box;
30   - padding-top: 60px;
31   - padding-bottom: 280px;
  32 + padding-top: 36px;
  33 + padding-bottom: 300px;
32 34  
33 35 #ideDir{
34 36 width: 170px;
... ... @@ -57,6 +59,7 @@ html, body{
57 59  
58 60 #folder{
59 61 height: 100%;
  62 + min-height: 300px;
60 63 }
61 64  
62 65 .gxb-record{
... ... @@ -70,7 +73,6 @@ html, body{
70 73 width: 100%;
71 74 position: absolute;
72 75 bottom: 0;
73   - background-color: #23383f;
74 76 z-index: 999;
75 77  
76 78 .console-wrap{
... ... @@ -82,12 +84,73 @@ html, body{
82 84 #toolbar{
83 85 width: 100%;
84 86 height: 36px;
85   - background-color: #F0F3F5;
  87 + overflow: hidden;
  88 + background-color: #e3e3e3;
  89 + .result-tabs{
  90 + height: 30px;
  91 + border-radius: 30px;
  92 + background-color: #62DCF5;
  93 + overflow: hidden;
  94 + margin: 3px 16px;
  95 + color: #fff;
  96 + }
  97 + .text{
  98 + color: #fff;
  99 + }
  100 + .result-tabs>li.active>a, .result-tabs>li.active>a:hover, .result-tabs>li>a:hover, .result-tabs>li.active>a:focus{
  101 + color: #1FB6FF;
  102 + background-color: #fff;
  103 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  104 + border: none;
  105 + }
  106 + .result-tabs>li>a, .result-tabs>li.active>a:hover{
  107 + padding: 4px 36px;
  108 + border: none;
  109 + margin: 1px;
  110 + border-radius: 15px;
  111 + font-size: 14px;
  112 + // color: #fff;
  113 + transition: all 0.1s ease;
  114 + }
  115 +
  116 + .func{
  117 + height: 36px;
  118 + padding-top: 3px;
  119 + }
86 120 }
87 121 }
  122 +
  123 + #full-screen, #back-screen{
  124 + margin: 0;
  125 + background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
  126 + border-radius: 100px;
  127 + padding: 6px 7px;
  128 + margin: 0 16px;
  129 + color: #fff;
  130 + }
  131 +
  132 + #resultoutput{
  133 + height: 204px;
  134 + overflow: auto;
  135 + }
  136 +
  137 + #compileBtn{
  138 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  139 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  140 + -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  141 + transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
  142 + border: none;
  143 + color: #fff;
  144 + padding-top: 5px;
  145 + padding-bottom: 5px;
  146 + }
88 147  
89 148 .record-ctrl{
90 149 height: 60px;
  150 + width: 100%;
  151 + z-index: 999;
  152 + padding: 0 136px;
  153 + background-color: #23383f;
91 154 }
92 155 }
93 156  
... ...