细节修改

package.json

@@ -14,10 +14,12 @@
     "core-js": "^2.6.5",
     "echarts": "^5.2.2",
     "element-ui": "^2.15.2",
+    "flv.js": "^1.6.2",
     "font-awesome": "^4.7.0",
     "less-loader": "5.0.0",
     "node-modules": "^1.0.1",
     "pinyin-pro": "^3.7.1",
+    "videojs-contrib-hls": "^5.15.0",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-awesome": "^4.0.2",
@@ -30,6 +32,7 @@
     "vue-infinite-scroll": "^2.0.2",
     "vue-loader": "^15.9.8",
     "vue-router": "^3.0.3",
+    "vue-video-player": "^5.0.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.0.1"
   },

src/common/m3u8.vue

@@ -0,0 +1,82 @@
+<template>
+  <video-player
+    class="vjs-custom-skin video-js vjs-big-play-centered"
+    ref="videoPlayer"
+    :options="playerOptions"
+    :events="events"
+    @ready="playerReadied"
+    @fullscreenchange="onPlayerFullScreenchange"
+  >
+  </video-player>
+</template>
+
+<script>
+import "videojs-contrib-hls";
+export default {
+  props: {
+    src: {
+      type: String,
+      default: "http://stream.snrtv.com/sxbc-star-cqFGJO.m3u8",
+    },
+  },
+  data() {
+    return {
+      playerOptions: {
+        sources: [
+          {
+            withCredentials: false,
+            type: "application/x-mpegURL",
+            src: this.src,
+          },
+        ],
+        controlBar: {
+          playToggle: false, // 播放暂停按钮
+          currentTimeDisplay: true,
+          timeDivider: false,
+          durationDisplay: false,
+          progressControl: true,
+          liveDisplay: true,
+          fullscreenToggle: true,
+        },
+        language: "zh-CN",
+        flash: { hls: { withCredentials: false } },
+        html5: { hls: { withCredentials: false } },
+        techOrder: ["html5", "flash"], // 兼容顺序
+        autoplay: true, // 自动播放
+        fluid: true, // 按比例缩放适应容器
+        preload: "auto", // 预加载
+        muted: true, // 消除所有音频
+        aspectRatio: "16:9",
+      },
+      events: ["fullscreenchange"],
+      flag: true,
+    };
+  },
+  methods: {
+    playerReadied(player) {
+      player.tech({ IWillNotUseThisInPlugins: true }).hls;
+      player.tech_.off("mousedown");
+      player.tech_.hls.xhr.beforeRequest = function (options) {
+        return options;
+      };
+    },
+    onPlayerFullScreenchange() {
+      if (this.flag) {
+        console.log(this.$refs.videoPlayer);
+        this.$refs.videoPlayer.muted = !this.$refs.videoPlayer.muted;
+      }
+      this.flag = !this.flag;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.vjs-tech {
+  pointer-events: none;
+}
+.video-js {
+  width: 261px;
+  height: 136px;
+}
+</style>

src/components/newmain/item3/index.vue

@@ -128,7 +128,7 @@ export default {
           },
           // barWidth: "10",
           barCategoryGap: "5%",
-          data: [90, 95, 85, 92],
+          data: [70, 75, 88, 92],
         },
       ],
     };

src/main.js

@@ -8,6 +8,11 @@ import axios from "axios";
 import VueAxios from 'vue-axios'
 import Antd from 'ant-design-vue'
 import dataV from '@jiaminghi/data-view';
+// 播放器组件库
+import VideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+
 import 'font-awesome/css/font-awesome.css'
 
 
@@ -52,6 +57,7 @@ Vue.use(Antd)
 Vue.use(dataV);
 Vue.use(Viser)
 Vue.mixin(mixin)
