添加只显示共享屏幕的布局

src/components/countDown.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="count-down" v-if="durationTime > 0">
+    <div class="title">会议倒计时</div>
+    <div class="count">{{ remainTime }}</div>
+  </div>
+</template>
+<script setup name="CountDown">
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import { onMounted, onUnmounted, ref } from "vue";
+dayjs.extend(duration);
+const props = defineProps({
+  startTime: {
+    type: String,
+    required: true,
+    // default: "2022-10-18 21:22:23",
+  },
+});
+const durationTime = ref();
+const remainTime = ref();
+let timer;
+onMounted(() => {
+  timer = setInterval(() => {
+    durationTime.value =
+      new Date(props.startTime).getTime() - new Date().getTime();
+    if (durationTime.value <= 0) {
+      clearInterval(timer);
+    }
+    const duraDayjs = dayjs.duration(durationTime.value);
+    remainTime.value = `${parseInt(
+      duraDayjs.asHours()
+    )}小时${duraDayjs.minutes()}分钟${duraDayjs.seconds()}秒`;
+  }, 500);
+});
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped lang="scss">
+.count-down {
+  position: absolute;
+  z-index: -1;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .count {
+    font-size: 36px;
+    margin-top: 20px;
+  }
+}
+</style>

src/store/index.js

@@ -85,6 +85,7 @@ const store = createStore({
     meetingSchedule: (state) => state.meeting.meetingSchedule, // 会议日程
     expertInfo: (state) => state.meeting.expertInfo, // 专家介绍
     meetingNumber: (state) => state.meeting.meetingNumber, // 姓名
+    startTime: (state) => state.meeting.startTime, // 姓名
     templateId: (state) => state.meeting.templateId,
     meetingId: (state) => state.meeting.id,
     textLabelList: (state) => state.meeting.textLabelList,

src/views/appointment.vue

@@ -222,7 +222,9 @@
         color: #333;
       "
     >
-      <el-checkbox v-model="isAgreeAgreement"></el-checkbox><span>同意</span>
+      <el-checkbox v-model="isAgreeAgreement"></el-checkbox>
+      <span>&nbsp;</span>
+      <span>同意</span>
       <el-button type="text" @click="showUserAgreement = true">
         楚桓会议系统用户信息协议
       </el-button>

src/views/meeting.vue

@@ -18,6 +18,7 @@
             :class="`layout-template-${templateId}`"
             ref="videoElementRef"
           ></div>
+          <CountDown :start-time="store.getters.startTime" />
           <!-- <like
             v-if="screenWidth > 900"
             :meeting-id="store.getters.meetingId"
@@ -127,6 +128,7 @@
       </template>
     </el-dialog>
 
+    <!-- <mediaCheck @close="startMeeting" /> -->
     <mediaCheck @close="startMeeting" />
 
     <questions
@@ -183,6 +185,7 @@ import {
   commitQuestionnaire,
   commitExam,
 } from "@/api/meeting";
+import CountDown from "@/components/countDown.vue";
 
 const store = useStore();
 const route = useRoute();
@@ -1037,6 +1040,24 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
   }
 }
 
+.layout-template-5 {
+  :deep(div[id*="suspension-view-tabpanel"]
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
+    display: none;
+    width: $meetingComponentWitdh;
+    height: $meetingComponentWitdh * 9 / 16;
+    position: relative;
+  }
+  :deep(#suspension-view-tabpanel-ribbon
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+    flex-direction: row-reverse;
+  }
+}
+
 :deep(.zmwebsdk-MuiToolbar-root.zmwebsdk-MuiToolbar-regular) {
   display: none; // 隐藏顶部 toolbar
 }
@@ -1195,6 +1216,16 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
             height: $meetingComponentWitdh * 0.15 * 9 / 16;
           }
         }
+        .layout-template-5 {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
+            display: none;
+            width: $meetingComponentWitdh;
+            height: $meetingComponentWitdh * 9 / 16;
+          }
+        }
 
         :deep(#video-element
             > div

src/views/panelist-verify.vue

@@ -41,8 +41,9 @@
       "
     >
       <el-checkbox v-model="isAgreeAgreement"></el-checkbox>
-      <el-button type="text" @click="showUserAgreement = true"
-        ><span>同意</span>
+      <span>&nbsp;</span>
+      <span>同意</span>
+      <el-button type="text" @click="showUserAgreement = true">
         楚桓会议系统用户信息协议
       </el-button>
     </div>

src/views/verify.vue

@@ -370,7 +370,9 @@
         color: #333;
       "
     >
-      <el-checkbox v-model="isAgreeAgreement"></el-checkbox><span>同意</span>
+      <el-checkbox v-model="isAgreeAgreement"></el-checkbox>
+      <span>&nbsp;</span>
+      <span>同意</span>
       <el-button type="text" @click="showUserAgreement = true">
         楚桓会议系统用户信息协议
       </el-button>