2 Commits

2 changed files with 109 additions and 13 deletions

View File

@@ -177,6 +177,39 @@ body {
.calendar-widget { .calendar-widget {
padding: 0 16px 12px; 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 { .cal-header {
display: flex; display: flex;
@@ -505,9 +538,36 @@ body {
} }
/* ═══════════════════════════════════════════ /* ═══════════════════════════════════════════
Daily Grid — Daily Grid — 左右两
═══════════════════════════════════════════ */ ═══════════════════════════════════════════ */
.daily-layout {
display: flex;
gap: 20px;
align-items: flex-start;
}
.daily-sidebar {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.daily-sidebar .sidebar-stats {
padding: 0;
}
.daily-sidebar .calendar-widget.inline {
margin: 0;
}
.daily-main {
flex: 1;
min-width: 0;
}
.daily-grid { .daily-grid {
display: block; display: block;
} }

View File

@@ -87,18 +87,52 @@
</button> </button>
</div> </div>
</div> </div>
<div class="daily-tabs"> <div class="daily-layout">
<button class="daily-tab active" data-tab="morning" onclick="switchDailyTab(this)"> <!-- 左侧:统计 + 日历 -->
<svg class="icon-sm"><use href="#icon-sun"/></svg> 早间立志 <div class="daily-sidebar">
</button> <div class="sidebar-stats" id="sidebar-stats">
<button class="daily-tab" data-tab="evening" onclick="switchDailyTab(this)"> <div class="stat-item">
<svg class="icon-sm"><use href="#icon-magnifying-glass"/></svg> 责善改过 <span class="stat-num" id="stat-days">--</span>
</button> <span class="stat-label">打卡周</span>
<button class="daily-tab" data-tab="study" onclick="switchDailyTab(this)"> </div>
<svg class="icon-sm"><use href="#icon-book-open"/></svg> 勤学打卡 <div class="stat-item">
</button> <span class="stat-num" id="stat-morning">--</span>
</div> <span class="stat-label">立志</span>
<div class="daily-grid"> </div>
<div class="stat-item">
<span class="stat-num" id="stat-study">--</span>
<span class="stat-label">勤学</span>
</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>
</div>
<!-- 右侧Tab + 内容 -->
<div class="daily-main">
<div class="daily-tabs">
<button class="daily-tab active" data-tab="morning" onclick="switchDailyTab(this)">
<svg class="icon-sm"><use href="#icon-sun"/></svg> 早间立志
</button>
<button class="daily-tab" data-tab="evening" onclick="switchDailyTab(this)">
<svg class="icon-sm"><use href="#icon-magnifying-glass"/></svg> 责善改过
</button>
<button class="daily-tab" data-tab="study" onclick="switchDailyTab(this)">
<svg class="icon-sm"><use href="#icon-book-open"/></svg> 勤学打卡
</button>
</div>
<div class="daily-grid">
<div class="card card-morning daily-card active" data-card="morning"> <div class="card card-morning daily-card active" data-card="morning">
<div class="card-head"> <div class="card-head">
<div class="card-head-left"> <div class="card-head-left">
@@ -140,6 +174,8 @@
<div id="study-list"></div> <div id="study-list"></div>
</div> </div>
</div> </div>
</div><!-- /daily-main -->
</div><!-- /daily-layout -->
</section> </section>
<!-- ── 每周评分面板 ── --> <!-- ── 每周评分面板 ── -->