修改

src/view/home/home.vue

@@ -4,6 +4,11 @@
         <iframe :src="embedUrl" frameborder="0" allow="autoplay; muted; loop; encrypted-media"></iframe>
         <!-- <div class="absolute top-12 z-40 opacity-30 bg-[green] left-24 right-24 h-[600px] pl-24 pr-24 pt-12">
         </div> -->
+    
+    <!-- <div class="mask mask-top-left"></div> -->
+    <!-- <div class="mask mask-top-right"></div> -->
+    <!-- <div class="mask mask-bottom-right"></div> -->
+
         <div @click="handleFabClick()" class="absolute top-100 left-24 right-24 hover:opacity-80 text-white flex justify-center items-center">
             <div  class="z-50 border pl-3 pr-3 pt-3 pb-3 rounded-sm">
                 <strong>KLIK UNTUK RESERVASI</strong>
@@ -342,12 +347,61 @@ const clickChat = (index) => {
 </script>
 
 <style scoped>
-.video-bg {
-    /* pointer-events: none; */
+/* .video-bg {
     background: #fff;
 }
 .video-bg iframe {
     width: 100%;
     height: 600px;
+} */
+
+.video-bg {
+    left: 5%;
+    position: relative;
+    width: 90%;
+    height: 100vh; /* 视频占满整屏 */
+    overflow: hidden;
+}
+
+.video-bg iframe {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100vw;
+    height: 100vw; /* 16:9 比例 */
+    min-height: 100vh;
+    min-width: 177.78vh; /* 为保持比例铺满屏幕 */
+    transform: translate(-50%, -50%);
+}
+
+
+.mask {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.2); /* 可用透明渐变 */
+    z-index: 20;
 }
+
+.mask-top-left {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+}
+
+.mask-top-right {
+    top: 0;
+    right: 0;
+    width: 200px;
+    height: 80px;
+}
+
+.mask-bottom-right {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 70px;
+    background-color: black;
+}
+
+
 </style>
\ No newline at end of file