.compress-container[data-v-8f192521]{width:100%;padding:20px;background:#f5f7fa;position:relative;display:flex;flex-direction:column;box-sizing:border-box}.content-wrapper[data-v-8f192521]{flex:1;width:100%;max-width:1200px;margin:0 auto}.global-loading[data-v-8f192521]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:9999}.loading-content[data-v-8f192521]{background:white;padding:40px;border-radius:12px;text-align:center;box-shadow:0 4px 20px #0003}.loading-content p[data-v-8f192521]{margin-top:20px;font-size:16px;color:#333}.main-layout[data-v-8f192521]{min-height:calc(100vh - 200px);height:100%;background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px #0000001a}.left-panel[data-v-8f192521]{height:calc(100vh - 200px);border-right:1px solid #e4e7ed;display:flex;flex-direction:column;background:#fafafa}.upload-section[data-v-8f192521]{padding:20px;border-bottom:1px solid #e4e7ed}.add-file-btn[data-v-8f192521]{width:100%;margin-bottom:15px}.batch-setting[data-v-8f192521]{margin-top:10px}.image-list[data-v-8f192521]{flex:1;overflow-y:auto;padding:10px}.image-item[data-v-8f192521]{display:flex;padding:10px;margin-bottom:10px;background:white;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all .3s}.image-item[data-v-8f192521]:hover{border-color:#409eff;box-shadow:0 2px 8px #409eff33}.image-item.active[data-v-8f192521]{border-color:#409eff;background:#ecf5ff}.thumbnail[data-v-8f192521]{position:relative;width:60px;height:60px;flex-shrink:0;margin-right:10px}.thumbnail img[data-v-8f192521]{width:100%;height:100%;object-fit:cover;border-radius:4px}.delete-btn[data-v-8f192521]{position:absolute;top:-5px;right:-5px;width:20px;height:20px;background:#f56c6c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;opacity:0;transition:opacity .3s}.image-item:hover .delete-btn[data-v-8f192521]{opacity:1}.image-info[data-v-8f192521]{flex:1;min-width:0}.image-name[data-v-8f192521]{font-size:12px;font-weight:500;color:#303133;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-size[data-v-8f192521]{font-size:11px;color:#909399;margin-bottom:2px}.compressed-size[data-v-8f192521]{font-size:11px;font-weight:500}.compressed-size.excellent[data-v-8f192521]{color:#67c23a}.compressed-size.good[data-v-8f192521]{color:#409eff}.compressed-size.average[data-v-8f192521]{color:#e6a23c}.compressed-size.poor[data-v-8f192521]{color:#f56c6c}.compressed-size .ratio[data-v-8f192521]{font-size:10px;margin-left:2px}.status[data-v-8f192521]{font-size:11px;color:#909399;font-style:italic}.empty-list[data-v-8f192521]{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.middle-panel[data-v-8f192521]{height:calc(100vh - 200px);padding:20px;display:flex;flex-direction:column}.compare-container[data-v-8f192521]{flex:1;display:flex;flex-direction:column;background:#f0f2f5;border-radius:8px;overflow:hidden;position:relative}.compare-header[data-v-8f192521]{position:absolute;top:0;left:0;right:0;z-index:30;padding:10px 20px;background:rgba(0,0,0,.5);color:#fff;opacity:.7;transition:all .3s}.compare-header.header-visible[data-v-8f192521],.compare-header[data-v-8f192521]:hover{opacity:1;background:rgba(0,0,0,.8)}.header-content[data-v-8f192521]{display:flex;justify-content:space-between;align-items:center}.image-name[data-v-8f192521]{font-size:16px;font-weight:500}.zoom-controls[data-v-8f192521]{display:flex;align-items:center;gap:10px}.zoom-level[data-v-8f192521]{font-size:14px;min-width:50px;text-align:center;cursor:pointer;padding:2px 8px;border-radius:4px;transition:background .3s;background:rgba(255,255,255,.1)}.zoom-level[data-v-8f192521]:hover{background:rgba(255,255,255,.2)}.compare-viewport-wrapper[data-v-8f192521]{flex:1;position:relative;overflow:auto;cursor:default;width:100%;height:100%}.compare-viewport[data-v-8f192521]{position:relative;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center}.image-container[data-v-8f192521]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-container img[data-v-8f192521]{max-width:none;max-height:none;pointer-events:none;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor;object-fit:contain}.divider[data-v-8f192521]{position:absolute;top:0;bottom:0;width:5px;background:transparent;cursor:col-resize;display:flex;align-items:center;justify-content:center;z-index:20;transform:translate(-50%)}.divider-line[data-v-8f192521]{width:2px;height:100%;background:rgba(255,255,255,.9);box-shadow:0 0 5px #00000080}.divider-handle[data-v-8f192521]{position:absolute;width:30px;height:50px;background:rgba(255,255,255,.95);border-radius:15px;display:flex;align-items:center;justify-content:center;color:#333;box-shadow:0 2px 8px #0000004d;z-index:21}.image-label[data-v-8f192521]{position:absolute;top:50px;padding:5px 15px;background:rgba(0,0,0,.7);color:#fff;font-size:14px;border-radius:4px;z-index:15;pointer-events:none;transition:opacity .3s}.image-label.hidden[data-v-8f192521]{opacity:0;visibility:hidden}.original-label[data-v-8f192521]{left:20px}.compressed-label[data-v-8f192521]{right:20px}.upload-placeholder[data-v-8f192521]{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fafafa;border:2px dashed #dcdfe6;border-radius:8px;transition:all .3s}.upload-placeholder[data-v-8f192521]:hover{border-color:#409eff;background:#ecf5ff}.placeholder-content[data-v-8f192521]{text-align:center;color:#909399}.placeholder-content h3[data-v-8f192521]{margin:20px 0 10px;color:#303133}.placeholder-content p[data-v-8f192521]{margin:5px 0;font-size:14px}.right-panel[data-v-8f192521]{height:calc(100vh - 200px);border-left:1px solid #e4e7ed;display:flex;flex-direction:column;background:#fafafa}.controls-container[data-v-8f192521]{flex:1;padding:20px;display:flex;flex-direction:column}.action-buttons[data-v-8f192521]{margin-bottom:30px}.download-all-btn[data-v-8f192521]{width:100%;margin-bottom:15px}.button-row[data-v-8f192521]{display:flex;gap:10px}.button-row .el-button[data-v-8f192521]{flex:1}.quality-control[data-v-8f192521]{margin-bottom:30px}.control-label[data-v-8f192521]{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:500;color:#303133}.quality-value[data-v-8f192521]{font-size:18px;font-weight:700;color:#409eff}.quality-slider[data-v-8f192521]{margin:20px 0}.quality-tips[data-v-8f192521]{display:flex;justify-content:space-between;font-size:12px;color:#909399;margin-top:5px}.gif-tip[data-v-8f192521]{margin-top:10px;font-size:12px;color:#e6a23c;text-align:center;background:#fdf6ec;padding:5px;border-radius:4px}.size-info[data-v-8f192521]{background:white;padding:15px;border-radius:6px;margin-bottom:30px;box-shadow:0 1px 3px #0000001a}.size-item[data-v-8f192521]{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.size-item[data-v-8f192521]:last-child{margin-bottom:0}.size-item .label[data-v-8f192521]{color:#606266}.size-item .value[data-v-8f192521]{font-weight:500}.size-item .value.success[data-v-8f192521]{color:#67c23a}.batch-compress-btn[data-v-8f192521]{margin-top:auto}.batch-compress-btn .el-button[data-v-8f192521]{width:100%}@media (max-width: 1200px){.main-layout[data-v-8f192521]{flex-direction:column}.left-panel[data-v-8f192521],.middle-panel[data-v-8f192521],.right-panel[data-v-8f192521]{width:100%;height:auto;border-right:none;border-left:none;border-bottom:1px solid #e4e7ed}.left-panel[data-v-8f192521]{height:200px}.middle-panel[data-v-8f192521]{height:400px}.right-panel[data-v-8f192521]{height:auto;min-height:300px;border-bottom:none}.image-list[data-v-8f192521]{display:flex;overflow-x:auto;overflow-y:hidden}.image-item[data-v-8f192521]{min-width:150px;margin-right:10px;margin-bottom:0}.compare-viewport-wrapper[data-v-8f192521]{height:350px}}@media (max-width: 768px){.compress-container[data-v-8f192521]{padding:10px;height:auto;min-height:calc(100vh - 100px)}.main-layout[data-v-8f192521]{height:auto}.left-panel[data-v-8f192521],.middle-panel[data-v-8f192521],.right-panel[data-v-8f192521]{padding:10px}.compare-header[data-v-8f192521]{flex-direction:column;gap:10px;padding:8px 15px}.header-content[data-v-8f192521]{flex-direction:column;align-items:flex-start;gap:10px}.zoom-controls[data-v-8f192521]{width:100%;justify-content:space-between}.compare-viewport-wrapper[data-v-8f192521]{height:300px}.add-file-btn[data-v-8f192521],.download-all-btn[data-v-8f192521],.batch-compress-btn .el-button[data-v-8f192521]{font-size:14px;padding:12px 20px}.image-list[data-v-8f192521]{padding:5px}.image-item[data-v-8f192521]{padding:8px;min-width:130px}.thumbnail[data-v-8f192521]{width:50px;height:50px}.button-row[data-v-8f192521]{flex-direction:column;gap:8px}.button-row .el-button[data-v-8f192521]{width:100%}.quality-slider[data-v-8f192521]{margin:15px 0}}@media (max-width: 480px){.compare-viewport-wrapper[data-v-8f192521]{height:250px}.left-panel[data-v-8f192521]{height:180px}.middle-panel[data-v-8f192521]{height:350px}.upload-section[data-v-8f192521]{padding:15px}.add-file-btn[data-v-8f192521]{padding:10px 15px}.image-label[data-v-8f192521]{top:60px;padding:3px 10px;font-size:12px}.original-label[data-v-8f192521]{left:10px}.compressed-label[data-v-8f192521]{right:10px}}@media (max-width: 360px){.compare-viewport-wrapper[data-v-8f192521]{height:200px}.left-panel[data-v-8f192521]{height:160px}.middle-panel[data-v-8f192521]{height:300px}.zoom-level[data-v-8f192521]{min-width:40px;padding:2px 5px;font-size:12px}.image-name[data-v-8f192521]{font-size:14px}}