UNPKG

podesigner-sdk

Version:

专业设计器SDK - 完整的图片编辑、文字添加、图层管理解决方案

2 lines (1 loc) 4.28 kB
.cuzcuz-designer[data-v-6270eb26]{display:flex;flex-direction:column;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.top-toolbar[data-v-6270eb26]{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#f8f9fa;border-bottom:1px solid #e9ecef}.logo[data-v-6270eb26]{font-weight:700;font-size:18px;color:#333}.toolbar-center[data-v-6270eb26]{display:flex;gap:8px}.toolbar-center button[data-v-6270eb26],.preview-btn[data-v-6270eb26]{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:14px}.toolbar-center button[data-v-6270eb26]:hover,.preview-btn[data-v-6270eb26]:hover{background:#f0f0f0}.toolbar-center button[data-v-6270eb26]:disabled{opacity:.5;cursor:not-allowed}.preview-btn[data-v-6270eb26]{background:#007bff;color:#fff;border-color:#007bff}.preview-btn[data-v-6270eb26]:hover{background:#0056b3}.designer-body[data-v-6270eb26]{display:flex;flex:1;overflow:hidden}.left-sidebar[data-v-6270eb26]{width:280px;background:#f8f9fa;border-right:1px solid #e9ecef;display:flex;flex-direction:column}.tool-tabs[data-v-6270eb26]{display:flex;border-bottom:1px solid #e9ecef}.tool-tab[data-v-6270eb26]{flex:1;padding:12px 8px;text-align:center;cursor:pointer;border-bottom:2px solid transparent;font-size:12px}.tool-tab.active[data-v-6270eb26]{background:#fff;border-bottom-color:#007bff}.tool-tab i[data-v-6270eb26]{display:block;margin-bottom:4px;font-size:16px}.tool-content[data-v-6270eb26]{flex:1;padding:16px;overflow-y:auto}.tool-panel h3[data-v-6270eb26]{margin:0 0 16px;font-size:14px;font-weight:600;color:#333}.upload-btn[data-v-6270eb26],.add-text-btn[data-v-6270eb26]{width:100%;padding:8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.upload-btn[data-v-6270eb26]:hover,.add-text-btn[data-v-6270eb26]:hover{background:#0056b3}.gallery-grid[data-v-6270eb26]{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.gallery-item[data-v-6270eb26]{aspect-ratio:1;border:1px solid #ddd;border-radius:4px;overflow:hidden;cursor:pointer}.gallery-item[data-v-6270eb26]:hover{border-color:#007bff}.gallery-item img[data-v-6270eb26]{width:100%;height:100%;object-fit:cover}.text-templates[data-v-6270eb26]{margin-top:16px}.text-template[data-v-6270eb26]{padding:8px;margin-bottom:8px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:14px}.text-template[data-v-6270eb26]:hover{border-color:#007bff}.layers-list[data-v-6270eb26]{max-height:300px;overflow-y:auto}.layer-item[data-v-6270eb26]{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-bottom:4px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:14px}.layer-item.active[data-v-6270eb26]{border-color:#007bff;background:#f0f8ff}.delete-btn[data-v-6270eb26]{background:#dc3545;color:#fff;border:none;border-radius:2px;width:20px;height:20px;font-size:12px;cursor:pointer}.canvas-area[data-v-6270eb26]{flex:1;display:flex;flex-direction:column;background:#f0f0f0}.canvas-toolbar[data-v-6270eb26]{padding:8px 16px;background:#fff;border-bottom:1px solid #e9ecef}.zoom-controls[data-v-6270eb26]{display:flex;gap:8px}.zoom-controls button[data-v-6270eb26]{padding:4px 8px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px}.zoom-controls button[data-v-6270eb26]:hover{background:#f0f0f0}.canvas-container[data-v-6270eb26]{flex:1;background:#fff;margin:16px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.right-sidebar[data-v-6270eb26]{width:280px;background:#f8f9fa;border-left:1px solid #e9ecef;padding:16px;overflow-y:auto}.properties-panel h3[data-v-6270eb26]{margin:0 0 16px;font-size:16px;font-weight:600;color:#333}.property-group[data-v-6270eb26]{margin-bottom:24px}.property-group h4[data-v-6270eb26]{margin:0 0 12px;font-size:14px;font-weight:600;color:#666}.property-row[data-v-6270eb26]{display:flex;align-items:center;margin-bottom:8px;font-size:14px}.property-row label[data-v-6270eb26]{width:60px;color:#666}.property-row input[data-v-6270eb26]{flex:1;padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:14px}.no-selection[data-v-6270eb26]{text-align:center;color:#666;margin-top:50px}