115 lines
2.8 KiB
HTML
115 lines
2.8 KiB
HTML
<style>
|
||
.dashboard {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr); /* 三列 */
|
||
gap: 32px;
|
||
width: 1200px; /* 根据需要调整 */
|
||
}
|
||
|
||
/* 每一类任务（每日/每周/每月） */
|
||
.section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* 标题部分 */
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: #333;
|
||
}
|
||
|
||
.section-title::before {
|
||
content: "📌";
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.card {
|
||
background: #fff;
|
||
border: 1px solid #e0e4e8;
|
||
border-radius: 6px;
|
||
padding: 16px 20px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
transition: transform .15s ease, box-shadow .15s ease;
|
||
}
|
||
.card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
|
||
}
|
||
|
||
/* 卡片内标题和注释 */
|
||
.card .title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #222;
|
||
line-height: 1.45;
|
||
}
|
||
.card .note {
|
||
font-size: 13px;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 响应式：小屏变成1列 */
|
||
@media (max-width: 1024px) {
|
||
.dashboard {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.dashboard {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div>
|
||
<h2>任务看板</h2>
|
||
</div>
|
||
|
||
|
||
<div class="dashboard">
|
||
|
||
<!-- 每日任务 -->
|
||
<div class="section">
|
||
<h3 class="section-title">每日任务</h3>
|
||
{foreach $day as $item}
|
||
<div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
|
||
<div class="title">{$item->title}</div>
|
||
<div class="note">{$item->desc}</div>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
|
||
<!-- 每周任务 -->
|
||
<div class="section">
|
||
<h3 class="section-title">每周任务</h3>
|
||
{foreach $week as $item}
|
||
<div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
|
||
<div class="title">{$item->title}</div>
|
||
<div class="note">{$item->desc}</div>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
|
||
<!-- 每月任务（举例） -->
|
||
<div class="section">
|
||
<h3 class="section-title">每月任务</h3>
|
||
{foreach $month as $item}
|
||
<div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
|
||
<div class="title">{$item->title}</div>
|
||
<div class="note">{$item->desc}</div>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
|
||
</div>
|