From d970d571be493fdb146e9ecb3d5f7d63c3c6022b Mon Sep 17 00:00:00 2001
From: quantulr <35954003+quantulr@users.noreply.github.com>
Date: Tue, 18 Oct 2022 19:26:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=AA=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=85=B1=E4=BA=AB=E5=B1=8F=E5=B9=95=E7=9A=84=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/countDown.vue  | 59 +++++++++++++++++++++++++++++++++++
 src/store/index.js            |  1 +
 src/views/appointment.vue     |  4 ++-
 src/views/meeting.vue         | 31 ++++++++++++++++++
 src/views/panelist-verify.vue |  5 +--
 src/views/verify.vue          |  4 ++-
 6 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 src/components/countDown.vue

diff --git a/src/components/countDown.vue b/src/components/countDown.vue
new file mode 100644
index 0000000..acc62ef
--- /dev/null
+++ b/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>
diff --git a/src/store/index.js b/src/store/index.js
index 18c1b60..a60272e 100644
--- a/src/store/index.js
+++ b/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,
diff --git a/src/views/appointment.vue b/src/views/appointment.vue
index a1baec0..3a0d600 100644
--- a/src/views/appointment.vue
+++ b/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>
diff --git a/src/views/meeting.vue b/src/views/meeting.vue
index 593e8ef..4464565 100644
--- a/src/views/meeting.vue
+++ b/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
diff --git a/src/views/panelist-verify.vue b/src/views/panelist-verify.vue
index 0a45098..409a83d 100644
--- a/src/views/panelist-verify.vue
+++ b/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>
diff --git a/src/views/verify.vue b/src/views/verify.vue
index cc8305d..271324f 100644
--- a/src/views/verify.vue
+++ b/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>