544 lines
26 KiB
HTML
544 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-page-node-id="kKD2zGHaUO9U8u7IkrNWoA">
|
||
<head data-page-node-id="Dla59qTcmtkSQPQHpk2rXm">
|
||
<meta charset="UTF-8" data-page-node-id="gYv6D6nA0dbg3IvkENsNxP">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" data-page-node-id="CXN5L7TMr7y3USos7buZPt">
|
||
<title>教师请假 · 我要请假(美化版)</title>
|
||
<style>
|
||
:root {
|
||
--primary: #2f6bff;
|
||
--primary-dark: #1e54d6;
|
||
--primary-light: #eef3ff;
|
||
--bg: #f4f6fa;
|
||
--card: #ffffff;
|
||
--text-1: #1c2333;
|
||
--text-2: #5a6478;
|
||
--text-3: #9aa3b5;
|
||
--border: #e6eaf2;
|
||
--danger: #e5484d;
|
||
--success: #18a058;
|
||
--radius: 12px;
|
||
--shadow: 0 1px 3px rgba(28, 35, 51, .06), 0 8px 24px rgba(28, 35, 51, .05);
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text-1);
|
||
font-size: 14px;
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ---------- 侧边栏 ---------- */
|
||
.sidebar {
|
||
width: 220px;
|
||
background: #ffffff;
|
||
border-right: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 20px 20px 18px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
.brand-logo {
|
||
width: 32px; height: 32px;
|
||
border-radius: 9px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 15px;
|
||
box-shadow: 0 4px 10px rgba(47, 107, 255, .35);
|
||
}
|
||
.nav { flex: 1; padding: 6px 12px; overflow-y: auto; }
|
||
.nav a {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px;
|
||
margin-bottom: 2px;
|
||
border-radius: 8px;
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
transition: all .15s;
|
||
}
|
||
.nav a:hover { background: #f4f6fb; color: var(--text-1); }
|
||
.nav a.active {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
font-weight: 600;
|
||
}
|
||
.nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||
.nav-section {
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
padding: 14px 12px 6px;
|
||
}
|
||
|
||
/* ---------- 主区域 ---------- */
|
||
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||
.topbar {
|
||
height: 56px;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 24px;
|
||
position: sticky; top: 0; z-index: 10;
|
||
}
|
||
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
|
||
.breadcrumb .current { color: var(--text-1); font-weight: 600; }
|
||
.user-chip { display: flex; align-items: center; gap: 10px; }
|
||
.avatar {
|
||
width: 30px; height: 30px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #5b8cff, #2f6bff);
|
||
color: #fff; font-size: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
|
||
.content { max-width: 860px; width: 100%; margin: 0 auto; padding: 24px 24px 120px; }
|
||
|
||
/* ---------- 页头卡片 ---------- */
|
||
.page-head {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-head h1 { font-size: 20px; font-weight: 600; }
|
||
.page-head .sub { color: var(--text-3); font-size: 13px; margin-top: 4px; }
|
||
|
||
.duration-banner {
|
||
display: flex; align-items: center; gap: 10px;
|
||
background: var(--primary-light);
|
||
border: 1px solid #d8e3ff;
|
||
color: var(--primary-dark);
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
font-size: 13px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.duration-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||
|
||
/* ---------- 表单卡片 ---------- */
|
||
.card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
margin-bottom: 16px;
|
||
overflow: hidden;
|
||
}
|
||
.card-head {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 16px 24px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: #fafbfe;
|
||
}
|
||
.card-head .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
|
||
.card-head h2 { font-size: 15px; font-weight: 600; }
|
||
.card-head .hint { margin-left: auto; font-size: 12px; color: var(--text-3); }
|
||
.card-body { padding: 24px; }
|
||
|
||
.form-row { display: grid; grid-template-columns: 112px 1fr; gap: 16px; margin-bottom: 22px; align-items: start; }
|
||
.form-row:last-child { margin-bottom: 0; }
|
||
.form-row > label { padding-top: 9px; font-size: 14px; color: var(--text-2); text-align: right; }
|
||
.req::before { content: "*"; color: var(--danger); margin-right: 2px; }
|
||
|
||
.field-control { min-width: 0; }
|
||
|
||
/* 输入控件 */
|
||
.input, .select, .textarea {
|
||
width: 100%;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 9px 12px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
color: var(--text-1);
|
||
background: #fff;
|
||
transition: border-color .15s, box-shadow .15s;
|
||
outline: none;
|
||
}
|
||
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
|
||
.input:hover, .select:hover, .textarea:hover { border-color: #c3cede; }
|
||
.input:focus, .select:focus, .textarea:focus {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
|
||
}
|
||
.select {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
padding-right: 34px;
|
||
cursor: pointer;
|
||
}
|
||
.textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
|
||
.char-count { text-align: right; font-size: 12px; color: var(--text-3); margin-top: 6px; }
|
||
.help-text { font-size: 12px; color: var(--text-3); margin-top: 6px; }
|
||
|
||
/* 分段选择器(替代原生单选) */
|
||
.segmented {
|
||
display: inline-flex;
|
||
background: #f1f3f9;
|
||
border-radius: 8px;
|
||
padding: 3px;
|
||
gap: 2px;
|
||
}
|
||
.segmented button {
|
||
border: none; background: transparent;
|
||
padding: 7px 18px;
|
||
border-radius: 6px;
|
||
font-size: 13px; font-family: inherit;
|
||
color: var(--text-2);
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
}
|
||
.segmented button.on {
|
||
background: #fff;
|
||
color: var(--primary);
|
||
font-weight: 600;
|
||
box-shadow: 0 1px 4px rgba(28, 35, 51, .12);
|
||
}
|
||
.segmented.mini button { padding: 6px 14px; }
|
||
|
||
.inline-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||
.date-wrap { position: relative; width: 170px; }
|
||
.date-wrap .input { padding-right: 34px; }
|
||
.date-wrap svg {
|
||
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
|
||
width: 14px; height: 14px; color: var(--text-3); pointer-events: none;
|
||
}
|
||
.arrow { color: var(--text-3); font-size: 13px; }
|
||
|
||
.auto-length {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: #f0faf4;
|
||
border: 1px solid #cdeeda;
|
||
color: var(--success);
|
||
border-radius: 8px;
|
||
padding: 8px 14px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.auto-length .big { font-size: 16px; }
|
||
|
||
/* 上传区 */
|
||
.upload {
|
||
display: flex; align-items: center; gap: 16px;
|
||
border: 1.5px dashed #c9d4ea;
|
||
border-radius: 10px;
|
||
padding: 18px 20px;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
background: #fafbff;
|
||
}
|
||
.upload:hover { border-color: var(--primary); background: var(--primary-light); }
|
||
.upload-icon {
|
||
width: 44px; height: 44px; border-radius: 10px;
|
||
background: var(--primary-light);
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.upload-icon svg { width: 20px; height: 20px; color: var(--primary); }
|
||
.upload .t { font-size: 14px; color: var(--text-1); font-weight: 500; }
|
||
.upload .t em { color: var(--primary); font-style: normal; }
|
||
.upload .d { font-size: 12px; color: var(--text-3); margin-top: 3px; }
|
||
|
||
/* 抄送人 chips */
|
||
.cc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
.cc-chip {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
background: #f4f6fb;
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding: 5px 12px 5px 5px;
|
||
font-size: 13px;
|
||
}
|
||
.cc-chip .av {
|
||
width: 24px; height: 24px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #7fa4ff, #4f7dff);
|
||
color: #fff; font-size: 11px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.cc-chip .x { color: var(--text-3); cursor: pointer; font-size: 12px; }
|
||
.cc-chip .x:hover { color: var(--danger); }
|
||
.cc-add {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
border: 1px dashed #c9d4ea;
|
||
background: #fff;
|
||
border-radius: 999px;
|
||
padding: 6px 14px;
|
||
font-size: 13px;
|
||
color: var(--text-2);
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
}
|
||
.cc-add:hover { color: var(--primary); border-color: var(--primary); }
|
||
|
||
/* 底部操作栏 */
|
||
.action-bar {
|
||
position: fixed;
|
||
bottom: 0; left: 220px; right: 0;
|
||
background: rgba(255, 255, 255, .92);
|
||
backdrop-filter: blur(8px);
|
||
border-top: 1px solid var(--border);
|
||
padding: 14px 24px;
|
||
display: flex; justify-content: center; gap: 12px;
|
||
z-index: 20;
|
||
}
|
||
.btn {
|
||
border: none; border-radius: 8px;
|
||
padding: 10px 28px;
|
||
font-size: 14px; font-family: inherit;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
}
|
||
.btn-primary {
|
||
background: var(--primary); color: #fff;
|
||
box-shadow: 0 4px 12px rgba(47, 107, 255, .3);
|
||
}
|
||
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
|
||
.btn-ghost { background: #fff; color: var(--text-2); border: 1px solid var(--border); }
|
||
.btn-ghost:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
|
||
|
||
@media (max-width: 900px) {
|
||
.sidebar { display: none; }
|
||
.action-bar { left: 0; }
|
||
.form-row { grid-template-columns: 1fr; gap: 8px; }
|
||
.form-row > label { text-align: left; padding-top: 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body data-page-node-id="pEuvYe0F7z7IRACLMAJH5X">
|
||
|
||
<!-- 侧边栏 -->
|
||
<aside class="sidebar" data-page-node-id="KxKa3n00u4ulOQOXzW3uMQ">
|
||
<div class="brand" data-page-node-id="VzcmXzjTNBqyPqyVjfC6om">
|
||
<div class="brand-logo" data-page-node-id="1X5pxZgYm6LMoLl2c9FYCM">假</div>
|
||
教师请假
|
||
</div>
|
||
<nav class="nav" data-page-node-id="cjnkCzt9ERGD5HUBPowDyR">
|
||
<a class="active" href="#" data-page-node-id="Va1SYAGt6sOdSJegvz726T">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="ulsRZBFqExsBrMsKiUidpD"><path d="M3 12l9-8 9 8" data-page-node-id="oInS7JOZVNoB70QHqOU8au"/><path d="M5 10v10h14V10" data-page-node-id="s85v5eHLxfIQrCdLE4igW3"/></svg>
|
||
我要请假
|
||
</a>
|
||
<a href="#" data-page-node-id="dbHc0a7VHf4n6GtA1azGbs">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="IdUSndES0wv3tZuFkhONUv"><rect x="3" y="4" width="18" height="17" rx="2" data-page-node-id="UdHIDsgJuiujc9qVX7s8Fb"/><path d="M3 9h18M8 2v4M16 2v4" data-page-node-id="a0wpFLvqAIDQOWFzuCuvmt"/></svg>
|
||
我的请假
|
||
</a>
|
||
<a href="#" data-page-node-id="71xEYRC8LRGtHeQY6NDQOz">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="KoB6xEYlMHWF9EriepZg1T"><path d="M9 11l3 3 8-8" data-page-node-id="sAuu92W4pSErD1OxtLQZcI"/><path d="M20 12v6a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h9" data-page-node-id="810bvLwnB2UtwXIRCZaKbM"/></svg>
|
||
审批列表
|
||
</a>
|
||
<a href="#" data-page-node-id="tTu2zRCjdncO67183BOFN3">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="7xaYewKgpOUXPraaDOw09S"><path d="M4 4h16v12H7l-3 3z" data-page-node-id="mCQ6ySlxaiBlbkkeMcL51m"/></svg>
|
||
抄送列表
|
||
</a>
|
||
<a href="#" data-page-node-id="Gs6GSHth07CrYFLJ5o60Ih">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="rnvZzs2XUuaYGWqAmdC5bP"><circle cx="12" cy="12" r="9" data-page-node-id="OBeF2bYsozNJur04Bw7G3H"/><path d="M12 7v5l3 3" data-page-node-id="H0dRAUZKl3qm0DN10cNIJZ"/></svg>
|
||
全部请假
|
||
</a>
|
||
<div class="nav-section" data-page-node-id="JCwkmbaLM5TweGEcJUs6W8">系统管理</div>
|
||
<a href="#" data-page-node-id="hSXfr0wCRB8DkbJ73RKWrw">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="Cum3smV6ZijGAg79gVMDKD"><circle cx="6" cy="6" r="2.5" data-page-node-id="z14t9hJa8FAt2wvPQXgYBm"/><circle cx="6" cy="18" r="2.5" data-page-node-id="1igtdCB3rheNVDrLPK0mtn"/><circle cx="18" cy="12" r="2.5" data-page-node-id="41A0s7EkwjAmkIfKsmB5qt"/><path d="M8 7l8 4M8 17l8-4" data-page-node-id="b90DRkfc6OQr6Ng55Y6Lyd"/></svg>
|
||
流程管理
|
||
</a>
|
||
<a href="#" data-page-node-id="rGTpqu5DeYdCvYXgQ81MWW">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="CBSqMxi7TuCnpE8st3XH6B"><circle cx="12" cy="12" r="3" data-page-node-id="TdGoOsqI7u14xZ79HaN5aD"/><path d="M19 12a7 7 0 00-.2-1.6l2-1.5-2-3.4-2.3.9a7 7 0 00-2.8-1.6L13 2h-4l-.7 2.8a7 7 0 00-2.8 1.6l-2.3-.9-2 3.4 2 1.5A7 7 0 005 12c0 .5.1 1.1.2 1.6l-2 1.5 2 3.4 2.3-.9a7 7 0 002.8 1.6L11 22h4l.7-2.8a7 7 0 002.8-1.6l2.3.9 2-3.4-2-1.5c.1-.5.2-1.1.2-1.6z" data-page-node-id="SqgFM1A88nYkkJtU4AuEuB"/></svg>
|
||
请假设置
|
||
</a>
|
||
<a href="#" data-page-node-id="s91aGwCnjwTsqj2A7s54xN">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="b5cA0cUXWODHQkrTIV4ZIe"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" data-page-node-id="LoYAVhjFTXPibADPv31BD8"/></svg>
|
||
时长日志
|
||
</a>
|
||
<a href="#" data-page-node-id="yhzjmHJncnQrOPvpdD3BiF">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="awX52Tr5qvDCXDbD8KELcN"><path d="M21 12a9 9 0 11-9-9" data-page-node-id="nSDfCui4uPQiDsUk0gUbQU"/><path d="M21 3l-9 9" data-page-node-id="F0gLfIp8UkNL5hVPdDZfqw"/></svg>
|
||
统计分析
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- 主区域 -->
|
||
<div class="main" data-page-node-id="sMV0VdZBGSodsH6qwlDCf1">
|
||
<header class="topbar" data-page-node-id="EUigeyFAoCR9CEkqV85MCL">
|
||
<div class="breadcrumb" data-page-node-id="ZAKRQ3iCsCyuE8oHQfnSve">
|
||
<span data-page-node-id="Ayu9ndzrCH6xHNgDH5i8q3">首页</span><span data-page-node-id="LmTzuZOBp5w5HOVLhA0krW">/</span><span data-page-node-id="E8NJ91gnT4qxt3c7LVx1QV">教师请假</span><span data-page-node-id="kz4Aszy3nhe8WzQrBFedxF">/</span><span class="current" data-page-node-id="gIzqk9uFZT0LJZcqSO4QKT">我要请假</span>
|
||
</div>
|
||
<div class="user-chip" data-page-node-id="siJRD2l0dxOjNQkzOLqbbJ">
|
||
<div class="avatar" data-page-node-id="QEct8lAiU3XQ4bBNXHuJhw">李</div>
|
||
<span style="font-size:13px;color:var(--text-2)" data-page-node-id="xSsq81vrQKNcHfvbzWwKcl">李晶</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="content" data-page-node-id="b3qFT1d5MbfLz1MWBoQHWb">
|
||
<div class="page-head" data-page-node-id="EYQoa9nU7Y6CnSpBTIqUBm">
|
||
<div data-page-node-id="afVHkaWg2h9ECBzpDkzhhU">
|
||
<h1 data-page-node-id="ixJbTpAJuugIv7If5HmJmc">请假申请</h1>
|
||
<div class="sub" data-page-node-id="jihbsdZhsWChtVO6krHgte">提交后将进入审批流程,审批结果会通过消息通知您</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="duration-banner" data-page-node-id="NuMwuvJBQQSC1kwUhEJOei">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="gHR7TvdetFVkT1EPRHLVlt"><circle cx="12" cy="12" r="9" data-page-node-id="yD6ZRVO91u1UMflIj2cS78"/><path d="M12 8v4M12 16h.01" data-page-node-id="3FiynVNRF9hbQHn0tAkDPu"/></svg>
|
||
时间说明:上午(08:00–12:00)– 下午(13:00–17:00),固定 3 小时工作制,按半天为单位计费时长
|
||
</div>
|
||
|
||
<form onsubmit="return false" data-page-node-id="lM5rDi8YBXazoQmj2xRVYJ">
|
||
|
||
<!-- 请假信息 -->
|
||
<section class="card" data-page-node-id="ldXTzuvrIHdwdYLOmKrvXw">
|
||
<div class="card-head" data-page-node-id="jfBksYP1p6jlOHovaVLKnC">
|
||
<span class="bar" data-page-node-id="Ae8GrrHH2KB1zFXrlkLDmF"></span>
|
||
<h2 data-page-node-id="mTOLZasDNFB8cOC3UEnkHB">请假信息</h2>
|
||
<span class="hint" data-page-node-id="u15G14hbxqxPA23NONBMPr">带 * 为必填项</span>
|
||
</div>
|
||
<div class="card-body" data-page-node-id="uB0cUq8E7NcEwA0KbcVgfS">
|
||
|
||
<div class="form-row" data-page-node-id="XuguJUjkgUkjSJJ0P9uEeP">
|
||
<label class="req" data-page-node-id="34aLY6Q8cxk0ahXoQVBaGJ">请假类型</label>
|
||
<div class="field-control" data-page-node-id="CKLpKzQSySrTZ5zYviP6AF">
|
||
<div class="segmented" data-page-node-id="c5sryFi9RHrfgtKuCM6BtV">
|
||
<button type="button" class="on" data-page-node-id="qvFXFmXWkCYQ8xqIR8Yf2z">事假</button>
|
||
<button type="button" data-page-node-id="MRr8xFyPnvbpHoYUMM7649">病假</button>
|
||
<button type="button" data-page-node-id="Y25dmgoQGO7fXtB6YddSfE">婚假</button>
|
||
<button type="button" data-page-node-id="Zwqv2c06roJgSS6s1FDYoS">产假</button>
|
||
<button type="button" data-page-node-id="WTteUcAAA4AqS5vqCcgQ9P">其他</button>
|
||
</div>
|
||
<div class="help-text" data-page-node-id="MRptvR6jjGk9D1arZ40esi">不同类型可能需要附加不同的证明材料</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row" data-page-node-id="hN63ZRXjqMJQpD3xXOouYi">
|
||
<label class="req" data-page-node-id="R143QpoTjkGIzkpR2AzqJ2">起止时间</label>
|
||
<div class="field-control" data-page-node-id="Xi0VxxTy0Bv2XGNZ0FDbTz">
|
||
<div class="inline-group" data-page-node-id="R5moEYc0CgMHEqoTulXFwY">
|
||
<div class="segmented mini" data-page-node-id="jjyPX3fb7jGvasHchRoWy4">
|
||
<button type="button" class="on" data-page-node-id="gKpIGCohbkQXDFyFOU4MdS">半天</button>
|
||
<button type="button" data-page-node-id="0rtjA9ABbaYiUUHbCPivlR">半天以上</button>
|
||
</div>
|
||
</div>
|
||
<div class="inline-group" style="margin-top:12px" data-page-node-id="S07l3479yHAQekvgpAEGSf">
|
||
<div class="date-wrap" data-page-node-id="XpWVG57eBS6I6XqF4F0ZLb">
|
||
<input class="input" type="text" placeholder="开始日期" value="2026-10-12" data-page-node-id="IYSLOFh1EM0Mqf8MT5UQQT">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="4fz42ERqratTWNZM6LWrhI"><rect x="3" y="4" width="18" height="17" rx="2" data-page-node-id="iaPtKo2tHABJgKW7T3dFTz"/><path d="M3 9h18M8 2v4M16 2v4" data-page-node-id="bBMfb0djLcpOZasbPdXIut"/></svg>
|
||
</div>
|
||
<span class="arrow" data-page-node-id="DxL3MF49N3ExzXbEQutH9d">至</span>
|
||
<div class="date-wrap" data-page-node-id="2KRaxUjqirMcWuMqxQRd0k">
|
||
<input class="input" type="text" placeholder="结束日期" value="2026-10-12" data-page-node-id="7jBUHBHAZwVIaA9DMFFRoY">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="Akv8tEVe2B6KGI2rCquErM"><rect x="3" y="4" width="18" height="17" rx="2" data-page-node-id="X35kk0y5sR2A5Tnpf5HfC1"/><path d="M3 9h18M8 2v4M16 2v4" data-page-node-id="3gGsKjfVBpvHPyNlkQt426"/></svg>
|
||
</div>
|
||
<div class="segmented mini" data-page-node-id="99sq4CQ74B4HmE4aExVt9S">
|
||
<button type="button" class="on" data-page-node-id="ZaJXegt7BQVfQzBxYsR4wT">上午</button>
|
||
<button type="button" data-page-node-id="QZWxPZhCmnEJMxl5cotFKV">下午</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row" data-page-node-id="R5Gvc1SQ83ujS4rLZ9AHf3">
|
||
<label data-page-node-id="9XdzSMTiqlRl3rD9cPbFta">时长(天)</label>
|
||
<div class="field-control" data-page-node-id="GAFjTSwPQuEmC9RWeDqrPM">
|
||
<div class="auto-length" data-page-node-id="lEoDmiF9jaYSI2WvAW2D0G">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" data-page-node-id="ZXnqn8CedYbenu9o8NAu3F"><path d="M20 6L9 17l-5-5" data-page-node-id="EVwPtbhwgQ2qC8EOb7abtL"/></svg>
|
||
<span class="big" id="len" data-page-node-id="vgwQ3unWYE8McDZebzxBQS">0.5</span> 天(按选择自动计算)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row" data-page-node-id="C1PM1qOPV2z6oAbsd5JuuR">
|
||
<label data-page-node-id="1dBrOAqidP5ZFKz6FxhMUM">课务安排</label>
|
||
<div class="field-control" data-page-node-id="8DCGf8LVPImLJDHB9nZDcM">
|
||
<div class="segmented" data-page-node-id="NxGgrvEpNrDliW5u7tUQJ4">
|
||
<button type="button" class="on" data-page-node-id="Wjc0C3bX6c1VH5ZTAjnaLf">无课务安排</button>
|
||
<button type="button" data-page-node-id="IqNGMXfXHzor4DcfdLLn1W">自行安排</button>
|
||
<button type="button" data-page-node-id="aiNkqxmQHLjSR2SrYdfHtb">教务安排</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row" data-page-node-id="k1M4sxumnqLNMCjc1Kq49J">
|
||
<label class="req" data-page-node-id="wS0SJtUbLrykrIAPDjhfz5">请假事由</label>
|
||
<div class="field-control" data-page-node-id="o8ZA7twmpBVwnlNZ8EGrlk">
|
||
<textarea class="textarea" maxlength="50" placeholder="请输入请假事由,如:因家中急事需请假半天处理…" oninput="document.getElementById('cnt').textContent=this.value.length+'/50'"></textarea>
|
||
<div class="char-count" id="cnt" data-page-node-id="P9RJV4Wh8j1H7nJxrYhbFX">0/50</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 证明材料 -->
|
||
<section class="card" data-page-node-id="0nBpDIAQYCPPsKK3V6Dcdf">
|
||
<div class="card-head" data-page-node-id="OGbHxmvAXt5qc7792De287">
|
||
<span class="bar" data-page-node-id="h7OOjcknF1mUCC7zh2tUJB"></span>
|
||
<h2 data-page-node-id="l5cbaC8S3XpGjKOfVXtT2o">证明材料</h2>
|
||
<span class="hint" data-page-node-id="rYBk78Ey7v1IZ8Zw6oJPlD">选填</span>
|
||
</div>
|
||
<div class="card-body" data-page-node-id="YRZq0roOiODObFtB7EFfyQ">
|
||
|
||
<div class="form-row" data-page-node-id="lPh9hGa5dUJJceCXbcFOsc">
|
||
<label data-page-node-id="ADJZDgRPUTBOiFUc9khFDy">图片上传</label>
|
||
<div class="field-control" data-page-node-id="ovpkFVnIsdCZWUcBN21EuO">
|
||
<label class="upload" data-page-node-id="sHylpiEVUllqifYR5Rjnux">
|
||
<div class="upload-icon" data-page-node-id="9jA1234YfjzKAqGtEXdfxv">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-page-node-id="jpo7HN1U8dyb10eTMZXWmJ"><path d="M12 16V4M7 9l5-5 5 5" data-page-node-id="jCYvVZ9bqQ3eWhd0JGCn6P"/><path d="M4 15v3a2 2 0 002 2h12a2 2 0 002-2v-3" data-page-node-id="mGAuau1yyJJ8rPVkHsc80i"/></svg>
|
||
</div>
|
||
<div data-page-node-id="pOYMzudSilp8anfhdX6NoT">
|
||
<div class="t" data-page-node-id="7270wGAv0zvuovLNixYv0F">点击或拖拽图片到此处<em data-page-node-id="4SBpaJ9F1SQmgcF4h1TXMQ">上传</em></div>
|
||
<div class="d" data-page-node-id="VWiqsopOKlryVzUEyNDV1N">支持 .jpg / .bmp / .png 格式,单张不超过 20MB,可多选</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row" data-page-node-id="g2rqW2Pg1mV7kxU5pjhc6A">
|
||
<label data-page-node-id="HaMeoFJEFIxuExlSEd5vdt">抄送人</label>
|
||
<div class="field-control" data-page-node-id="hPrQi3dsNAoaIbHYH12r7W">
|
||
<div class="cc-row" data-page-node-id="JYP4lZiwZHPvAxOSGfyPyT">
|
||
<span class="cc-chip" data-page-node-id="7Dm8zeNpe3f9cqzSHWmhgc"><span class="av" data-page-node-id="7mtBNgDqn01CMyOOYdqySn">王</span>王主任<span class="x" data-page-node-id="46ZNU30heTGESUTHBXl8VR">✕</span></span>
|
||
<span class="cc-chip" data-page-node-id="pGp1TbwLQQBtkMezEdPxIL"><span class="av" style="background:linear-gradient(135deg,#8fd3a8,#4caf7d)" data-page-node-id="Jo33PdZrLUHNLRd8Xcx491">张</span>张老师<span class="x" data-page-node-id="Nfqm6fh8IBpnqh8YxdSvi5">✕</span></span>
|
||
<button type="button" class="cc-add" data-page-node-id="kJjoQnQQqIGSW9RnjMssnA">+ 选择抄送人</button>
|
||
</div>
|
||
<div class="help-text" data-page-node-id="3I1len510FzvXASsKgVwL5">审批通过后,请假单将自动抄送给以上人员</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</form>
|
||
</main>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<div class="action-bar" data-page-node-id="sHkY1QqGjh30YMgwDkGxyx">
|
||
<button class="btn btn-primary" type="submit" data-page-node-id="rEzE7N1bIe6Y4NKyeBKi6g">提交申请</button>
|
||
<button class="btn btn-ghost" type="button" data-page-node-id="fwFH5H3nWV0Q04QtHFZJTp">返回</button>
|
||
<button class="btn btn-ghost" type="button" data-page-node-id="ICHmTkrxmEPVAguA6wmbUo">重置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 分段选择器通用交互
|
||
document.querySelectorAll('.segmented').forEach(function(group){
|
||
group.addEventListener('click', function(e){
|
||
var btn = e.target.closest('button');
|
||
if (!btn) return;
|
||
group.querySelectorAll('button').forEach(function(b){ b.classList.remove('on'); });
|
||
btn.classList.add('on');
|
||
// 半天 / 半天以上 联动结束日期与时长
|
||
if (btn.textContent === '半天') {
|
||
document.querySelectorAll('.date-wrap .input')[1].value = document.querySelectorAll('.date-wrap .input')[0].value;
|
||
document.getElementById('len').textContent = '0.5';
|
||
} else if (btn.textContent === '半天以上') {
|
||
document.getElementById('len').textContent = '1.0';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|