allocatr/application/admin/view/dashboard/task.html

<style>
    .dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 24px;
    }

    .section {
        background: #fff;
        border: 1px solid #e0e4e8;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #444;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-title i {
        color: #3498db;
    }

    .card {
        position: relative;
        background: #fff;
        border: 1px solid #e0e4e8;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
        transition: 0.15s ease;
    }

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    }

    .card .title {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #222;
    }

    .card .note {
        font-size: 13px;
        color: #555;
    }

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

    .card.empty-card {
        background-color: #f2f2f2;
        color: #888;
        text-align: center;
        font-style: italic;
        cursor: default;
        box-shadow: none;
        transform: none;
    }

    .card.empty-card:hover {
        box-shadow: none;
        transform: none;
    }

    .badge {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 12px;
        color: #fff;
        background-color: #999;
    }

    .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; }
</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">
                <div class="section-header">
                    <div class="section-title"><i class="fa fa-sun-o"></i> 每日任务</div>
                </div>
                {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 empty-card">暂无任务</div>
                    {/if}
                </div>

                <!-- 每周任务 -->
                <div class="section">
                    <div class="section-header">
                        <div class="section-title"><i class="fa fa-calendar"></i> 每周任务</div>
                    </div>
                    {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 empty-card">暂无任务</div>
                        {/if}
                    </div>

                    <!-- 每月任务（举例） -->
                    <div class="section">
                        <div class="section-header">
                            <div class="section-title"><i class="fa fa-tasks"></i> 每月任务</div>
                        </div>
                        {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 empty-card">暂无任务</div>
                            {/if}
                        </div>

                    </div>
    </div>
</div>