公告页没有视频时不显示容器。

src/views/Announcement.vue

@@ -53,17 +53,25 @@ const getMarketAndCode = async () => {
 };
 
 const announcementVideo = ref({});
+const showVideoContainer = ref(false);
 const getAnnouncement = async () => {
   const result = await getAnnouncementAPI();
   // console.log(result.data, "result.data");
-  announcementVideo.value.url = result.data[0].url;
-  announcementVideo.value.img = result.data[0].img;
-
-  const click = await qsArpAamClickAPI({
-    token: localStorage.getItem("localToken"),
-    id: result.data[0].id,
-  });
-  // console.log(click);
+  
+  // 检查返回的data是否为空数组
+  if (result.data && result.data.length > 0) {
+    announcementVideo.value.url = result.data[0].url;
+    announcementVideo.value.img = result.data[0].img;
+    showVideoContainer.value = true;
+
+    const click = await qsArpAamClickAPI({
+      token: localStorage.getItem("localToken"),
+      id: result.data[0].id,
+    });
+    // console.log(click);
+  } else {
+    showVideoContainer.value = false;
+  }
 
   // console.log(announcementVideo.value, "announcementVideo");
 };
@@ -97,7 +105,7 @@ onMounted(() => {
     </div>
   </div>
   <div class="main-wrapper">
-    <div class="video-container">
+    <div v-if="showVideoContainer" class="video-container">
       <video
         ref="videoPlayer"
         :poster="announcementVideo.img"
@@ -188,7 +196,7 @@ onMounted(() => {
 }
 
 .announcement {
-  margin: 20px 10%;
+  margin: 0px 10%;
   font-size: 20px;
   font-weight: bold;
 }