hant/allocatr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accept Merge Request #116: (feature/zy -> develop)

Browse Source 
Merge Request: feature: 样式

Created By: @zhuyu
Accepted By: @zhuyu
URL: https://g-bcrc3009.coding.net/p/allocatr/d/allocatr/git/merge/116
This commit is contained in:
zhuyu 2025-06-05 17:05:45 +08:00 committed by Coding
commit 0b30e8dc52
1 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
application/admin/view/dashboard/task.html
View File

@ -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>