Files
work-leave-service/docs/leave-form-beautified.html
T
wanghu 25147ec74e
build / build-push (push) Successful in 50s
commit
2026-10-10 15:42:52 +08:00

544 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>