100%

点击上传图片

支持电脑 / 手机

📊 材料统计

正在处理...

box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-main); color: var(--text-main); } .app-layout { display: flex; height: 100%; width: 100%; position: relative; } /* ================== 侧边栏 ================== */ .sidebar { width: 280px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 50; box-shadow: 4px 0 20px rgba(0,0,0,0.02); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-header { padding: 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .sidebar-header h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-main); } .btn-close-sidebar { display: none; font-size: 13px; color: var(--text-sub); background: #f1f5f9; border: none; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-weight: 600; } .sidebar-content { flex: 1; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; } /* ================== 控件 ================== */ .control-group { margin-bottom: 20px; } .label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 8px; } select, input[type="text"] { width: 100%; font-size: 13px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background-color: #fff; } select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } /* Tab 切换样式 */ .tab-group { display: flex; background: #f1f5f9; padding: 4px; border-radius: 8px; margin-bottom: 15px; } .tab-btn { flex: 1; border: none; background: transparent; padding: 8px; font-size: 13px; font-weight: 600; color: #64748b; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .tab-btn.active { background: #fff; color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .input-panel { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .file-upload-wrapper { position: relative; width: 100%; } .file-upload-input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } .file-upload-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; color: #64748b; font-size: 13px; font-weight: 600; transition: all 0.2s; } .file-upload-wrapper:hover .file-upload-btn { border-color: var(--primary); color: var(--primary); background: #f5f3ff; } #preview-box { margin-top: 10px; height: 140px; background: #f1f5f9; border: 2px solid #fff; border-radius: var(--radius); box-shadow: inset 0 2px 6px rgba(0,0,0,0.05); display: none; align-items: center; justify-content: center; overflow: hidden; position: relative; } #preview-img { max-width: 100%; max-height: 100%; object-fit: contain; } .btn-recrop { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); color: white; border: none; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: transform 0.2s; } .range-wrap { display: flex; align-items: center; gap: 12px; color: var(--text-sub); background: #f8fafc; padding: 8px; border-radius: 8px; border: 1px solid var(--border); } input[type="range"] { flex: 1; cursor: pointer; accent-color: var(--primary); } .number-input { width: 50px !important; text-align: center; color: var(--primary); font-weight: 800; font-size: 14px; border: none !important; background: transparent; padding: 0 !important; } /* 🆕 预设尺寸按钮 */ .btn-preset-trigger { width: 100%; background: #eff6ff; color: var(--primary); border: 1px solid #bfdbfe; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; gap: 6px; transition: all 0.2s; } .btn-preset-trigger:hover { background: #dbeafe; } .btn-run { background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); color: white; border: none; padding: 14px; border-radius: 10px; width: 100%; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.2s; margin-top: 5px; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); } /* 🆕 预览图导出按钮 */ .btn-export-preview { background: #3b82f6; /* 蓝色 */ color: white; border: none; padding: 14px; border-radius: 10px; width: 100%; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.2s; margin-top: 15px; display: none; /* 默认隐藏 */ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } .btn-export-preview:hover { background: #2563eb; } /* 主导出按钮 */ .btn-export { background: #10b981; /* 绿色 */ color: white; border: none; padding: 14px; border-radius: 10px; width: 100%; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.2s; margin-top: 10px; display: none; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } .btn-export:hover { background: #059669; } .pixel-mode-tip { margin-bottom: 12px; padding: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; font-size: 12px; color: #15803d; display: flex; align-items: center; gap: 8px; } /* ================== 主画布 ================== */ .main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0; position: relative; background-color: #f1f5f9; background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 20px 20px; } .canvas-stage { flex: 1; display: flex; justify-content: center; align-items: center; overflow: auto; position: relative; padding: 40px; width: 100%; } #zoom-container { display: block; transition: width 0.1s, height 0.1s; margin: auto; } #pixel-grid { background: #fff; border: 3px solid #1e293b; display: grid; box-shadow: 0 20px 60px rgba(0,0,0,0.15); transform-origin: 0 0; transition: transform 0.1s linear; } .pixel { display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: normal; font-family: Arial, sans-serif; letter-spacing: -0.5px; white-space: nowrap; transition: color 0.3s ease; } .cursor-pen .pixel { cursor: crosshair; } .cursor-picker .pixel { cursor: alias; } .active-color-indicator { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; display: inline-block; vertical-align: middle; margin-right: 8px; } .thick-r { border-right: 1px solid rgba(30, 41, 59, 0.25) !important; z-index: 5; } .thick-b { border-bottom: 1px solid rgba(30, 41, 59, 0.25) !important; z-index: 5; } #pixel-grid.pure-mode { border-color: transparent !important; box-shadow: none; gap: 0; } #pixel-grid.pure-mode .pixel { color: transparent !important; } #pixel-grid.pure-mode .thick-r, #pixel-grid.pure-mode .thick-b { border-color: transparent !important; } /* 工具栏 */ .canvas-toolbar { position: absolute; top: 20px; right: 20px; z-index: 45; display: none; flex-direction: column; gap: 10px; align-items: flex-end; } .btn-tool { background: white; border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #475569; box-shadow: 0 4px 10px rgba(0,0,0,0.05); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .btn-tool:hover { background: #f8fafc; transform: translateY(-1px); } .btn-tool.active { background: var(--primary); color: white; border-color: var(--primary); } .zoom-controls { background: white; border: 1px solid var(--border); border-radius: 20px; padding: 4px; display: flex; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .zoom-btn { width: 32px; height: 32px; border: none; background: transparent; font-size: 16px; color: #475569; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .zoom-btn:hover { background: #f1f5f9; color: var(--primary); } .zoom-text { font-size: 12px; font-weight: 700; color: var(--text-main); width: 45px; text-align: center; cursor: pointer; } .stats-panel { max-height: 25vh; min-height: 120px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); border-top: 1px solid var(--border); display: none; flex-direction: column; z-index: 40; box-shadow: 0 -4px 20px rgba(0,0,0,0.08); border-radius: 16px 16px 0 0; margin: 0 10px; } .stats-header { padding: 12px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: bold; color: var(--text-main); } .stats-body { padding: 15px 20px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } .mini-list { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; } .mini-tag { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; color: var(--text-main); height: 28px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .mini-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } .empty-tip { text-align: center; color: #94a3b8; margin-top: 0; border: 3px dashed #cbd5e1; border-radius: 20px; padding: 60px; background: rgba(255,255,255,0.6); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.3s; } .empty-tip:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.02); } .empty-tip svg { width: 64px; height: 64px; margin-bottom: 15px; opacity: 0.5; } .fab-settings { position: absolute; bottom: 30px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: white; display: none; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4); z-index: 45; cursor: pointer; border: none; font-size: 24px; transition: transform 0.2s; } .fab-settings:active { transform: scale(0.9); } /* 弹窗通用样式 */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 100; display: none; justify-content: center; align-items: center; } .modal-content { background: #fff; padding: 20px; border-radius: 16px; width: 90%; max-width: 500px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; } /* 🆕 尺寸选择面板专属样式 */ .size-modal-body { padding: 0 5px; } .size-cat-title { font-size: 14px; font-weight: 700; color: #334155; margin: 15px 0 8px 0; display: flex; align-items: center; gap: 6px; } .size-cat-title span { font-size: 11px; font-weight: 400; color: #94a3b8; } .size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .size-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: all 0.2s; background: #fff; display: flex; flex-direction: column; gap: 4px; } .size-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1); transform: translateY(-2px); } .size-card.active { border-color: var(--primary); background: #eff6ff; } .size-card-dim { font-size: 16px; font-weight: 800; color: var(--text-main); } .size-card-info { font-size: 12px; color: #64748b; display: flex; justify-content: space-between; } .size-card-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; } .img-crop-container { width: 100%; background: #eee; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; flex-shrink: 1; min-height: 200px; max-height: 50vh; } #image-to-crop { max-width: 100%; display: block; } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; flex-shrink: 0; margin-top: auto; } .btn-cancel { background: #f1f5f9; color: var(--text-sub); border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; } .btn-confirm { background: var(--primary); color: white; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; } #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); z-index: 200; display: none; align-items: center; justify-content: center; flex-direction: column; } .spinner { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .sidebar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(0); border-right: none; } .sidebar.hidden { transform: translateX(-100%); } .fab-settings { display: flex; } .btn-close-sidebar { display: block; } .canvas-stage { padding: 10px; } .stats-panel { max-height: 40vh; } .empty-tip { padding: 40px 20px; margin-top: 60px; } }
100%

点击上传图片

支持电脑 / 手机

📊 材料统计

正在处理...