|
|
@@ -16,9 +16,15 @@
|
|
|
{{ info.title }}
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="video">
|
|
|
- <video :src="getvideo(videodata)" autoplay="" controls="controls" controlsList="nodownload">
|
|
|
+ <video :src="videoUrl" autoplay="" controls="controls" controlsList="nodownload">
|
|
|
您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
+ <el-col :span="9" class="choose">
|
|
|
+ <el-col :span="24" class="name">节目单</el-col>
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <p>{{ item.title }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="two3">
|
|
|
@@ -60,13 +66,27 @@ export default {
|
|
|
return {
|
|
|
// 信息详情
|
|
|
info: {},
|
|
|
- videodata: [],
|
|
|
- times: 5,
|
|
|
+ videoUrl: '',
|
|
|
+ list: [
|
|
|
+ { title: '节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ { title: '节目单' },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
async created() {
|
|
|
await this.search();
|
|
|
- await this.searchinfo();
|
|
|
},
|
|
|
methods: {
|
|
|
...channel(['query', 'fetch', 'update', 'create', 'delete']),
|
|
|
@@ -79,54 +99,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- async searchinfo() {
|
|
|
- let id = this.$route.query.id;
|
|
|
- if (id) {
|
|
|
- let res = await this.fetch(id);
|
|
|
- if (this.$checkRes(res)) {
|
|
|
- this.$set(this, `videodata`, res.data.videodata);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- async searchvideo() {
|
|
|
- this.timer = setInterval(async () => {
|
|
|
- this.times--;
|
|
|
- if (this.times === 0) {
|
|
|
- this.searchinfo();
|
|
|
- this.times = 5;
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
- getvideo(data) {
|
|
|
- let adate = moment().format('YYYY-MM-DD HH:mm');
|
|
|
- // 05-10 10-15
|
|
|
- // let adate = '2020-11-10 11:10';
|
|
|
- let arr = data.find(i => i.start_time == adate);
|
|
|
- if (arr) {
|
|
|
- return arr.url;
|
|
|
- } else {
|
|
|
- if (data[0]) {
|
|
|
- return data[0].url;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
- // id() {
|
|
|
- // return this.$route.query.id;
|
|
|
- // },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- times: {
|
|
|
- immediate: true,
|
|
|
- handler(val) {
|
|
|
- if (val == 5) {
|
|
|
- this.searchvideo();
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
},
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
@@ -166,11 +141,45 @@ export default {
|
|
|
}
|
|
|
.video {
|
|
|
text-align: center;
|
|
|
+ position: relative;
|
|
|
video {
|
|
|
width: 500px;
|
|
|
background-color: #000;
|
|
|
height: 350px;
|
|
|
}
|
|
|
+ .choose {
|
|
|
+ float: right;
|
|
|
+ height: 350px;
|
|
|
+ background: gold;
|
|
|
+ width: 240px;
|
|
|
+ padding: 15px;
|
|
|
+ overflow-y: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: 90px;
|
|
|
+ .name {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ border: 1px solid red;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ background: #f1f1f1;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 22px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.two3 {
|
