84 lines
2.0 KiB
HTML
84 lines
2.0 KiB
HTML
<style>
|
|
.note-card {
|
|
width: 30%;
|
|
min-height: 150px;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
|
|
margin: 1rem;
|
|
}
|
|
|
|
.note-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bg-orange {
|
|
background-color: #ff8c42;
|
|
}
|
|
|
|
.bg-blue {
|
|
background-color: #4682b4;
|
|
}
|
|
|
|
.bg-purple {
|
|
background-color: #8a2be2;
|
|
}
|
|
|
|
.note-header {
|
|
background-color: white;
|
|
color: #000; /* ✅ 加这一行，确保文字是黑色的 */
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #f0e68c;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
}
|
|
|
|
.note-title {
|
|
font-size: 2.4rem;
|
|
font-weight: bold;
|
|
margin: 0.3rem 0 0.1rem;
|
|
}
|
|
|
|
.note-desc {
|
|
font-size: 1.9rem;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<h2>任务看板</h2>
|
|
</div>
|
|
<div class="container mt-5">
|
|
<div class="note-container">
|
|
<div class="note-card bg-orange">
|
|
<h3 class="note-header">每日任务</h3>
|
|
{foreach $day as $item}
|
|
<p class="note-title">{$item->title}</p>
|
|
<p class="note-desc">{$item->desc}</p>
|
|
<br>
|
|
{/foreach}
|
|
</div>
|
|
<div class="note-card bg-blue">
|
|
<h3 class="note-header">每周任务</h3>
|
|
{foreach $week as $item}
|
|
<p class="note-title">{$item->title}</p>
|
|
<p class="note-desc">{$item->desc}</p>
|
|
<br>
|
|
{/foreach}
|
|
</div>
|
|
|
|
<div class="note-card bg-purple">
|
|
<h3 class="note-header">每月任务</h3>
|
|
{foreach $month as $item}
|
|
<p class="note-title">{$item->title}</p>
|
|
<p class="note-desc">{$item->desc}</p>
|
|
<br>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
</div>
|