|
@@ -16,7 +16,11 @@
|
|
|
<p class="teacherName sub">
|
|
|
主题:<span>{{ detail.roomTitle }}</span>
|
|
|
</p>
|
|
|
- <el-button type="text" class="fontBtn" @click="payVisible = true" v-if=" videoList.length>0"
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ class="fontBtn"
|
|
|
+ @click="payVisible = true"
|
|
|
+ v-if="videoList.length > 0"
|
|
|
>直播回放 <i class="el-icon-video-play"></i
|
|
|
></el-button>
|
|
|
</el-row>
|
|
@@ -114,15 +118,17 @@
|
|
|
title="直播回放"
|
|
|
>
|
|
|
<div class="lineWrap">
|
|
|
- <el-link
|
|
|
- :underline="false"
|
|
|
+ <div
|
|
|
+ class="linkItem"
|
|
|
v-for="(item, index) in videoList"
|
|
|
:key="index"
|
|
|
- type="text"
|
|
|
- class="line"
|
|
|
@click="opneVideo(item)"
|
|
|
- >{{ item.endTime | dateForMinFormat }}</el-link
|
|
|
>
|
|
|
+ <video width="110px" :src="item.url"></video>
|
|
|
+ <p :underline="false" type="text" class="lineTitle">
|
|
|
+ {{ item.endTime | dateForMinFormat }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
@@ -130,15 +136,22 @@
|
|
|
<el-button type="primary" @click="payVisible = false">确 定</el-button>
|
|
|
</div></el-dialog
|
|
|
>
|
|
|
- <el-dialog :title="activeVideo.endTime | dateForMinFormat"
|
|
|
- width="680px"
|
|
|
- append-to-body
|
|
|
- :visible.sync="videoVisible" v-if="videoVisible">
|
|
|
+ <el-dialog
|
|
|
+ :title="activeVideo.endTime | dateForMinFormat"
|
|
|
+ width="680px"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="videoVisible"
|
|
|
+ v-if="videoVisible"
|
|
|
+ >
|
|
|
<!-- activeUrl -->
|
|
|
- <video style="width:640px;"
|
|
|
- :src="activeVideo.url"
|
|
|
- ref="dialogVideo"
|
|
|
- controls="controls">您的浏览器不支持视频播放</video>
|
|
|
+ <video
|
|
|
+ style="width: 640px"
|
|
|
+ :src="activeVideo.url"
|
|
|
+ ref="dialogVideo"
|
|
|
+ controls="controls"
|
|
|
+ >
|
|
|
+ 您的浏览器不支持视频播放
|
|
|
+ </video>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -153,7 +166,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
searchForm: {
|
|
|
- search:''
|
|
|
+ search: "",
|
|
|
},
|
|
|
tableList: [],
|
|
|
detail: {
|
|
@@ -175,8 +188,8 @@ export default {
|
|
|
},
|
|
|
videoList: [],
|
|
|
payVisible: false,
|
|
|
- videoVisible:false,
|
|
|
- activeVideo:{ endTime:''}
|
|
|
+ videoVisible: false,
|
|
|
+ activeVideo: { endTime: "" },
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -189,12 +202,12 @@ export default {
|
|
|
this.$store.dispatch("delVisitedViews", this.$route);
|
|
|
},
|
|
|
search() {
|
|
|
- this.rules.page =1
|
|
|
- this.getList();
|
|
|
+ this.rules.page = 1;
|
|
|
+ this.getList();
|
|
|
},
|
|
|
onReSet() {
|
|
|
- this.searchForm.search = ''
|
|
|
- this.search()
|
|
|
+ this.searchForm.search = "";
|
|
|
+ this.search();
|
|
|
},
|
|
|
async getList() {
|
|
|
try {
|
|
@@ -226,7 +239,7 @@ export default {
|
|
|
},
|
|
|
opneVideo(row) {
|
|
|
this.activeVideo = row;
|
|
|
- this.videoVisible = true
|
|
|
+ this.videoVisible = true;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -293,5 +306,30 @@ export default {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .linkItem {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: var(--color-primary);
|
|
|
+ .lineTitle{
|
|
|
+ color: var(--color-primary);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lineTitle {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: rgba(102, 102, 102, 0.9);
|
|
|
+ padding: 0 17px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|