在预约和验证页面显示倒计时

src/components/countDown.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="count-down" v-if="durationTime > 0">
-    <div class="title">会议倒计时</div>
-    <div class="count">{{ remainTime }}</div>
+  <div class="count-down">
+    <!-- <div class="title">会议倒计时</div> -->
+    <div v-if="durationTime > 0" class="count">将在{{ remainTime }}后开始</div>
+    <div v-else class="count">已开始</div>
   </div>
 </template>
 <script setup name="CountDown">
@@ -28,8 +29,8 @@ onMounted(() => {
     }
     const duraDayjs = dayjs.duration(durationTime.value);
     remainTime.value = `${parseInt(
-      duraDayjs.asHours()
-    )}小时${duraDayjs.minutes()}分钟${duraDayjs.seconds()}秒`;
+      duraDayjs.asDays()
+    )}天${duraDayjs.hours()}时${duraDayjs.minutes()}分${duraDayjs.seconds()}秒`;
   }, 500);
 });
 onUnmounted(() => {
@@ -39,21 +40,21 @@ onUnmounted(() => {
 
 <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;
-  }
+  // position: absolute;
+  // z-index: -1;
+  // top: 20%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
+  // display: flex;
+  // flex-direction: column;
+  // align-items: center;
+  // .title {
+  //   font-size: 16px;
+  //   font-weight: bold;
+  // }
   .count {
-    font-size: 36px;
-    margin-top: 20px;
+    font-size: 16px;
+    // margin-top: 20px;
   }
 }
 </style>

src/style/appoint-mobile.css

@@ -0,0 +1,30 @@
+@media only screen and (max-width: 768px) {
+  .meeting-cover {
+    width: 100%;
+    display: block;
+    margin: 0 auto;
+  }
+  .meeting-title {
+    font-size: 7vw;
+  }
+  .meeting-time {
+    flex-direction: column;
+    align-items: center;
+    font-size: 5vw;
+  }
+  .meeting-time .title {
+    margin-right: 3vw;
+  }
+  .meeting-time :not(:last-child) {
+    margin-right: 0px;
+  }
+  .form-container {
+    padding: 0 2vw 0;
+  }
+  .form-container .joinuser-item {
+    width: 100%;
+  }
+  .form-container .joinuser-item :deep(.el-form-item__label) {
+    width: 70px;
+  }
+}

src/style/appoint-mobile.min.css

@@ -0,0 +1 @@
+@media only screen and (max-width: 768px){.meeting-cover{width:100%;display:block;margin:0 auto}.meeting-title{font-size:7vw}.meeting-time{flex-direction:column;align-items:center;font-size:5vw}.meeting-time .title{margin-right:3vw}.meeting-time :not(:last-child){margin-right:0px}.form-container{padding:0 2vw 0}.form-container .joinuser-item{width:100%}.form-container .joinuser-item :deep(.el-form-item__label){width:70px}}

src/style/appoint-mobile.scss

@@ -12,10 +12,15 @@
     font-size: 7vw;
   }
   .meeting-time {
+    flex-direction: column;
+    align-items: center;
     font-size: 5vw;
     .title {
       margin-right: 3vw;
     }
+    :not(:last-child) {
+      margin-right: 0px;
+    }
   }
   .form-container {
     padding: 0 2vw 0;

src/views/appointment.vue

@@ -6,8 +6,9 @@
   />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
-    <span class="title">会议时间</span>
+    <span class="title">会议开始时间</span>
     <span class="time">{{ meeting.startTime }}</span>
+    <CountDown :start-time="meeting.startTime" />
   </p>
   <div class="form-container" v-if="appointStatus === `pending`">
     <el-form
@@ -261,6 +262,7 @@
 </template>
 
 <script setup>
+import CountDown from "@/components/countDown.vue";
 import { reactive, ref, toRefs } from "vue";
 import { getMeetingDetailById, newAppointment } from "@/api/meeting";
 import { ElMessage } from "element-plus";
@@ -533,7 +535,12 @@ loadMeetingDetail(meetingId.value);
 }
 
 .meeting-time {
-  text-align: center;
+  // text-align: center;
+  display: flex;
+  justify-content: center;
+  :not(:last-child) {
+    margin-right: 12px;
+  }
 }
 
 .form-item-container {

src/views/panelist-verify.vue

@@ -6,8 +6,9 @@
   />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
-    <span class="title">会议时间</span>
+    <span class="title">会议开始时间</span>
     <span class="time">{{ meeting.startTime }}</span>
+    <CountDown :start-time="meeting.startTime" />
   </p>
   <div class="form-container">
     <el-form
@@ -66,6 +67,7 @@
 </template>
 
 <script setup>
+import CountDown from "@/components/countDown.vue";
 import { reactive, ref, toRefs } from "vue";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
@@ -128,7 +130,12 @@ const submitVerify = async (newJoinUserRef) => {
   text-align: center;
 }
 .meeting-time {
-  text-align: center;
+  // text-align: center;
+  display: flex;
+  justify-content: center;
+  :not(:last-child) {
+    margin-right: 12px;
+  }
 }
 .form-item-container {
   display: flex;

src/views/verify.vue

@@ -6,8 +6,9 @@
   />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
-    <span class="title">会议时间</span>
+    <span class="title">会议开始时间</span>
     <span class="time">{{ meeting.startTime }}</span>
+    <CountDown :start-time="meeting.startTime" />
   </p>
   <div class="form-container">
     <el-form
@@ -392,6 +393,7 @@
 </template>
 
 <script setup>
+import CountDown from "@/components/countDown.vue";
 import { reactive, ref, toRefs } from "vue";
 import { registerJoinUser, visitorJoinUser } from "@/api/meeting";
 import { ElMessage } from "element-plus";
@@ -644,7 +646,12 @@ const submitVerify = async (newJoinUserRef) => {
   text-align: center;
 }
 .meeting-time {
-  text-align: center;
+  // text-align: center;
+  display: flex;
+  justify-content: center;
+  :not(:last-child) {
+    margin-right: 12px;
+  }
 }
 .form-item-container {
   display: flex;