'页面优化'

2024-04-18 14:59:15 +08:00
parent e09b87b053
commit 38ac830a62
8 changed files with 1393 additions and 304 deletions
@@ -0,0 +1,112 @@
+<template>
+  <div class="page">
+    <div class="content">
+      <div class="screenShare" v-if="screenShareFlag"></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>