提交

src/views/Jugou/Jugouout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Jugou">
+  <div class="Jugouout">
     <el-loading></el-loading>
     <div style="padding: 0 100px">
       <div style="position: relative">
@@ -94,7 +94,6 @@ const ElLoading = require('element-plus/lib/el-loading/index');
 import 'element-plus/lib/theme-chalk/el-loading.css';
 
 import * as echarts from 'echarts';
-
 let sec = 0,
   timeout = undefined,
   isplay = false,
@@ -126,7 +125,8 @@ export default {
       let item = {
         channelId: 1,
         channelName: '陕西卫视',
-        videoUrl: 'http://smcic-bigdata.oss-cn-chengdu.aliyuncs.com/live-flow/video/20230814/1.mp4',
+        videoUrl:
+          'http://smcic-bigdata.oss-cn-chengdu.aliyuncs.com/live-flow/video/20230814/1.mp4',
         dataUrl:
           'https://smcic-bigdata.oss-cn-chengdu.aliyuncs.com/live-flow/channel/20230814/channel-1.json',
         dt: '2023-08-14',
@@ -393,17 +393,17 @@ export default {
 </script>
 
 <style>
-.Jugou {
+.Jugouout {
   min-width: 1149px;
   padding: 10px 12px;
 }
 
-.Jugou video {
+.Jugouout video {
   width: 100%;
   height: 500px;
   background-color: #000;
 }
-.Jugou .lineinfobackground {
+.Jugouout .lineinfobackground {
   font-size: 12px;
   border-radius: 9px;
   position: absolute;
@@ -416,7 +416,7 @@ export default {
   color: #fff;
   /* opacity: 0.5; */
 }
-.Jugou .lineinfobackground .line {
+.Jugouout .lineinfobackground .line {
   position: absolute;
   width: 2px;
   height: 120%;
@@ -424,13 +424,13 @@ export default {
   margin-left: 50%;
   background-color: #888;
 }
-.Jugou .lineinfobackground .icon {
+.Jugouout .lineinfobackground .icon {
   display: inline-block;
   width: 30px;
   height: 10px;
   border-radius: 10px;
 }
-.Jugou .lineinfobackground .iconLine {
+.Jugouout .lineinfobackground .iconLine {
   background-color: #50abfd;
   display: inline-block;
   width: 30px;
@@ -438,7 +438,7 @@ export default {
   vertical-align: middle;
   border-radius: 10px;
 }
-.Jugou .videoerror {
+.Jugouout .videoerror {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -447,4 +447,18 @@ export default {
 video::-webkit-media-controls-timeline {
   display: none;
 }
+
+.Jugouout .subtitle {
+  width: 417px;
+  line-height: 56px;
+  height: 56px;
+  background: url(https://dp.sxtvs.com.cn/screenss/images/subtitle.png);
+  background-size: 417px 56px;
+  text-align: left;
+  font-size: 36px;
+  color: #ffffff;
+  font-weight: bold;
+  letter-spacing: 1px;
+  padding-left: 50px;
+}
 </style>