diff --git a/editor.html b/editor.html new file mode 100644 index 0000000..399ff60 --- /dev/null +++ b/editor.html @@ -0,0 +1,883 @@ + + + + + +PC装机配置表 - 编辑器 + + + + +
+
+

PC装机配置表 - 编辑器

+
+ + +
+
+ +
+
+ + +
+
+ 总计 + ¥0 +
+
+ + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index f99df8b..5577f9e 100644 --- a/index.html +++ b/index.html @@ -40,54 +40,6 @@ body { color: #1a1a1a; } -.header-actions { - display: flex; - gap: 8px; - align-items: center; -} - -.btn { - padding: 8px 16px; - border: none; - border-radius: 8px; - font-size: 14px; - cursor: pointer; - transition: all 0.2s; - font-weight: 500; -} - -.btn-primary { background: #1677ff; color: #fff; } -.btn-primary:hover { background: #4096ff; } -.btn-default { background: #fff; color: #333; border: 1px solid #d9d9d9; } -.btn-default:hover { border-color: #1677ff; color: #1677ff; } -.btn-danger { background: #ff4d4f; color: #fff; } -.btn-danger:hover { background: #ff7875; } -.btn-sm { padding: 4px 10px; font-size: 12px; } - -.mode-toggle { - background: #f0f0f0; - border-radius: 8px; - padding: 3px; - display: flex; -} - -.mode-toggle button { - padding: 6px 14px; - border: none; - border-radius: 6px; - font-size: 13px; - cursor: pointer; - background: transparent; - color: #666; - transition: all 0.2s; -} - -.mode-toggle button.active { - background: #fff; - color: #1677ff; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - /* Table */ .config-table-wrap { background: #fff; @@ -103,9 +55,7 @@ body { font-size: 14px; } -.config-table thead { - background: #fafafa; -} +.config-table thead { background: #fafafa; } .config-table th { padding: 12px 16px; @@ -123,13 +73,8 @@ body { vertical-align: middle; } -.config-table tbody tr:last-child td { - border-bottom: none; -} - -.config-table tbody tr:hover { - background: #fafafa; -} +.config-table tbody tr:last-child td { border-bottom: none; } +.config-table tbody tr:hover { background: #fafafa; } /* Image cell */ .cell-img { @@ -143,9 +88,7 @@ body { transition: transform 0.2s; } -.cell-img:hover { - transform: scale(1.05); -} +.cell-img:hover { transform: scale(1.05); } .cell-img-placeholder { width: 64px; @@ -178,10 +121,7 @@ body { white-space: nowrap; } -.price-cell .currency { - font-size: 12px; - font-weight: 500; -} +.price-cell .currency { font-size: 12px; font-weight: 500; } /* Link cell */ .link-cell a { @@ -192,9 +132,7 @@ body { .link-cell a:hover { text-decoration: underline; } /* Alt selector */ -.alt-selector { - margin-top: 4px; -} +.alt-selector { margin-top: 4px; } .alt-label { font-size: 11px; @@ -222,33 +160,6 @@ body { .alt-pill:hover { border-color: #1677ff; color: #1677ff; } .alt-pill.active { border-color: #1677ff; background: #e6f4ff; color: #1677ff; font-weight: 500; } -/* Action cells */ -.action-cell { - white-space: nowrap; -} - -.action-cell button { - background: none; - border: 1px solid #e8e8e8; - border-radius: 6px; - padding: 4px 8px; - cursor: pointer; - font-size: 12px; - color: #666; - transition: all 0.2s; - margin-left: 4px; -} - -.action-cell button:first-child { margin-left: 0; } -.action-cell button:hover { border-color: #1677ff; color: #1677ff; } -.action-cell button.delete-btn:hover { border-color: #ff4d4f; color: #ff4d4f; } - -/* Add button row */ -.add-row { - padding: 16px; - text-align: center; -} - /* Footer / Total */ .footer { position: fixed; @@ -279,132 +190,6 @@ body { .footer-total .currency { font-size: 16px; } -/* Modal */ -.modal-overlay { - display: none; - position: fixed; - inset: 0; - background: rgba(0,0,0,0.45); - z-index: 1000; - justify-content: center; - align-items: center; -} - -.modal-overlay.active { display: flex; } - -.modal { - background: #fff; - border-radius: 12px; - width: 600px; - max-width: 90vw; - max-height: 85vh; - overflow-y: auto; - box-shadow: 0 8px 32px rgba(0,0,0,0.2); -} - -.modal-header { - padding: 20px 24px 0; - display: flex; - align-items: center; - justify-content: space-between; -} - -.modal-header h2 { font-size: 18px; font-weight: 600; } - -.modal-close { - background: none; - border: none; - font-size: 20px; - cursor: pointer; - color: #999; - padding: 4px; -} -.modal-close:hover { color: #333; } - -.modal-body { padding: 20px 24px; } - -.form-group { margin-bottom: 16px; } - -.form-group label { - display: block; - font-size: 13px; - font-weight: 500; - color: #333; - margin-bottom: 6px; -} - -.form-group input, -.form-group select { - width: 100%; - padding: 8px 12px; - border: 1px solid #d9d9d9; - border-radius: 8px; - font-size: 14px; - transition: border-color 0.2s; - font-family: inherit; -} - -.form-group input:focus, -.form-group select:focus { - outline: none; - border-color: #1677ff; - box-shadow: 0 0 0 2px rgba(22,119,255,0.1); -} - -.form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -/* Alternatives in modal */ -.alt-section { - margin-top: 20px; - padding-top: 16px; - border-top: 1px solid #f0f0f0; -} - -.alt-section-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 12px; -} - -.alt-section-header h3 { font-size: 14px; font-weight: 600; } - -.alt-item { - background: #fafafa; - border-radius: 8px; - padding: 12px; - margin-bottom: 8px; -} - -.alt-item-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 8px; -} - -.alt-item-label { font-size: 12px; font-weight: 600; color: #1677ff; } - -.alt-item-remove { - background: none; - border: none; - color: #ff4d4f; - cursor: pointer; - font-size: 12px; -} - -.modal-footer { - padding: 16px 24px; - display: flex; - justify-content: flex-end; - gap: 8px; - border-top: 1px solid #f0f0f0; -} - /* Empty State */ .empty-state { text-align: center; @@ -414,29 +199,6 @@ body { .empty-state p { margin-bottom: 16px; font-size: 15px; } -/* Import Overlay */ -.import-overlay { - display: none; - position: fixed; - inset: 0; - background: rgba(0,0,0,0.45); - z-index: 1000; - justify-content: center; - align-items: center; -} - -.import-overlay.active { display: flex; } - -.import-box { - background: #fff; - border-radius: 12px; - padding: 40px; - text-align: center; - box-shadow: 0 8px 32px rgba(0,0,0,0.2); -} - -.import-box p { margin-bottom: 16px; color: #666; } - /* Lightbox */ .lightbox { display: none; @@ -484,7 +246,6 @@ body { .header { padding: 16px; } .config-table-wrap { overflow-x: auto; } .config-table { min-width: 700px; } - .form-row { grid-template-columns: 1fr; } } @@ -493,14 +254,6 @@ body {

PC装机配置表

-
-
- - -
- - -
@@ -514,109 +267,6 @@ body {
- - - - -
-
-

选择JSON配置文件

- -
- -
-
- - - -