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> <style>
.dashboard { .dashboard {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 32px; gap: 24px;
width: 1200px; /* 根据需要调整 */
} }
/* 每一类任务（每日/每周/每月） */
.section { .section {
display: flex; background: #fff;
flex-direction: column; border: 1px solid #e0e4e8;
gap: 16px; border-radius: 12px;
background-color: #f9f9f9; /* ✅ 淡灰色背景 */
padding: 16px; padding: 16px;
border-radius: 8px; /* ✅ 加点圆角更柔和 */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
border: 1px solid #eee; /* ✅ 加细边框让结构更明显 */ }
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
} }
/* 标题部分 */
.section-title { .section-title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #444;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
color: #333;
} }
.section-title::before { .section-title i {
content: "📌"; color: #3498db;
font-size: 20px;
} }
/* 卡片样式 */
.card { .card {
position: relative; /* ✅ 这行是关键，必须有 */ position: relative;
background: #fff; background: #fff;
border: 1px solid #e0e4e8; border: 1px solid #e0e4e8;
border-radius: 6px; border-radius: 8px;
padding: 16px 20px; padding: 14px 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .04); margin-bottom: 12px;
display: flex; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
flex-direction: column; transition: 0.15s ease;
gap: 8px;
transition: transform .15s ease, box-shadow .15s ease;
} }
.card:hover { .card:hover {
transform: translateY(-2px); 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 { .card .title {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
margin-bottom: 6px;
color: #222; 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 { .card.completed .note {
text-decoration: line-through; text-decoration: line-through;
color: #999; 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 { .badge {
position: absolute; position: absolute;
top: 8px; top: 10px;
right: 8px; right: 10px;
font-size: 12px; font-size: 11px;
padding: 2px 8px; padding: 3px 8px;
border-radius: 12px; border-radius: 12px;
color: white; color: #fff;
background-color: #999; background-color: #999;
z-index: 1; /* 避免被遮挡 */
} }
/* 按状态区分颜色 */ .status-1 { background-color: #f39c12; }
.status-1 { background-color: #f39c12; } /* 待完成 - 橙色 */ .status-2 { background-color: #2ecc71; }
.status-2 { background-color: #2ecc71; } /* 已完成 - 绿色 */ .status-3 { background-color: #3498db; }
.status-3 { background-color: #3498db; } /* 待审核 - 蓝色 */ .status-4 { background-color: #1abc9c; }
.status-4 { background-color: #1abc9c; } /* 已通过 - 青色 */ .status-5 { background-color: #e74c3c; }
.status-5 { background-color: #e74c3c; } /* 已驳回 - 红色 */ .status-6 { background-color: #9b59b6; }
.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> </style>
<div class="panel panel-default panel-intro"> <div class="panel panel-default panel-intro">
@ -116,7 +110,9 @@
<!-- 每日任务 --> <!-- 每日任务 -->
<div class="section"> <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} {if $day}
{foreach $day as $item} {foreach $day as $item}
{if $item->status == 1 || $item->status == 5} {if $item->status == 1 || $item->status == 5}
@ -138,13 +134,15 @@
</div> </div>
{/foreach} {/foreach}
{else} {else}
<div class="card">暂无任务</div> <div class="card empty-card">暂无任务</div>
{/if} {/if}
</div> </div>
<!-- 每周任务 --> <!-- 每周任务 -->
<div class="section"> <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} {if $week}
{foreach $week as $item} {foreach $week as $item}
{if $item->status == 1 || $item->status == 5} {if $item->status == 1 || $item->status == 5}
@ -166,13 +164,15 @@
</div> </div>
{/foreach} {/foreach}
{else} {else}
<div class="card">暂无任务</div> <div class="card empty-card">暂无任务</div>
{/if} {/if}
</div> </div>
<!-- 每月任务（举例） --> <!-- 每月任务（举例） -->
<div class="section"> <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} {if $month}
{foreach $month as $item} {foreach $month as $item}
{if $item->status == 1 || $item->status == 5} {if $item->status == 1 || $item->status == 5}
@ -194,7 +194,7 @@
</div> </div>
{/foreach} {/foreach}
{else} {else}
<div class="card">暂无任务</div> <div class="card empty-card">暂无任务</div>
{/if} {/if}
</div> </div>