128 lines
3.2 KiB
HTML
128 lines
3.2 KiB
HTML
<style>
|
||
.timeline-container {
|
||
padding: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 18px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: #e4e7ed;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: 40px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.timeline-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.timeline-marker {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 4px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: #409EFF;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 0 2px #409EFF;
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeline-content {
|
||
background: #f9f9f9;
|
||
border-radius: 4px;
|
||
padding: 10px 15px;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.timeline-title {
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.timeline-time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div class="panel panel-default panel-intro">
|
||
|
||
<div class="panel-heading">
|
||
<!--<div class="panel-lead"><em>多表格（Multitable）</em>用于展示在一个页面展示多个表格数据,并且每次切换时刷新</div>-->
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a href="#first" data-toggle="tab">跟进记录</a></li>
|
||
<li><a href="#second" data-toggle="tab">任务变更日志</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="panel-body">
|
||
<div id="myTabContent" class="tab-content">
|
||
<div class="tab-pane fade active in" id="first">
|
||
<table id="table1" class="table table-striped table-bordered table-hover" width="100%">
|
||
</table>
|
||
</div>
|
||
<div class="tab-pane fade" id="second">
|
||
<!-- <table id="table2" class="table table-striped table-bordered table-hover" width="100%">-->
|
||
<!-- </table>-->
|
||
|
||
<div class="timeline" id="log-timeline"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
|
||
const logs = {$logs}; // 你可以用后端模板变量渲染进去
|
||
|
||
renderTimeline(logs);
|
||
|
||
function renderTimeline(logs) {
|
||
const container = document.getElementById('log-timeline');
|
||
container.innerHTML = '';
|
||
|
||
// 按时间倒序排序（最新在上）
|
||
logs.sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
|
||
|
||
logs.forEach(log => {
|
||
const item = document.createElement('div');
|
||
item.className = 'timeline-item';
|
||
|
||
item.innerHTML = `
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<h4 class="timeline-title">${log.status_text || '无状态'}</h4>
|
||
<h4 class="timeline-title">${log.admin_user || '系统'}</h4>
|
||
<p>${log.remark || '无备注'}</p>
|
||
<p class="timeline-time">${log.create_time || ''}</p>
|
||
</div>
|
||
`;
|
||
|
||
container.appendChild(item);
|
||
});
|
||
}
|
||
|
||
</script>
|