.tool-header { max-width:720px; margin:0 auto; padding:40px 24px 12px; } .tool-header h1 { font-size:clamp(22px,4vw,30px); font-weight:700; background:linear-gradient(135deg,#e9e9f5,#a09fb1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; } .tool-sub { color:var(--noir-text-tertiary); font-size:13px; } .tool-container { max-width:720px; margin:0 auto; padding:0 24px 48px; } .tool-card { background:var(--noir-bg-elevated); border:1px solid var(--noir-border-light); border-radius:16px; padding:24px; margin-bottom:16px; box-shadow:var(--noir-shadow-sm); } .tool-card h3 { font-size:15px; font-weight:600; margin:0 0 12px; color:var(--noir-text-primary); } .drop-zone { border:2px dashed var(--noir-border-light); border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all .2s; color:var(--noir-text-tertiary); } .drop-zone:hover, .drop-zone.dragover { border-color:var(--noir-accent); background:rgba(91,135,49,0.08); color:var(--noir-text-secondary); } .drop-zone svg { width:36px; height:36px; margin-bottom:8px; opacity:.5; } .preview-area { display:flex; gap:16px; flex-wrap:wrap; } .preview-box { flex:1; min-width:200px; } .preview-box .label { font-size:11px; color:var(--noir-text-tertiary); margin-bottom:4px; } .preview-box .info { font-size:12px; color:var(--noir-text-secondary); margin-top:4px; } .preview-box video { width:100%; border-radius:8px; background:var(--noir-bg-tertiary); max-height:200px; } .ctrl-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:12px 0; } .ctrl-row label { font-size:12px; color:var(--noir-text-secondary); } .ctrl-row input[type="range"] { flex:1; min-width:120px; accent-color:var(--noir-accent); } .ctrl-row .val { font-size:13px; font-weight:600; color:var(--noir-text-primary); min-width:36px; text-align:right; } .progress-wrap { margin:12px 0; display:none; } .progress-wrap.show { display:block; } .progress-track { height:6px; border-radius:3px; background:var(--noir-bg-tertiary); overflow:hidden; } .progress-fill { height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,#6c63ff,#a78bfa); transition:width .3s; } .progress-text { display:flex; justify-content:space-between; font-size:11px; color:var(--noir-text-tertiary); margin-top:4px; } .home-btn { position:fixed; top:16px; left:16px; z-index:100; width:36px; height:36px; border-radius:50%; background:var(--noir-bg-elevated); backdrop-filter:blur(20px); border:1px solid var(--noir-border-light); display:flex; align-items:center; justify-content:center; color:var(--noir-text-primary); text-decoration:none; transition:all .2s; box-shadow:var(--noir-shadow-xs); } .home-btn:hover { box-shadow:var(--noir-shadow-md); transform:scale(1.08); } .btn-download { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:9999px; font-size:14px; font-weight:500; background:var(--noir-accent); color:var(--noir-text-inverse); border:none; cursor:pointer; transition:all .2s; text-decoration:none; } .btn-download:hover { filter:brightness(1.12); } .btn-download:disabled { opacity:.4; cursor:not-allowed; filter:none; } .badge { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:500; } .badge.green { background:rgba(34,197,94,0.15); color:#22c55e; } .badge.red { background:rgba(239,68,68,0.15); color:#ef4444; } @media(max-width:640px){ .tool-container { padding:0 12px 32px; } .preview-area { flex-direction:column; } }

视频压缩

浏览器本地处理，不上传服务器

拖拽视频到这里，或点击选择文件