From c745a00be8cd11ed577b39da23bd88496b24988c Mon Sep 17 00:00:00 2001
From: zhuyu <czhuyu@163.com>
Date: Thu, 5 Jun 2025 17:04:59 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/admin/view/dashboard/task.html | 138 ++++++++++-----------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/application/admin/view/dashboard/task.html b/application/admin/view/dashboard/task.html
index 59fc5c3..d33c2b2 100644
--- a/application/admin/view/dashboard/task.html
+++ b/application/admin/view/dashboard/task.html
@@ -1,110 +1,104 @@
 <style>
     .dashboard {
         display: grid;
-        grid-template-columns: repeat(3, 1fr); /* 三列 */
-        gap: 32px;
-        width: 1200px; /* 根据需要调整 */
+        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+        gap: 24px;
     }
 
-    /* 每一类任务（每日/每周/每月） */
     .section {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        background-color: #f9f9f9; /* ✅ 淡灰色背景 */
+        background: #fff;
+        border: 1px solid #e0e4e8;
+        border-radius: 12px;
         padding: 16px;
-        border-radius: 8px; /* ✅ 加点圆角更柔和 */
-        border: 1px solid #eee; /* ✅ 加细边框让结构更明显 */
+        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: 6px;
-        color: #333;
+        gap: 8px;
     }
 
-    .section-title::before {
-        content: "📌";
-        font-size: 20px;
+    .section-title i {
+        color: #3498db;
     }
 
-    /* 卡片样式 */
     .card {
-        position: relative; /* ✅ 这行是关键，必须有 */
+        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;
+        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 6px 12px rgba(0, 0, 0, .08);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
     }
 
-    /* 卡片内标题和注释 */
     .card .title {
         font-size: 15px;
         font-weight: 600;
+        margin-bottom: 6px;
         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 .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: 8px;
-        right: 8px;
-        font-size: 12px;
-        padding: 2px 8px;
+        top: 10px;
+        right: 10px;
+        font-size: 11px;
+        padding: 3px 8px;
         border-radius: 12px;
-        color: white;
+        color: #fff;
         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;
-        }
-    }
+    .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">
@@ -116,7 +110,9 @@
 
             <!-- 每日任务 -->
             <div class="section">
-                <h3 class="section-title">每日任务</h3>
+                <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}
@@ -138,13 +134,15 @@
                     </div>
                     {/foreach}
                     {else}
-                    <div class="card">暂无任务</div>
+                    <div class="card empty-card">暂无任务</div>
                     {/if}
                 </div>
 
                 <!-- 每周任务 -->
                 <div class="section">
-                    <h3 class="section-title">每周任务</h3>
+                    <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}
@@ -166,13 +164,15 @@
                         </div>
                         {/foreach}
                         {else}
-                        <div class="card">暂无任务</div>
+                        <div class="card empty-card">暂无任务</div>
                         {/if}
                     </div>
 
                     <!-- 每月任务（举例） -->
                     <div class="section">
-                        <h3 class="section-title">每月任务</h3>
+                        <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}
@@ -194,7 +194,7 @@
                             </div>
                             {/foreach}
                             {else}
-                            <div class="card">暂无任务</div>
+                            <div class="card empty-card">暂无任务</div>
                             {/if}
                         </div>