allocatr/application/admin/view/dashboard/task.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 {
        position: relative; /* ✅ 这行是关键，必须有 */
        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;
    }
    .card.completed .title {
        text-decoration: line-through;
        color: #999;
    }

    .card.completed .note {
        text-decoration: line-through;
        color: #999;
    }

    /* 状态角标 */
    .badge {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 12px;
        color: white;
        background-color: #999;
        z-index: 1; /* 避免被遮挡 */
    }

    /* 按状态区分颜色 */
    .status-1 { background-color: #f39c12; } /* 待完成 - 橙色 */
    .status-2 { background-color: #2ecc71; } /* 已完成 - 绿色 */
    .status-3 { background-color: #3498db; } /* 待审核 - 蓝色 */
    .status-4 { background-color: #1abc9c; } /* 已通过 - 青色 */
    .status-5 { background-color: #e74c3c; } /* 已驳回 - 红色 */
    .status-6 { background-color: #9b59b6; } /* 待执行 - 紫色 */

    /* 响应式：小屏变成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>
        {if $day}
        {foreach $day as $item}
        {if $item->status == 1 || $item->status == 5}
        <div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
        {else}
        <div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
        {/if}
        <div class="badge status-{$item.status}">
            {if $item.status == 1}待完成
            {elseif $item.status == 2}已完成
            {elseif $item.status == 3}待审核
            {elseif $item.status == 4}已通过
            {elseif $item.status == 5}已驳回
            {elseif $item.status == 6}待执行
            {/if}
        </div>
            <div class="title">{$item->title}</div>
            <div class="note">{$item->desc}</div>
        </div>
        {/foreach}
        {else}
        <div class="card">暂无任务</div>
        {/if}
    </div>

    <!-- 每周任务 -->
    <div class="section">
        <h3 class="section-title">每周任务</h3>
        {if $week}
        {foreach $week as $item}
        {if $item->status == 1 || $item->status == 5}
        <div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
        {else}
        <div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
        {/if}
        <div class="badge status-{$item.status}">
            {if $item.status == 1}待完成
            {elseif $item.status == 2}已完成
            {elseif $item.status == 3}待审核
            {elseif $item.status == 4}已通过
            {elseif $item.status == 5}已驳回
            {elseif $item.status == 6}待执行
            {/if}
        </div>
            <div class="title">{$item->title}</div>
            <div class="note">{$item->desc}</div>
        </div>
        {/foreach}
        {else}
        <div class="card">暂无任务</div>
        {/if}
    </div>

    <!-- 每月任务（举例） -->
    <div class="section">
        <h3 class="section-title">每月任务</h3>
        {if $month}
        {foreach $month as $item}
        {if $item->status == 1 || $item->status == 5}
        <div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
        {else}
        <div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
        {/if}
        <div class="badge status-{$item.status}">
            {if $item.status == 1}待完成
            {elseif $item.status == 2}已完成
            {elseif $item.status == 3}待审核
            {elseif $item.status == 4}已通过
            {elseif $item.status == 5}已驳回
            {elseif $item.status == 6}待执行
            {/if}
        </div>
            <div class="title">{$item->title}</div>
            <div class="note">{$item->desc}</div>
        </div>
        {/foreach}
        {else}
        <div class="card">暂无任务</div>
        {/if}
    </div>

</div>