<template>
|
<div class="app-container" style="width: 100%; height: 800px;">
|
<!-- 回到顶部 -->
|
<el-backtop :bottom="150" :right="30">
|
<el-button type="primary" circle class="el-icon-top"></el-button>
|
</el-backtop>
|
|
<!-- 标题 -->
|
<h1 style="font-size:21px;padding-top:30px;display: flex;">
|
<span>直播回放</span>
|
</h1>
|
|
<hr>
|
|
<!-- 搜索 -->
|
<el-form :model="queryParams1">
|
<el-row>
|
<el-form-item label="" prop="people">
|
<el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 300px;
|
height: 35px;
|
text-align: left;
|
border-radius: 16px 16px 16px 16px;
|
opacity: 0.5;" @keyup.enter.native="handleQuery">
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
|
<!-- <el-form :model="vList"> -->
|
<el-row :gutter="25">
|
<el-col :span="8" :style="margin">
|
<div class="module">
|
<span class="span1">中秋家庭会议</span>
|
<span class="span2">2010-8-26 12:00</span>
|
<el-button class="huifang" type="primary" plain @click="show">回放</el-button>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="module">
|
<span class="span1">中秋家庭会议</span>
|
<span class="span2">2010-8-26 12:00</span>
|
<el-button class="huifang" type="primary" plain @click="show">回放</el-button>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="module">
|
<span class="span1">中秋家庭会议</span>
|
<span class="span2">2010-8-26 12:00</span>
|
<el-button class="huifang" type="primary" plain @click="show">回放</el-button>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="module">
|
<span class="span1">中秋家庭会议</span>
|
<span class="span2">2010-8-26 12:00</span>
|
<el-button class="huifang" type="primary" plain @click="show">回放</el-button>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- </el-form> -->
|
|
<!-- 回访视频弹窗 -->
|
<el-dialog
|
:visible.sync="dialogVisible"
|
width="50%"
|
height="100%"
|
:before-close="handleClose"
|
>
|
|
<h4>中秋家庭会议</h4>
|
<el-divider />
|
<video id="video" class="video" controls width="100%%" height="480" >
|
<source src="../../assets/images/测试.mp4" type="video/mp4">
|
</video>
|
<!-- <span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</span> -->
|
</el-dialog>
|
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
queryParams1: [],
|
vList: [],
|
dialogVisible: false,
|
|
}
|
},
|
methods: {
|
show(){
|
this.dialogVisible = true
|
},
|
handleClose(){
|
this.dialogVisible = false;
|
const video = document.getElementById("video")
|
video.pause()
|
}
|
}
|
}
|
</script>
|
<style scoped="">
|
.app-container {
|
background-color: #FEF7FC;
|
/* width: 2000px;
|
height: 1500px; */
|
}
|
|
.button-container {
|
text-align: right;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
flex-grow: 1;
|
}
|
|
.el-table {
|
border-radius: 14px 14px 14px 14px;
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.module {
|
width: 100%;
|
height: 160px;
|
background-color: rgb(255, 255, 255);
|
border-color: red;
|
border-radius: 6%;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
margin-left: 5px;
|
margin-right: 5px;
|
position: relative;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
|
.span1 {
|
float: left;
|
font-size: 20px;
|
margin-top: 5%;
|
margin-left: 3%;
|
}
|
|
.span2 {
|
float: right;
|
font-size: 20px;
|
margin-top: 5%;
|
margin-right: 3%;
|
margin-bottom: 50px;
|
}
|
|
.huifang{
|
position: absolute ;
|
bottom: 20px;
|
right: 10px;
|
font-size: 18px;
|
}
|
|
.tubiao{
|
position: absolute;
|
bottom: 20px;
|
right: 100px;
|
}
|
|
.author{
|
position: absolute;
|
bottom: 5px;
|
left: 100px;
|
}
|
.video{
|
object-fit: cover;
|
}
|
</style>
|
