修改课件样式

src/components/course/course-ware.vue

@@ -10,6 +10,7 @@
 */
 import pdfJS from 'pdfjs-dist/es5/build/pdf';
 pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcdn.net/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js';
+import coverImg from '@/images/course/lock-big.png';
 
 export default {
   props: {
@@ -58,10 +59,13 @@ export default {
     createCanvas(pdfPage) {
       let viewport = pdfPage.getViewport({ scale: 1.0 });
       let box = document.createElement("div");
-      box.className = 'canvas-box';
+      box.style.position = 'relative';
+      box.style.marginBottom = '30px';
       let canvas = document.createElement("canvas");
       canvas.width = viewport.width;
       canvas.height = viewport.height;
+      canvas.style.display = 'block';
+      canvas.style.width = '100%';
       let ctx = canvas.getContext("2d");
       let renderTask = pdfPage.render({
         canvasContext: ctx,
@@ -70,7 +74,14 @@ export default {
       box.appendChild(canvas);
       if (!this.visible) {
         let cover = document.createElement("div");
-        cover.className = 'canvas-cover';
+        cover.style.position = 'absolute';
+        cover.style.left = '0';
+        cover.style.top = '0';
+        cover.style.width = '100%';
+        cover.style.height = '100%';
+        cover.style.background = `url(${coverImg}) no-repeat center center`;
+        cover.style.backgroundSize = '50px auto';
+        cover.style.backgroundColor = 'rgba(255, 255, 255, .2)';
         cover.onclick = () => {
           if (!this.$store.getter.logged) {
             this.$store.dispatch('goLogin');
@@ -90,23 +101,5 @@ export default {
 .course-ware{
   padding-top: 20px;
   overflow: hidden;
-  /deep/ .canvas-box{
-    position: relative;
-    margin-bottom: 30px;
-  }
-  /deep/ .canvas-cover{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: url('~@/images/course/lock-big.png') no-repeat center center;
-    background-size: 50px auto;
-    background-color: rgba(255, 255, 255, .2);
-  }
-  /deep/ canvas{
-    display: block;
-    width: 100%;
-  }
 }
 </style>