diff --git a/css/pages/facilities.css b/css/pages/facilities.css index 1f165fd..23a5342 100644 --- a/css/pages/facilities.css +++ b/css/pages/facilities.css @@ -313,10 +313,18 @@ .modal-title { font-size: 32px; font-weight: 700; - margin-bottom: 0; + margin-bottom: 16px; line-height: 1.2; } +.modal-badges-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + flex-wrap: wrap; +} + .modal-badges { display: flex; gap: 10px; @@ -521,14 +529,6 @@ transform: translateY(-1px); } -.modal-title-row { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 16px; - margin-bottom: 16px; -} - .btn-edit-facility { display: inline-flex; align-items: center; @@ -734,28 +734,117 @@ .form-group input[type="text"], .form-group input[type="number"], -.form-group textarea, -.form-group select { +.form-group textarea { width: 100%; - padding: 10px 14px; + padding: 12px 16px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 12px; font-size: 14px; font-family: inherit; - background: #f9f9fa; - transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; + background-color: #f9f9fa; + transition: all 0.2s ease; color: var(--text-primary); + box-sizing: border-box; } .form-group input:focus, -.form-group textarea:focus, -.form-group select:focus { +.form-group textarea:focus { outline: none; border-color: var(--accent-color); - background: #fff; + background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); } +/* Custom Select Dropdown */ +.custom-select { + position: relative; + width: 100%; + user-select: none; + font-size: 14px; +} + +.custom-select-trigger { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 12px 16px; + border: 1.5px solid rgba(0,0,0,0.1); + border-radius: 12px; + background-color: #f9f9fa; + color: var(--text-primary); + cursor: pointer; + transition: all 0.2s ease; + box-sizing: border-box; +} + +.custom-select-trigger i { + color: var(--text-secondary); + font-size: 12px; + transition: transform 0.3s ease; +} + +.custom-select:hover .custom-select-trigger { + background-color: #fff; + border-color: rgba(0,0,0,0.2); +} + +.custom-select.open .custom-select-trigger { + border-color: var(--accent-color); + background-color: #fff; + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); +} + +.custom-select.open .custom-select-trigger i { + transform: rotate(180deg); +} + +.custom-select-options { + position: absolute; + top: calc(100% + 8px); + left: 0; + right: 0; + background: #fff; + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0,0,0,0.15); + border: 1px solid rgba(0,0,0,0.08); + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1); + z-index: 100; + padding: 8px; +} + +.custom-select.open .custom-select-options { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.custom-option { + padding: 10px 14px; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s, color 0.2s; + color: var(--text-primary); + margin-bottom: 2px; +} + +.custom-option:last-child { + margin-bottom: 0; +} + +.custom-option:hover { + background: #f5f5f7; +} + +.custom-option.selected { + background: #e0f2fe; + color: #0369a1; + font-weight: 600; +} + .form-group textarea { resize: vertical; min-height: 60px; diff --git a/facilities.html b/facilities.html index 6e64c24..a7f0b84 100644 --- a/facilities.html +++ b/facilities.html @@ -76,15 +76,15 @@
×
-
- + +
+
-
@@ -152,28 +152,49 @@
- - + +
+ +
+ 资源类 + +
+
+
资源类
+
经验类
+
基础设施
+
+
- - + +
+ +
+ 正常运行 + +
+
+
正常运行
+
维护中
+
暂时失效
+
+
- - + +
+ +
+ 主世界 + +
+
+
主世界
+
下界
+
末地
+
+
diff --git a/js/facilities_script.js b/js/facilities_script.js index 60db63d..c2bd869 100644 --- a/js/facilities_script.js +++ b/js/facilities_script.js @@ -298,6 +298,61 @@ document.addEventListener('DOMContentLoaded', () => { let editorInstructions = []; let editorNotes = []; + // Initialize custom selects + document.querySelectorAll('.custom-select').forEach(select => { + const trigger = select.querySelector('.custom-select-trigger'); + const options = select.querySelectorAll('.custom-option'); + const input = select.querySelector('input[type="hidden"]'); + const text = select.querySelector('.custom-select-text'); + + trigger.addEventListener('click', (e) => { + e.stopPropagation(); + const isOpen = select.classList.contains('open'); + // Close all others + document.querySelectorAll('.custom-select').forEach(s => s.classList.remove('open')); + if (!isOpen) { + select.classList.add('open'); + } + }); + + options.forEach(option => { + option.addEventListener('click', (e) => { + e.stopPropagation(); + + // Update selection visually + options.forEach(opt => opt.classList.remove('selected')); + option.classList.add('selected'); + text.innerText = option.innerText; + + // Update hidden input and trigger change + input.value = option.dataset.value; + input.dispatchEvent(new Event('change')); + + // Close dropdown + select.classList.remove('open'); + }); + }); + }); + + // Close custom selects on outside click + document.addEventListener('click', () => { + document.querySelectorAll('.custom-select').forEach(s => s.classList.remove('open')); + }); + + function setCustomSelectValue(id, value) { + const input = document.getElementById(id); + if (!input) return; + const select = input.closest('.custom-select'); + const option = select.querySelector(`.custom-option[data-value="${value}"]`); + + if (option) { + input.value = value; + select.querySelector('.custom-select-text').innerText = option.innerText; + select.querySelectorAll('.custom-option').forEach(opt => opt.classList.remove('selected')); + option.classList.add('selected'); + } + } + function openEditor(item) { // Reset state editorContributors = item ? [...item.contributors] : []; @@ -307,9 +362,11 @@ document.addEventListener('DOMContentLoaded', () => { // Populate form fields document.getElementById('editor-title').value = item ? item.title : ''; document.getElementById('editor-intro').value = item ? item.intro : ''; - document.getElementById('editor-type').value = item ? item.type : 'resource'; - document.getElementById('editor-status').value = item ? item.status : 'online'; - document.getElementById('editor-dimension').value = item ? item.dimension : 'overworld'; + + setCustomSelectValue('editor-type', item ? item.type : 'resource'); + setCustomSelectValue('editor-status', item ? item.status : 'online'); + setCustomSelectValue('editor-dimension', item ? item.dimension : 'overworld'); + document.getElementById('editor-x').value = item ? item.coordinates.x : ''; document.getElementById('editor-y').value = item ? item.coordinates.y : ''; document.getElementById('editor-z').value = item ? item.coordinates.z : '';