增加视频播放

src/pages/Home/index.vue

@@ -49,7 +49,16 @@
             <img src="./Group%20133.png" alt="" class="mt-[52px] h-[287px] w-[182px]" />
           </div>
           <!-- video           -->
-          <div class="h-[450px] w-[800px] bg-[url('@/pages/Home/modules1/Group-236.png')]"></div>
+          <div
+            class="max-w-[800px] flex-1 cursor-pointer overflow-hidden rounded-[40px] transition duration-300 hover:scale-[1.02]"
+            @click="openVideoModal"
+          >
+            <img
+              src="@/pages/Home/modules1/Group-236.png"
+              class="h-full w-full object-cover object-center"
+              alt="Video Cover"
+            />
+          </div>
         </div>
         <!-- modules1       -->
         <div class="mb-[80px] w-full">
@@ -107,6 +116,24 @@
       </div>
     </div>
     <LoginFormModal ref="loginModalRef" />
+
+    <!-- Video Modal -->
+    <Dialog
+      v-model:open="videoModalVisible"
+      @update:open="(val) => !val && handleVideoModalClose()"
+    >
+      <DialogContent class="max-w-[60vw]! overflow-hidden rounded-2xl border-none bg-black/90 p-0">
+        <div class="relative w-full pt-[56.25%]">
+          <video
+            ref="videoRef"
+            src="/fast-video.MP4"
+            class="absolute inset-0 h-full w-full"
+            controls
+            autoplay
+          ></video>
+        </div>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
@@ -124,6 +151,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from '@/components/ui/carousel'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
 import request from '@/utils/request'
 import Frame98 from './modules2/Frame 98.png'
 import Frame99 from './modules2/Frame 99.png'
@@ -142,6 +170,20 @@ import image6 from './modules4/image6.png'
 const modules2Image = [Frame98, Frame99, Frame100, Frame101, Frame104, Frame105]
 const modules4Images = [image1, image2, image3, image4, image5, image6]
 
+const videoModalVisible = ref(false)
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+const openVideoModal = () => {
+  videoModalVisible.value = true
+}
+
+const handleVideoModalClose = () => {
+  if (videoRef.value) {
+    videoRef.value.pause()
+    videoRef.value.currentTime = 0
+  }
+}
+
 const route = useRoute()
 const router = useRouter()
 const token = useLocalStorage('Authorization', '')

src/styles/index.css

@@ -8,6 +8,10 @@
 html, body {
   background: #000;
 }
+body {
+  min-width: 1220px;
+  overflow-x: auto; /* 当窗口小于1024px时显示横向滚动条 */
+}
 .lucid-glass-bar {
   /* 基础背景：Figma 中通常是叠加的，这里取中值确保通透度 */
   background: rgb(255 255 255 / 6%);