feature: 面板
This commit is contained in:
parent
27310f5a3c
commit
910edcb047
|
|
@ -30,6 +30,7 @@
|
|||
|
||||
/* 卡片样式 */
|
||||
.card {
|
||||
position: relative; /* ✅ 这行是关键,必须有 */
|
||||
background: #fff;
|
||||
border: 1px solid #e0e4e8;
|
||||
border-radius: 6px;
|
||||
|
|
@ -40,6 +41,7 @@
|
|||
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);
|
||||
|
|
@ -67,6 +69,27 @@
|
|||
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 {
|
||||
|
|
@ -92,11 +115,20 @@
|
|||
<h3 class="section-title">每日任务</h3>
|
||||
{if $day}
|
||||
{foreach $day as $item}
|
||||
{if $item->status != 1}
|
||||
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
|
||||
{else}
|
||||
{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>
|
||||
|
|
@ -111,11 +143,20 @@
|
|||
<h3 class="section-title">每周任务</h3>
|
||||
{if $week}
|
||||
{foreach $week as $item}
|
||||
{if $item->status != 1}
|
||||
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
|
||||
{else}
|
||||
{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>
|
||||
|
|
@ -130,11 +171,20 @@
|
|||
<h3 class="section-title">每月任务</h3>
|
||||
{if $month}
|
||||
{foreach $month as $item}
|
||||
{if $item->status != 1}
|
||||
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
|
||||
{else}
|
||||
{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>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Prove_desc')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<textarea id="c-prove_desc" class="form-control" name="row[prove_desc]" rows="3"></textarea>
|
||||
<textarea id="c-prove_desc" class="form-control" name="row[prove_desc]" rows="3">{$row.prove_desc|htmlentities}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,9 +24,10 @@
|
|||
<label class="control-label col-xs-12 col-sm-3">文件地址</label>
|
||||
<div class="col-xs-12">
|
||||
<div class="input-group">
|
||||
<input id="c-prove_file_path" class="form-control" size="50" name="row[prove_file_path]" type="text" value="">
|
||||
<input id="c-prove_file_path" class="form-control" size="50" name="row[prove_file_path]" type="text" value="{$row.path|htmlentities}">
|
||||
<div class="input-group-addon no-border no-padding">
|
||||
<span><button type="button" id="plupload-path" class="btn btn-danger plupload" data-input-id="c-prove_file_path" data-mimetype="*" data-multiple="false" data-preview-id="p-path"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
|
||||
<span><a href="{$row.url}" class="btn btn-primary btn-info btn-preview" data-type="{$row.filetype}">预览</a></span>
|
||||
</div>
|
||||
<span class="msg-box n-right" for="c-prove_file_path"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,40 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
|
|||
|
||||
},
|
||||
task_complete: function () {
|
||||
|
||||
|
||||
$(document).on('click', '.btn-preview', function (e) {
|
||||
e.preventDefault();
|
||||
var fileType = $(this).data('type'); // 自动从 data-type 获取,比如 pdf, jpg, doc
|
||||
var url = $(this).data('url');
|
||||
|
||||
if (fileType === 'pdf') {
|
||||
Layer.open({
|
||||
type: 2,
|
||||
title: '预览PDF文件',
|
||||
area: ['80%', '80%'],
|
||||
content: url
|
||||
});
|
||||
} else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileType)) {
|
||||
Layer.photos({
|
||||
photos: {
|
||||
"title": "图片预览",
|
||||
"data": [{"src": url}]
|
||||
},
|
||||
anim: 5
|
||||
});
|
||||
} else if (['mp4', 'webm', 'ogg'].includes(fileType)) {
|
||||
Layer.open({
|
||||
type: 1,
|
||||
title: '视频预览',
|
||||
area: ['800px', '500px'],
|
||||
content: `<video src="${url}" width="100%" height="100%" controls autoplay></video>`
|
||||
});
|
||||
} else {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
Form.api.bindevent($("form[role=form]"), function(data, ret){
|
||||
//这里是表单提交处理成功后的回调函数,接收来自php的返回数据
|
||||
Fast.api.close(data);//这里是重点
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user