Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
351e1f18ae | ||
|
|
0e75326b5f |
@@ -18,7 +18,7 @@
|
||||
--radius-sm: 8px;
|
||||
--shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(74,108,247,0.05);
|
||||
--shadow-hover: 0 2px 6px rgba(0,0,0,0.04), 0 6px 18px rgba(74,108,247,0.08);
|
||||
--sidebar-w: 280px;
|
||||
--sidebar-w: 100px;
|
||||
}
|
||||
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
@@ -66,14 +66,29 @@ body {
|
||||
|
||||
.sidebar-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 20px 16px;
|
||||
gap: 8px;
|
||||
padding: 24px 12px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-user .user-name {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-user .btn-logout-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
color: #FFF;
|
||||
@@ -162,6 +177,39 @@ body {
|
||||
.calendar-widget {
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
.calendar-widget.inline {
|
||||
margin: 0 0 16px;
|
||||
padding: 12px 0;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--card);
|
||||
}
|
||||
.calendar-widget.inline .cal-header {
|
||||
padding: 0 14px 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cal-nav-group { display: flex; gap: 4px; }
|
||||
.cal-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--card);
|
||||
cursor: pointer;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.cal-nav:hover { background: var(--bg); color: var(--text); }
|
||||
.cal-week-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px 4px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.cal-header {
|
||||
display: flex;
|
||||
@@ -359,39 +407,45 @@ body {
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 12px 16px;
|
||||
gap: 4px;
|
||||
padding: 10px 4px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-label { line-height: 1.2; }
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-item .icon-sm {
|
||||
.nav-item .icon-md {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--text-muted);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.nav-item:hover .icon-sm { color: var(--primary); }
|
||||
.nav-item:hover .icon-md { color: var(--primary); }
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-item.active .icon-sm { color: var(--primary); }
|
||||
.nav-item.active .icon-md { color: var(--primary); }
|
||||
|
||||
.icon-md { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
/* ── Sidebar Footer ── */
|
||||
|
||||
@@ -1442,7 +1496,6 @@ body {
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.sidebar { width: 240px; min-width: 240px; }
|
||||
:root { --sidebar-w: 240px; }
|
||||
.main-content { padding: 20px 24px; }
|
||||
.daily-grid { grid-template-columns: 1fr; }
|
||||
|
||||
@@ -42,81 +42,35 @@
|
||||
<!-- 用户信息 -->
|
||||
<div class="sidebar-user">
|
||||
<div class="user-avatar">{{ username[0] }}</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">{{ username }}</span>
|
||||
<span class="user-tag">道阁 · 紫微</span>
|
||||
</div>
|
||||
<span class="user-name">{{ username }}</span>
|
||||
<a href="/logout" class="btn-logout-icon" title="退出登录" onclick="return confirm('确定退出登录？')">
|
||||
<svg class="icon-sm"><use href="#icon-logout"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="sidebar-stats" id="sidebar-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-num" id="stat-days">--</span>
|
||||
<span class="stat-label">打卡周</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num" id="stat-morning">--</span>
|
||||
<span class="stat-label">立志</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num" id="stat-study">--</span>
|
||||
<span class="stat-label">勤学</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日历（周视图） -->
|
||||
<div class="calendar-widget">
|
||||
<div class="cal-header">
|
||||
<button class="cal-nav" onclick="changeCalYear(-1)">
|
||||
<svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
|
||||
</button>
|
||||
<span class="cal-month-label" id="cal-year-label">2026年</span>
|
||||
<button class="cal-nav" onclick="changeCalYear(1)">
|
||||
<svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-week-list" id="cal-week-list"></div>
|
||||
<div class="cal-legend">
|
||||
<span class="legend-dot pass"></span> 达标
|
||||
<span class="legend-dot fail"></span> 未达标
|
||||
<span class="legend-dot empty"></span> 未打卡
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<nav class="sidebar-nav">
|
||||
<a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
|
||||
<svg class="icon-sm"><use href="#icon-calendar"/></svg>
|
||||
每周打卡
|
||||
<svg class="icon-md"><use href="#icon-calendar"/></svg>
|
||||
<span class="nav-label">打卡</span>
|
||||
</a>
|
||||
<a class="nav-item" data-panel="weekly" onclick="switchPanel('weekly')">
|
||||
<svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
|
||||
每周评分
|
||||
<svg class="icon-md"><use href="#icon-chart-bar"/></svg>
|
||||
<span class="nav-label">评分</span>
|
||||
</a>
|
||||
<a class="nav-item" data-panel="wishes" onclick="switchPanel('wishes')">
|
||||
<svg class="icon-sm"><use href="#icon-star"/></svg>
|
||||
心愿清单
|
||||
<svg class="icon-md"><use href="#icon-star"/></svg>
|
||||
<span class="nav-label">心愿</span>
|
||||
</a>
|
||||
<a class="nav-item" data-panel="history" onclick="switchPanel('history')">
|
||||
<svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
|
||||
历史记录
|
||||
<svg class="icon-md"><use href="#icon-list-bullet"/></svg>
|
||||
<span class="nav-label">记录</span>
|
||||
</a>
|
||||
<a class="nav-item" data-panel="blueprint" onclick="switchPanel('blueprint')">
|
||||
<svg class="icon-sm"><use href="#icon-sun"/></svg>
|
||||
人生蓝图
|
||||
<svg class="icon-md"><use href="#icon-sun"/></svg>
|
||||
<span class="nav-label">蓝图</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- 底部新建按钮 -->
|
||||
<div class="sidebar-footer">
|
||||
<button class="btn-new-day" onclick="goToCurrentWeek()">
|
||||
<svg class="icon-sm"><use href="#icon-sun"/></svg>
|
||||
回到本周
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ═══ 右侧主内容区 ═══ -->
|
||||
@@ -133,6 +87,22 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 周历选择器 -->
|
||||
<div class="calendar-widget inline">
|
||||
<div class="cal-header">
|
||||
<span class="cal-month-label" id="cal-year-label">2026年</span>
|
||||
<div class="cal-nav-group">
|
||||
<button class="cal-nav" onclick="changeCalYear(-1)">
|
||||
<svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
|
||||
</button>
|
||||
<button class="cal-nav" onclick="changeCalYear(1)">
|
||||
<svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-week-list" id="cal-week-list"></div>
|
||||
</div>
|
||||
<!-- Tab 筛选 -->
|
||||
<div class="daily-tabs">
|
||||
<button class="daily-tab active" data-tab="morning" onclick="switchDailyTab(this)">
|
||||
<svg class="icon-sm"><use href="#icon-sun"/></svg> 早间立志
|
||||
|
||||
Reference in New Issue
Block a user