diff --git a/static/app.js b/static/app.js index 9d4f841..06173e3 100644 --- a/static/app.js +++ b/static/app.js @@ -373,6 +373,14 @@ container.appendChild(div); } + window.toggleStudyEdit = function() { + var panel = document.getElementById('panel-daily'); + var btn = document.getElementById('study-edit-toggle'); + if (!panel || !btn) return; + var editing = panel.classList.toggle('editing-study'); + btn.classList.toggle('active', editing); + }; + window.addStudyItem = function() { var name = prompt('请输入新习惯名称:'); if (!name || !name.trim()) return; diff --git a/static/style.css b/static/style.css index 6bf7120..085b5ba 100644 --- a/static/style.css +++ b/static/style.css @@ -833,7 +833,7 @@ body { /* 编辑模式下才显示的元素 */ .edit-only { display: flex; } -.btn-edit-toggle { display: none; } +.btn-edit-toggle:not(#study-edit-toggle) { display: none; } /* 默认隐藏删除按钮 */ .btn-del { display: none; } @@ -1784,8 +1784,20 @@ body { } /* 勤学打卡卡片 - 3×3网格 */ -#study-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } -.study-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); transition:all 0.15s; text-align:center; } +#study-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } +.study-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); transition:all 0.2s; text-align:center; } +.study-card:hover { border-color:var(--primary); box-shadow:var(--shadow); } +.study-card.checked { border-color:var(--success); background:var(--success-light); } +.study-card-info { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; } +.study-card-name { font-size:13px; color:var(--text); font-weight:500; line-height:1.4; min-height:36px; display:flex; align-items:center; } +.study-card-count { font-size:24px; color:var(--text-muted); font-weight:600; background:var(--bg); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; } +.study-card.checked .study-card-count { background:var(--success); color:#FFF; } +.study-card-btn { padding:5px 14px; border:1px solid var(--primary); border-radius:var(--radius-sm); background:transparent; color:var(--primary); font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s; font-family:inherit; } +.study-card-btn:hover { background:var(--primary); color:#FFF; } +.study-card-btn.done { background:var(--success-light); color:var(--success); border-color:var(--success); cursor:default; } +.study-card-del { display:none; } +#panel-daily.editing-study .study-card-del { display:flex; align-items:center; justify-content:center; position:absolute; top:6px; right:6px; border:none; background:var(--danger-light); color:var(--danger); cursor:pointer; font-size:14px; width:22px; height:22px; border-radius:50%; line-height:1; } +#panel-daily.editing-study .study-card-del:hover { background:var(--danger); color:#FFF; } .study-card.checked { border-color:var(--success); background:var(--success-light); } .study-card-info { display:flex; flex-direction:column; align-items:center; gap:4px; } .study-card-name { font-size:12px; color:var(--text); font-weight:500; line-height:1.3; } @@ -1794,6 +1806,5 @@ body { .study-card-btn { padding:5px 12px; border:1px solid var(--primary); border-radius:var(--radius-sm); background:transparent; color:var(--primary); font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s; font-family:inherit; } .study-card-btn:hover { background:var(--primary); color:#FFF; } .study-card-btn.done { background:var(--success-light); color:var(--success); border-color:var(--success); cursor:default; } -.study-card-del { position:absolute; top:4px; right:4px; border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px; line-height:1; } -.study-card-del:hover { background:var(--danger-light); color:var(--danger); } -.study-card { position:relative; } +.edit-only-study { display: none; } +#panel-daily.editing-study .edit-only-study { display: flex; } diff --git a/templates/index.html b/templates/index.html index 561ba21..982fa2e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -176,12 +176,17 @@
本周修行清单
-