From b41630280b49408824feb333849d51d83fa06fca Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 08 四月 2025 11:04:31 +0800
Subject: [PATCH] 考勤打卡
---
app/home/view/index/layout_system.html | 196 ++++++++++++++++++++++++++++++++----------------
1 files changed, 131 insertions(+), 65 deletions(-)
diff --git a/app/home/view/index/layout_system.html b/app/home/view/index/layout_system.html
index f8c0663..49b5f4b 100644
--- a/app/home/view/index/layout_system.html
+++ b/app/home/view/index/layout_system.html
@@ -1,68 +1,134 @@
+<style>
+ .layui-card-body {
+ height: 332px;
+ transition: all 0.5s;
+ }
+ .timeBox {
+ display: flex;
+ justify-content: space-between;
+ }
+ .timeBox li {
+ display: flex;
+ flex-direction: column;
+ padding: 5px 0 5px 10px;
+ width: 40%;
+ background-color: #f0f0f0;
+ border-radius: 5px;
+ }
+ .timeBox .time {
+ color: #000;
+ font-size: 16px;
+ }
+ .timeBox .state {
+ color: #949496;
+ }
+ .btnBox {
+ padding: 40px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .btnBox button {
+ width: 140px;
+ height: 140px;
+ border-radius: 50%;
+ box-shadow: 1px 1px 10px #3e5962;
+ background-color: #019efe;
+ }
+ .fl-cl {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ .promap {
+ padding-top: 10px;
+ color: #a6a6a8;
+ }
+ /* 缂哄崱 */
+ .lackStyle {
+ color: #f0b75c;
+ font-weight: bold;
+ border: 1px solid #f0b75c;
+ padding:2px 6px ;
+ border-radius: 15px;
+ }
+ /* 鏇存柊鎵撳崱 */
+ .updateStyle {
+ color: #019efe;
+ }
+</style>
<div class="layui-row layui-col-space16">
- <div class="layui-col-md12">
- <div class="layui-card">
- <div class="layui-card-title">绯荤粺淇℃伅</div>
- <div class="layui-card-body">
- <table class="layui-table" lay-skin="" lay-size="sm">
- {if condition="($install == true)"}
- <tr>
- <td colspan="4" style="color: #E94335; background-color:#f8f8f8">鎻愰啋锛氬彂鐜癮pp鐩綍涓嬬殑install鏂囦欢澶规病鍒犻櫎锛屼负浜嗙郴缁熺殑瀹夊叏,璇锋墜鍔ㄥ幓鍒犻櫎銆�</td>
- </tr>
- {/if}
- <tr>
- <td class="info-td">鏈嶅姟鍣ㄧ郴缁�</td>
- <td>{:get_system_info('os')}</td>
- <td class="info-td">PHP鐗堟湰</td>
- <td>{:get_system_info('php')}</td>
- </tr>
- <tr>
- <td class="info-td">涓婁紶闄勪欢闄愬埗</td>
- <td>{:get_system_config('system','upload_max_filesize')}M / {:get_system_info('upload_max_filesize')}</td>
- <td class="info-td">鎵ц鏃堕棿闄愬埗</td>
- <td>{:get_system_info('max_execution_time')}</td>
- </tr>
- {eq name=":get_system_config('system','qrcode')" value="2"}
- <tr>
- <td class="info-td">鍕捐偂OA</td>
- <td colspan="3">{:CMS_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px"
- href="https://blog.gougucms.com/home/book/detail/bid/3.html" target="_blank">鍕捐偂OA鏂囨。</a></td>
- </tr>
- <tr>
- <td class="info-td">ThinkPHP鐗堟湰</td>
- <td colspan="3">{$TP_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://doc.thinkphp.cn/v8_0/preface.html" target="_blank">TP8鏂囨。</a></td>
- </tr>
- <tr>
- <td class="info-td">Layui鐗堟湰</td>
- <td colspan="3">{:LAYUI_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://layui.dev/docs/2/" target="_blank">Layui鏂囨。</a></td>
- </tr>
- <tr>
- <td class="info-td">鍚堜綔鑱旂郴</td>
- <td colspan="3"><i class="iconfont icon-weixin green"></i>寰俊鍙凤細hdm588锛屼笟鍔″悎浣溿�佸姛鑳藉畾鍒惰澶囨敞</td>
- </tr>
- <tr>
- <td class="info-td">QQ浜ゆ祦缇�</td>
- <td colspan="3">鎼淨缇わ細24641076(婊�)锛�46924914(婊�)锛�295256660<br>鎴栫偣鍑� <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=vb-Jdu0e-7iAAxbqGczDg1xFjxbdBsip&authKey=lwlNHAZiUOK2Rua5B14KhfwoYcvpQtHnlWMAJAbQRhfg3YQOUVIFEmfxpbhcCQw%2F&noverify=0&group_code=295256660" target="_blank" rel="nofollow"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="gougucms浜ゆ祦缇�" title="鐐瑰嚮閾炬帴鍔犲叆缇よ亰銆愬嬀鑲″紑婧愪氦娴佺兢銆�" style="vertical-align:middle"></a></td>
- </tr>
- <tr>
- <td class="info-td">鍚岀郴鍒楀紑婧愯蒋浠�</td>
- <td colspan="3"><a class="layui-badge layui-bg-blue" style="margin-right:8px" href="https://gitee.com/gouguopen/gougucms" target="_blank">鍕捐偂CMS</a><a class="layui-badge layui-bg-blue" style="margin-right:8px" href="https://gitee.com/gouguopen/blog" target="_blank">鍕捐偂BLOG</a><a class="layui-badge layui-bg-blue" href="https://gitee.com/gouguopen/dev" target="_blank" style="margin-right:8px">鍕捐偂DEV</a><a class="layui-badge layui-bg-blue" href="https://gitee.com/gouguopen/guoguadmin" target="_blank">鍕捐偂ADMIN</a></td>
- </tr>
- <tr>
- <td colspan="4" style="color:#E94335; font-size:14px"><strong>鑵捐浜戞湇鍔″櫒锛岄�氳繃鎴戜滑鐨勪唬鐞嗚喘涔颁綆鑷� 1 鎶橈紝鐐瑰嚮鍥剧墖浜嗚В璇︽儏</strong></td>
- </tr>
- <tr>
- <td colspan="4">
- <a href="https://curl.qcloud.com/h3ibq5lX" target="_blank"><img src="https://blog.gougucms.com/storage/image/480x300.jpg" style="width:100%; max-width:100%; border-radius:6px; cursor:pointer;" align=center /></a>
- </td>
- </tr>
- {/eq}
- </table>
- </div>
- </div>
- </div>
+ <div class="layui-col-md12">
+ <div class="layui-card">
+ <div class="layui-card-title">鑰冨嫟鎵撳崱</div>
+ <div class="layui-card-body">
+ <ul class="timeBox">
+ <li>
+ <p class="time">涓婄彮09:00</p>
+ <p>
+ <span class="firstState"></span>
+ </p>
+ </li>
+ <li>
+ <p class="time">涓嬬彮18:00</p>
+ <p>
+ <span class="lastState"></span>
+ </p>
+ </li>
+ </ul>
+ <div class="btnBox">
+ <button class="layui-btn">
+ <div class="fl-cl">
+ <span>涓婄彮鎵撳崱</span>
+ <span class="cutrrentTime" ></span>
+ </div>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<script>
-function layoutSystem(){
-
-}
-</script>
\ No newline at end of file
+ function layoutSystem() {
+ // 鎵撳紑鐘舵��
+ const firstStateDom = document.querySelector('.firstState')
+ const lastStateDom = document.querySelector('.lastState')
+ firstStateDom.innerHTML = '鏈墦鍗�'
+ lastStateDom.innerHTML = '鏈墦鍗�'
+ // 缂哄崱
+ const lackClock = (dom) =>{
+ const parentDom = dom.parentNode
+ const lackDom = document.createElement('span')
+ lackDom.innerHTML = '缂哄崱'
+ lackDom.className = 'lackStyle'
+ parentDom.appendChild(lackDom)
+ }
+ lackClock(firstStateDom)
+ // 鏇存柊鎵撳崱
+ const updateClock = (dom) => {
+ const parentDom = dom.parentNode
+ const clockDom = document.createElement('span')
+ clockDom.className = 'updateStyle'
+ clockDom.innerHTML = '鏇存柊鎵撳崱'
+ parentDom.appendChild(clockDom)
+ }
+ updateClock(lastStateDom)
+ // 宸叉墦鍗�
+ const successClock = (time,dom) => {
+ dom.innerHTML = '<i class="layui-icon" style="color:#019efe;">စ</i>' + time + '宸叉墦鍗�'
+ }
+ successClock('18:05:00',lastStateDom)
+ // 鎸夐挳鏃堕棿
+ const currentTimeBox = document.querySelector('.cutrrentTime')
+ setInterval(() => {
+ const currentTime = new Date().toLocaleTimeString()
+ currentTimeBox.innerHTML = currentTime
+ },1000)
+ // 鎵撳崱鎸夐挳
+ const dom = document.querySelector(".layui-btn");
+ dom.addEventListener("click", () => {
+ layer.msg("鎵撳崱鎴愬姛");
+ });
+ }
+</script>
--
Gitblit v1.9.1