修改样式

client/project/elearning-node/pages/static/playright.vue

@@ -62,7 +62,7 @@
     bottom: 0;
     width: 19px;
     height: 100%;
-    font-size: .875em;
+    font-size: 14px;
     color: #969696;
     cursor: pointer;
     i {
@@ -75,152 +75,152 @@
       color: #fff;
     }
   }
-}
-.control-panel {
-  position: relative;
-  height: 100%;
-
-  /* 选择项 */
-  .tab-nav {
-    margin: 0;
-    padding: 15px 0;
-    line-height: 1.6;
-    border-bottom: 0;
-    background-color: #232323;
-    overflow: hidden;
-    li {
-      float: left;
-      position: relative;
-      width: 50%;
-      padding: 0;
-      font-size: 16px;
-      line-height: 28px;
-      color: #909090;
-      text-align: center;
-      list-style: none;
-      cursor: pointer;
-      &.current {
-        color: #b49441;
-      }
-    }
-    .video-jy {
-      border-left: 1px solid #3f3f3f;
-    }
-  }
-  .tab-content {
-    .tab-pane {
-      display: block;
-      height: 100%;
-      overflow: auto;
-    }
+  .control-panel {
+    position: relative;
+    height: 100%;
 
-    /* 章列表样式 */
-    .chapter-list {
+    /* 选择项 */
+    .tab-nav {
       margin: 0;
-      padding: 0;
+      padding: 15px 0;
       line-height: 1.6;
+      border-bottom: 0;
+      background-color: #232323;
       overflow: hidden;
+      li {
+        float: left;
+        position: relative;
+        width: 50%;
+        padding: 0;
+        font-size: 16px;
+        line-height: 28px;
+        color: #909090;
+        text-align: center;
+        list-style: none;
+        cursor: pointer;
+        &.current {
+          color: #b49441;
+        }
+      }
+      .video-jy {
+        border-left: 1px solid #3f3f3f;
+      }
     }
-    .chapter-item {
-      h4 {
-        padding: 10px 22px;
+    .tab-content {
+      .tab-pane {
+        display: block;
+        height: 100%;
+        overflow: auto;
+      }
+
+      /* 章列表样式 */
+      .chapter-list {
         margin: 0;
-        color: #b0b0b0;
-        background-color: #2f2f2f;
+        padding: 0;
+        line-height: 1.6;
+        overflow: hidden;
+        .chapter-item {
+          h4 {
+            padding: 10px 22px;
+            margin: 0;
+            color: #b0b0b0;
+            background-color: #2f2f2f;
+          }
+        }
       }
     }
-  }
 
-  /* 节列表样式 */
-  .knob-list {
-    margin: 0;
-    padding: 0;
-    line-height: 1.6;
-    overflow: hidden;
-    li {
-      position: relative;
-      padding: 0 0 0 23px;
-      &.current {
-        background: #232323;
-        a {
-          color: #b49441;
+    /* 节列表样式 */
+    .knob-list {
+      margin: 0;
+      padding: 0;
+      line-height: 1.6;
+      overflow: hidden;
+      li {
+        position: relative;
+        &.current {
+          background: #232323;
+          a {
+            color: #b49441;
+          }
+        }
+        &:before {
+          display: block;
+          content: "";
+          position: absolute;
+          left: 13px;
+          top: 16px;
+          z-index: 10;
+          width: 18px;
+          height: 18px;
+          background: #5b5b5b;
+          border: 2px solid #5b5b5b;
+          border-radius: 50%;
+        }
+        &:after {
+          display: block;
+          content: "";
+          position: absolute;
+          left: 22px;
+          top: 0;
+          z-index: 5;
+          width: 1px;
+          height: 100px;
+          background: #616161;
         }
       }
-      &:before {
-        display: block;
-        content: "";
+      .knob-progress {
         position: absolute;
+        top: 16px;
         left: 13px;
+        z-index: 20;
+        display: none\0;
+      }
+      .icon-pro {
+        display: none;
+        position: absolute;
         top: 16px;
-        z-index: 10;
-        width: 18px;
-        height: 18px;
-        background: #5b5b5b;
-        border: 2px solid #5b5b5b;
-        border-radius: 50%;
+        left: 23px;
+        z-index: 15;
+        width: 19px;
+        height: 19px;
+        border-radius: 9px;
+        display: block\0;
       }
-      &:after {
+      .knob-name {
         display: block;
-        content: "";
-        position: absolute;
-        left: 22px;
-        top: 0;
-        z-index: 5;
-        width: 1px;
-        height: 100px;
-        background: #616161;
+        padding: 15px 35px 15px 40px;
+        font-size: 14px;
+        color: #909090;
+        text-decoration: none;
+        cursor: pointer;
       }
     }
-    .knob-progress {
-      position: absolute;
-      top: 16px;
-      left: 13px;
-      z-index: 20;
-      display: none\0;
-    }
-    .icon-pro {
-      display: none;
-      position: absolute;
-      top: 16px;
-      left: 23px;
-      z-index: 15;
-      width: 19px;
-      height: 19px;
-      border-radius: 9px;
-      display: block\0;
-    }
-    .knob-name {
-      display: block;
-      padding: 14px 35px 14px 20px;
-      font-size: .875em;
-      color: #909090;
-      text-decoration: none;
-      cursor: pointer;
-    }
   }
-}
 
-/* 章节后面小图标的样式 */
-.el-icon {
-  display: inline-block;
-  position: absolute;
-  right: 13px;
-  top: 19px;
-}
+  /* 章节后面小图标的样式 */
+  .el-icon {
+    display: inline-block;
+    position: absolute;
+    right: 13px;
+    top: 19px;
+  }
 
-/* 讲义列表样式 */
-.jiangyi-list {
-  padding: 8px 16px;
-  li {
+  /* 讲义列表样式 */
+  .jiangyi-list {
     padding: 8px 16px;
-    cursor: pointer;
-    list-style: none;
-    &.current {
-      background: #888;
-    }
-    img {
-      width: 100%;
+    li {
+      padding: 8px 16px;
+      cursor: pointer;
+      list-style: none;
+      &.current {
+        background: #888;
+      }
+      img {
+        width: 100%;
+      }
     }
   }
 }
+
 </style>
\ No newline at end of file