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;
        background-color: #f9f9f9; /* ✅ 淡灰色背景 */
        padding: 16px;
        border-radius: 8px; /* ✅ 加点圆角更柔和 */
        border: 1px solid #eee; /* ✅ 加细边框让结构更明显 */
    }

    /* 标题部分 */
    .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 class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h1>任务面板</h1>
    </div>
    <div class="panel-body">
        <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>
    </div>
</div>