Arbitrate-FrontendH5/src/views/test.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>