189 lines
7.4 KiB
HTML
189 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html class="x-admin-sm">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>银河锋锐工作室账户后台系统</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<link rel="stylesheet" href="/css/win10ui.css">
|
|
<link rel="stylesheet" href="/css/theme.css">
|
|
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<script type="text/javascript" src="/js/tables.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<style>
|
|
.signin-container {
|
|
padding: 15px;
|
|
}
|
|
.signin-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 15px;
|
|
padding: 20px;
|
|
transition: all 0.3s;
|
|
}
|
|
.signin-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.signin-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.signin-avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin-right: 15px;
|
|
object-fit: cover;
|
|
}
|
|
.signin-name {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.signin-time {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-top: 5px;
|
|
}
|
|
.signin-status {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
margin-left: auto;
|
|
}
|
|
.status-normal {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
.signin-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
color: #888;
|
|
}
|
|
.signin-department {
|
|
background-color: #f6f6f6;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
.signin-week {
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
.signin-empty {
|
|
text-align: center;
|
|
padding: 50px 0;
|
|
color: #999;
|
|
font-size: 16px;
|
|
}
|
|
.signin-title {
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
padding-left: 10px;
|
|
border-left: 4px solid #1e9fff;
|
|
color: #333;
|
|
}
|
|
.signin-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="x-nav">
|
|
<span class="layui-breadcrumb">
|
|
<a>首页</a>
|
|
<a>工作室-工作组</a>
|
|
<a><cite>最新签到</cite></a>
|
|
</span>
|
|
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
|
|
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
|
|
</a>
|
|
</div>
|
|
<div class="layui-fluid signin-container">
|
|
<h2 class="signin-title">今日签到记录</h2>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div id="signin-list" class="signin-grid">
|
|
<!-- 签到卡片将通过JS动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['jquery', 'layer'], function(){
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
|
|
// 模拟数据请求
|
|
$.get('/API/GetNewCheckIn.api', function(res){
|
|
renderSigninList(res.data);
|
|
}, 'json');
|
|
|
|
// 渲染签到列表
|
|
function renderSigninList(data) {
|
|
var $container = $('#signin-list');
|
|
|
|
if (!data || data.length === 0) {
|
|
$container.html('<div class="signin-empty">暂无签到记录</div>');
|
|
return;
|
|
}
|
|
|
|
var html = '';
|
|
data.forEach(function(item) {
|
|
var statusClass = 'status-normal';
|
|
var statusText = '准时签到';
|
|
html += `
|
|
<div class="signin-card">
|
|
<div class="signin-header">
|
|
<img src="${item.avatar}" class="signin-avatar" onerror="this.src='https://randomuser.me/api/portraits/lego/1.jpg'">
|
|
<div>
|
|
<div class="signin-name">${item.name}</div>
|
|
<div class="signin-time">${formatFullTime(item.signin_time)}</div>
|
|
</div>
|
|
<span class="signin-status ${statusClass}">${statusText}</span>
|
|
</div>
|
|
<div class="signin-footer">
|
|
<span class="signin-week">本周起始: ${item.firstweek_time}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
$container.html(html);
|
|
}
|
|
|
|
// 格式化完整时间显示（年月日时分秒）
|
|
function formatFullTime(timeStr) {
|
|
if (!timeStr) return '';
|
|
var time = new Date(timeStr);
|
|
|
|
var year = time.getFullYear();
|
|
var month = (time.getMonth() + 1).toString().padStart(2, '0');
|
|
var date = time.getDate().toString().padStart(2, '0');
|
|
var hours = time.getHours().toString().padStart(2, '0');
|
|
var minutes = time.getMinutes().toString().padStart(2, '0');
|
|
var seconds = time.getSeconds().toString().padStart(2, '0');
|
|
|
|
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |