feat: add video player and launch details section to TwelveOrderStars…

pages/TwelveOrderStars.html

@@ -43,16 +43,39 @@ <h4 class="detail">发射地点：酒泉卫星发射基地</h4>
             </h1>
         </div>
         <div class="page">
-            <h1 style="
-                    color: rgba(255, 255, 255, 1);
-                ">
-                Page Three
-            </h1>
+            <div class="content">
+                <div class="bg-color"></div>
+                <div class="star-bg"></div>
+                <div class="title">
+                    「 十二阶星辰 」
+                </div>
+                <div class="detail" id="launch-detail-btn">
+                    发射纪实
+                    <svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 2rem;" width="128" height="128"
+                        viewBox="0 0 24 24">
+                        <path fill="#ffffff" d="M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z" />
+                    </svg>
+                </div>
+            </div>
+            <div class="video-player" id="video-player">
+                <video id="launch-video">
+                    <source src="../assets/videos/launch.mp4" type="video/mp4">
+                    您的浏览器不支持视频播放
+                </video>
+                <button class="close-video" id="close-video-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
         </div>
     </div>
     <script src="../build/three_r145.js"></script>
     <script src="../build/three_objloader.js"></script>
     <script src="../scripts/common/HeaderController.js"></script>
+    <script src="../scripts/common/StarBackground.js"></script>
     <script src="../scripts/TwelveOrderStars/index.js"></script>
 </body>
 

scripts/TwelveOrderStars/index.js

@@ -67,13 +67,81 @@ function animate() {
     renderer.render(scene, camera);
 }
 
+/**
+ * 初始化视频播放器功能
+ */
+function setupVideoPlayer() {
+    const launchDetailBtn = document.getElementById('launch-detail-btn');
+    const videoPlayer = document.getElementById('video-player');
+    const closeVideoBtn = document.getElementById('close-video-btn');
+    const launchVideo = document.getElementById('launch-video');
+    const content = document.querySelector('.page:nth-child(3) .content');
+
+    if (!launchDetailBtn || !videoPlayer || !closeVideoBtn || !launchVideo || !content) return;
+
+    // 点击发射纪实按钮
+    launchDetailBtn.addEventListener('click', () => {
+        // 添加淘出效果类
+        content.classList.add('fade-out');
+
+        // 延迟显示视频播放器，等待内容淘出效果完成
+        setTimeout(() => {
+            // 显示视频播放器
+            videoPlayer.classList.add('active');
+            // 自动播放视频
+            launchVideo.play();
+        }, 500); // 设置为500ms，与 CSS 过渡效果时间一致
+    });
+
+    // 点击关闭按钮
+    closeVideoBtn.addEventListener('click', () => {
+        // 暂停视频并重置到开头
+        launchVideo.pause();
+        launchVideo.currentTime = 0;
+
+        // 隐藏视频播放器
+        videoPlayer.classList.remove('active');
+
+        // 延迟显示内容，等待视频播放器隐藏效果完成
+        setTimeout(() => {
+            // 移除淘出效果类，使内容重新显示
+            content.classList.remove('fade-out');
+        }, 500);
+    });
+
+    // 当视频播放结束时自动关闭视频播放器
+    launchVideo.addEventListener('ended', () => {
+        // 隐藏视频播放器
+        videoPlayer.classList.remove('active');
+
+        // 延迟显示内容，等待视频播放器隐藏效果完成
+        setTimeout(() => {
+            // 移除淘出效果类，使内容重新显示
+            content.classList.remove('fade-out');
+        }, 500);
+    });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     const header = document.querySelector('.header');
     const container = document.querySelector('.container');
+    const lastPageContentStarContainer = document.querySelector('.page:nth-child(3) .content .star-bg');
 
     new HeaderController(header, { container });
 
+    new StarBackground(lastPageContentStarContainer, {
+        starCount: 200,
+        starSizeMin: 0.08,
+        starSizeMax: 0.16,
+        xSpeed: 0.0002,
+        ySpeed: 0.0002,
+        elapsed: 0,
+    });
+
     initThreeJS();
     LoadRocketModelForFirstPage();
     animate();
+
+    // 初始化视频播放器功能
+    setupVideoPlayer();
 });

styles/TwelveOrderStars/index.css

@@ -1,21 +1,18 @@
 body {
     min-height: 100vh;
     background: rgba(0, 0, 0, 1);
+    overflow-x: hidden;
 }
 
 .container {
-    height: 100vh;
+    min-height: 100vh;
     width: 100vw;
-    overflow-y: auto;
-    scroll-snap-type: y mandatory;
-    position: fixed;
     top: 0;
     left: 0;
     overflow-x: hidden;
 }
 
 .page {
-    scroll-snap-align: start;
     width: 100vw;
     height: 100vh;
     position: relative;
@@ -65,4 +62,140 @@ body {
     font-size: 3.2rem;
     font-weight: 200;
     font-family: 'fys', sans-serif;
+}
+
+.page:nth-child(3) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.page:nth-child(3) .content {
+    background-image: url("../../assets/images/TwelveOrderStars/TwelveOrderStartsEndPage.svg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 152.9rem;
+    height: 81.2rem;
+    border: 0.2rem solid rgba(100, 29, 111, 1);
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10rem;
+    position: relative;
+}
+
+.page:nth-child(3) .content .bg-color {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(14, 5, 15, 1);
+    z-index: -1;
+}
+
+.page:nth-child(3) .content .star-bg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 152.9rem;
+    height: 56.6rem;
+    z-index: 1;
+}
+
+.page:nth-child(3) .content .title {
+    font-size: 9.6rem;
+    font-family: 'fys', sans-serif;
+    color: rgba(255, 255, 255, 1);
+}
+
+.page:nth-child(3) .content .detail {
+    width: 22.4rem;
+    height: 5.6rem;
+    font-size: 2.4rem;
+    font-family: 'fys', sans-serif;
+    color: rgba(255, 255, 255, 1);
+    background-image: url("../../assets/images/TwelveOrderStars/button-bg.svg");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.page:nth-child(3) .content .detail svg {
+    width: 3rem;
+    height: 3rem;
+}
+
+.video-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+.video-player.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.video-player video {
+    width: 80%;
+    max-height: 80%;
+    border-radius: 0.5rem;
+    box-shadow: 0 0 2rem rgba(255, 255, 255, 0.2);
+}
+
+.close-video {
+    position: absolute;
+    top: 5rem;
+    right: 5rem;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 3rem;
+    cursor: pointer;
+    width: 5rem;
+    height: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background-color: rgba(100, 29, 111, 0.7);
+    transition: background-color 0.3s ease;
+}
+
+.close-video:hover {
+    background-color: rgba(100, 29, 111, 1);
+}
+
+.close-video svg {
+    width: 2.5rem;
+    height: 2.5rem;
+    stroke: white;
+    stroke-width: 0.2rem;
+}
+
+.page:nth-child(3) .content {
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.page:nth-child(3) .content.fade-out {
+    opacity: 0;
+    transform: scale(0.95);
 }