+Vue.use(VideoPlayer)
 
 // Vue.prototype.$bus = new Vue()
 new Vue({

src/views/newmain.vue

@@ -1,24 +1,59 @@
 <template>
   <div class="grid">
-    <div class="item1"><item1></item1></div>
-    <div class="span-col-2 span-row-3 item2"><Main></Main></div>
-    <div class="item3"><item3></item3></div>
-    <div class="item4"><excavation></excavation></div>
-    <div class="item5"><item5></item5></div>
-    <div class="item6"><item6></item6></div>
-    <div class="item7"><item7></item7></div>
-    <div class="item8"><coal-proportion></coal-proportion></div>    
-    <div class="span-col-2 span-row-2 item9">
-      <div class="watch watch1"></div>
-      <div class="watch watch2"></div>
-      <div class="watch watch3"></div>
-      <div class="watch watch4"></div>
-      <div class="watch watch5"></div>
-      <div class="watch watch6"></div>
+    <div class="item1 item">
+      <item1></item1>
+    </div>
+    <div class="span-col-2 span-row-3 item2 item">
+      <Main></Main>
+    </div>
+    <!-- <div class="span-col-2 span-row-3 item2">item2</div> -->
+    <div class="item3 item">
+      <item3></item3>
+    </div>
+    <div class="item4 item">
+      <excavation></excavation>
+    </div>
+    <div class="item5 item">
+      <item5></item5>
+    </div>
+    <div class="item6 item">
+      <item6></item6>
+    </div>
+    <div class="item7 item">
+      <item7></item7>
+    </div>
+    <div class="item8 item">
+      <coal-proportion></coal-proportion>
+    </div>
+    <div class="span-col-2 span-row-2 item9 item">
+      <div class="watch watch1">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch2">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch3">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch4">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch5">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch6">
+        <m3u8></m3u8>
+      </div>
+    </div>
+    <div class="item10 item">
+      <equipment></equipment>
+    </div>
+    <div class="item11 item">
+      <coal-position></coal-position>
+    </div>
+    <div class="item12 item">
+      <item12></item12>
     </div>
-    <div class="item10"><equipment></equipment></div>
-    <div class="item11"><coal-position></coal-position></div>
-    <div class="item12"><item12></item12></div>
   </div>
 </template>
 
@@ -30,10 +65,11 @@ import item5 from "@/components/newMain/item5";
 import item7 from "@/components/newMain/item7";
 import item3 from "@/components/newMain/item3";
 import item12 from "@/components/newMain/item12";
-import excavation from "@/components/newMain/item4"
-import coalPosition from "@/components/newMain/item11"
-import coalProportion from "@/components/newMain/item8"
-import equipment from "@/components/newMain/item10"
+import excavation from "@/components/newMain/item4";
+import coalPosition from "@/components/newMain/item11";
+import coalProportion from "@/components/newMain/item8";
+import equipment from "@/components/newMain/item10";
+import m3u8 from "@/common/m3u8";
 
 export default {
   name: "newMain",
@@ -48,25 +84,37 @@ export default {
     excavation,
     coalPosition,
     coalProportion,
-    equipment
+    equipment,
+    m3u8,
   },
 };
 </script>
 
 <style lang="less" scoped>
 .grid {
-  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
-    linear-gradient(
-      to top,
-      rgba(255, 255, 255, 0.4) 0%,
-      rgba(0, 0, 0, 0.25) 200%
-    );
+  // background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+  //   linear-gradient(
+  //     to top,
+  //     rgba(255, 255, 255, 0.4) 0%,
+  //     rgba(0, 0, 0, 0.25) 200%
+  //   );
+background: #bdc3c7;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to top, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to top, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
   width: 100%;
   height: 100vh;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 10px;
+  .item {
+    position: relative;
+    background-color: #303030;
+    border-radius: 20px;
+    padding: 1px;
+  }
+ 
 }
 .span-col-2 {
   grid-column: span 2 / auto;
@@ -81,11 +129,11 @@ export default {
 }
 .item9 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(5, 148px);
-  grid-gap: 10px;
+  grid-template-columns: repeat(3, 257px);
+  grid-template-rows: repeat(3, 160px);
+  grid-gap: 5px;
   .watch {
-    background-color: aqua;
+    margin-top: 20px;
   }
 }
 </style>