112 lines
2.2 KiB
Vue
112 lines
2.2 KiB
Vue
<template>
|
|
<div class="page">
|
|
<div class="content">
|
|
<div class="screenShare"></div>
|
|
<div :class="videoList">
|
|
<div :class="videoClass" v-for="(item, index) in vivdeoList"></div>
|
|
</div>
|
|
</div>
|
|
<div class="footerList">
|
|
<button @click="screenShare">分享</button>
|
|
<button @click="screenShareQ">取消分享</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: [],
|
|
data() {
|
|
return {
|
|
vivdeoList: [1],
|
|
videoClass: "videoItem",
|
|
videoList: "videoList",
|
|
screenShareFlag: false,
|
|
};
|
|
},
|
|
methods: {
|
|
screenShare() {
|
|
this.videoList = "videoList1";
|
|
// this.screenShareFlag = true;
|
|
this.videoClass = "videoItem2";
|
|
},
|
|
screenShareQ(){
|
|
this.videoList = "videoList";
|
|
if(this.vivdeoList.length > 1){
|
|
this.videoClass = "videoItem1";
|
|
}else{
|
|
this.videoClass = "videoItem";
|
|
}
|
|
this.screenShareFlag = false;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.vivdeoList.length == 1) {
|
|
this.videoClass = "videoItem";
|
|
} else if(this.vivdeoList.length > 1){
|
|
this.videoClass = "videoItem1";
|
|
}
|
|
},
|
|
watch: {},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.page {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
height: 90%;
|
|
display: flex;
|
|
}
|
|
.videoList {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
overflow-y: scroll;
|
|
margin-bottom: 20px;
|
|
}
|
|
.videoList1 {
|
|
width: 20%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
overflow-y: scroll;
|
|
margin-bottom: 20px;
|
|
}
|
|
.screenShare {
|
|
width: 80%;
|
|
height: 90%;
|
|
background: yellow;
|
|
}
|
|
.footerList {
|
|
width: 100%;
|
|
height: 10%;
|
|
background: green;
|
|
}
|
|
.videoItem {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: red;
|
|
border-radius: 20px;
|
|
}
|
|
.videoItem1 {
|
|
width: 32%;
|
|
height: 32%;
|
|
background: red;
|
|
border-radius: 20px;
|
|
}
|
|
.videoItem2 {
|
|
width: 90%;
|
|
height: 25%;
|
|
background: red;
|
|
border-radius: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |