From 71cf311d7e6e543f295b3cf0f6202b42fafeffdf Mon Sep 17 00:00:00 2001 From: jinchao <383321154@qq.com> Date: Fri, 9 May 2025 13:53:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=BE=85=E5=8A=9E=E4=BA=8B=E9=A1=B9=E6=97=B6=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E4=B8=BAUTC=E6=97=B6=E9=97=B4=E7=9A=84=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- XNSimHtml/components/todo-component.js | 9 +++- XNSimHtml/components/todo/todo-modal.js | 70 ++++++++++++++++++++----- 2 files changed, 65 insertions(+), 14 deletions(-) diff --git a/XNSimHtml/components/todo-component.js b/XNSimHtml/components/todo-component.js index 86e5a48..e93c72f 100644 --- a/XNSimHtml/components/todo-component.js +++ b/XNSimHtml/components/todo-component.js @@ -185,10 +185,15 @@ class TodoComponent extends HTMLElement { showNewTodoModal() { const { modal, style } = TodoModal.createModal('new-todo'); - // 设置计划时间的默认值为当前时间 + // 设置计划时间的默认值为当前本地时间 const scheduleInput = modal.querySelector('#schedule'); const now = new Date(); - scheduleInput.value = now.toISOString().slice(0, 16); + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + scheduleInput.value = `${year}-${month}-${day}T${hours}:${minutes}`; // 获取当前用户等级 const currentUserLevel = this.currentUser.access_level || 0; diff --git a/XNSimHtml/components/todo/todo-modal.js b/XNSimHtml/components/todo/todo-modal.js index d57d377..434b7c9 100644 --- a/XNSimHtml/components/todo/todo-modal.js +++ b/XNSimHtml/components/todo/todo-modal.js @@ -168,32 +168,48 @@ class TodoModal { .cancel-button:hover { background-color: #5a6268; } - input[type="datetime-local"] { + /* 日期时间选择器样式 */ + .form-group input[type="datetime-local"] { + width: 100%; + padding: 10px 14px; + border: 1px solid #d0d5dd; + border-radius: 8px; + font-size: 16px; + background-color: #fff; font-family: inherit; - color: #333; + color: #222; + box-sizing: border-box; + box-shadow: 0 1px 2px rgba(16,30,54,0.04); + transition: border-color 0.2s, box-shadow 0.2s; } - input[type="datetime-local"]::-webkit-calendar-picker-indicator { + .form-group input[type="datetime-local"]:focus { + border-color: #7986E7; + outline: none; + box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.15); + } + .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 4px; margin-right: 4px; - opacity: 0.6; + opacity: 0.7; + transition: opacity 0.2s; } - input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { + .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } - input[type="datetime-local"]::-webkit-datetime-edit { + .form-group input[type="datetime-local"]::-webkit-datetime-edit { padding: 0; } - input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { + .form-group input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { padding: 0; } - input[type="datetime-local"]::-webkit-datetime-edit-text { + .form-group input[type="datetime-local"]::-webkit-datetime-edit-text { padding: 0 2px; } - input[type="datetime-local"]::-webkit-datetime-edit-hour-field, - input[type="datetime-local"]::-webkit-datetime-edit-minute-field, - input[type="datetime-local"]::-webkit-datetime-edit-second-field, - input[type="datetime-local"]::-webkit-datetime-edit-ampm-field { + .form-group input[type="datetime-local"]::-webkit-datetime-edit-hour-field, + .form-group input[type="datetime-local"]::-webkit-datetime-edit-minute-field, + .form-group input[type="datetime-local"]::-webkit-datetime-edit-second-field, + .form-group input[type="datetime-local"]::-webkit-datetime-edit-ampm-field { padding: 0 2px; } .form-group textarea { @@ -257,6 +273,36 @@ class TodoModal { .select-options::-webkit-scrollbar-thumb:hover { background: #6875D6; } + /* 按钮风格优化 */ + .modal-footer .save-button { + background-color: #7986E7; + color: #fff; + border-radius: 6px; + font-size: 15px; + padding: 8px 24px; + font-weight: 500; + border: none; + box-shadow: 0 1px 2px rgba(121,134,231,0.08); + transition: background 0.2s; + } + .modal-footer .save-button:hover { + background-color: #5c6bc0; + } + .modal-footer .cancel-button { + background-color: #f5f5f5; + color: #333; + border-radius: 6px; + font-size: 15px; + padding: 8px 24px; + font-weight: 500; + border: none; + margin-right: 8px; + box-shadow: 0 1px 2px rgba(16,30,54,0.04); + transition: background 0.2s; + } + .modal-footer .cancel-button:hover { + background-color: #e0e0e0; + } `; const modal = document.createElement('div');