fix video style

@@ -14,6 +14,7 @@
         To view this video please enable JavaScript, and consider upgrading to a
         web browser
       </p>
+      <div class="vjs-yoho-voice"></div>
     </video>
   </div>
 </template>
@@ -53,6 +54,19 @@ export default {
   },
   mounted() {
     this.player = videojs(this.$refs.videoPlayer, this.options);
+
+    this.voiceBtn = this.player.addChild('button');
+    this.voiceBtn.addClass('vjs-yoho-voice');
+    this.voiceBtn.addClass('vjs-yoho-novoice');
+    this.backBtn = this.player.addChild('button');
+    this.backBtn.addClass('vjs-yoho-back');
+    this.voiceBtn.on('touchend', () => {
+      this.voiceBtn.toggleClass('vjs-yoho-novoice');
+      this.player.muted(this.voiceBtn.hasClass('vjs-yoho-novoice'));
+    });
+    this.backBtn.on('touchend', () => {
+      this.player.exitFullscreen();
+    });
   },
   beforeDestroy() {
     if (this.player) {
@@ -72,34 +86,156 @@ export default {
     }
 
     &.vjs-yoho /deep/ {
+      position: relative;
+      background-color: #222;
+
+      .vjs-poster {
+        background-color: #222;
+      }
+
+      .vjs-yoho-voice {
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        top: 20px;
+        right: 28px;
+        display: none;
+        background: url("~statics/image/components/video-voice-icon.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        &.vjs-yoho-novoice {
+          background-position: bottom left;
+        }
+      }
+
+      &.vjs-has-started .vjs-yoho-voice {
+        display: block;
+      }
+
       .vjs-big-play-button {
-        width: 120px;
-        height: 120px;
-        line-height: 120px;
+        width: 126px;
+        height: 126px;
+        line-height: 126px;
         font-size: 60px;
-        border-radius: 50%;
+        border: none;
         left: 50%;
         top: 50%;
         margin: -60px auto auto -60px;
+        background: url("~statics/image/components/video-play-btn.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+
+        > * {
+          display: none;
+        }
       }
 
       .vjs-control-bar {
-        height: 60px;
-        font-size: 26px;
+        height: 80px;
+        opacity: 1 !important;
+        background-color: rgba(44, 44, 44, 0.2);
+        padding-bottom: 20px;
 
         .vjs-control {
           width: 80px;
         }
 
+        .vjs-play-control {
+          width: 60px;
+          height: 60px;
+          margin-left: 20px;
+          background: url("~statics/image/components/video-play-icon.png");
+          background-size: cover;
+
+          &.vjs-playing {
+            background-position: bottom left;
+          }
+
+          > * {
+            display: none;
+          }
+        }
+
+        .vjs-volume-panel {
+          display: none;
+        }
+
+        .vjs-duration,
+        .vjs-current-time {
+          display: block;
+          order: 3;
+
+          > span {
+            font-size: 22px;
+            font-weight: 300;
+          }
+        }
+
         .vjs-time-control {
           line-height: 60px;
         }
 
+        .vjs-current-time {
+          order: 1;
+        }
+
+        .vjs-remaining-time {
+          display: none;
+        }
+
+        .vjs-progress-control {
+          order: 2;
+
+          .vjs-progress-holder {
+            margin: 0;
+          }
+
+          .vjs-progress-holder,
+          .vjs-load-progress,
+          .vjs-play-progress {
+            height: 1px;
+          }
+
+          .vjs-play-progress:before {
+            font-size: 10px;
+            top: -4px;
+          }
+        }
+
+        .vjs-fullscreen-control {
+          order: 4;
+          width: 60px;
+          height: 60px;
+          margin-right: 20px;
+          background: url("~statics/image/components/video-fullscreen-icon.png");
+          background-size: cover;
+
+          > * {
+            display: none;
+          }
+        }
+
         .vjs-icon-placeholder:before {
           font-size: 38px;
           line-height: 60px;
         }
       }
+
+      &.vjs-fullscreen .vjs-fullscreen-control {
+        background-position: bottom left;
+      }
+
+      &.vjs-fullscreen .vjs-yoho-back {
+        width: 40px;
+        height: 42px;
+        background: url("~statics/image/components/video-back-icon.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        position: absolute;
+        top: 20px;
+        left: 32px;
+      }
     }
   }
 </style>

@@ -85,11 +85,11 @@ function setArticleList(state, data, type, thumb) {
 
     }
 
-    imageBlocks.forEach((img, inx) => {
+    imageBlocks.forEach((img) => {
       let {width, height} = getArticleImageSize({
         width: img.width,
         height: img.height,
-        minScale: inx === 0 ? (3 / 4) : 0
+        minScale: 0
       });
 
       if (thumb) {
@@ -335,11 +335,11 @@ export default {
     } else {
       const imageBlocks = get(article, 'blockList', []).filter(block => block.templateKey === 'image');
 
-      imageBlocks.forEach((img, inx) => {
+      imageBlocks.forEach((img) => {
         let {width, height} = getArticleImageSize({
           width: img.width,
           height: img.height,
-          minScale: inx === 0 ? (3 / 4) : 0
+          minScale: 0
         });
 
         if (local) {