首页/ mobileweb/ 企业OA办公系统H5移动端功能演示/ 代码预览

💻 代码预览 · 企业OA办公系统H5移动端功能演示

mw_other · 上传者 驰旭教育
← 返回详情
leave.html · 约 2257 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<title>驰旭科技OA · 请假申请</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12  <div class="top"><span class="role">员工端</span><span style="margin-left:auto;font-size:12px;opacity:.85">驰旭科技</span></div>
13  <h1>请假申请</h1>
14  <div class="sub">年假 / 事假 / 病假在线申请</div>
15</div>
16
17<div class="form">
18  <div class="field"><label>请假类型</label><select><option>年假</option><option>事假</option><option>病假</option><option>调休</option><option>婚假</option></select></div>
19  <div class="field"><label>开始时间</label><input placeholder="如 09-15 09:00"></div>
20  <div class="field"><label>结束时间</label><input placeholder="如 09-16 18:00"></div>
21  <div class="field"><label>请假时长</label><input placeholder="2 天"></div>
22  <div class="field"><label>请假事由</label><input placeholder="请输入请假事由"></div>
23  <div class="field"><label>紧急联系人</label><input placeholder="姓名 / 电话"></div>
24</div>
25<button class="btn full" onclick="alert('请假申请已提交(演示)')">提交申请</button>
26<div class="section-title"><span>我的请假记录</span><span class="more">共 2 条</span></div>
27<div class="list"><div class="row"><div class="avatar">🌴</div><div class="info"><div class="t">年假 · 3 天</div><div class="s">09-02 至 09-04</div></div><span class="tag ok">已通过</span></div><div class="row"><div class="avatar">🌴</div><div class="info"><div class="t">病假 · 1 天</div><div class="s">08-21 全天</div></div><span class="tag ok">已通过</span></div></div>
28
29<div class="bottom-nav"><a class="nav-item" href="index.html"><span class="icon">🏠</span>主页</a><a class="nav-item" href="attendance.html"><span class="icon">📍</span>考勤</a><a class="nav-item active" href="leave.html"><span class="icon">🌴</span>请假</a><a class="nav-item" href="notice.html"><span class="icon">📢</span>公告</a></div>
30<div class="safe-bottom"></div>
31</div>
32</body>
33</html>