huangzhidong
/
guoyao-jiankang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI 空间</title>
</head>
<style>
    /* 重置基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .center-banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
        border-radius: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    .center-banner video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .center-banner video.loaded {
        opacity: 1;
    }

    .center-banner .overlay-img {
        position: absolute;
        z-index: 2;
        width: 270px;
        cursor: pointer;
        transform: translate(-50%, -50%);
        animation: float 4s ease-in-out infinite;
        transition: all .3s ease;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .center-banner .overlay-img.show {
        opacity: 1;
        pointer-events: auto;
    }

    .center-banner .img-left {
        top: 48%;
        left: 23%;
    }

    @keyframes float {
        0%,100%{
            transform: translate(-50%, -50%);
        }
        50%{
            transform: translate(-50%, calc(-50% - 12px));
        }
    }

    .center-banner .overlay-img:hover{
        animation-play-state: paused;
    }

    /* ===== 酷炫 Loading ===== */
    .loading-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .loading-container.hide {
        display: none;
    }

    /* 粒子光环 */
    .ring {
        position: relative;
        width: 120px;
        height: 120px;
    }

    .ring .dot {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: radial-gradient(circle, #00d2ff, #3a7bd5);
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.6), 0 0 60px rgba(0, 210, 255, 0.3);
        animation: orbit 2s linear infinite;
    }

    .ring .dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    .ring .dot:nth-child(2) { top: 25%; right: 0; transform: translateY(-50%); animation-delay: 0.25s; }
    .ring .dot:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 0.5s; }
    .ring .dot:nth-child(4) { top: 25%; left: 0; transform: translateY(-50%); animation-delay: 0.75s; }

    .ring .dot:nth-child(5) { top: 12%; right: 12%; animation-delay: 0.125s; width: 8px; height: 8px; opacity: 0.6; }
    .ring .dot:nth-child(6) { bottom: 12%; right: 12%; animation-delay: 0.375s; width: 8px; height: 8px; opacity: 0.6; }
    .ring .dot:nth-child(7) { bottom: 12%; left: 12%; animation-delay: 0.625s; width: 8px; height: 8px; opacity: 0.6; }
    .ring .dot:nth-child(8) { top: 12%; left: 12%; animation-delay: 0.875s; width: 8px; height: 8px; opacity: 0.6; }

    @keyframes orbit {
        0% { transform: rotate(0deg) translateX(54px) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(54px) rotate(-360deg); }
    }

    /* 中心发光球 */
    .ring .center-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: radial-gradient(circle, #00d2ff, #3a7bd5);
        box-shadow: 0 0 40px rgba(0, 210, 255, 0.5), 0 0 80px rgba(0, 210, 255, 0.2);
        animation: glow-pulse 1.5s ease-in-out infinite;
    }

    @keyframes glow-pulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.7; }
    }

    /* 加载文字 */
    .loading-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        letter-spacing: 4px;
        background: linear-gradient(90deg, #00d2ff, #3a7bd5, #00d2ff);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient-move 2s linear infinite;
    }

    @keyframes gradient-move {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
    }

    /* 底部波浪条 */
    .wave-bars {
        display: flex;
        gap: 4px;
        align-items: center;
        height: 30px;
    }

    .wave-bars .bar {
        width: 4px;
        height: 100%;
        border-radius: 2px;
        background: linear-gradient(180deg, #00d2ff, #3a7bd5);
        animation: wave 0.8s ease-in-out infinite alternate;
    }

    .wave-bars .bar:nth-child(1) { height: 10px; animation-delay: 0s; }
    .wave-bars .bar:nth-child(2) { height: 20px; animation-delay: 0.1s; }
    .wave-bars .bar:nth-child(3) { height: 30px; animation-delay: 0.2s; }
    .wave-bars .bar:nth-child(4) { height: 25px; animation-delay: 0.3s; }
    .wave-bars .bar:nth-child(5) { height: 15px; animation-delay: 0.4s; }
    .wave-bars .bar:nth-child(6) { height: 28px; animation-delay: 0.5s; }
    .wave-bars .bar:nth-child(7) { height: 18px; animation-delay: 0.6s; }
    .wave-bars .bar:nth-child(8) { height: 22px; animation-delay: 0.7s; }

    @keyframes wave {
        0% { transform: scaleY(0.3); opacity: 0.3; }
        100% { transform: scaleY(1); opacity: 1; }
    }

    @media(max-width:1200px){
        .center-banner {
            margin-top: 0;
        }
    }
</style>
<body>
<div class="center-banner">
    <!-- Loading 特效 -->
    <div class="loading-container" id="loadingContainer">
        <div class="ring">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="center-glow"></div>
        </div>
        <div class="loading-text">AI 空间初始化中</div>
        <div class="wave-bars">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>

    <video
            class="video"
            id="bgVideo"
            src="/static/ai/img/dispatch.mp4"
            autoplay
            loop
            muted
            playsinline
            webkit-playsinline
            x5-playsinline
            disablePictureInPicture
            preload="auto">
        您的浏览器不支持视频播放
    </video>

    <div class="img-box" onclick="goDispatchCenter()">
        <img src="/static/ai/img/dispatch_center.png" class="overlay-img img-left" id="overlayImg">
    </div>
</div>
</body>

<script>
    function goDispatchCenter(){
        window.location.href = "{:url('dispatchCenter')}";
    }

    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('bgVideo');
        const overlayImg = document.getElementById('overlayImg');
        const loadingContainer = document.getElementById('loadingContainer');

        function showContent() {
            video.classList.add('loaded');
            overlayImg.classList.add('show');
            loadingContainer.classList.add('hide');
        }

        setTimeout(() => {
            if (video.readyState >= 2) {
                showContent();
            } else {
                video.addEventListener('loadeddata', showContent);
                video.addEventListener('error', showContent);
                // 再加 2 秒后备
                setTimeout(showContent, 2000);
            }
        }, 3000); // 先等 3 秒
    });
</script>
</html>