|
|
@@ -16,7 +16,7 @@
|
|
|
{{ info.title }}
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="video">
|
|
|
- <video :src="videoUrl" autoplay="" controls="controls" controlsList="nodownload">
|
|
|
+ <!-- <video :src="videoUrl" autoplay="" controls="controls" controlsList="nodownload">
|
|
|
您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
<el-col :span="9" class="choose">
|
|
|
@@ -24,6 +24,21 @@
|
|
|
<el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
<p>{{ item.title }}</p>
|
|
|
</el-col>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="17" class="left">
|
|
|
+ <video :src="videoUrl" autoplay="" controls="controls" controlsList="nodownload">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7" class="right">
|
|
|
+ <el-col :span="24" class="txt">
|
|
|
+ 视频列表
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-col :span="24" class="videolist" v-for="(item, index) in videolist" :key="index">
|
|
|
+ <p>{{ item.title }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
@@ -67,7 +82,7 @@ export default {
|
|
|
// 信息详情
|
|
|
info: {},
|
|
|
videoUrl: '',
|
|
|
- list: [
|
|
|
+ videolist: [
|
|
|
{ title: '节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单节目单' },
|
|
|
{ title: '节目单' },
|
|
|
{ title: '节目单' },
|
|
|
@@ -135,55 +150,87 @@ export default {
|
|
|
margin: 0 0 10px 0;
|
|
|
.title {
|
|
|
font-size: 25px;
|
|
|
- padding: 15px 0 40px 0;
|
|
|
+ padding: 15px 0;
|
|
|
text-align: center;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.video {
|
|
|
- text-align: center;
|
|
|
position: relative;
|
|
|
- video {
|
|
|
- width: 500px;
|
|
|
+ height: 450px;
|
|
|
+ .left {
|
|
|
background-color: #000;
|
|
|
- height: 350px;
|
|
|
+ height: 450px;
|
|
|
+ text-align: right;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 450px;
|
|
|
+ }
|
|
|
}
|
|
|
- .choose {
|
|
|
- float: right;
|
|
|
- height: 350px;
|
|
|
- background: gold;
|
|
|
- width: 240px;
|
|
|
- padding: 15px;
|
|
|
+ .right {
|
|
|
+ height: 450px;
|
|
|
overflow-y: auto;
|
|
|
- font-size: 14px;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- right: 90px;
|
|
|
- .name {
|
|
|
- height: 30px;
|
|
|
- background: red;
|
|
|
- margin-bottom: 10px;
|
|
|
- line-height: 30px;
|
|
|
+ .txt {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
- border-radius: 10px;
|
|
|
- position: sticky;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- z-index: 999;
|
|
|
}
|
|
|
.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;
|
|
|
+ height: 410px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 10px;
|
|
|
+ .videolist {
|
|
|
+ height: 140px;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 25px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ // .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;
|
|
|
+ // background: red;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ // line-height: 30px;
|
|
|
+ // font-size: 18px;
|
|
|
+ // font-weight: bold;
|
|
|
+ // border-radius: 10px;
|
|
|
+ // position: sticky;
|
|
|
+ // left: 0px;
|
|
|
+ // top: 0px;
|
|
|
+ // z-index: 999;
|
|
|
+ // }
|
|
|
+ // .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 {
|
