沉浸式全景视频平台界面设计：深色电影感美学与双屏对比功能

By 15547946974, 27 April, 2026

角色

assistant

content

Let me start by gathering design system recommendations and assets for this immersive panoramic video platform.```json{
"summary": "设计了一个沉浸式全景视频平台界面，包含三个核心页面：视频上传页（带拖拽上传区、进度条、断点续传状态）、双屏分屏对比页（左右/上下布局切换、独立播放控制）、全景拖动查看页（模拟360°视角漫游、缩放复位控制）。采用深色电影感美学，以近乎纯黑的底色搭配琥珀金点缀色，营造专业影视后期工具的氛围。使用 Outfit + DM Sans 字体组合，配合微妙的网格纹理背景、光晕动效和错落入场动画，打造高端沉浸体验。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>PanoVision - 全景视频平台</title>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n<link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;70…\" rel=\"stylesheet\">\n<script>\ntailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n heading: ['Outfit', 'sans-serif'],\n body: ['DM Sans', 'sans-serif'],\n },\n colors: {\n surface: { 50: '#0a0a0b', 100: '#111113', 200: '#18181b', 300: '#1f1f23', 400: '#27272c' },\n amber: { 400: '#d4a537', 500: '#c4952a', 600: '#a67c1e' },\n slate: { 500: '#64748b', 600: '#475569', 700: '#334155' }\n }\n }\n }\n}\n</script>\n<style>\n:root {\n --amber: #d4a537;\n --amber-glow: rgba(212, 165, 55, 0.15);\n --surface-deep: #07070a;\n --surface-base: #0a0a0b;\n --surface-raised: #111113;\n --surface-overlay: #18181b;\n --border-subtle: rgba(255,255,255,0.06);\n --border-accent: rgba(212,165,55,0.25);\n --text-primary: #f0ece4;\n --text-secondary: #8a8680;\n --text-muted: #5a5650;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n font-family: 'DM Sans', sans-serif;\n background: var(--surface-deep);\n color: var(--text-primary);\n overflow-x: hidden;\n min-height: 100vh;\n}\n\n/* Texture overlay */\nbody::before {\n content: '';\n position: fixed;\n inset: 0;\n background: url('https://www.transparenttextures.com/patterns/dark-mosaic.png');\n opacity: 0.3;\n pointer-events: none;\n z-index: 0;\n}\n\n/* Ambient glow */\n.ambient-glow {\n position: fixed;\n width: 600px;\n height: 600px;\n border-radius: 50%;\n filter: blur(180px);\n opacity: 0.07;\n pointer-events: none;\n z-index: 0;\n}\n.glow-1 { background: var(--amber); top: -200px; left: -100px; animation: floatGlow 20s ease-in-out infinite; }\n.glow-2 { background: #3b82f6; bottom: -200px; right: -100px; animation: floatGlow 25s ease-in-out infinite reverse; }\n\n@keyframes floatGlow {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(60px, 40px) scale(1.1); }\n 66% { transform: translate(-40px, 60px) scale(0.9); }\n}\n\n/* Navigation */\n.nav-tab {\n position: relative;\n padding: 0.625rem 1.25rem;\n font-family: 'Outfit', sans-serif;\n font-weight: 500;\n font-size: 0.875rem;\n letter-spacing: 0.02em;\n color: var(--text-secondary);\n cursor: pointer;\n transition: color 0.3s ease;\n border: none;\n background: none;\n}\n.nav-tab:hover { color: var(--text-primary); }\n.nav-tab.active {\n color: var(--amber);\n}\n.nav-tab.active::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 50%;\n transform: translateX(-50%);\n width: 24px;\n height: 2px;\n background: var(--amber);\n border-radius: 1px;\n}\n\n/* Page sections */\n.page-section {\n display: none;\n animation: fadeSlideIn 0.6s ease-out;\n}\n.page-section.active { display: block; }\n\n@keyframes fadeSlideIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Stagger children */\n.stagger-in > * {\n opacity: 0;\n animation: staggerFade 0.5s ease-out forwards;\n}\n.stagger-in > *:nth-child(1) { animation-delay: 0.1s; }\n.stagger-in > *:nth-child(2) { animation-delay: 0.2s; }\n.stagger-in > *:nth-child(3) { animation-delay: 0.3s; }\n.stagger-in > *:nth-child(4) { animation-delay: 0.4s; }\n.stagger-in > *:nth-child(5) { animation-delay: 0.5s; }\n.stagger-in > *:nth-child(6) { animation-delay: 0.6s; }\n\n@keyframes staggerFade {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Upload zone */\n.upload-zone {\n position: relative;\n border: 2px dashed rgba(212,165,55,0.2);\n border-radius: 20px;\n padding: 4rem 2rem;\n text-align: center;\n transition: all 0.4s ease;\n background: linear-gradient(135deg, rgba(212,165,55,0.02), transparent);\n cursor: pointer;\n}\n.upload-zone:hover {\n border-color: rgba(212,165,55,0.45);\n background: linear-gradient(135deg, rgba(212,165,55,0.05), transparent);\n transform: translateY(-2px);\n}\n.upload-zone.dragover {\n border-color: var(--amber);\n background: rgba(212,165,55,0.08);\n box-shadow: 0 0 60px rgba(212,165,55,0.1);\n}\n\n/* Upload icon pulse */\n.upload-icon-ring {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 2px solid rgba(212,165,55,0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem;\n position: relative;\n animation: iconPulse 3s ease-in-out infinite;\n}\n.upload-icon-ring::before {\n content: '';\n position: absolute;\n inset: -8px;\n border-radius: 50%;\n border: 1px solid rgba(212,165,55,0.06);\n animation: iconPulse 3s ease-in-out infinite 0.5s;\n}\n@keyframes iconPulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.05); opacity: 0.8; }\n}\n\n/* Progress bar */\n.progress-track {\n height: 4px;\n background: var(--surface-overlay);\n border-radius: 2px;\n overflow: hidden;\n}\n.progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--amber), #e8c547);\n border-radius: 2px;\n transition: width 0.4s ease;\n box-shadow: 0 0 12px rgba(212,165,55,0.4);\n}\n\n/* File item */\n.file-item {\n background: var(--surface-raised);\n border: 1px solid var(--border-subtle);\n border-radius: 14px;\n padding: 1.25rem 1.5rem;\n transition: all 0.3s ease;\n}\n.file-item:hover {\n border-color: var(--border-accent);\n background: var(--surface-overlay);\n}\n\n/* Split screen */\n.video-panel {\n position: relative;\n background: var(--surface-base);\n border: 1px solid var(--border-subtle);\n border-radius: 16px;\n overflow: hidden;\n transition: all 0.4s ease;\n}\n.video-panel:hover {\n border-color: rgba(212,165,55,0.15);\n}\n.video-panel .panel-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));\n pointer-events: none;\n}\n\n/* Video controls */\n.video-controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1.25rem 1.5rem;\n z-index: 10;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n.ctrl-btn {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.15);\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(10px);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n font-size: 0.75rem;\n}\n.ctrl-btn:hover {\n background: var(--amber);\n border-color: var(--amber);\n color: #000;\n transform: scale(1.1);\n}\n.ctrl-btn.play-main {\n width: 44px;\n height: 44px;\n font-size: 0.875rem;\n background: rgba(212,165,55,0.2);\n border-color: rgba(212,165,55,0.4);\n}\n\n/* Timeline */\n.timeline-track {\n flex: 1;\n height: 3px;\n background: rgba(255,255,255,0.1);\n border-radius: 2px;\n position: relative;\n cursor: pointer;\n}\n.timeline-progress {\n height: 100%;\n background: var(--amber);\n border-radius: 2px;\n position: relative;\n}\n.timeline-progress::after {\n content: '';\n position: absolute;\n right: -5px;\n top: 50%;\n transform: translateY(-50%);\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--amber);\n box-shadow: 0 0 8px rgba(212,165,55,0.5);\n}\n\n/* Layout switcher */\n.layout-btn {\n padding: 0.5rem 0.75rem;\n border-radius: 8px;\n border: 1px solid var(--border-subtle);\n background: transparent;\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.25s ease;\n font-size: 0.75rem;\n}\n.layout-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }\n.layout-btn.active {\n background: rgba(212,165,55,0.1);\n border-color: var(--amber);\n color: var(--amber);\n}\n\n/* Panorama viewer */\n.pano-viewer {\n position: relative;\n width: 100%;\n aspect-ratio: 16/9;\n border-radius: 20px;\n overflow: hidden;\n background: var(--surface-base);\n border: 1px solid var(--border-subtle);\n cursor: grab;\n}\n.pano-viewer:active { cursor: grabbing; }\n.pano-viewer .pano-image {\n width: 200%;\n height: 120%;\n object-fit: cover;\n position: absolute;\n top: -10%;\n left: 0;\n transition: transform 0.1s ease-out;\n pointer-events: none;\n}\n\n/* Compass */\n.compass {\n position: absolute;\n top: 1.5rem;\n right: 1.5rem;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255,255,255,0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 20;\n}\n.compass-needle {\n width: 2px;\n height: 24px;\n position: relative;\n transition: transform 0.3s ease;\n}\n.compass-needle::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 12px solid var(--amber);\n}\n.compass-needle::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 12px solid rgba(255,255,255,0.3);\n}\n\n/* FOV indicator */\n.fov-indicator {\n position: absolute;\n bottom: 1.5rem;\n right: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n z-index: 20;\n}\n.fov-btn {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255,255,255,0.1);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n font-size: 0.75rem;\n}\n.fov-btn:hover {\n background: rgba(212,165,55,0.2);\n border-color: rgba(212,165,55,0.4);\n}\n\n/* Angle display */\n.angle-display {\n position: absolute;\n top: 1.5rem;\n left: 1.5rem;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 0.75rem 1rem;\n z-index: 20;\n font-family: 'Outfit', sans-serif;\n}\n\n/* Crosshair */\n.crosshair {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 32px;\n height: 32px;\n z-index: 15;\n opacity: 0.3;\n}\n.crosshair::before, .crosshair::after {\n content: '';\n position: absolute;\n background: white;\n}\n.crosshair::before {\n width: 1px;\n height: 100%;\n left: 50%;\n transform: translateX(-50%);\n}\n.crosshair::after {\n width: 100%;\n height: 1px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/* Scrollbar */\n::-webkit-scrollbar { width: 6px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }\n\n/* Badge */\n.badge {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.25rem 0.75rem;\n border-radius: 100px;\n font-size: 0.7rem;\n font-weight: 500;\n letter-spacing: 0.04em;\n font-family: 'Outfit', sans-serif;\n}\n\n/* Volume slider */\n.volume-group { position: relative; display: flex; align-items: center; }\n.volume-slider {\n width: 0;\n overflow: hidden;\n transition: width 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n}\n.volume-group:hover .volume-slider {\n width: 70px;\n opacity: 1;\n}\n.vol-range {\n -webkit-appearance: none;\n appearance: none;\n width: 60px;\n height: 3px;\n background: rgba(255,255,255,0.15);\n border-radius: 2px;\n outline: none;\n margin-left: 8px;\n}\n.vol-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--amber);\n cursor: pointer;\n}\n\n/* Floating label */\n.float-label {\n position: absolute;\n top: 1rem;\n left: 1rem;\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 8px;\n padding: 0.375rem 0.75rem;\n font-size: 0.7rem;\n font-family: 'Outfit', sans-serif;\n color: var(--text-secondary);\n z-index: 10;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Decorative grid lines */\n.grid-deco {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n opacity: 0.03;\n background-image:\n linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);\n background-size: 80px 80px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .split-container { flex-direction: column !important; }\n .upload-zone { padding: 2.5rem 1.5rem; }\n .upload-icon-ring { width: 72px; height: 72px; }\n}\n</style>\n</head>\n<body>\n\n<div class=\"ambient-glow glow-1\"></div>\n<div class=\"ambient-glow glow-2\"></div>\n<div class=\"grid-deco\"></div>\n\n<div class=\"relative z-10 min-h-screen\">\n\n \n <header class=\"sticky top-0 z-50\" style=\"background: rgba(7,7,10,0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle);\">\n <div class=\"max-w-7xl mx-auto px-6 py-4 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--amber), #a67c1e);\">\n <i class=\"fa-solid fa-vr-cardboard text-black text-sm\"></i>\n </div>\n <span class=\"font-heading font-bold text-lg tracking-tight\" style=\"color: var(--text-primary);\">PanoVision</span>\n <span class=\"badge\" style=\"background: rgba(212,165,55,0.1); color: var(--amber);\">Pro</span>\n </div>\n\n <nav class=\"flex items-center gap-1\">\n <button class=\"nav-tab active\" onclick=\"switchPage('upload')\">\n <i class=\"fa-solid fa-cloud-arrow-up mr-1.5 text-xs\"></i>上传\n </button>\n <button class=\"nav-tab\" onclick=\"switchPage('split')\">\n <i class=\"fa-solid fa-columns mr-1.5 text-xs\"></i>分屏\n </button>\n <button class=\"nav-tab\" onclick=\"switchPage('panorama')\">\n <i class=\"fa-solid fa-globe mr-1.5 text-xs\"></i>全景\n </button>\n </nav>\n\n <div class=\"flex items-center gap-3\">\n <button class=\"ctrl-btn\" style=\"width:32px;height:32px;border-radius:8px;font-size:0.7rem;\">\n <i class=\"fa-solid fa-gear\"></i>\n </button>\n <div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-heading font-semibold\" style=\"background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white;\">K</div>\n </div>\n </div>\n </header>\n\n <main class=\"max-w-7xl mx-auto px-6 py-8\">\n\n \n <section id=\"page-upload\" class=\"page-section active\">\n <div class=\"stagger-in\">\n\n \n <div class=\"mb-8\">\n <div class=\"flex items-center gap-3 mb-2\">\n <h1 class=\"font-heading font-bold text-2xl tracking-tight\">视频上传</h1>\n <span class=\"badge\" style=\"background: rgba(52,211,153,0.1); color: #34d399;\"><i class=\"fa-solid fa-circle text-[5px] mr-1\"></i>就绪</span>\n </div>\n <p class=\"font-body text-sm\" style=\"color: var(--text-secondary);\">支持 360\u00b0 / 180\u00b0 全景视频，兼容 MP4、WebM、MOV 格式，单文件最大 8GB</p>\n </div>\n\n \n <div class=\"upload-zone mb-8\" id=\"uploadZone\">\n <div class=\"upload-icon-ring\">\n <i class=\"fa-solid fa-cloud-arrow-up text-3xl\" style=\"color: var(--amber);\"></i>\n </div>\n <p class=\"font-heading font-semibold text-lg mb-2\" style=\"color: var(--text-primary);\">拖放视频文件到此处</p>\n <p class=\"font-body text-sm mb-5\" style=\"color: var(--text-muted);\">或点击浏览本地文件</p>\n <div class=\"flex items-center justify-center gap-3 flex-wrap\">\n <span class=\"badge\" style=\"background: var(--surface-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle);\">\n <i class=\"fa-solid fa-panorama text-[9px]\"></i> 360\u00b0 全景\n </span>\n <span class=\"badge\" style=\"background: var(--surface-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle);\">\n <i class=\"fa-solid fa-vr-cardboard text-[9px]\"></i> 180\u00b0 VR\n </span>\n <span class=\"badge\" style=\"background: var(--surface-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle);\">\n <i class=\"fa-solid fa-film text-[9px]\"></i> MP4 / WebM / MOV\n </span>\n <span class=\"badge\" style=\"background: var(--surface-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle);\">\n <i class=\"fa-solid fa-shield-check text-[9px]\"></i> 断点续传\n </span>\n </div>\n </div>\n\n \n <div class=\"space-y-3\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"font-heading font-semibold text-sm\" style=\"color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase;\">上传队列</h3>\n <span class=\"text-xs font-body\" style=\"color: var(--text-muted);\">3 个文件</span>\n </div>\n\n \n <div class=\"file-item\">\n <div class=\"flex items-center justify-between mb-3\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-xl flex items-center justify-center\" style=\"background: rgba(52,211,153,0.1);\">\n <i class=\"fa-solid fa-check text-sm\" style=\"color: #34d399;\"></i>\n </div>\n <div>\n <p class=\"font-heading font-medium text-sm\">Alps_360_Sunrise.mp4</p>\n <p class=\"text-xs\" style=\"color: var(--text-muted);\">2.4 GB · 360\u00b0 等距柱状投影 · 4K</p>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"badge\" style=\"background: rgba(52,211,153,0.1); color: #34d399;\">校验通过</span>\n <button class=\"ctrl-btn\" style=\"width:28px;height:28px;font-size:0.6rem;\"><i class=\"fa-solid fa-ellipsis-vertical\"></i></button>\n </div>\n </div>\n <div class=\"progress-track\">\n <div class=\"progress-fill\" style=\"width: 100%; background: linear-gradient(90deg, #34d399, #6ee7b7);\"></div>\n </div>\n </div>\n\n \n <div class=\"file-item\" style=\"border-color: var(--border-accent);\">\n <div class=\"flex items-center justify-between mb-3\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-xl flex items-center justify-center\" style=\"background: rgba(212,165,55,0.1);\">\n <i class=\"fa-solid fa-spinner fa-spin text-sm\" style=\"color: var(--amber);\"></i>\n </div>\n <div>\n <p class=\"font-heading font-medium text-sm\">Ocean_VR_180_Dive.mp4</p>\n <p class=\"text-xs\" style=\"color: var(--text-muted);\">5.1 GB · 180\u00b0 VR · 6K · <span style=\"color: var(--amber);\">67% - 2分18秒剩余</span></p>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"badge\" style=\"background: rgba(212,165,55,0.1); color: var(--amber);\"><i class=\"fa-solid fa-arrow-up text-[8px] mr-1\"></i>上传中</span>\n <button class=\"ctrl-btn\" style=\"width:28px;height:28px;

total_tokens

24459

summary

设计了一个沉浸式全景视频平台界面，包含三个核心页面：视频上传页（带拖拽上传区、进度条、断点续传状态）、双屏分屏对比页（左右/上下布局切换、独立播放控制）、全景拖动查看页（模拟360°视角漫游、缩放复位控制）。采用深色电影感美学，以近乎纯黑的底色搭配琥珀金点缀色，营造专业影视后期工具的氛围。使用 Outfit + DM Sans 字体组合，配合微妙的网格纹理背景、光晕动效和错落入场动画，打造高端沉浸体验。

uiParsing

关闭