add mobile style

ykxie
1 parent 9cd21642
Showing 5 changed files with 104 additions and 8 deletions
src/css/mobile.css
src/img/down.png
src/js/player.js
src/scss/mobile.scss
src/v1.1/player.html
+.m-title-wrap, .m-label {
+  display: none; }
+
 @media screen and (max-width: 768px) {
-  .player_volume_wrapper {
+  .player_volume_wrapper, .ladda-label {
     display: none !important; }
+  .m-label {
+    display: block; }
   #componentWrapper .player_mediaTime_total {
     border-right: none; }
   #componentWrapper .progress_bg {
@@ -13,10 +18,12 @@
   .m-title-wrap {
     width: 100%;
     height: 36px;
-    background-color: red;
+    line-height: 36px;
+    background-color: #FFF;
     display: flex;
     justify-content: space-between;
-    padding: 0 24px; }
+    padding: 0 24px;
+    border-bottom: 1px solid #eee; }
   .CodeMirror-gutter {
     width: 24px !important;
     min-width: 24px !important; }
@@ -46,4 +53,26 @@
   #playFooter {
     height: 40px;
     background-color: rgba(0, 0, 0, 0.5);
-    padding: 0px 24px; } }
+    padding: 0px 24px; }
+  .console-wrap #toolbar .func {
+    height: 56px;
+    padding-top: 0;
+    position: absolute;
+    right: 16px;
+    bottom: 54px;
+    z-index: 9999; }
+  #full-screen {
+    display: none; }
+  .compile-btn {
+    padding: 0;
+    height: 56px;
+    width: 56px;
+    border-radius: 50%;
+    color: #FFF;
+    background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+    background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%); }
+  .m-menu {
+    color: #1FB6FF; }
+    .m-menu img {
+      width: 16px;
+      vertical-align: middle; } }
@@ -4,6 +4,7 @@ $(function(){
     var _role = getQuery('role');
     var _codeReplayId = getQuery('codeReplayId');
     var player = $.AudioPlayer;
+    var status = true;
  
     var languageName = Dir.getLangName(_languageid);
     $("title").html(languageName);
@@ -32,4 +33,16 @@ $(function(){
         CodingEditer.editable(0)
     })
  
+    $('.m-menu').on('click', function(){
+        
+        if (status) {
+            $('.m-dir-wrap').show();
+            status = false;
+        }else{
+            $('.m-dir-wrap').hide();
+            status = true;
+        }
+        
+    })
+
 })
 \ No newline at end of file
+.m-title-wrap, .m-label{
+    display: none;
+}
 @media screen and (max-width: 768px) {
-    .player_volume_wrapper{
+
+    .player_volume_wrapper, .ladda-label{
         display: none !important;
     }
+    .m-label{
+        display: block;
+    }
     #componentWrapper .player_mediaTime_total{
         border-right: none;
     }
@@ -18,10 +25,12 @@
     .m-title-wrap{
         width: 100%;
         height: 36px;
-        background-color: red;
+        line-height: 36px;
+        background-color: #FFF;
         display: flex;
         justify-content: space-between;
         padding: 0 24px;
+        border-bottom: 1px solid #eee;
     }
     .CodeMirror-gutter {
         width: 24px !important;
@@ -63,4 +72,45 @@
         background-color: rgba(0,0,0,0.5);
         padding: 0px 24px;
     }
-}
 \ No newline at end of file
+
+    .console-wrap #toolbar .func {
+        height: 56px;
+        padding-top: 0;
+        position: absolute;
+        right: 16px;
+        bottom: 54px;
+        z-index: 9999;
+    }
+    #full-screen{
+        display: none;
+    }
+    .compile-btn{
+        padding: 0;
+        height: 56px;
+        width: 56px;
+        border-radius: 50%;
+        color: #FFF;
+        background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+        background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
+    }
+
+    .m-menu{
+        color: #1FB6FF;
+        img{
+            width: 16px;
+            vertical-align: middle;
+        }
+    }
+
+    // .ladda-button[data-style=expand-right] .ladda-spinner{
+    //     right: 14px !important;
+    //     top: 14px !important;
+    // }
+
+
+}
+
+
+
+
+
@@ -59,7 +59,7 @@
         </div>
         <div class="m-title-wrap">
             <div class="m-title">创业公司融资的基本流程？创业...</div>
-            <div class="m-menu">mainV</div>
+            <div class="m-menu">main <img src="../img/down.png" alt=""></div>
         </div>
         <!-- 录制区 -->
         <div class="record-wrap">
@@ -91,6 +91,10 @@
                         <div class="pull-right func">
                             <button class="btn compile-btn" id="CompileBtn">
                                 <span class="ladda-label">编译运行</span>
+                                <span class="m-label">
+                                    <p>编译</p>
+                                    <p>运行</p>
+                                </span>
                             </button>
                             <!-- <img src="../img/full-screen-icon.svg" alt=""> -->
                             <a id="full-screen" class="fb">