🆗 给打卡时间异常和补签卡加边框样式展示
This commit is contained in:
@@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>打卡</title><link rel="stylesheet"href="./normalize.min.css"><link rel="stylesheet"href="./style.css"></head><body class="dark-mode"><!--partial:index.partial.html--><div class="job"><div class="header"><div class="logo"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><path xmlns="http://www.w3.org/2000/svg"d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"fill="#0473ff"data-original="#28b446"/><path xmlns="http://www.w3.org/2000/svg"fill="#0473ff"data-original="#219b38"d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"/><path xmlns="http://www.w3.org/2000/svg"d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"fill="#0473ff"data-original="#518ef8"/></svg>打卡</div><div class="user-settings"><div class="dark-light"><svg viewBox="0 0 24 24"stroke="currentColor"stroke-width="1.5"fill="none"stroke-linecap="round"stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path></svg></div><img class="user-profile"id="user-head"src="img/tx.png"alt=""><div id="user-div"><span id="login-span"><div class="alert-inline"><div><input class="login-input"id="employee-number"type="text"placeholder="输入工号"></div><!--<div><input class="login-input"style="width: 280px"id="jsessionId"type="text"placeholder="输入SESSIONID"></div>--><div><div id="autodaka">自动打卡开关</div></div><div><div class="toggle toggle--switch"><input type="checkbox"id="toggle--switch"class="toggle--checkbox"><label class="toggle--btn"for="toggle--switch"><span class="toggle--feature"data-label-on="on"data-label-off="off"></span></label></div></div><div><button class="random-buttons"id="login">登陆</button></div></div></span><div id="logout-div"style="display: none"><button class="random-buttons"id="logout">登出</button></div></div></div></div><div class="dialog"style="display: none"><div class="alert"><div class="job-card-title"id="sign-date"><span style="font-size: 24px"></span></div><div class="alert-inline"><div><input id="sign-begin-time"type="text"placeholder="输入上班时间"></div><div><button class="random-buttons"id="sign-begin-random">随机</button></div></div><div class="alert-inline"><div><input id="sign-end-time"type="text"placeholder="输入下班时间"></div><div><button class="random-buttons"id="sign-end-random">随机</button></div></div><button class="search-buttons card-buttons begin-buttons"id="save-sign">保存</button></div></div><div class="userinfo_dialog"style="display: none"><div class="alert"><div class="job-card-title"><span style="font-size: 24px">打卡信息</span></div><div class="alert-inline"><div><label for="_user_input">用户名:</label><input id="_user_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_id_input">项目I D:</label><input id="_project_id_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_name_input">项目名称:</label><input id="_project_name_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_area_input">打卡地区:</label><input id="_area_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_device_input">设备信息:</label><input id="_device_input"readonly="readonly"type="text"></div></div></div></div><div class="wrapper"><div class="main-container"><div class="searched-jobs"><div class="searched-bar"><div class="searched-show">打卡记录</div><!--<button class="search-button">餐补<span class="canbu-span"></span></button>--></div><div class="job-cards"></div></div></div></div><script src="./coco-message.js"></script><script src="./jquery.min.js"></script><script src="./script.js"></script></div></body></html>
|
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>打卡</title><link rel="stylesheet"href="./normalize.min.css"><link rel="stylesheet"href="./style.css"></head><body class="dark-mode"><!--partial:index.partial.html--><div class="job"><div class="header"><div class="logo"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><path xmlns="http://www.w3.org/2000/svg"d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"fill="#0473ff"data-original="#28b446"/><path xmlns="http://www.w3.org/2000/svg"fill="#0473ff"data-original="#219b38"d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"/><path xmlns="http://www.w3.org/2000/svg"d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"fill="#0473ff"data-original="#518ef8"/></svg>打卡</div><div class="user-settings"><div class="dark-light"><svg viewBox="0 0 24 24"stroke="currentColor"stroke-width="1.5"fill="none"stroke-linecap="round"stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path></svg></div><img class="user-profile"id="user-head"src="img/tx.png"alt=""><div id="user-div"><div id="username">未登陆</div><span id="login-span"><div class="alert-inline"><div><input class="login-input"id="employee-number"type="text"placeholder="输入工号"></div><!--<div><input class="login-input"style="width: 280px"id="jsessionId"type="text"placeholder="输入SESSIONID"></div>--><div><div id="autodaka">自动打卡开关</div></div><div><div class="toggle toggle--switch"><input type="checkbox"id="toggle--switch"class="toggle--checkbox"><label class="toggle--btn"for="toggle--switch"><span class="toggle--feature"data-label-on="on"data-label-off="off"></span></label></div></div><div><button class="random-buttons"id="login">登陆</button></div></div></span><div id="logout-div"style="display: none"><button class="random-buttons"id="logout">登出</button></div></div></div></div><div class="dialog"style="display: none"><div class="alert"><div class="job-card-title"id="sign-date"><span style="font-size: 24px"></span></div><div class="alert-inline"><div><input id="sign-begin-time"type="text"placeholder="输入上班时间"></div><div><button class="random-buttons"id="sign-begin-random">随机</button></div></div><div class="alert-inline"><div><input id="sign-end-time"type="text"placeholder="输入下班时间"></div><div><button class="random-buttons"id="sign-end-random">随机</button></div></div><button class="search-buttons card-buttons begin-buttons"id="save-sign">保存</button></div></div><div class="userinfo_dialog"style="display: none"><div class="alert"><div class="job-card-title"><span style="font-size: 24px">打卡信息</span></div><div class="alert-inline"><div><label for="_user_input">用户名:</label><input id="_user_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_id_input">项目I D:</label><input id="_project_id_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_name_input">项目名称:</label><input id="_project_name_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_area_input">打卡地区:</label><input id="_area_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_device_input">设备信息:</label><input id="_device_input"readonly="readonly"type="text"></div></div></div></div><div class="wrapper"><div class="main-container"><div class="searched-jobs"><div class="searched-bar"><div class="searched-show">打卡记录</div><!--<button class="search-button">餐补<span class="canbu-span"></span></button>--></div><div class="job-cards"></div></div></div></div><script src="./coco-message.js"></script><script src="./jquery.min.js"></script><script src="./script.js"></script></div></body></html>
|
||||||
|
|||||||
@@ -105,7 +105,15 @@ function loadDakaList() {
|
|||||||
dateBeginTimeMap[signlog.yearmonth] = (signlog.begin_time == null ? "未打卡" : signlog.begin_time.substr(11, 5));
|
dateBeginTimeMap[signlog.yearmonth] = (signlog.begin_time == null ? "未打卡" : signlog.begin_time.substr(11, 5));
|
||||||
dateEndTimeMap[signlog.yearmonth] = (signlog.end_time == null ? "未打卡" : signlog.end_time.substr(11, 5));
|
dateEndTimeMap[signlog.yearmonth] = (signlog.end_time == null ? "未打卡" : signlog.end_time.substr(11, 5));
|
||||||
index++;
|
index++;
|
||||||
$('.job-cards').append('<div class="job-card">' +
|
let beginWarn = (signlog.begin_time != null && signlog.begin_time.substr(11, 5) > '09:30')
|
||||||
|
let endWarn = (signlog.end_time != null && signlog.end_time.substr(11, 5) < '18:30')
|
||||||
|
let buqianWarn = (signlog.actual_area_begin === '补签卡' || signlog.actual_area_end === '补签卡')
|
||||||
|
let weidakaWarn = (signlog.begin_time == null || signlog.end_time == null)
|
||||||
|
|
||||||
|
$('.job-cards').append('<div class="job-card ' +
|
||||||
|
(beginWarn || endWarn || weidakaWarn || buqianWarn ? 'rainbow' : '') + '" '+
|
||||||
|
// (beginWarn || endWarn || weidakaWarn || buqianWarn ? 'style="border: 8px; border-color: #ff8611; border-radius: 8px; border-style: solid;"' : "") +
|
||||||
|
'>' +
|
||||||
'<div class="job-card-title">' + (nowDate === signlog.yearmonth ? "今天" : signlog.yearmonth) + '</div>' +
|
'<div class="job-card-title">' + (nowDate === signlog.yearmonth ? "今天" : signlog.yearmonth) + '</div>' +
|
||||||
'<div class="job-card-subtitle">' +
|
'<div class="job-card-subtitle">' +
|
||||||
signlog.area_id +
|
signlog.area_id +
|
||||||
@@ -113,8 +121,8 @@ function loadDakaList() {
|
|||||||
'<div class="job-detail-buttons">' +
|
'<div class="job-detail-buttons">' +
|
||||||
'<button class="search-buttons detail-button">' + (signlog.begin_time == null ? "未打卡" : signlog.begin_time.substr(11, 5)) + '</button>' +
|
'<button class="search-buttons detail-button">' + (signlog.begin_time == null ? "未打卡" : signlog.begin_time.substr(11, 5)) + '</button>' +
|
||||||
'<button class="search-buttons detail-button">' + (signlog.end_time == null ? "未打卡" : signlog.end_time.substr(11, 5)) + '</button>' +
|
'<button class="search-buttons detail-button">' + (signlog.end_time == null ? "未打卡" : signlog.end_time.substr(11, 5)) + '</button>' +
|
||||||
(signlog.autoDakaBeginTime == null ? "" : '<br><button class="search-buttons detail-button">定时上班卡时间: ' + signlog.autoDakaBeginTime + '</button>') +
|
(signlog.autoDakaBeginTime == null ? "" : '<button class="search-buttons detail-button" style="font-size: 10px">定时上班卡时间: ' + signlog.autoDakaBeginTime + '</button>') +
|
||||||
(signlog.autoDakaEndTime == null ? "" : '<button class="search-buttons detail-button">定时下班卡时间: ' + signlog.autoDakaEndTime + '</button>') +
|
(signlog.autoDakaEndTime == null ? "" : '<button class="search-buttons detail-button" style="font-size: 10px">定时下班卡时间: ' + signlog.autoDakaEndTime + '</button>') +
|
||||||
// (signlog.end_time != null && signlog.end_time.substr(11, 5) > "21:00" ? '<button class="search-buttons detail-button">餐补</button>' : '') +
|
// (signlog.end_time != null && signlog.end_time.substr(11, 5) > "21:00" ? '<button class="search-buttons detail-button">餐补</button>' : '') +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
(index <= 3 ? '<div class="job-card-buttons">' +
|
(index <= 3 ? '<div class="job-card-buttons">' +
|
||||||
|
|||||||
@@ -638,6 +638,35 @@ body > div > div.userinfo_dialog > div > div > div input {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@property --border-angle {
|
||||||
|
syntax: "<angle>";
|
||||||
|
initial-value: 0deg;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes border-angle-rotate {
|
||||||
|
from { --border-angle: 0deg; }
|
||||||
|
to { --border-angle: 360deg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.rainbow {
|
||||||
|
background: linear-gradient(var(--header-bg-color), var(--header-bg-color)) padding-box,
|
||||||
|
conic-gradient(
|
||||||
|
from var(--border-angle),
|
||||||
|
oklch(100% 100% 0deg),
|
||||||
|
oklch(100% 100% 45deg),
|
||||||
|
oklch(100% 100% 90deg),
|
||||||
|
oklch(100% 100% 135deg),
|
||||||
|
oklch(100% 100% 180deg),
|
||||||
|
oklch(100% 100% 225deg),
|
||||||
|
oklch(100% 100% 270deg),
|
||||||
|
oklch(100% 100% 315deg),
|
||||||
|
oklch(100% 100% 360deg)
|
||||||
|
)
|
||||||
|
border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.job-card {
|
.job-card {
|
||||||
padding: 20px 16px;
|
padding: 20px 16px;
|
||||||
background-color: var(--header-bg-color);
|
background-color: var(--header-bg-color);
|
||||||
@@ -645,6 +674,9 @@ body > div > div.userinfo_dialog > div > div > div input {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-transition: .2s;
|
-webkit-transition: .2s;
|
||||||
transition: .2s;
|
transition: .2s;
|
||||||
|
box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
|
||||||
|
animation: border-angle-rotate 2s infinite linear;
|
||||||
|
border: 0.5rem solid transparent;
|
||||||
}
|
}
|
||||||
.job-card:hover {
|
.job-card:hover {
|
||||||
-webkit-transform: scale(1.02);
|
-webkit-transform: scale(1.02);
|
||||||
@@ -722,7 +754,7 @@ body > div > div.userinfo_dialog > div > div > div input {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-column-gap: 10px;
|
grid-column-gap: 10px;
|
||||||
grid-row-gap: 25px;
|
grid-row-gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.job-card-buttons {
|
.job-card-buttons {
|
||||||
|
|||||||
Reference in New Issue
Block a user