定位：子比主题–>>全局&功能–>>自定义代码–>>自定义javascript代码，将代码放到里面

const videoSources = {
    desktop: 'https://img-1259613606.cos.ap-nanjing.myqcloud.com/LightPicture/2025/10/245745651b645909.mp4',
    mobile: '' // 若为空，则自动使用desktop的视频源
};

function getVideoSource() {
    return window.innerWidth < 768 
        ? (videoSources.mobile || videoSources.desktop)
        : videoSources.desktop;
}

function setVideoSource() {
    const video = document.getElementById('RuYan_video');
    while (video.firstChild) video.removeChild(video.firstChild);
    const source = document.createElement('source');
    source.src = getVideoSource();
    source.type = 'video/mp4';
    video.appendChild(source);
    video.load();
}

function closeVideoShowcase(closeType, saveState = true) {
    const videoShowcase = document.getElementById('RuYan_videoShowcase');
    const video = document.getElementById('RuYan_video');
    video.pause();
    videoShowcase.style.transform = 'translateY(-100%)';
    videoShowcase.style.opacity = '0';
    setTimeout(() => {
        videoShowcase.style.display = 'none';
        if (saveState) {
            if (closeType === '24h') {
                const expireTime = new Date().getTime() + 24 * 60 * 60 * 1000;
                localStorage.setItem('RuYan_videoClosedUntil', expireTime.toString());
            } else if (closeType === 'session') {
                sessionStorage.setItem('RuYan_videoClosed', 'true');
            }
        }
    }, 1000);
}

document.getElementById('RuYan_scrollDown').addEventListener('click', () => {
    closeVideoShowcase('session');
});
document.getElementById('RuYan_close24h').addEventListener('click', () => {
    closeVideoShowcase('24h');
});
document.getElementById('RuYan_closeSession').addEventListener('click', () => {
    closeVideoShowcase('session');
});

window.addEventListener('resize', () => {
    const videoShowcase = document.getElementById('RuYan_videoShowcase');
    if (videoShowcase.style.display === 'flex') {
        setVideoSource();
        document.getElementById('RuYan_video').play();
    }
});

document.addEventListener('DOMContentLoaded', () => {
    const videoShowcase = document.getElementById('RuYan_videoShowcase');
    const video = document.getElementById('RuYan_video');
    let shouldShowVideo = true;

    if (sessionStorage.getItem('RuYan_videoClosed') === 'true') {
        shouldShowVideo = false;
    }

    const expireTime = localStorage.getItem('RuYan_videoClosedUntil');
    if (expireTime && new Date().getTime() < parseInt(expireTime)) {
        shouldShowVideo = false;
    } else if (expireTime) {
        localStorage.removeItem('RuYan_videoClosedUntil');
    }

    if (!shouldShowVideo) return;

    setVideoSource();
    videoShowcase.style.display = 'flex';
    video.muted = true;
    const playPromise = video.play();

    playPromise?.then(() => {
        setTimeout(() => closeVideoShowcase('session', false), 8000);
    }).catch(() => {
        closeVideoShowcase('session');
    });

    video.addEventListener('ended', () => {
        closeVideoShowcase('session', false);
    });
});

定位：子比主题–>>全局&功能–>>自定义代码–>>自定义CSS样式，将代码放到里面

 .RuYan_main-content {
     min-height: 100vh;
     padding: 50px 20px;
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .RuYan_main-container {
     max-width: 800px;
 }

 .RuYan_main-title {
     font-size: 3rem;
     color: #2c3e50;
     margin-bottom: 20px;
 }

 .RuYan_main-subtitle {
     font-size: 1.2rem;
     color: #7f8c8d;
     line-height: 1.6;
 }

 .RuYan_video-showcase {
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100%;
     overflow: hidden;
     display: none;
     align-items: center;
     justify-content: center;
     background: #000;
     z-index: 100000;
     transition: transform 1s ease, opacity 1s ease;
 }

 .RuYan_video-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 1;
 }

 .RuYan_video-background::-webkit-media-controls {
     display: none !important;
 }

 .RuYan_video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     z-index: 2;
 }

 .RuYan_scroll-down {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 4;
     color: white;
     font-size: 1.5rem;
     cursor: pointer;
     animation: RuYan_bounce 2s infinite;
     background: rgba(255, 255, 255, 0.2);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .RuYan_scroll-down:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateX(-50%) scale(1.1);
 }

 .RuYan_scroll-icon {
     width: 24px;
     height: 24px;
     fill: currentColor;
 }

 .RuYan_close-options {
     position: absolute;
     bottom: 100px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 4;
     display: flex;
     gap: 20px;
 }

 .RuYan_close-btn {
     padding: 10px 20px;
     background: rgba(255, 255, 255, 0.2);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 30px;
     cursor: pointer;
     font-size: 14px;
     transition: all 0.3s ease;
 }

 .RuYan_close-btn:hover {
     background: rgba(255, 255, 255, 0.3);
 }

 @keyframes RuYan_bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0) translateX(-50%);
     }

     40% {
         transform: translateY(-10px) translateX(-50%);
     }

     60% {
         transform: translateY(-5px) translateX(-50%);
     }
 }

 @media (max-width: 768px) {
     .RuYan_main-title {
         font-size: 2.5rem;
     }

     .RuYan_video-content h1 {
         font-size: 2.5rem;
     }

     .RuYan_video-content p {
         font-size: 1rem;
     }

     .RuYan_close-options {
         flex-direction: column;
         gap: 10px;
     }
 }