.picture-utils-container[data-v-33bce94a]{padding:20px;min-height:-webkit-calc(100vh - 84px);min-height:calc(100vh - 84px);background-color:#f5f7fa}.page-header[data-v-33bce94a]{text-align:center;margin-bottom:30px}.page-header .page-title[data-v-33bce94a]{color:#303133;font-size:28px;font-weight:600;margin:0 0 10px}.page-header .page-title i[data-v-33bce94a]{color:#409eff;margin-right:10px}.page-header .page-description[data-v-33bce94a]{color:#606266;font-size:14px;margin:0}.result-card[data-v-33bce94a],.upload-card[data-v-33bce94a]{height:500px}.result-card[data-v-33bce94a] .el-card__body,.upload-card[data-v-33bce94a] .el-card__body{height:-webkit-calc(100% - 60px);height:calc(100% - 60px);padding:20px}.card-header[data-v-33bce94a]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-weight:600}.upload-area[data-v-33bce94a]{height:200px;margin-bottom:20px}.upload-area[data-v-33bce94a] .el-upload{width:100%;height:100%}.upload-area[data-v-33bce94a] .el-upload-dragger{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.upload-dragger[data-v-33bce94a]{text-align:center;color:#606266}.upload-dragger .upload-icon[data-v-33bce94a]{font-size:67px;color:#c0c4cc;margin-bottom:16px}.upload-dragger .upload-text p[data-v-33bce94a]{margin:0;line-height:1.5}.upload-dragger .upload-text em[data-v-33bce94a]{color:#409eff;font-style:normal}.upload-dragger .upload-hint[data-v-33bce94a]{font-size:12px;color:#909399;margin-top:8px}.image-preview-container[data-v-33bce94a]{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.image-preview-container .image-preview[data-v-33bce94a]{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;border:1px solid #ebeef5;border-radius:6px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#f8f9fa}.image-preview-container .image-preview img[data-v-33bce94a]{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.image-preview-container .image-info-bar[data-v-33bce94a]{margin-top:8px;padding:8px 12px;background-color:#f5f7fa;border-radius:4px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.image-preview-container .image-info-bar .image-name[data-v-33bce94a]{font-size:12px;color:#303133;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:10px}.image-preview-container .image-info-bar .image-size[data-v-33bce94a]{font-size:12px;color:#909399;font-weight:600}.compress-settings[data-v-33bce94a]{border-top:1px solid #ebeef5;padding-top:20px}.compress-settings .setting-item[data-v-33bce94a]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:15px}.compress-settings .setting-item label[data-v-33bce94a]{min-width:70px;font-size:14px;color:#606266;margin-right:10px}.compress-settings .compress-actions[data-v-33bce94a]{text-align:center;margin-top:20px}.empty-result[data-v-33bce94a]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%;color:#909399}.empty-result .empty-icon[data-v-33bce94a]{font-size:64px;margin-bottom:16px}.empty-result p[data-v-33bce94a]{margin:0}.compressing-status[data-v-33bce94a]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}.compressing-status .progress-text[data-v-33bce94a]{margin-top:20px;color:#606266;font-size:14px}.compressed-result[data-v-33bce94a]{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.compressed-result .result-image-container[data-v-33bce94a]{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;margin-bottom:15px}.compressed-result .result-image-container .result-image[data-v-33bce94a]{width:100%;height:100%;border:1px solid #ebeef5;border-radius:6px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#f8f9fa}.compressed-result .result-image-container .result-image img[data-v-33bce94a]{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.compressed-result .result-image-container .download-overlay[data-v-33bce94a]{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.compressed-result .result-image-container:hover .download-overlay[data-v-33bce94a]{opacity:1}.compressed-result .result-info[data-v-33bce94a]{border-top:1px solid #ebeef5;padding-top:15px}.compressed-result .result-info .info-item[data-v-33bce94a]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:8px}.compressed-result .result-info .info-item .info-label[data-v-33bce94a]{color:#909399;font-size:13px}.compressed-result .result-info .info-item .info-value[data-v-33bce94a]{font-weight:600;font-size:13px}.compressed-result .result-info .info-item .info-value.compression-rate[data-v-33bce94a]{color:#67c23a}.compressed-result .result-info .info-item .info-value.savings[data-v-33bce94a]{color:#e6a23c}.help-card[data-v-33bce94a] .el-card__header{background-color:#f8f9fa;border-bottom:1px solid #ebeef5;font-weight:600;color:#303133}.help-card[data-v-33bce94a] .el-card__header i{color:#409eff;margin-right:8px}.help-content .help-item[data-v-33bce94a]{text-align:center;padding:20px 10px}.help-content .help-item .help-icon[data-v-33bce94a]{font-size:32px;color:#409eff;margin-bottom:10px}.help-content .help-item h4[data-v-33bce94a]{margin:0 0 10px;color:#303133;font-size:16px}.help-content .help-item p[data-v-33bce94a]{margin:0;color:#606266;font-size:13px;line-height:1.5}@media(max-width:768px){.picture-utils-container[data-v-33bce94a]{padding:10px}.page-header .page-title[data-v-33bce94a]{font-size:24px}.result-card[data-v-33bce94a],.upload-card[data-v-33bce94a]{height:auto;margin-bottom:20px}}