|
|
@@ -31,13 +31,15 @@
|
|
|
<el-col :span="24" class="two">
|
|
|
<van-swipe>
|
|
|
<van-swipe-item class="list" v-for="(item, index) in videodata" :key="index" @click="changevideo(index, item)">
|
|
|
- <el-col :span="12" class="listvideo">
|
|
|
+ <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.title }}</p>
|
|
|
+ <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.start_time }}</p>
|
|
|
+ <!-- <el-col :span="12" class="listvideo">
|
|
|
<video :src="item.file_path" controlsList="nodownload"></video>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="listtxt">
|
|
|
<p :class="{ active: changeColor == index }">{{ item.title }}</p>
|
|
|
<p>{{ item.start_time }}</p>
|
|
|
- </el-col>
|
|
|
+ </el-col> -->
|
|
|
</van-swipe-item>
|
|
|
</van-swipe>
|
|
|
</el-col>
|
|
|
@@ -78,7 +80,8 @@ export default {
|
|
|
form: {},
|
|
|
videodata: [],
|
|
|
videoUrl: '',
|
|
|
- changeColor: 0,
|
|
|
+ menuIndex: '',
|
|
|
+ menuColor: 'rgb(64,158,255)',
|
|
|
};
|
|
|
},
|
|
|
async created() {
|
|
|
@@ -104,7 +107,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
changevideo(index, item) {
|
|
|
- this.changeColor = index;
|
|
|
+ this.menuIndex = index;
|
|
|
this.$set(this, `videoUrl`, item.file_path);
|
|
|
},
|
|
|
back() {
|
|
|
@@ -137,7 +140,7 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.active {
|
|
|
- color: #409eff;
|
|
|
+ color: #ff0000;
|
|
|
}
|
|
|
.style {
|
|
|
width: 100%;
|
|
|
@@ -192,37 +195,53 @@ export default {
|
|
|
}
|
|
|
.two {
|
|
|
margin-top: 10px;
|
|
|
- background: #000;
|
|
|
+ background: #000000;
|
|
|
+ border-radius: 10px;
|
|
|
.list {
|
|
|
height: 90px;
|
|
|
padding: 1% 0px;
|
|
|
border-radius: 5px;
|
|
|
- .listvideo {
|
|
|
- border: 1px solid #fff;
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- height: 90px;
|
|
|
- }
|
|
|
- }
|
|
|
- .listtxt {
|
|
|
+ p {
|
|
|
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;
|
|
|
- }
|
|
|
+ padding: 5px 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ p:nth-child(1) {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ 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;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
