Commit 01f80d3a16559cefa7cb86572ef46fa5f9b9e41f
1 parent
889353e7
fix style
Showing
3 changed files
with
96 additions
and
13 deletions
src/css/mobile.css
| 1 | @media screen and (max-width: 768px) { | 1 | @media screen and (max-width: 768px) { |
| 2 | - .record-wrap #ideDir { | ||
| 3 | - display: none; | 2 | + .player_volume_wrapper { |
| 3 | + display: none !important; } | ||
| 4 | + #componentWrapper .player_mediaTime_total { | ||
| 5 | + border-right: none; } | ||
| 6 | + #componentWrapper .progress_bg { | ||
| 7 | + height: 4px; } | ||
| 8 | + #componentWrapper .load_progress { | ||
| 9 | + height: 4px; } | ||
| 10 | + #componentWrapper .play_progress { | ||
| 11 | + height: 4px; | ||
| 12 | + background: #FFF; } | ||
| 13 | + .m-title-wrap { | ||
| 14 | + width: 100%; | ||
| 15 | + height: 36px; | ||
| 4 | background-color: red; } | 16 | background-color: red; } |
| 17 | + .CodeMirror-gutter { | ||
| 18 | + width: 24px !important; | ||
| 19 | + min-width: 24px !important; } | ||
| 20 | + .record-wrap .m-dir-wrap { | ||
| 21 | + display: none; | ||
| 22 | + background-color: rgba(45, 48, 56, 0.8); | ||
| 23 | + position: absolute; | ||
| 24 | + z-index: 9999; | ||
| 25 | + width: 100%; | ||
| 26 | + height: 100%; } | ||
| 27 | + .record-wrap #ideDir { | ||
| 28 | + height: auto; | ||
| 29 | + float: right; } | ||
| 5 | .record-wrap #ideEditer { | 30 | .record-wrap #ideEditer { |
| 6 | - width: 100%; } | 31 | + width: 100%; |
| 32 | + height: calc(100% - 286px); } | ||
| 7 | .console-wrap { | 33 | .console-wrap { |
| 8 | - padding-left: 0; } | 34 | + padding-left: 0; |
| 35 | + bottom: 40px; | ||
| 36 | + padding-bottom: 40px; | ||
| 37 | + height: auto; } | ||
| 9 | .console-wrap .CodeMirror-gutter { | 38 | .console-wrap .CodeMirror-gutter { |
| 10 | display: none; | 39 | display: none; |
| 11 | - margin-left: 0; } } | 40 | + margin-left: 0; } |
| 41 | + .console-wrap #toolbar { | ||
| 42 | + padding: 0; } | ||
| 43 | + #playFooter { | ||
| 44 | + height: 40px; | ||
| 45 | + background-color: rgba(0, 0, 0, 0.5); | ||
| 46 | + padding: 0px 24px; } } |
src/scss/mobile.scss
| 1 | @media screen and (max-width: 768px) { | 1 | @media screen and (max-width: 768px) { |
| 2 | + .player_volume_wrapper{ | ||
| 3 | + display: none !important; | ||
| 4 | + } | ||
| 5 | + #componentWrapper .player_mediaTime_total{ | ||
| 6 | + border-right: none; | ||
| 7 | + } | ||
| 8 | + #componentWrapper .progress_bg{ | ||
| 9 | + height: 4px; | ||
| 10 | + } | ||
| 11 | + #componentWrapper .load_progress{ | ||
| 12 | + height: 4px; | ||
| 13 | + } | ||
| 14 | + #componentWrapper .play_progress{ | ||
| 15 | + height: 4px; | ||
| 16 | + background: #FFF; | ||
| 17 | + } | ||
| 18 | + .m-title-wrap{ | ||
| 19 | + width: 100%; | ||
| 20 | + height: 36px; | ||
| 21 | + background-color: red; | ||
| 22 | + } | ||
| 23 | + .CodeMirror-gutter { | ||
| 24 | + width: 24px !important; | ||
| 25 | + min-width: 24px !important; | ||
| 26 | + } | ||
| 2 | .record-wrap{ | 27 | .record-wrap{ |
| 3 | - #ideDir{ | 28 | + .m-dir-wrap{ |
| 4 | display: none; | 29 | display: none; |
| 5 | - background-color: red; | 30 | + background-color: rgba(45,48,56,0.8); |
| 31 | + position: absolute; | ||
| 32 | + z-index: 9999; | ||
| 33 | + width: 100%; | ||
| 34 | + height: 100%; | ||
| 35 | + } | ||
| 36 | + #ideDir{ | ||
| 37 | + height: auto; | ||
| 38 | + float: right; | ||
| 6 | } | 39 | } |
| 7 | #ideEditer{ | 40 | #ideEditer{ |
| 8 | width: 100%; | 41 | width: 100%; |
| 42 | + height: calc(100% - 286px); | ||
| 9 | } | 43 | } |
| 10 | } | 44 | } |
| 11 | .console-wrap{ | 45 | .console-wrap{ |
| 12 | padding-left: 0; | 46 | padding-left: 0; |
| 47 | + bottom: 40px; | ||
| 48 | + padding-bottom: 40px; | ||
| 49 | + height: auto; | ||
| 13 | .CodeMirror-gutter{ | 50 | .CodeMirror-gutter{ |
| 14 | display: none; | 51 | display: none; |
| 15 | margin-left: 0; | 52 | margin-left: 0; |
| 16 | } | 53 | } |
| 54 | + #toolbar{ | ||
| 55 | + padding: 0; | ||
| 56 | + } | ||
| 57 | + } | ||
| 58 | + #playFooter { | ||
| 59 | + height: 40px; | ||
| 60 | + background-color: rgba(0,0,0,0.5); | ||
| 61 | + padding: 0px 24px; | ||
| 17 | } | 62 | } |
| 18 | } | 63 | } |
| 19 | \ No newline at end of file | 64 | \ No newline at end of file |
src/v1.1/player.html
| @@ -57,17 +57,20 @@ | @@ -57,17 +57,20 @@ | ||
| 57 | </li> | 57 | </li> |
| 58 | </ul> | 58 | </ul> |
| 59 | </div> | 59 | </div> |
| 60 | - | 60 | + <div class="m-title-wrap"> |
| 61 | + | ||
| 62 | + </div> | ||
| 61 | <!-- 录制区 --> | 63 | <!-- 录制区 --> |
| 62 | <div class="record-wrap"> | 64 | <div class="record-wrap"> |
| 63 | <!-- 录制区 --> | 65 | <!-- 录制区 --> |
| 64 | <div class="gxb-record"> | 66 | <div class="gxb-record"> |
| 65 | - <div id="ideDir"> | ||
| 66 | - <div class="tree-header">目录</div> | ||
| 67 | - <ul id="folder" class="ztree"></ul> | ||
| 68 | - <div id="handleLM"></div> | 67 | + <div class="m-dir-wrap"> |
| 68 | + <div id="ideDir"> | ||
| 69 | + <div class="tree-header">目录</div> | ||
| 70 | + <ul id="folder" class="ztree"></ul> | ||
| 71 | + <div id="handleLM"></div> | ||
| 72 | + </div> | ||
| 69 | </div> | 73 | </div> |
| 70 | - | ||
| 71 | <div id="ideEditer" class="tab-content"> | 74 | <div id="ideEditer" class="tab-content"> |
| 72 | <div id="recordzone" class="tab-pane active"></div> | 75 | <div id="recordzone" class="tab-pane active"></div> |
| 73 | <div id="replayzone" class="tab-pane"></div> | 76 | <div id="replayzone" class="tab-pane"></div> |