|
|
@@ -7,7 +7,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="main">
|
|
|
<el-col :span="24" class="video">
|
|
|
- <video controls="" controlsList="nodownload" :src="videoUrl"></video>
|
|
|
+ <video controls controlsList="nodownload" :src="videoUrl"></video>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="text">
|
|
|
<van-collapse v-model="activeNames">
|
|
|
@@ -21,22 +21,19 @@
|
|
|
<p><span>简介：</span>{{ form.desc }}</p>
|
|
|
</el-col>
|
|
|
</van-collapse-item>
|
|
|
+ <van-collapse-item name="2">
|
|
|
+ <template #title>
|
|
|
+ <div class="title">视频列表</div>
|
|
|
+ </template>
|
|
|
+ <el-col :span="24" class="videodata">
|
|
|
+ <el-col :span="12" class="videolist" v-for="(item, index) in videodata" :key="index" @click.native="changevideo(item, index)">
|
|
|
+ <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.title }}</p>
|
|
|
+ <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.start_time }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </van-collapse-item>
|
|
|
</van-collapse>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="choose">
|
|
|
- <el-col :span="24" class="one">
|
|
|
- <span></span>
|
|
|
- <span>选集</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="two">
|
|
|
- <van-swipe :initial-swipe="menuIndex">
|
|
|
- <van-swipe-item class="list" v-for="(item, index) in videodata" :key="index" @click="changevideo(item, index)">
|
|
|
- <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.title }}</p>
|
|
|
- <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.start_time }}</p>
|
|
|
- </van-swipe-item>
|
|
|
- </van-swipe>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -67,7 +64,7 @@ export default {
|
|
|
isleftarrow: '',
|
|
|
// 返回
|
|
|
navShow: true,
|
|
|
- activeNames: ['1'],
|
|
|
+ activeNames: ['1', '2'],
|
|
|
form: {},
|
|
|
// 视频列表
|
|
|
videodata: [],
|
|
|
@@ -165,6 +162,9 @@ export default {
|
|
|
height: 200px;
|
|
|
background-color: #000;
|
|
|
}
|
|
|
+ video::-webkit-media-controls-mute-button {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
}
|
|
|
.text {
|
|
|
padding: 5px 10px;
|
|
|
@@ -180,74 +180,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .choose {
|
|
|
- padding: 0 10px;
|
|
|
- .one {
|
|
|
- height: 30px;
|
|
|
- span:nth-child(1) {
|
|
|
- display: inline-block;
|
|
|
- width: 2px;
|
|
|
- height: 30px;
|
|
|
- background: #409eff;
|
|
|
- }
|
|
|
- span:nth-child(2) {
|
|
|
- position: relative;
|
|
|
- top: -8px;
|
|
|
- left: 5px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- .two {
|
|
|
- margin-top: 10px;
|
|
|
- background: #000000;
|
|
|
- border-radius: 10px;
|
|
|
- .list {
|
|
|
- height: 90px;
|
|
|
- padding: 1% 0px;
|
|
|
- border-radius: 5px;
|
|
|
- p {
|
|
|
- color: #fff;
|
|
|
- padding: 5px 10px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .videodata {
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ .videolist {
|
|
|
+ text-align: center;
|
|
|
+ background: #f1f1f1;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 100px;
|
|
|
+ width: 48%;
|
|
|
+ padding: 15px 0;
|
|
|
p:nth-child(1) {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 10px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
word-break: break-all;
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
- min-height: 10px;
|
|
|
- max-height: 59px;
|
|
|
}
|
|
|
- // .listvideo {
|
|
|
- // border: 1px solid #fff;
|
|
|
- // video {
|
|
|
- // width: 100%;
|
|
|
- // height: 90px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .listtxt {
|
|
|
- // color: #fff;
|
|
|
- // padding: 0 10px;
|
|
|
- // font-size: 14px;
|
|
|
- // p:nth-child(1) {
|
|
|
- // font-size: 16px;
|
|
|
- // overflow: hidden;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- // -webkit-line-clamp: 3;
|
|
|
- // word-break: break-all;
|
|
|
- // display: -webkit-box;
|
|
|
- // -webkit-box-orient: vertical;
|
|
|
- // font-weight: bold;
|
|
|
- // }
|
|
|
- // p:nth-child(2) {
|
|
|
- // height: 33px;
|
|
|
- // line-height: 50px;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ p:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videolist:nth-child(2n) {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
