|
|
@@ -2,7 +2,7 @@
|
|
|
* @Author: LiZhiWei
|
|
|
* @Date: 2026-01-21 08:51:46
|
|
|
* @LastEditors: LiZhiWei
|
|
|
- * @LastEditTime: 2026-01-21 14:31:29
|
|
|
+ * @LastEditTime: 2026-01-21 16:20:49
|
|
|
* @Description:
|
|
|
-->
|
|
|
<template>
|
|
|
@@ -59,12 +59,38 @@
|
|
|
<!-- Right Video Card -->
|
|
|
<div class="video-card play-box">
|
|
|
<!-- 极致毛玻璃圆盘 -->
|
|
|
- <div class="play-circle">
|
|
|
+ <div class="play-circle" @click="playVideo">
|
|
|
<i class="play-icon"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- Video Modal -->
|
|
|
+ <Teleport to="body">
|
|
|
+ <div
|
|
|
+ v-if="isVideoPlaying"
|
|
|
+ class="fixed inset-0 z-999 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
|
|
|
+ @click.self="closeVideo"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="absolute top-30 right-10% lt-sm:right-20px lt-sm:top-20px text-white/80 hover:text-white transition-colors cursor-pointer"
|
|
|
+ @click="closeVideo"
|
|
|
+ >
|
|
|
+ <i class="i-ep-close wh-48px lt-sm:wh-48px"></i>
|
|
|
+ </button>
|
|
|
+ <div
|
|
|
+ class="relative w-full max-w-1000px mx-20px aspect-video bg-black overflow-hidden shadow-2xl"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ src="https://cloud.video.taobao.com/play/u/1057773/p/1/d/sd/e/6/t/1/550775295418.mp4?auth_key=YXBwX2tleT04MDAwMDAwMTImYXV0aF9pbmZvPXsidGltZXN0YW1wRW5jcnlwdGVkIjoiZTQ1OGVhOGExMDdkODQ5MGE2ODBkZDNlYTk5YzI0MDkifSZkdXJhdGlvbj0mdGltZXN0YW1wPTE3Njg4NzM3MTg="
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ class="w-full h-full object-contain"
|
|
|
+ ></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Teleport>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
@@ -79,7 +105,17 @@
|
|
|
]
|
|
|
|
|
|
const isAboutVisible = ref(false)
|
|
|
+ const isVideoPlaying = ref(false)
|
|
|
const aboutRef = ref(null)
|
|
|
+
|
|
|
+ const playVideo = () => {
|
|
|
+ isVideoPlaying.value = true
|
|
|
+ }
|
|
|
+
|
|
|
+ const closeVideo = () => {
|
|
|
+ isVideoPlaying.value = false
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
const observer = new IntersectionObserver(
|
|
|
(entries) => {
|
Lee