.xiao-portal-screen{position:fixed!important;top:0;left:0;width:100vw;height:100vh;background:#030206;z-index:999999;overflow:hidden} .xiao-portal-body{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none} .xiao-portal-container{width:90%;max-width:900px} .xiao-portal-card{pointer-events:auto;background:rgba(20,20,30,0.8);padding:20px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);margin:10px} .xiao-p-btn{padding:12px 24px;background:#333;color:#fff;border:none;border-radius:10px;cursor:pointer;margin:5px} .xiao-portal-back-btn{position:absolute;top:20px;left:80px;z-index:100000;color:#00ffcc;text-decoration:none;font-weight:bold} #xiaoPortalCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0} (function(){ const c = document.getElementById(‘xiaoPortalCanvas’), ctx = c.getContext(‘2d’); let analyser, dataArray, hasAudio = false, stream; window.initAudio = () => { navigator.mediaDevices.getUserMedia({audio: true}).then(s => { stream = s; const ac = new (window.AudioContext || window.webkitAudioContext)(); const src = ac.createMediaStreamSource(s); analyser = ac.createAnalyser(); analyser.fftSize = 256; dataArray = new Uint8Array(analyser.frequencyBinCount); src.connect(analyser); hasAudio = true; document.getElementById(‘audioStatus’).innerText = “音频流：在线”; }); }; window.stopAudio = () => { if(stream) { stream.getTracks().forEach(t=>t.stop()); hasAudio = false; document.getElementById(‘audioStatus’).innerText = “音频流：已离线”; } }; function draw() { // 1. 浮光炫彩背景 ctx.fillStyle = ‘rgba(3,2,6,0.1)’; ctx.fillRect(0,0,c.width,c.height); // 2. 霓虹贝斯轮廓 (在背景中层) ctx.strokeStyle = ‘#ff00ff’; ctx.lineWidth = 4; ctx.shadowBlur = 15; ctx.shadowColor = ‘#ff00ff’; ctx.beginPath(); ctx.moveTo(c.width-200, 100); ctx.quadraticCurveTo(c.width-250, 300, c.width-200, 500); ctx.stroke(); ctx.shadowBlur = 0; // 3. 大型动态频谱 (最上层) if(hasAudio){ analyser.getByteFrequencyData(dataArray); for(let i=0; i { c.width=window.innerWidth; c.height=window.innerHeight; }; c.width=window.innerWidth; c.height=window.innerHeight; draw(); setInterval(()=>document.getElementById(‘xiaoPortalClock’).innerText=new Date().toLocaleTimeString(), 1000); })();