梁美英 / programming · Commits

Commit 685dd1653b9d5860ae21f520e4dfd05dd6c7bde2

Authored by ykxie
1 parent 208037e6

fix title name

Inline Side-by-side
Showing 10 changed files with 596 additions and 4 deletions
dist/css/loading.css 0 → 100644
  View file @685dd16
  1 +.sk-fading-circle {
  2 + margin: 100px auto;
  3 + width: 40px;
  4 + height: 40px;
  5 + position: relative; }
  6 +
  7 +.sk-fading-circle .sk-circle {
  8 + width: 100%;
  9 + height: 100%;
  10 + position: absolute;
  11 + left: 0;
  12 + top: 0; }
  13 +
  14 +.sk-fading-circle .sk-circle:before {
  15 + content: '';
  16 + display: block;
  17 + margin: 0 auto;
  18 + width: 15%;
  19 + height: 15%;
  20 + background-color: #333;
  21 + border-radius: 100%;
  22 + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  23 + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
  24 +
  25 +.sk-fading-circle .sk-circle2 {
  26 + -webkit-transform: rotate(30deg);
  27 + -ms-transform: rotate(30deg);
  28 + transform: rotate(30deg); }
  29 +
  30 +.sk-fading-circle .sk-circle3 {
  31 + -webkit-transform: rotate(60deg);
  32 + -ms-transform: rotate(60deg);
  33 + transform: rotate(60deg); }
  34 +
  35 +.sk-fading-circle .sk-circle4 {
  36 + -webkit-transform: rotate(90deg);
  37 + -ms-transform: rotate(90deg);
  38 + transform: rotate(90deg); }
  39 +
  40 +.sk-fading-circle .sk-circle5 {
  41 + -webkit-transform: rotate(120deg);
  42 + -ms-transform: rotate(120deg);
  43 + transform: rotate(120deg); }
  44 +
  45 +.sk-fading-circle .sk-circle6 {
  46 + -webkit-transform: rotate(150deg);
  47 + -ms-transform: rotate(150deg);
  48 + transform: rotate(150deg); }
  49 +
  50 +.sk-fading-circle .sk-circle7 {
  51 + -webkit-transform: rotate(180deg);
  52 + -ms-transform: rotate(180deg);
  53 + transform: rotate(180deg); }
  54 +
  55 +.sk-fading-circle .sk-circle8 {
  56 + -webkit-transform: rotate(210deg);
  57 + -ms-transform: rotate(210deg);
  58 + transform: rotate(210deg); }
  59 +
  60 +.sk-fading-circle .sk-circle9 {
  61 + -webkit-transform: rotate(240deg);
  62 + -ms-transform: rotate(240deg);
  63 + transform: rotate(240deg); }
  64 +
  65 +.sk-fading-circle .sk-circle10 {
  66 + -webkit-transform: rotate(270deg);
  67 + -ms-transform: rotate(270deg);
  68 + transform: rotate(270deg); }
  69 +
  70 +.sk-fading-circle .sk-circle11 {
  71 + -webkit-transform: rotate(300deg);
  72 + -ms-transform: rotate(300deg);
  73 + transform: rotate(300deg); }
  74 +
  75 +.sk-fading-circle .sk-circle12 {
  76 + -webkit-transform: rotate(330deg);
  77 + -ms-transform: rotate(330deg);
  78 + transform: rotate(330deg); }
  79 +
  80 +.sk-fading-circle .sk-circle2:before {
  81 + -webkit-animation-delay: -1.1s;
  82 + animation-delay: -1.1s; }
  83 +
  84 +.sk-fading-circle .sk-circle3:before {
  85 + -webkit-animation-delay: -1s;
  86 + animation-delay: -1s; }
  87 +
  88 +.sk-fading-circle .sk-circle4:before {
  89 + -webkit-animation-delay: -0.9s;
  90 + animation-delay: -0.9s; }
  91 +
  92 +.sk-fading-circle .sk-circle5:before {
  93 + -webkit-animation-delay: -0.8s;
  94 + animation-delay: -0.8s; }
  95 +
  96 +.sk-fading-circle .sk-circle6:before {
  97 + -webkit-animation-delay: -0.7s;
  98 + animation-delay: -0.7s; }
  99 +
  100 +.sk-fading-circle .sk-circle7:before {
  101 + -webkit-animation-delay: -0.6s;
  102 + animation-delay: -0.6s; }
  103 +
  104 +.sk-fading-circle .sk-circle8:before {
  105 + -webkit-animation-delay: -0.5s;
  106 + animation-delay: -0.5s; }
  107 +
  108 +.sk-fading-circle .sk-circle9:before {
  109 + -webkit-animation-delay: -0.4s;
  110 + animation-delay: -0.4s; }
  111 +
  112 +.sk-fading-circle .sk-circle10:before {
  113 + -webkit-animation-delay: -0.3s;
  114 + animation-delay: -0.3s; }
  115 +
  116 +.sk-fading-circle .sk-circle11:before {
  117 + -webkit-animation-delay: -0.2s;
  118 + animation-delay: -0.2s; }
  119 +
  120 +.sk-fading-circle .sk-circle12:before {
  121 + -webkit-animation-delay: -0.1s;
  122 + animation-delay: -0.1s; }
  123 +
  124 +@-webkit-keyframes sk-circleFadeDelay {
  125 + 0%, 39%, 100% {
  126 + opacity: 0; }
  127 + 40% {
  128 + opacity: 1; } }
  129 +
  130 +@keyframes sk-circleFadeDelay {
  131 + 0%, 39%, 100% {
  132 + opacity: 0; }
  133 + 40% {
  134 + opacity: 1; } }
dist/gxb-ide/Dir.js
  View file @685dd16
@@ -135,11 +135,15 @@ @@ -135,11 +135,15 @@
135 _num = 0; 135 _num = 0;
136 136
137 console.log(treeLinkEditor) 137 console.log(treeLinkEditor)
  138 +
138 // 判断是否是初始化选时候调用 showEdite 139 // 判断是否是初始化选时候调用 showEdite
139 if(obj){ 140 if(obj){
  141 + console.log('////---------------------------')
  142 + console.log(treeLinkEditor);
140 for (var i = 0; i < treeLinkEditor.length; i++) { 143 for (var i = 0; i < treeLinkEditor.length; i++) {
141 if(treeLinkEditor[i].name == _this.manageName(obj.treeNode.name)){ 144 if(treeLinkEditor[i].name == _this.manageName(obj.treeNode.name)){
142 console.log(_this.manageName(obj.treeNode.name)); 145 console.log(_this.manageName(obj.treeNode.name));
  146 + $('.fileName').html(treeLinkEditor[i].filePath)
143 _num = i; 147 _num = i;
144 } 148 }
145 } 149 }
dist/js/player.js
  View file @685dd16
@@ -41,6 +41,7 @@ $(function(){ @@ -41,6 +41,7 @@ $(function(){
41 41
42 $('.m-menu').on('click', function(e){ 42 $('.m-menu').on('click', function(e){
43 // e.preventDefault(); 43 // e.preventDefault();
  44 + console.log('////==========')
44 if (status) { 45 if (status) {
45 $('.m-dir-wrap').show(); 46 $('.m-dir-wrap').show();
46 status = false; 47 status = false;
@@ -48,7 +49,13 @@ $(function(){ @@ -48,7 +49,13 @@ $(function(){
48 $('.m-dir-wrap').hide(); 49 $('.m-dir-wrap').hide();
49 status = true; 50 status = true;
50 } 51 }
51 - 52 + })
  53 + $('.m-dir-wrap').on('click', function(e){
  54 + console.log('////')
  55 + if (!status) {
  56 + $('.m-dir-wrap').hide();
  57 + status = true;
  58 + }
52 }) 59 })
53 60
54 }) 61 })
55 \ No newline at end of file 62 \ No newline at end of file
dist/scss/loading.scss 0 → 100644
  View file @685dd16
  1 +.sk-fading-circle {
  2 + margin: 100px auto;
  3 + width: 40px;
  4 + height: 40px;
  5 + position: relative;
  6 +}
  7 +
  8 +.sk-fading-circle .sk-circle {
  9 + width: 100%;
  10 + height: 100%;
  11 + position: absolute;
  12 + left: 0;
  13 + top: 0;
  14 +}
  15 +
  16 +.sk-fading-circle .sk-circle:before {
  17 + content: '';
  18 + display: block;
  19 + margin: 0 auto;
  20 + width: 15%;
  21 + height: 15%;
  22 + background-color: #333;
  23 + border-radius: 100%;
  24 + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  25 + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  26 +}
  27 +.sk-fading-circle .sk-circle2 {
  28 + -webkit-transform: rotate(30deg);
  29 + -ms-transform: rotate(30deg);
  30 + transform: rotate(30deg);
  31 +}
  32 +.sk-fading-circle .sk-circle3 {
  33 + -webkit-transform: rotate(60deg);
  34 + -ms-transform: rotate(60deg);
  35 + transform: rotate(60deg);
  36 +}
  37 +.sk-fading-circle .sk-circle4 {
  38 + -webkit-transform: rotate(90deg);
  39 + -ms-transform: rotate(90deg);
  40 + transform: rotate(90deg);
  41 +}
  42 +.sk-fading-circle .sk-circle5 {
  43 + -webkit-transform: rotate(120deg);
  44 + -ms-transform: rotate(120deg);
  45 + transform: rotate(120deg);
  46 +}
  47 +.sk-fading-circle .sk-circle6 {
  48 + -webkit-transform: rotate(150deg);
  49 + -ms-transform: rotate(150deg);
  50 + transform: rotate(150deg);
  51 +}
  52 +.sk-fading-circle .sk-circle7 {
  53 + -webkit-transform: rotate(180deg);
  54 + -ms-transform: rotate(180deg);
  55 + transform: rotate(180deg);
  56 +}
  57 +.sk-fading-circle .sk-circle8 {
  58 + -webkit-transform: rotate(210deg);
  59 + -ms-transform: rotate(210deg);
  60 + transform: rotate(210deg);
  61 +}
  62 +.sk-fading-circle .sk-circle9 {
  63 + -webkit-transform: rotate(240deg);
  64 + -ms-transform: rotate(240deg);
  65 + transform: rotate(240deg);
  66 +}
  67 +.sk-fading-circle .sk-circle10 {
  68 + -webkit-transform: rotate(270deg);
  69 + -ms-transform: rotate(270deg);
  70 + transform: rotate(270deg);
  71 +}
  72 +.sk-fading-circle .sk-circle11 {
  73 + -webkit-transform: rotate(300deg);
  74 + -ms-transform: rotate(300deg);
  75 + transform: rotate(300deg);
  76 +}
  77 +.sk-fading-circle .sk-circle12 {
  78 + -webkit-transform: rotate(330deg);
  79 + -ms-transform: rotate(330deg);
  80 + transform: rotate(330deg);
  81 +}
  82 +.sk-fading-circle .sk-circle2:before {
  83 + -webkit-animation-delay: -1.1s;
  84 + animation-delay: -1.1s;
  85 +}
  86 +.sk-fading-circle .sk-circle3:before {
  87 + -webkit-animation-delay: -1s;
  88 + animation-delay: -1s;
  89 +}
  90 +.sk-fading-circle .sk-circle4:before {
  91 + -webkit-animation-delay: -0.9s;
  92 + animation-delay: -0.9s;
  93 +}
  94 +.sk-fading-circle .sk-circle5:before {
  95 + -webkit-animation-delay: -0.8s;
  96 + animation-delay: -0.8s;
  97 +}
  98 +.sk-fading-circle .sk-circle6:before {
  99 + -webkit-animation-delay: -0.7s;
  100 + animation-delay: -0.7s;
  101 +}
  102 +.sk-fading-circle .sk-circle7:before {
  103 + -webkit-animation-delay: -0.6s;
  104 + animation-delay: -0.6s;
  105 +}
  106 +.sk-fading-circle .sk-circle8:before {
  107 + -webkit-animation-delay: -0.5s;
  108 + animation-delay: -0.5s;
  109 +}
  110 +.sk-fading-circle .sk-circle9:before {
  111 + -webkit-animation-delay: -0.4s;
  112 + animation-delay: -0.4s;
  113 +}
  114 +.sk-fading-circle .sk-circle10:before {
  115 + -webkit-animation-delay: -0.3s;
  116 + animation-delay: -0.3s;
  117 +}
  118 +.sk-fading-circle .sk-circle11:before {
  119 + -webkit-animation-delay: -0.2s;
  120 + animation-delay: -0.2s;
  121 +}
  122 +.sk-fading-circle .sk-circle12:before {
  123 + -webkit-animation-delay: -0.1s;
  124 + animation-delay: -0.1s;
  125 +}
  126 +
  127 +@-webkit-keyframes sk-circleFadeDelay {
  128 + 0%, 39%, 100% { opacity: 0; }
  129 + 40% { opacity: 1; }
  130 +}
  131 +
  132 +@keyframes sk-circleFadeDelay {
  133 + 0%, 39%, 100% { opacity: 0; }
  134 + 40% { opacity: 1; }
  135 +}
0 \ No newline at end of file 136 \ No newline at end of file
dist/v1.1/player.html
  View file @685dd16
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 <link rel="stylesheet" href="../gxb-ide/toolBox.css"> 20 <link rel="stylesheet" href="../gxb-ide/toolBox.css">
21 <link rel="stylesheet" href="../css/ide.css"> 21 <link rel="stylesheet" href="../css/ide.css">
22 <link rel="stylesheet" href="../css/mobile.css"> 22 <link rel="stylesheet" href="../css/mobile.css">
  23 + <link rel="stylesheet" href="../css/loading.css">
23 24
24 <script> 25 <script>
25 var gxb_api = "https://restful.gaoxiaobang.com"; 26 var gxb_api = "https://restful.gaoxiaobang.com";
@@ -59,7 +60,7 @@ @@ -59,7 +60,7 @@
59 </div> 60 </div>
60 <div class="m-title-wrap"> 61 <div class="m-title-wrap">
61 <div class="m-title">章节名称</div> 62 <div class="m-title">章节名称</div>
62 - <div class="m-menu">目录 <img src="../img/down.png" alt=""></div> 63 + <div class="m-menu"><span class="fileName"></span> <img src="../img/down.png" alt=""></div>
63 </div> 64 </div>
64 <!-- 录制区 --> 65 <!-- 录制区 -->
65 <div class="record-wrap"> 66 <div class="record-wrap">
@@ -167,6 +168,21 @@ @@ -167,6 +168,21 @@
167 <div class="upload-tip" style="display: none;"> 168 <div class="upload-tip" style="display: none;">
168 <img src="../img/upload_tip.png" alt=""> 169 <img src="../img/upload_tip.png" alt="">
169 </div> 170 </div>
  171 +
  172 + <!-- <div class="sk-fading-circle">
  173 + <div class="sk-circle1 sk-circle"></div>
  174 + <div class="sk-circle2 sk-circle"></div>
  175 + <div class="sk-circle3 sk-circle"></div>
  176 + <div class="sk-circle4 sk-circle"></div>
  177 + <div class="sk-circle5 sk-circle"></div>
  178 + <div class="sk-circle6 sk-circle"></div>
  179 + <div class="sk-circle7 sk-circle"></div>
  180 + <div class="sk-circle8 sk-circle"></div>
  181 + <div class="sk-circle9 sk-circle"></div>
  182 + <div class="sk-circle10 sk-circle"></div>
  183 + <div class="sk-circle11 sk-circle"></div>
  184 + <div class="sk-circle12 sk-circle"></div>
  185 + </div> -->
170 186
171 </div> 187 </div>
172 188
src/css/loading.css 0 → 100644
  View file @685dd16
  1 +.sk-fading-circle {
  2 + margin: 100px auto;
  3 + width: 40px;
  4 + height: 40px;
  5 + position: relative; }
  6 +
  7 +.sk-fading-circle .sk-circle {
  8 + width: 100%;
  9 + height: 100%;
  10 + position: absolute;
  11 + left: 0;
  12 + top: 0; }
  13 +
  14 +.sk-fading-circle .sk-circle:before {
  15 + content: '';
  16 + display: block;
  17 + margin: 0 auto;
  18 + width: 15%;
  19 + height: 15%;
  20 + background-color: #333;
  21 + border-radius: 100%;
  22 + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  23 + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
  24 +
  25 +.sk-fading-circle .sk-circle2 {
  26 + -webkit-transform: rotate(30deg);
  27 + -ms-transform: rotate(30deg);
  28 + transform: rotate(30deg); }
  29 +
  30 +.sk-fading-circle .sk-circle3 {
  31 + -webkit-transform: rotate(60deg);
  32 + -ms-transform: rotate(60deg);
  33 + transform: rotate(60deg); }
  34 +
  35 +.sk-fading-circle .sk-circle4 {
  36 + -webkit-transform: rotate(90deg);
  37 + -ms-transform: rotate(90deg);
  38 + transform: rotate(90deg); }
  39 +
  40 +.sk-fading-circle .sk-circle5 {
  41 + -webkit-transform: rotate(120deg);
  42 + -ms-transform: rotate(120deg);
  43 + transform: rotate(120deg); }
  44 +
  45 +.sk-fading-circle .sk-circle6 {
  46 + -webkit-transform: rotate(150deg);
  47 + -ms-transform: rotate(150deg);
  48 + transform: rotate(150deg); }
  49 +
  50 +.sk-fading-circle .sk-circle7 {
  51 + -webkit-transform: rotate(180deg);
  52 + -ms-transform: rotate(180deg);
  53 + transform: rotate(180deg); }
  54 +
  55 +.sk-fading-circle .sk-circle8 {
  56 + -webkit-transform: rotate(210deg);
  57 + -ms-transform: rotate(210deg);
  58 + transform: rotate(210deg); }
  59 +
  60 +.sk-fading-circle .sk-circle9 {
  61 + -webkit-transform: rotate(240deg);
  62 + -ms-transform: rotate(240deg);
  63 + transform: rotate(240deg); }
  64 +
  65 +.sk-fading-circle .sk-circle10 {
  66 + -webkit-transform: rotate(270deg);
  67 + -ms-transform: rotate(270deg);
  68 + transform: rotate(270deg); }
  69 +
  70 +.sk-fading-circle .sk-circle11 {
  71 + -webkit-transform: rotate(300deg);
  72 + -ms-transform: rotate(300deg);
  73 + transform: rotate(300deg); }
  74 +
  75 +.sk-fading-circle .sk-circle12 {
  76 + -webkit-transform: rotate(330deg);
  77 + -ms-transform: rotate(330deg);
  78 + transform: rotate(330deg); }
  79 +
  80 +.sk-fading-circle .sk-circle2:before {
  81 + -webkit-animation-delay: -1.1s;
  82 + animation-delay: -1.1s; }
  83 +
  84 +.sk-fading-circle .sk-circle3:before {
  85 + -webkit-animation-delay: -1s;
  86 + animation-delay: -1s; }
  87 +
  88 +.sk-fading-circle .sk-circle4:before {
  89 + -webkit-animation-delay: -0.9s;
  90 + animation-delay: -0.9s; }
  91 +
  92 +.sk-fading-circle .sk-circle5:before {
  93 + -webkit-animation-delay: -0.8s;
  94 + animation-delay: -0.8s; }
  95 +
  96 +.sk-fading-circle .sk-circle6:before {
  97 + -webkit-animation-delay: -0.7s;
  98 + animation-delay: -0.7s; }
  99 +
  100 +.sk-fading-circle .sk-circle7:before {
  101 + -webkit-animation-delay: -0.6s;
  102 + animation-delay: -0.6s; }
  103 +
  104 +.sk-fading-circle .sk-circle8:before {
  105 + -webkit-animation-delay: -0.5s;
  106 + animation-delay: -0.5s; }
  107 +
  108 +.sk-fading-circle .sk-circle9:before {
  109 + -webkit-animation-delay: -0.4s;
  110 + animation-delay: -0.4s; }
  111 +
  112 +.sk-fading-circle .sk-circle10:before {
  113 + -webkit-animation-delay: -0.3s;
  114 + animation-delay: -0.3s; }
  115 +
  116 +.sk-fading-circle .sk-circle11:before {
  117 + -webkit-animation-delay: -0.2s;
  118 + animation-delay: -0.2s; }
  119 +
  120 +.sk-fading-circle .sk-circle12:before {
  121 + -webkit-animation-delay: -0.1s;
  122 + animation-delay: -0.1s; }
  123 +
  124 +@-webkit-keyframes sk-circleFadeDelay {
  125 + 0%, 39%, 100% {
  126 + opacity: 0; }
  127 + 40% {
  128 + opacity: 1; } }
  129 +
  130 +@keyframes sk-circleFadeDelay {
  131 + 0%, 39%, 100% {
  132 + opacity: 0; }
  133 + 40% {
  134 + opacity: 1; } }
src/gxb-ide/Dir.js
  View file @685dd16
@@ -135,11 +135,15 @@ @@ -135,11 +135,15 @@
135 _num = 0; 135 _num = 0;
136 136
137 console.log(treeLinkEditor) 137 console.log(treeLinkEditor)
  138 +
138 // 判断是否是初始化选时候调用 showEdite 139 // 判断是否是初始化选时候调用 showEdite
139 if(obj){ 140 if(obj){
  141 + console.log('////---------------------------')
  142 + console.log(treeLinkEditor);
140 for (var i = 0; i < treeLinkEditor.length; i++) { 143 for (var i = 0; i < treeLinkEditor.length; i++) {
141 if(treeLinkEditor[i].name == _this.manageName(obj.treeNode.name)){ 144 if(treeLinkEditor[i].name == _this.manageName(obj.treeNode.name)){
142 console.log(_this.manageName(obj.treeNode.name)); 145 console.log(_this.manageName(obj.treeNode.name));
  146 + $('.fileName').html(treeLinkEditor[i].filePath)
143 _num = i; 147 _num = i;
144 } 148 }
145 } 149 }
src/js/player.js
  View file @685dd16
@@ -41,6 +41,7 @@ $(function(){ @@ -41,6 +41,7 @@ $(function(){
41 41
42 $('.m-menu').on('click', function(e){ 42 $('.m-menu').on('click', function(e){
43 // e.preventDefault(); 43 // e.preventDefault();
  44 + console.log('////==========')
44 if (status) { 45 if (status) {
45 $('.m-dir-wrap').show(); 46 $('.m-dir-wrap').show();
46 status = false; 47 status = false;
@@ -48,7 +49,13 @@ $(function(){ @@ -48,7 +49,13 @@ $(function(){
48 $('.m-dir-wrap').hide(); 49 $('.m-dir-wrap').hide();
49 status = true; 50 status = true;
50 } 51 }
51 - 52 + })
  53 + $('.m-dir-wrap').on('click', function(e){
  54 + console.log('////')
  55 + if (!status) {
  56 + $('.m-dir-wrap').hide();
  57 + status = true;
  58 + }
52 }) 59 })
53 60
54 }) 61 })
55 \ No newline at end of file 62 \ No newline at end of file
src/scss/loading.scss 0 → 100644
  View file @685dd16
  1 +.sk-fading-circle {
  2 + margin: 100px auto;
  3 + width: 40px;
  4 + height: 40px;
  5 + position: relative;
  6 +}
  7 +
  8 +.sk-fading-circle .sk-circle {
  9 + width: 100%;
  10 + height: 100%;
  11 + position: absolute;
  12 + left: 0;
  13 + top: 0;
  14 +}
  15 +
  16 +.sk-fading-circle .sk-circle:before {
  17 + content: '';
  18 + display: block;
  19 + margin: 0 auto;
  20 + width: 15%;
  21 + height: 15%;
  22 + background-color: #333;
  23 + border-radius: 100%;
  24 + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  25 + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  26 +}
  27 +.sk-fading-circle .sk-circle2 {
  28 + -webkit-transform: rotate(30deg);
  29 + -ms-transform: rotate(30deg);
  30 + transform: rotate(30deg);
  31 +}
  32 +.sk-fading-circle .sk-circle3 {
  33 + -webkit-transform: rotate(60deg);
  34 + -ms-transform: rotate(60deg);
  35 + transform: rotate(60deg);
  36 +}
  37 +.sk-fading-circle .sk-circle4 {
  38 + -webkit-transform: rotate(90deg);
  39 + -ms-transform: rotate(90deg);
  40 + transform: rotate(90deg);
  41 +}
  42 +.sk-fading-circle .sk-circle5 {
  43 + -webkit-transform: rotate(120deg);
  44 + -ms-transform: rotate(120deg);
  45 + transform: rotate(120deg);
  46 +}
  47 +.sk-fading-circle .sk-circle6 {
  48 + -webkit-transform: rotate(150deg);
  49 + -ms-transform: rotate(150deg);
  50 + transform: rotate(150deg);
  51 +}
  52 +.sk-fading-circle .sk-circle7 {
  53 + -webkit-transform: rotate(180deg);
  54 + -ms-transform: rotate(180deg);
  55 + transform: rotate(180deg);
  56 +}
  57 +.sk-fading-circle .sk-circle8 {
  58 + -webkit-transform: rotate(210deg);
  59 + -ms-transform: rotate(210deg);
  60 + transform: rotate(210deg);
  61 +}
  62 +.sk-fading-circle .sk-circle9 {
  63 + -webkit-transform: rotate(240deg);
  64 + -ms-transform: rotate(240deg);
  65 + transform: rotate(240deg);
  66 +}
  67 +.sk-fading-circle .sk-circle10 {
  68 + -webkit-transform: rotate(270deg);
  69 + -ms-transform: rotate(270deg);
  70 + transform: rotate(270deg);
  71 +}
  72 +.sk-fading-circle .sk-circle11 {
  73 + -webkit-transform: rotate(300deg);
  74 + -ms-transform: rotate(300deg);
  75 + transform: rotate(300deg);
  76 +}
  77 +.sk-fading-circle .sk-circle12 {
  78 + -webkit-transform: rotate(330deg);
  79 + -ms-transform: rotate(330deg);
  80 + transform: rotate(330deg);
  81 +}
  82 +.sk-fading-circle .sk-circle2:before {
  83 + -webkit-animation-delay: -1.1s;
  84 + animation-delay: -1.1s;
  85 +}
  86 +.sk-fading-circle .sk-circle3:before {
  87 + -webkit-animation-delay: -1s;
  88 + animation-delay: -1s;
  89 +}
  90 +.sk-fading-circle .sk-circle4:before {
  91 + -webkit-animation-delay: -0.9s;
  92 + animation-delay: -0.9s;
  93 +}
  94 +.sk-fading-circle .sk-circle5:before {
  95 + -webkit-animation-delay: -0.8s;
  96 + animation-delay: -0.8s;
  97 +}
  98 +.sk-fading-circle .sk-circle6:before {
  99 + -webkit-animation-delay: -0.7s;
  100 + animation-delay: -0.7s;
  101 +}
  102 +.sk-fading-circle .sk-circle7:before {
  103 + -webkit-animation-delay: -0.6s;
  104 + animation-delay: -0.6s;
  105 +}
  106 +.sk-fading-circle .sk-circle8:before {
  107 + -webkit-animation-delay: -0.5s;
  108 + animation-delay: -0.5s;
  109 +}
  110 +.sk-fading-circle .sk-circle9:before {
  111 + -webkit-animation-delay: -0.4s;
  112 + animation-delay: -0.4s;
  113 +}
  114 +.sk-fading-circle .sk-circle10:before {
  115 + -webkit-animation-delay: -0.3s;
  116 + animation-delay: -0.3s;
  117 +}
  118 +.sk-fading-circle .sk-circle11:before {
  119 + -webkit-animation-delay: -0.2s;
  120 + animation-delay: -0.2s;
  121 +}
  122 +.sk-fading-circle .sk-circle12:before {
  123 + -webkit-animation-delay: -0.1s;
  124 + animation-delay: -0.1s;
  125 +}
  126 +
  127 +@-webkit-keyframes sk-circleFadeDelay {
  128 + 0%, 39%, 100% { opacity: 0; }
  129 + 40% { opacity: 1; }
  130 +}
  131 +
  132 +@keyframes sk-circleFadeDelay {
  133 + 0%, 39%, 100% { opacity: 0; }
  134 + 40% { opacity: 1; }
  135 +}
0 \ No newline at end of file 136 \ No newline at end of file
src/v1.1/player.html
  View file @685dd16
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 <link rel="stylesheet" href="../gxb-ide/toolBox.css"> 20 <link rel="stylesheet" href="../gxb-ide/toolBox.css">
21 <link rel="stylesheet" href="../css/ide.css"> 21 <link rel="stylesheet" href="../css/ide.css">
22 <link rel="stylesheet" href="../css/mobile.css"> 22 <link rel="stylesheet" href="../css/mobile.css">
  23 + <link rel="stylesheet" href="../css/loading.css">
23 24
24 <script> 25 <script>
25 var gxb_api = "https://restful.gaoxiaobang.com"; 26 var gxb_api = "https://restful.gaoxiaobang.com";
@@ -59,7 +60,7 @@ @@ -59,7 +60,7 @@
59 </div> 60 </div>
60 <div class="m-title-wrap"> 61 <div class="m-title-wrap">
61 <div class="m-title">章节名称</div> 62 <div class="m-title">章节名称</div>
62 - <div class="m-menu">目录 <img src="../img/down.png" alt=""></div> 63 + <div class="m-menu"><span class="fileName"></span> <img src="../img/down.png" alt=""></div>
63 </div> 64 </div>
64 <!-- 录制区 --> 65 <!-- 录制区 -->
65 <div class="record-wrap"> 66 <div class="record-wrap">
@@ -167,6 +168,21 @@ @@ -167,6 +168,21 @@
167 <div class="upload-tip" style="display: none;"> 168 <div class="upload-tip" style="display: none;">
168 <img src="../img/upload_tip.png" alt=""> 169 <img src="../img/upload_tip.png" alt="">
169 </div> 170 </div>
  171 +
  172 + <!-- <div class="sk-fading-circle">
  173 + <div class="sk-circle1 sk-circle"></div>
  174 + <div class="sk-circle2 sk-circle"></div>
  175 + <div class="sk-circle3 sk-circle"></div>
  176 + <div class="sk-circle4 sk-circle"></div>
  177 + <div class="sk-circle5 sk-circle"></div>
  178 + <div class="sk-circle6 sk-circle"></div>
  179 + <div class="sk-circle7 sk-circle"></div>
  180 + <div class="sk-circle8 sk-circle"></div>
  181 + <div class="sk-circle9 sk-circle"></div>
  182 + <div class="sk-circle10 sk-circle"></div>
  183 + <div class="sk-circle11 sk-circle"></div>
  184 + <div class="sk-circle12 sk-circle"></div>
  185 + </div> -->
170 186
171 </div> 187 </div>
172 188