样式优化

zhiyangdu
1 parent 59fde423
Showing 2 changed files with 21 additions and 5 deletions
src/pages/index/index.less
src/pages/index/index.vue
@@ -4,8 +4,9 @@
     div{
         margin-top: -1px;
         overflow: hidden;
+        display: block
     }
-    div:first-child{
+    .first_item{
         width: 100%;
         height: 836px;
         background: #bd3325 url("../../../static/img/index/1.jpg") no-repeat center top;
@@ -37,6 +38,11 @@
         height: 806px;
         background: #bd3325 url("../../../static/img/index/3.jpg") no-repeat center top;
         background-size: 100%;
+        .video_box{
+            width: 713px !important;
+            height: 401px !important;
+            margin:  85px 18px 0 18px;
+        }
     }
     div:nth-child(4){
         width: 100%;
@@ -124,3 +130,10 @@
         background-size: 100%;
     }
 }
+// 设置播放器的背景颜色
+.vjs-poster{
+    background-color: transparent !important;
+    //.vjs-poster{
+    //    background-color: transparent;
+    //}
+}
 <template>
     <div>
         <div class="box">
-            <div></div>
+            <div class="first_item"></div>
             <!--商品列表-->
             <div class="item">
                 <div>
@@ -12,6 +12,7 @@
             </div>
             <!--视频-->
             <div>
+                <div class="video_box">
                 <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay($event)"
                               ref="videoPlayer"
                               :playsinline="playsinline"
@@ -19,6 +20,7 @@
                               x5-playsinline
                               webkit-playsinline>
                 </video-player>
+                </div>
             </div>
  
             <div></div>
@@ -79,7 +81,7 @@
                     fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                     sources: [],
                     hls: true, // 启用hls？
-                    poster: '../../../static/img/index/15.jpg', // 你的封面地址
+                    poster: '../../../static/img/index/video1.png', // 你的封面地址
                     width: document.documentElement.clientWidth || document.body.clientWidth,
                     notSupportedMessage: '此视频暂无法播放，请稍后再试' //  允许覆盖Video.js无法播放媒体源时显示的默认信息。
                 },
@@ -99,7 +101,8 @@
             onPlayerPlay($event) {
                 if(this.isiPhone.value && window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.CNDSPlayer) {
                     window.webkit.messageHandlers.CNDSPlayer.postMessage({body: {
-                        playUrl: this.playerOptions.sources[0].src, // 视频URL
+                        playUrl:"https://v.youku.com/v_show/id_XNDQyOTAxNjE2MA==.html?s=e438e14b3fa94613a1bb&scm=20140719.manual.15319.show_e438e14b3fa94613a1bb",
+//                        playUrl: this.playerOptions.sources[0].src, // 视频URL
                         isLive: 0 // 0录播1直播
                     }});
                 }
@@ -110,5 +113,5 @@
  
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import "./index";
+    @import "index";
 </style>