6个专题页重设计：清新简洁一句话答案；测一测扩到16题；生娃计算器改7步选择+生下来/1/2/3岁分阶段花费
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -5,522 +5,277 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>孕妈产后复工 · 职场维权指南</title>
|
||||
<!-- 孕期专题 · 职场维权（2026-10-31：孕期首页「其他妈妈也在搜」第 5 条入口）。
|
||||
版式沿用妊娠纹专题 topic/wen/（用户已认可）：hero + 3 个核心重点 + 每段一句重点结论 + 数字徽标 + 时间轴 + 常显说明块 + 页底依据来源。
|
||||
内容只写全国通用的法律法规明文（《女职工劳动保护特别规定》《劳动合同法》《妇女权益保障法》《社会保险法》《劳动争议调解仲裁法》），
|
||||
地方差异（生育奖励假天数、津贴补差、剖宫产是否按难产等）一律写「以当地规定为准」，不写具体地方天数。
|
||||
插画 img/*.webp 由 AI 生成（画面不含文字）。自成一页：不引 app.js；回首页走相对路径 ../../。 -->
|
||||
<!-- 孕期专题 · 职场维权（孕期首页「其他妈妈也在搜」第 5 条）。
|
||||
2026-10-31 按《孕期专题页统一设计规范 v2》重做：清新、简洁、核心明确；主色 #5B6CFF。
|
||||
只写全国通用法条（《女职工劳动保护特别规定》《劳动合同法》《妇女权益保障法》《社会保险法》《劳动争议调解仲裁法》），
|
||||
地方差异一律写「以当地规定为准」。自成一页：不引 app.js；返回兜底走相对路径 ../../ 并带回 search + hash。 -->
|
||||
<style>
|
||||
:root{--c:#F4593C;--c2:#E8476F;--deep:#C2185B;--ink:#3B2A2A;--sub:#8A7471;--mute:#A8928E;--bg:#FFF8F5;--card:#fff;--line:#F6E3DD;--soft:#FFF0EA;
|
||||
--green:#2F8A5E;--gbg:#E7F5EC;--amber:#D9822B;--abg:#FFF1DE;--red:#D93B3B;--rbg:#FDE8E8;--purple:#8E6BB8;--blue:#3B7DD8}
|
||||
:root{--c:#5B6CFF;--cbg:#EEF0FF;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--sec:#F7F8FA}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--t);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
img{display:block;max-width:100%}
|
||||
button,input,select{font:inherit;border:0;background:none;color:inherit}
|
||||
button,input{font:inherit;border:0;background:none;color:inherit}
|
||||
button{cursor:pointer}
|
||||
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
|
||||
b{color:var(--h)}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;padding:0 1px}
|
||||
|
||||
/* 顶栏 */
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,248,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink)}
|
||||
.bar .t{font-weight:600;font-size:16px}
|
||||
.bar .tag{margin-left:auto;margin-right:6px;font-size:12px;color:var(--c);background:#FFE9E2;border-radius:99px;padding:2px 10px}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.on{background:#fff;border-bottom-color:var(--line)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--h)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
|
||||
|
||||
/* 头图 */
|
||||
.hero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
|
||||
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover}
|
||||
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.96) 46%)}
|
||||
.hero h1{font-size:27px;line-height:1.25;color:var(--deep);letter-spacing:.5px}
|
||||
.hero p{margin-top:4px;font-size:13px;color:var(--sub)}
|
||||
.wrap{padding:0 20px}
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;object-position:center 30%;border-radius:20px;margin-top:4px}
|
||||
h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.ans{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
|
||||
/* 3 个核心重点 */
|
||||
.core{margin:16px 16px 0;padding:18px 16px 16px;border-radius:24px;background:#fff;box-shadow:0 6px 24px rgba(194,24,91,.08);border:1px solid #FBE0D8}
|
||||
.core-h{display:flex;align-items:center;gap:8px}
|
||||
.core-h .ic{font-size:22px;color:var(--c)}
|
||||
.core-h h2{font-size:19px;line-height:1.3}
|
||||
.core-h small{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap}
|
||||
.core ol{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
|
||||
.core li{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 10px;border-radius:18px;background:linear-gradient(120deg,#FFF1EB,#FFF9F6)}
|
||||
.core .no{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;font-family:Georgia,"Times New Roman",serif}
|
||||
.core li:nth-child(1) .no{background:var(--c)}
|
||||
.core li:nth-child(2) .no{background:var(--c2)}
|
||||
.core li:nth-child(3) .no{background:var(--deep)}
|
||||
.core .tx{flex:1;min-width:0}
|
||||
.core .tx b{display:block;font-size:16.5px;line-height:1.35}
|
||||
.core .tx span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.core .num{flex:none;min-width:64px;text-align:center;padding:6px 6px 5px;border-radius:14px;background:#fff;color:var(--deep);line-height:1.05;box-shadow:0 2px 8px rgba(194,24,91,.08)}
|
||||
.core .num em{display:block;font-style:normal;font-size:20px;font-weight:800;white-space:nowrap}
|
||||
.core .num small{display:block;margin-top:3px;font-size:11px;color:var(--sub);white-space:nowrap}
|
||||
.core-ban{margin-top:10px;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;background:var(--deep);color:#fff}
|
||||
.core-ban .ic{font-size:24px}
|
||||
.core-ban b{font-size:14.5px;line-height:1.35}
|
||||
.core-ban span{display:block;font-size:12px;font-weight:400;opacity:.9}
|
||||
|
||||
/* 个性化 */
|
||||
.me{margin:14px 16px 0;display:none;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1.5px dashed #FFC2B0}
|
||||
/* 个性化提示条 */
|
||||
.me{display:none;margin-top:12px;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--sec);font-size:13px;line-height:1.5;color:var(--t)}
|
||||
.me.on{display:flex}
|
||||
.me .dot{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#FFE9E2;color:var(--c);font-size:24px}
|
||||
.me .mt{flex:1;min-width:0}
|
||||
.me b{display:block;font-size:15px;line-height:1.4}
|
||||
.me span{display:block;font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.me .go{flex:none;font-size:13px;color:#fff;background:var(--c);border-radius:99px;padding:6px 12px;white-space:nowrap}
|
||||
.me .ic{color:var(--c);width:18px;height:18px}
|
||||
.me span{flex:1;min-width:0}
|
||||
.me button{flex:none;font-size:13px;color:var(--c);font-weight:600}
|
||||
|
||||
/* 目录 */
|
||||
.toc{display:flex;gap:8px;margin:14px 16px 0}
|
||||
.toc button{flex:1;min-width:0;padding:11px 2px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
|
||||
.toc .ib{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px}
|
||||
/* 记住这 3 点 */
|
||||
.key{margin-top:28px}
|
||||
h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--h)}
|
||||
.key ol{list-style:none;margin-top:6px}
|
||||
.key li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
|
||||
.key li:last-child{border-bottom:0}
|
||||
.key .no{flex:none;width:26px;font-size:28px;line-height:1.1;font-weight:800;color:var(--c);font-family:Georgia,"Times New Roman",serif}
|
||||
.key b{display:block;font-size:16px;line-height:1.45}
|
||||
.key span{display:block;font-size:13px;color:var(--m);line-height:1.5;margin-top:1px}
|
||||
|
||||
/* 段标题 */
|
||||
.sec{margin:36px 16px 0;scroll-margin-top:56px}
|
||||
.sec-h{display:flex;align-items:center;gap:10px}
|
||||
.sec-h .n{flex:none;width:32px;height:32px;border-radius:11px;background:var(--c);color:#fff;font-weight:800;display:grid;place-items:center;font-size:16px}
|
||||
.sec-h h2{font-size:20px;line-height:1.3}
|
||||
.sec-key{margin-top:10px;padding:11px 14px;border-radius:16px;background:var(--soft);border-left:4px solid var(--c);font-size:15.5px;font-weight:700;line-height:1.5;color:var(--deep)}
|
||||
.sec-sub{margin-top:6px;padding:0 4px;font-size:12.5px;color:var(--mute)}
|
||||
/* 分节 */
|
||||
.sec{margin-top:28px;padding:24px 20px;background:var(--sec);scroll-margin-top:48px}
|
||||
.sec.w{background:#fff}
|
||||
.sec+.sec{margin-top:0}
|
||||
.lead{margin-top:4px;font-size:15px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
|
||||
/* 时间轴 */
|
||||
.tl{position:relative;margin-top:18px;padding-left:34px}
|
||||
.tl::before{content:"";position:absolute;left:14px;top:18px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(180deg,#F7A08C,var(--c2) 35%,var(--deep) 65%,var(--purple))}
|
||||
.phase{position:relative;display:flex;align-items:center;gap:8px;margin:22px 0 10px}
|
||||
.phase:first-child{margin-top:0}
|
||||
.phase .node{position:absolute;left:-34px;top:50%;margin-top:-16px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:0 0 0 4px var(--bg)}
|
||||
.phase b{margin-left:4px;font-size:16px;white-space:nowrap}
|
||||
.phase span{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.stage{position:relative;margin-top:12px;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .3s,border-color .3s;scroll-margin-top:60px}
|
||||
.stage.hl{border-color:var(--c);box-shadow:0 0 0 3px rgba(244,89,60,.15)}
|
||||
.stage.hl::after{content:"你现在看这里";position:absolute;right:12px;top:12px;background:var(--c);color:#fff;font-size:12px;border-radius:99px;padding:2px 10px}
|
||||
.stage .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.stage .bd{padding:13px 14px 14px}
|
||||
.stage .hd{display:flex;align-items:center;gap:8px}
|
||||
.stage .when{flex:none;font-size:12px;color:#fff;border-radius:99px;padding:2px 10px;white-space:nowrap}
|
||||
.stage h3{font-size:16px;line-height:1.35;color:var(--sub);font-weight:600}
|
||||
.concl{margin-top:8px;font-size:17px;font-weight:800;line-height:1.45;color:var(--ink)}
|
||||
.concl i{font-style:normal;color:var(--deep)}
|
||||
.nums{display:flex;gap:8px;margin-top:10px}
|
||||
.nums div{flex:1;min-width:0;padding:8px 4px 7px;border-radius:14px;background:var(--soft);text-align:center;line-height:1.1}
|
||||
.nums em{display:block;font-style:normal;font-size:21px;font-weight:800;color:var(--deep);white-space:nowrap}
|
||||
.nums em small{font-size:12px;font-weight:700;margin-left:1px}
|
||||
.nums span{display:block;margin-top:4px;font-size:11.5px;color:var(--sub);white-space:nowrap}
|
||||
.rows{margin-top:10px}
|
||||
.row{display:flex;gap:10px;padding:7px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.55}
|
||||
.row:first-child{border-top:0}
|
||||
.row .k{flex:none;width:62px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);white-space:nowrap;height:20px}
|
||||
.row .k .ic{font-size:15px;color:var(--c)}
|
||||
.row .v{flex:1;min-width:0}
|
||||
.row .v b{color:var(--deep)}
|
||||
.why{margin-top:10px;display:flex;gap:10px;padding:11px 12px;border-radius:16px;background:#FFF8E9;border:1px solid #F7E5BE}
|
||||
.why .wi{flex:none;width:30px;height:30px;border-radius:10px;background:#FFE7A8;color:#B7791F;display:grid;place-items:center;font-size:18px}
|
||||
.why b{display:block;font-size:13px;color:#8A5A12}
|
||||
.why p{font-size:12.5px;color:#7A6343;line-height:1.6;margin-top:1px}
|
||||
/* 三阶段卡 */
|
||||
.stg{margin-top:12px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
|
||||
.stg.hl{border-color:var(--c);box-shadow:0 0 0 3px rgba(91,108,255,.12)}
|
||||
.stg .hd{display:flex;align-items:center;gap:8px}
|
||||
.stg .hd .ic{color:var(--c);width:22px;height:22px}
|
||||
.stg .hd b{font-size:16px}
|
||||
.stg .hd small{margin-left:auto;font-size:12.5px;color:var(--m)}
|
||||
.stg .hd .now{display:none;margin-left:6px;font-size:11.5px;color:#fff;background:var(--c);border-radius:99px;padding:0 8px;line-height:20px}
|
||||
.stg.hl .hd .now{display:inline-block}
|
||||
.stg ul{list-style:none;margin-top:6px}
|
||||
.stg li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.7}
|
||||
.stg li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.55}
|
||||
.stg li b{font-weight:600}
|
||||
|
||||
/* 法条重点卡（合同顺延） */
|
||||
.law{margin-top:18px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:#F3FAF4;border:1.5px solid #CFEAD7}
|
||||
.law .bi{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;font-size:28px}
|
||||
.law b{display:block;color:#1F5E3F;font-size:15.5px;line-height:1.4}
|
||||
.law p{font-size:12.5px;color:#5E7466;margin-top:3px;line-height:1.55}
|
||||
/* 折叠 */
|
||||
details.fold{margin-top:12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
|
||||
details.fold summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--h)}
|
||||
details.fold summary::-webkit-details-marker{display:none}
|
||||
details.fold summary .ic{width:18px;height:18px;color:var(--c)}
|
||||
details.fold summary::after{content:"展开";margin-left:auto;font-size:12.5px;font-weight:400;color:var(--m)}
|
||||
details.fold[open] summary::after{content:"收起"}
|
||||
details.fold .bd{padding:0 14px 12px;font-size:13.5px;line-height:1.7}
|
||||
details.fold .bd p+p{margin-top:6px}
|
||||
|
||||
/* 计算器 */
|
||||
.calc{margin-top:14px;padding:16px 14px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(194,24,91,.06)}
|
||||
.fld{margin-top:14px}
|
||||
.fld:first-child{margin-top:0}
|
||||
.fld>label,.fld>.lb{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700}
|
||||
.fld>label .ic,.fld>.lb .ic{font-size:17px;color:var(--c)}
|
||||
.fld .hint{display:block;margin-top:4px;font-size:12px;color:var(--mute);line-height:1.5}
|
||||
.inp{margin-top:8px;display:block;width:100%;height:44px;padding:0 14px;border-radius:14px;background:#FFF6F2;border:1.5px solid #F6DCD3;font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none}
|
||||
.calc{margin-top:12px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.fld+.fld{margin-top:14px}
|
||||
.lb{display:block;font-size:13.5px;font-weight:600;color:var(--h)}
|
||||
.hint{display:block;margin-top:4px;font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
.inp{margin-top:6px;display:block;width:100%;height:44px;padding:0 14px;border-radius:12px;background:var(--sec);border:1px solid var(--line);font-size:15px;color:var(--h);-webkit-appearance:none;appearance:none}
|
||||
.inp:focus{outline:none;border-color:var(--c)}
|
||||
.seg{margin-top:8px;display:flex;gap:6px;padding:4px;border-radius:14px;background:#FFF6F2}
|
||||
.seg button{flex:1;min-width:0;height:36px;border-radius:11px;font-size:13.5px;color:var(--sub);white-space:nowrap}
|
||||
.seg button.on{background:var(--c);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(244,89,60,.25)}
|
||||
.stp{margin-top:8px;display:flex;align-items:center;gap:10px}
|
||||
.stp button{flex:none;width:44px;height:44px;border-radius:14px;background:#FFF0EA;color:var(--c);font-size:22px;font-weight:700;display:grid;place-items:center}
|
||||
.seg{margin-top:6px;display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--sec)}
|
||||
.seg button{flex:1;min-width:0;height:36px;border-radius:10px;font-size:14px;color:var(--t);white-space:nowrap}
|
||||
.seg button.on{background:#fff;color:var(--c);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
|
||||
.stp{margin-top:6px;display:flex;align-items:center;gap:8px}
|
||||
.stp button{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--c);color:var(--c);font-size:20px;font-weight:600;display:grid;place-items:center}
|
||||
.stp .inp{margin-top:0;flex:1;min-width:0;text-align:center;font-weight:700}
|
||||
.stp em{flex:none;font-style:normal;font-size:13px;color:var(--sub)}
|
||||
.res{margin-top:16px;padding:14px;border-radius:18px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
|
||||
.res .empty{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sub)}
|
||||
.res .empty .ic{font-size:20px;color:var(--c)}
|
||||
.res .tot{display:flex;align-items:flex-end;gap:8px}
|
||||
.res .tot em{font-style:normal;font-size:38px;line-height:1;font-weight:800;color:var(--deep)}
|
||||
.res .tot span{font-size:14px;font-weight:700;color:var(--deep);padding-bottom:4px}
|
||||
.res .tot small{margin-left:auto;font-size:12px;color:var(--sub);padding-bottom:5px;white-space:nowrap}
|
||||
.res .parts{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
|
||||
.res .parts span{font-size:12px;padding:2px 9px;border-radius:99px;background:#fff;color:#B23A1F;font-weight:600;white-space:nowrap}
|
||||
.res .dates{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.res .dates>div{padding:9px 10px;border-radius:14px;background:#fff;line-height:1.25}
|
||||
.res .dates small{display:block;font-size:11.5px;color:var(--sub)}
|
||||
.res .dates b{display:block;margin-top:3px;font-size:15px;color:var(--ink);white-space:nowrap}
|
||||
.res .dates .main{grid-column:1/-1;background:var(--deep);color:#fff;display:flex;align-items:center;gap:10px}
|
||||
.res .dates .main small{color:rgba(255,255,255,.85)}
|
||||
.res .dates .main b{color:#fff;font-size:19px}
|
||||
.res .dates .main .ic{font-size:26px}
|
||||
.res .note{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.55}
|
||||
.stp em{flex:none;font-style:normal;font-size:14px;color:var(--t)}
|
||||
.res{margin-top:16px;padding:14px;border-radius:14px;background:var(--cbg)}
|
||||
.res .empty{font-size:14px;color:var(--t);text-align:center}
|
||||
.res .tot{display:flex;align-items:baseline;gap:6px;color:var(--c)}
|
||||
.res .tot em{font-style:normal;font-size:36px;line-height:1.1;font-weight:800}
|
||||
.res .tot span{font-size:15px;font-weight:700}
|
||||
.res .tot small{margin-left:auto;font-size:12.5px;color:var(--m)}
|
||||
.res .dt{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.res .dt div{padding:8px 10px;border-radius:12px;background:#fff;line-height:1.35}
|
||||
.res .dt small{display:block;font-size:12.5px;color:var(--m)}
|
||||
.res .dt b{display:block;margin-top:2px;font-size:15px;white-space:nowrap}
|
||||
.res .note{margin-top:8px;font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
|
||||
/* 公式 */
|
||||
.formula{margin-top:14px;padding:14px 12px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
|
||||
.eq{display:flex;align-items:center;justify-content:center;gap:6px}
|
||||
.eq .it{width:92px;padding:10px 0 8px;border-radius:16px;background:#fff;box-shadow:0 3px 10px rgba(240,112,79,.08);font-size:12.5px;line-height:1.3;text-align:center}
|
||||
.eq .it .ic{display:block;margin:0 auto 4px;font-size:26px;color:var(--c)}
|
||||
.eq .op{font-size:20px;color:var(--c);font-weight:700}
|
||||
.eq .rs{background:var(--deep);color:#fff}
|
||||
.eq .rs .ic{color:#fff}
|
||||
.eq-note{margin-top:8px;text-align:center;font-size:12px;color:var(--sub)}
|
||||
/* 维权四步 */
|
||||
.flow{list-style:none;margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
|
||||
.flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;background:#D5DAFF}
|
||||
.flow li{position:relative;text-align:center}
|
||||
.flow .n{display:grid;place-items:center;width:32px;height:32px;margin:0 auto;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:15px;box-shadow:0 0 0 4px var(--sec)}
|
||||
.flow b{display:block;margin-top:8px;font-size:14px;line-height:1.4}
|
||||
.flow span{display:block;margin-top:3px;font-size:12px;color:var(--m);line-height:1.45}
|
||||
.flow .lim{color:var(--c);font-weight:600}
|
||||
.hot{margin-top:16px;display:flex;gap:8px}
|
||||
.hot a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--t);font-size:12.5px;line-height:1.35}
|
||||
.hot a .ic{color:var(--c)}
|
||||
.hot a b{display:block;font-size:16px;color:var(--h)}
|
||||
|
||||
/* 两列对比卡 */
|
||||
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
|
||||
.duo>div{padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);display:flex;flex-direction:column;gap:6px}
|
||||
.duo>div.am{border-top-color:var(--amber)}
|
||||
.duo .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px}
|
||||
.duo h4{font-size:14.5px;line-height:1.3}
|
||||
.duo .pct{align-self:flex-start;font-size:12.5px;font-weight:800;color:var(--green);background:var(--gbg);border-radius:8px;padding:1px 7px}
|
||||
.duo .am .pct{color:var(--amber);background:var(--abg)}
|
||||
.duo .use{font-size:12px;color:var(--sub);line-height:1.5}
|
||||
.ok-line{margin-top:10px;display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:#FFF1EC;font-size:14px;font-weight:700;color:var(--deep);line-height:1.45}
|
||||
.ok-line .ic{font-size:20px}
|
||||
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px;line-height:1.55}
|
||||
/* 页底 */
|
||||
.src{margin:24px 20px 0}
|
||||
.src ul{list-style:none}
|
||||
.src li{padding:6px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--t)}
|
||||
.src li:first-child{border-top:0}
|
||||
.foot{margin:14px 20px 0;font-size:12px;color:var(--m);text-align:center;line-height:1.6}
|
||||
|
||||
/* 侵权场景 */
|
||||
.case{margin-top:10px;display:flex;gap:12px;padding:13px 13px 13px 12px;border-radius:20px;background:#fff;border:1px solid var(--line)}
|
||||
.cases{margin-top:14px}
|
||||
.cases .case:first-child{margin-top:0}
|
||||
.case .ico{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--rbg);color:var(--red)}
|
||||
.case .bx{flex:1;min-width:0}
|
||||
.case h4{font-size:15px;line-height:1.35;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
|
||||
.case .flag{font-size:11.5px;font-weight:700;color:var(--red);background:var(--rbg);border-radius:6px;padding:0 6px;white-space:nowrap}
|
||||
.case .ans{margin-top:5px;font-size:13.5px;font-weight:700;color:var(--green);line-height:1.5}
|
||||
.case .by{margin-top:3px;font-size:12px;color:var(--mute);line-height:1.5}
|
||||
|
||||
/* 应对四步 */
|
||||
.steps-pic{margin-top:18px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff}
|
||||
.steps-pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.steps-pic .hd{padding:12px 14px 0;font-size:16px;font-weight:800}
|
||||
.steps{list-style:none;padding:6px 14px 14px}
|
||||
.steps li{position:relative;display:flex;gap:12px;padding:10px 0}
|
||||
.steps li+li{border-top:1px dashed #F1E2DD}
|
||||
.steps .sn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
|
||||
.steps b{display:block;font-size:15px;line-height:1.4}
|
||||
.steps p{margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.55}
|
||||
.steps .bdg{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;padding:1px 8px;border-radius:8px;background:var(--soft);color:var(--deep);white-space:nowrap}
|
||||
.hot{margin-top:12px;display:flex;gap:8px}
|
||||
.hot a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:#fff;border:1.5px solid #F6DCD3;text-decoration:none;color:var(--ink)}
|
||||
.hot a .ic{font-size:22px;color:var(--c)}
|
||||
.hot a b{display:block;font-size:17px;line-height:1.2;color:var(--deep)}
|
||||
.hot a small{display:block;font-size:11.5px;color:var(--sub);white-space:nowrap}
|
||||
|
||||
/* 复工清单 */
|
||||
.ck{margin-top:14px;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line)}
|
||||
.ck img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.ck .prog{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
|
||||
.ck .prog b{font-size:15px}
|
||||
.ck .prog .bar2{flex:1;height:8px;border-radius:9px;background:#FBE7E0;overflow:hidden}
|
||||
.ck .prog .bar2 i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--c),var(--deep));transition:width .3s}
|
||||
.ck .prog small{font-size:12px;color:var(--sub);white-space:nowrap}
|
||||
.ck ul{list-style:none;padding:4px 14px 12px}
|
||||
.ck li{display:flex;gap:10px;padding:10px 0;border-top:1px dashed #F1E2DD;cursor:pointer}
|
||||
.ck li:first-child{border-top:0}
|
||||
.ck .box{flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;border:2px solid #F2B3A3;display:grid;place-items:center;color:#fff;font-size:16px;transition:background .2s,border-color .2s}
|
||||
.ck .box .ic{opacity:0}
|
||||
.ck li.done .box{background:var(--green);border-color:var(--green)}
|
||||
.ck li.done .box .ic{opacity:1}
|
||||
.ck li .t2{flex:1;min-width:0}
|
||||
.ck li b{display:block;font-size:14.5px;line-height:1.4}
|
||||
.ck li span{display:block;margin-top:1px;font-size:12.5px;color:var(--sub);line-height:1.5}
|
||||
.ck li.done b{color:var(--mute);text-decoration:line-through}
|
||||
.ck .cat{flex:none;align-self:flex-start;font-size:11px;padding:1px 7px;border-radius:99px;background:#F5EFEE;color:var(--sub);white-space:nowrap}
|
||||
|
||||
/* 来源 */
|
||||
.src{margin:32px 16px 0;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
|
||||
.src summary .ic{font-size:18px;color:var(--c)}
|
||||
.src summary::-webkit-details-marker{display:none}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12px;font-weight:400;color:var(--sub)}
|
||||
.src[open] summary::after{content:"收起"}
|
||||
.src ul{list-style:none;padding:0 16px 12px}
|
||||
.src li{padding:8px 0;border-top:1px dashed #F1E2DD;font-size:12.5px;color:#6A5452}
|
||||
.src li b{color:var(--ink);font-weight:600}
|
||||
.foot{margin:16px 20px 0;font-size:11.5px;color:#B09C98;text-align:center;line-height:1.7}
|
||||
|
||||
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 图标库：扁平双色（线条 + 同色浅面），24 栅格 / 2px 圆角线条，<use href="#i-xxx"> 复用 -->
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><style>.f{fill:currentColor;fill-opacity:.2;stroke:none}.s{fill:currentColor;stroke:none}</style></defs>
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-star" viewBox="0 0 24 24"><path class="f" d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
|
||||
<symbol id="i-clock" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></symbol>
|
||||
<symbol id="i-bulb" viewBox="0 0 24 24"><path class="f" d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/><path d="M9 18.5h6M10.2 21.5h3.6M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/></symbol>
|
||||
<symbol id="i-clinic" viewBox="0 0 24 24"><rect class="f" x="4" y="4" width="16" height="17" rx="3"/><rect x="4" y="4" width="16" height="17" rx="3"/><path d="M12 8.5v7M8.5 12h7"/></symbol>
|
||||
<symbol id="i-ban" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M5.7 5.7l12.6 12.6"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path class="f" d="M5 4.5A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5z"/><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
|
||||
<symbol id="i-mom" viewBox="0 0 24 24"><circle class="f" cx="15" cy="14" r="5"/><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M12 9c4 .5 8 2.5 8 5.5s-2.5 4.5-6 4.5h-2M12 21v-2"/></symbol>
|
||||
<symbol id="i-baby" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12.5" r="8.5"/><circle cx="12" cy="12.5" r="8.5"/><circle class="s" cx="9.2" cy="11.5" r="1"/><circle class="s" cx="14.8" cy="11.5" r="1"/><path d="M9.5 15.2c1.4 1.2 3.6 1.2 5 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
|
||||
<symbol id="i-check" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.8 2.8L16 9.5"/></symbol>
|
||||
<symbol id="i-tick" viewBox="0 0 24 24"><path d="M5.5 12.5l4 4 9-9"/></symbol>
|
||||
<symbol id="i-warn" viewBox="0 0 24 24"><path class="f" d="M12 3.5l9.5 16.5h-19z"/><path d="M12 3.5l9.5 16.5h-19zM12 10v4.5M12 17.3v.2"/></symbol>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><rect class="f" x="3.5" y="5" width="17" height="15.5" rx="3"/><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2"/></symbol>
|
||||
<symbol id="i-calc" viewBox="0 0 24 24"><rect class="f" x="5" y="3" width="14" height="18" rx="3"/><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M9 8l3 4 3-4M12 12v5M9 13h6M9 15.5h6"/></symbol>
|
||||
<symbol id="i-bag" viewBox="0 0 24 24"><rect class="f" x="3" y="7.5" width="18" height="12.5" rx="3"/><rect x="3" y="7.5" width="18" height="12.5" rx="3"/><path d="M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18"/></symbol>
|
||||
<symbol id="i-bottle" viewBox="0 0 24 24"><path class="f" d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2z"/><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V7.5h6V10M10.5 7.5L11 4h2l.5 3.5M8 14h3M8 17h3"/></symbol>
|
||||
<symbol id="i-doc" viewBox="0 0 24 24"><path class="f" d="M6 3h8l4 4v14H6z"/><path d="M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 15.5h6M9 8.5h2"/></symbol>
|
||||
<symbol id="i-chat" viewBox="0 0 24 24"><path class="f" d="M4 5h16v11H9l-5 4z"/><path d="M4 5h16v11H9l-5 4zM8 9.5h8M8 12.5h5"/></symbol>
|
||||
<symbol id="i-phone" viewBox="0 0 24 24"><path class="f" d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></symbol>
|
||||
<symbol id="i-gavel" viewBox="0 0 24 24"><path class="f" d="M4 19h10v2H4z"/><path d="M4 21h10M13.5 3.5l5 5M11 6l5 5M12.2 4.8l-3.4 3.4 5 5 3.4-3.4M10.5 10l-6.5 6.5"/></symbol>
|
||||
<symbol id="i-down2" viewBox="0 0 24 24"><path class="f" d="M4 15h16v5H4z"/><path d="M12 3v11M7.5 9.5L12 14l4.5-4.5M4 15v5h16v-5"/></symbol>
|
||||
<symbol id="i-swap" viewBox="0 0 24 24"><path d="M4 8h13M13.5 4.5L17 8l-3.5 3.5M20 16H7M10.5 12.5L7 16l3.5 3.5"/></symbol>
|
||||
<symbol id="i-moon" viewBox="0 0 24 24"><path class="f" d="M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z"/><path d="M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z"/></symbol>
|
||||
<symbol id="i-heart" viewBox="0 0 24 24"><path class="f" d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10C19.5 15.5 12 20 12 20z"/><path d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10C19.5 15.5 12 20 12 20z"/></symbol>
|
||||
<symbol id="i-home" viewBox="0 0 24 24"><path class="f" d="M5 10.5L12 4.5l7 6V20H5z"/><path d="M3.5 12L12 4.5 20.5 12M5 10.5V20h14v-9.5M10 20v-5h4v5"/></symbol>
|
||||
<symbol id="i-pregnant" viewBox="0 0 24 24"><circle class="f" cx="14" cy="14" r="4.5"/><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M11 9.5c3.5 0 6 2 6 4.5s-2 4-5 4h-1M11 21v-3"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v15M6.5 13.5L12 19l5.5-5.5"/></symbol>
|
||||
<symbol id="i-preg" viewBox="0 0 24 24"><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M11 9.5c3.5 0 6 2 6 4.5s-2 4-5 4h-1M11 21v-3"/></symbol>
|
||||
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.5h.01M14.8 11.5h.01M9.5 15.2c1.4 1.2 3.6 1.2 5 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
|
||||
<symbol id="i-bottle" viewBox="0 0 24 24"><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V7.5h6V10M10.5 7.5L11 4h2l.5 3.5M8 14h3M8 17h3"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
|
||||
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></symbol>
|
||||
<symbol id="i-plus" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 8l3 4 3-4M12 12v5M9 13h6M9 15.5h6"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
|
||||
<symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.5-6.5-11a6.5 6.5 0 0 1 13 0c0 5.5-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
<header class="bar">
|
||||
<header class="bar" id="bar">
|
||||
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
|
||||
<span class="t">孕期专题</span>
|
||||
<span class="tag">职场维权</span>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="职场妈妈抱着宝宝站在办公室窗前">
|
||||
<div class="cap">
|
||||
<h1>产后复工<br>职场维权指南</h1>
|
||||
<p>孕期 · 产假 · 复工 · 哺乳期，法律怎么护着你</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="wrap">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="职场妈妈抱着宝宝站在办公室窗前">
|
||||
<h1>孕妈产后复工，<br>职场维权指南</h1>
|
||||
<div class="ans">孕期、产期、哺乳期，单位不能因此辞退你、降你工资。</div>
|
||||
<div class="me" id="me"><svg class="ic"><use href="#i-pin" xlink:href="#i-pin"/></svg><span id="meT"></span><button id="meGo">去看</button></div>
|
||||
</section>
|
||||
|
||||
<!-- 核心重点总览 -->
|
||||
<section class="core">
|
||||
<div class="core-h"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg><h2>先记住这 3 件事</h2><small>只看这里也够用</small></div>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div class="tx"><b>「三期」内不得随便辞退</b><span>孕期、产期、哺乳期，合同到期也要顺延</span></div><div class="num"><em>三期</em><small>受法律保护</small></div></li>
|
||||
<li><span class="no">2</span><div class="tx"><b>产假不少于 98 天</b><span>难产、多胞胎另加，各省还有延长假</span></div><div class="num"><em>98 天</em><small>国家底线</small></div></li>
|
||||
<li><span class="no">3</span><div class="tx"><b>每天 1 小时哺乳时间</b><span>宝宝 1 岁内，在劳动时间内安排</span></div><div class="num"><em>1 小时</em><small>每天</small></div></li>
|
||||
</ol>
|
||||
<div class="core-ban"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg><b>因怀孕、生育、哺乳降薪或辞退：违法<span>遇到了先留证据，可打 12333 咨询</span></b></div>
|
||||
</section>
|
||||
|
||||
<!-- 按孕周 / 产后点亮对应阶段（拿不到身份就不显示） -->
|
||||
<div class="me" id="me">
|
||||
<div class="dot"><svg class="ic"><use id="meIc" href="#i-mom" xlink:href="#i-mom"/></svg></div>
|
||||
<div class="mt"><b id="meT"></b><span id="meD"></span></div>
|
||||
<button class="go" id="meGo">去看看</button>
|
||||
<section class="key">
|
||||
<h2>记住这 3 点</h2>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div><b>产假不少于 98 天</b><span>难产、多胞胎另加，各省还有奖励假</span></div></li>
|
||||
<li><span class="no">2</span><div><b>产检算上班时间</b><span>不扣工资，也不算请假</span></div></li>
|
||||
<li><span class="no">3</span><div><b>每天 1 小时哺乳时间</b><span>宝宝 1 岁内，多 1 个宝宝多 1 小时</span></div></li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span>各段保护</button>
|
||||
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-calc" xlink:href="#i-calc"/></svg></span>产假怎么算</button>
|
||||
<button data-go="s3"><span class="ib" style="background:#FFF2E0;color:#D9822B"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg></span>钱怎么发</button>
|
||||
<button data-go="s4"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-gavel" xlink:href="#i-gavel"/></svg></span>遇到侵权</button>
|
||||
</nav>
|
||||
|
||||
<!-- ① 时间轴 -->
|
||||
<!-- 1 三个阶段 -->
|
||||
<section class="sec" id="s1">
|
||||
<div class="sec-h"><span class="n">1</span><h2>从怀孕到哺乳期，每段护你什么</h2></div>
|
||||
<div class="sec-key">孕期、产期、哺乳期合称「三期」，单位<mark>不得因此降薪、辞退、解除合同</mark>。</div>
|
||||
<p class="sec-sub">从上往下就是怀孕到宝宝 1 岁的全程，找到你现在的那一段</p>
|
||||
<h2>三个阶段的保护</h2>
|
||||
<p class="lead">不得降薪、不得辞退，合同到期也要顺延。</p>
|
||||
|
||||
<div class="tl">
|
||||
<div class="phase"><span class="node" style="background:#F4593C"><svg class="ic"><use href="#i-pregnant" xlink:href="#i-pregnant"/></svg></span><b>怀孕后</b><span>孕期 · 上班有照顾</span></div>
|
||||
<article class="stg fade" id="stA">
|
||||
<div class="hd"><svg class="ic"><use href="#i-preg" xlink:href="#i-preg"/></svg><b>孕期</b><span class="now">你在这里</span><small>怀孕上班</small></div>
|
||||
<ul>
|
||||
<li>产检时间<b>计入劳动时间</b></li>
|
||||
<li>干不了原岗位，凭医院证明可减量或调岗</li>
|
||||
<li>满 7 个月，<b>不加班、不排夜班</b></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="stg fade" id="stB">
|
||||
<div class="hd"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg><b>产假</b><span class="now">你在这里</span><small>至少 98 天</small></div>
|
||||
<ul>
|
||||
<li>98 天，其中<b>产前可休 15 天</b></li>
|
||||
<li>难产 +15 天，每多 1 个宝宝 +15 天</li>
|
||||
<li>各省奖励假另加，以当地规定为准</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="stg fade" id="stC">
|
||||
<div class="hd"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg><b>哺乳期</b><span class="now">你在这里</span><small>宝宝 1 岁内</small></div>
|
||||
<ul>
|
||||
<li>每天<b>1 小时哺乳时间</b>，在上班时间内</li>
|
||||
<li>不加班、不排夜班</li>
|
||||
<li>合同到期，<b>顺延到哺乳期结束</b></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="stage fade" id="stA">
|
||||
<div class="pic"><img src="img/preg.webp" alt="孕妈在办公桌前舒服地工作" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#F4593C">孕期</span><h3>怀孕上班 · 这些是你的权利</h3></div>
|
||||
<div class="concl">产检算劳动时间，<i>不扣工资</i></div>
|
||||
<div class="nums">
|
||||
<div><em>产检</em><span>计入劳动时间</span></div>
|
||||
<div><em>7<small>个月+</small></em><span>不加班不排夜班</span></div>
|
||||
<div><em>不降薪</em><span>不辞退</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>产检</span><span class="v">劳动时间内去产检，所需时间<b>计入劳动时间</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg>岗位</span><span class="v">不能适应原岗位的，凭医疗机构证明，单位应<b>减轻劳动量或安排其他能适应的工作</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-moon" xlink:href="#i-moon"/></svg>7 个月+</span><span class="v">怀孕 7 个月以上，<b>不得延长劳动时间或安排夜班</b>，并应在劳动时间内安排一定休息时间</span></div>
|
||||
</div>
|
||||
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>依据是什么</b><p>《女职工劳动保护特别规定》第 5、6 条：不得因怀孕、生育、哺乳降低工资、予以辞退、解除劳动或聘用合同。调岗是为了减轻负担，不能变成降薪的理由。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#E8476F"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><b>生宝宝</b><span>产假 · 至少 98 天</span></div>
|
||||
|
||||
<article class="stage fade" id="stB">
|
||||
<div class="pic"><img src="img/leave.webp" alt="新手妈妈在家抱着新生宝宝休息" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#E8476F">产假</span><h3>休产假 · 国家规定的天数</h3></div>
|
||||
<div class="concl">产假<i>不少于 98 天</i>，产前可休 15 天</div>
|
||||
<div class="nums">
|
||||
<div><em>98<small>天</small></em><span>基础产假</span></div>
|
||||
<div><em>+15<small>天</small></em><span>难产</span></div>
|
||||
<div><em>+15<small>天</small></em><span>每多 1 个宝宝</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>产前</span><span class="v">98 天里，产前可以休 15 天</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg>流产</span><span class="v">怀孕未满 4 个月流产，产假 <b>15 天</b>；满 4 个月流产，产假 <b>42 天</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg>地方</span><span class="v">各省另有生育奖励假 / 延长产假，天数不同，<b>以当地规定为准</b></span></div>
|
||||
</div>
|
||||
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>依据是什么</b><p>《女职工劳动保护特别规定》第 7 条。98 天是全国统一的最低标准，各省在此基础上另加奖励假，实际能休多少要看你参保 / 工作所在地的规定。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#8E6BB8"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg></span><b>复工 · 哺乳期</b><span>宝宝满 1 岁前</span></div>
|
||||
|
||||
<article class="stage fade" id="stC">
|
||||
<div class="pic"><img src="img/back.webp" alt="妈妈提着背奶包回到办公室，同事挥手打招呼" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#8E6BB8">哺乳期</span><h3>回去上班 · 宝宝 1 岁内</h3></div>
|
||||
<div class="concl">每天 <i>1 小时哺乳时间</i>，不加班不排夜班</div>
|
||||
<div class="nums">
|
||||
<div><em>1<small>小时</small></em><span>每天哺乳时间</span></div>
|
||||
<div><em>+1<small>小时</small></em><span>每多 1 个宝宝</span></div>
|
||||
<div><em>1<small>周岁</small></em><span>保护到宝宝</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>哺乳</span><span class="v">单位应在<b>每天劳动时间内</b>安排 1 小时哺乳时间；多胞胎每多 1 个，每天多 1 小时</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-moon" xlink:href="#i-moon"/></svg>加班</span><span class="v">哺乳未满 1 周岁婴儿的，<b>不得延长劳动时间或安排夜班</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg>设施</span><span class="v">女职工较多的单位，应根据需要建立哺乳室等设施</span></div>
|
||||
</div>
|
||||
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>依据是什么</b><p>《女职工劳动保护特别规定》第 9、10 条。1 小时具体怎么用（分两次、合并提前下班等），法规没有统一规定，可以和单位商量、以当地规定为准。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="law fade">
|
||||
<span class="bi"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span>
|
||||
<div><b>三期内合同到期：自动顺延到三期结束</b><p>《劳动合同法》第 42、45 条：三期内单位不得以「不能胜任、客观情况变化、经济性裁员」等理由解除合同；合同期满的，续延到哺乳期结束才终止。（严重违纪等第 39 条情形除外）</p></div>
|
||||
</div>
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg>还有这些也受保护</summary>
|
||||
<div class="bd">
|
||||
<p><b>流产假：</b>怀孕未满 4 个月 15 天，满 4 个月 42 天。</p>
|
||||
<p><b>晋升：</b>不得因怀孕、生育、哺乳限制晋职、晋级、评职称。</p>
|
||||
<p><b>调岗降薪：</b>改岗位、薪酬须协商一致并书面确认。</p>
|
||||
<p><b>违法辞退：</b>可要求继续履行合同，或主张经济补偿 2 倍的赔偿金。严重违纪等情形除外。</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- ② 产假计算器 -->
|
||||
<section class="sec" id="s2">
|
||||
<div class="sec-h"><span class="n">2</span><h2>我的产假怎么算</h2></div>
|
||||
<div class="sec-key">98 天是全国底线，<mark>再加上本省延长天数</mark>，才是你实际能休的。</div>
|
||||
<p class="sec-sub">填预产期和情况，帮你估算产假天数和返岗日期</p>
|
||||
<!-- 2 产假计算器 -->
|
||||
<section class="sec w" id="s2">
|
||||
<h2>我的产假怎么算</h2>
|
||||
<p class="lead">98 天是底线，加上本省天数才是你能休的。</p>
|
||||
|
||||
<div class="calc fade">
|
||||
<div class="fld">
|
||||
<label for="cDue"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>预产期</label>
|
||||
<label class="lb" for="cDue">预产期</label>
|
||||
<input class="inp" id="cDue" type="date">
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>是否难产</span>
|
||||
<div class="seg" id="cHard"><button data-v="0" class="on">否</button><button data-v="1">是（+15 天）</button></div>
|
||||
<span class="hint">剖宫产是否按难产算，各地认定不同，以当地规定为准</span>
|
||||
<span class="lb">是否难产</span>
|
||||
<div class="seg" id="cHard"><button data-v="0" class="on">否</button><button data-v="1">是 +15 天</button></div>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg>宝宝个数</span>
|
||||
<span class="lb">几胞胎</span>
|
||||
<div class="seg" id="cMulti"><button data-v="1" class="on">单胎</button><button data-v="2">双胞胎</button><button data-v="3">三胞胎</button></div>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg>本省可延长天数</span>
|
||||
<span class="lb">本省可延长天数</span>
|
||||
<div class="stp"><button id="cMinus" aria-label="减少">-</button><input class="inp" id="cLocal" type="number" inputmode="numeric" min="0" max="365" value="0"><em>天</em><button id="cPlus" aria-label="增加">+</button></div>
|
||||
<span class="hint">各省生育奖励假天数不同，请查当地人社部门或卫健部门规定；不确定就先填 0</span>
|
||||
<span class="hint">各省不同，可问单位人事或当地人社；不确定先填 0</span>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>产前是否提前休 15 天</span>
|
||||
<div class="seg" id="cPre"><button data-v="1" class="on">提前休</button><button data-v="0">生了再休</button></div>
|
||||
</div>
|
||||
|
||||
<div class="res" id="cRes"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ③ 钱 -->
|
||||
<!-- 3 维权 -->
|
||||
<section class="sec" id="s3">
|
||||
<div class="sec-h"><span class="n">3</span><h2>产假期间，钱怎么发</h2></div>
|
||||
<div class="sec-key">参保的领<mark>生育津贴</mark>，没参保的由单位按原工资发；产假<mark>不得降低工资、福利</mark>。</div>
|
||||
<p class="sec-sub">生育津贴就是产假期间的「工资」，由生育保险基金出</p>
|
||||
<h2>被劝退、降薪怎么办</h2>
|
||||
<p class="lead">别签「自愿离职」，先留证据。</p>
|
||||
|
||||
<div class="formula fade">
|
||||
<div class="eq">
|
||||
<div class="it"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>单位上年度<br>职工月均工资</div>
|
||||
<span class="op">×</span>
|
||||
<div class="it"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>产假<br>时长</div>
|
||||
<span class="op">=</span>
|
||||
<div class="it rs"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg>生育<br>津贴</div>
|
||||
<ol class="flow fade">
|
||||
<li><span class="n">1</span><b>留证据</b><span>聊天、工资条截图备份</span></li>
|
||||
<li><span class="n">2</span><b>书面沟通</b><span>邮件写明诉求</span></li>
|
||||
<li><span class="n">3</span><b>监察投诉</b><span>找当地人社劳动监察</span></li>
|
||||
<li><span class="n">4</span><b>劳动仲裁</b><span class="lim">时效 1 年</span><span>不收费</span></li>
|
||||
</ol>
|
||||
<div class="hot">
|
||||
<a href="tel:12333"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12333</b>人社热线</div></a>
|
||||
<a href="tel:12338"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12338</b>妇女维权热线</div></a>
|
||||
</div>
|
||||
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>产假期间，钱怎么发？</summary>
|
||||
<div class="bd">
|
||||
<p><b>交了生育保险：</b>由生育保险基金发生育津贴，按单位上年度职工月平均工资计发。</p>
|
||||
<p><b>没交：</b>单位按你产假前的工资发。</p>
|
||||
<p>津贴低于原工资要不要补差，以当地规定为准。</p>
|
||||
</div>
|
||||
<p class="eq-note">按天怎么折算、多久发放，以当地规定为准</p>
|
||||
</div>
|
||||
|
||||
<div class="duo">
|
||||
<div class="fade"><div class="ico" style="background:var(--gbg);color:var(--green)"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg></div><h4>单位给你交了生育保险</h4><span class="pct">生育保险基金支付</span><div class="use">按单位上年度职工月平均工资计发，另可报销生育医疗费用</div></div>
|
||||
<div class="am fade"><div class="ico" style="background:var(--abg);color:var(--amber)"><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg></div><h4>单位没给你交</h4><span class="pct">单位自己支付</span><div class="use">按你产假前的工资标准，由单位支付</div></div>
|
||||
</div>
|
||||
<div class="ok-line fade"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg><span>不得因怀孕、生育、哺乳降低工资和福利待遇，也不得限制晋职、晋级、评职称</span></div>
|
||||
<p class="tip">生育津贴低于本人原工资时，单位要不要补差额，各地规定不同，以当地规定为准。可以问单位人事或当地医保 / 社保经办机构。</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- ④ 侵权场景 + 应对 -->
|
||||
<section class="sec" id="s4">
|
||||
<div class="sec-h"><span class="n">4</span><h2>遇到这些情况，怎么办</h2></div>
|
||||
<div class="sec-key">先留证据，再书面沟通；谈不拢就<mark>投诉或申请仲裁，时效 1 年</mark>。</div>
|
||||
<p class="sec-sub">下面是最常见的 5 种情况，对着看看法律怎么说</p>
|
||||
|
||||
<div class="cases">
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg></div><div class="bx"><h4>被劝退、被辞退<span class="flag">常见</span></h4><div class="ans">三期内不得因怀孕生育解除合同</div><div class="by">违法解除的，可要求继续履行合同；不要求或无法继续的，可主张赔偿金（经济补偿标准的 2 倍）。别急着签「自愿离职」。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg></div><div class="bx"><h4>被调岗、降薪</h4><div class="ans">不得因怀孕、生育、哺乳降低工资</div><div class="by">变更合同内容（岗位、薪酬）应协商一致并采用书面形式。孕期减轻劳动量是照顾，不是降薪理由。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-doc" xlink:href="#i-doc"/></svg></div><div class="bx"><h4>合同到期说不续签</h4><div class="ans">三期内到期的合同，顺延到三期结束</div><div class="by">《劳动合同法》第 45 条。哺乳期结束前，单位不能以「到期」为由让你走。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg></div><div class="bx"><h4>扣产假工资、不发津贴</h4><div class="ans">参保的领生育津贴，未参保的单位照发</div><div class="by">查一下自己的社保缴费记录；单位未依法缴纳生育保险的，由单位按产假前工资支付。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg></div><div class="bx"><h4>不给哺乳时间、安排加班</h4><div class="ans">宝宝 1 岁内每天 1 小时，不加班不排夜班</div><div class="by">哺乳时间在劳动时间内安排，不能当事假扣钱。</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="steps-pic fade">
|
||||
<img src="img/rights.webp" alt="妈妈在桌前整理文件和聊天记录" loading="lazy">
|
||||
<div class="hd">应对四步，按顺序来</div>
|
||||
<ol class="steps">
|
||||
<li><span class="sn" style="background:#F4593C">1</span><div><b>保留证据</b><p>书面通知、聊天记录、邮件、工资条、考勤记录、社保缴费记录，截图并备份</p></div></li>
|
||||
<li><span class="sn" style="background:#E8476F">2</span><div><b>和单位书面沟通</b><p>用邮件或书面函件写清诉求和依据，留存发送记录；不要在压力下签不认可的文件</p></div></li>
|
||||
<li><span class="sn" style="background:#C2185B">3</span><div><b>向劳动保障监察投诉</b><p>向当地人社部门的劳动保障监察机构投诉；不清楚流程可先打 12333 咨询</p></div></li>
|
||||
<li><span class="sn" style="background:#8E6BB8">4</span><div><b>申请劳动仲裁</b><p>向用人单位所在地的劳动人事争议仲裁委员会申请，仲裁不收费</p><span class="bdg">时效 1 年 · 从知道权利被侵害之日起算</span></div></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="hot fade">
|
||||
<a href="tel:12333"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12333</b><small>人社服务热线</small></div></a>
|
||||
<a href="tel:12338"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12338</b><small>妇女维权热线</small></div></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ⑤ 复工清单 -->
|
||||
<section class="sec" id="s5">
|
||||
<div class="sec-h"><span class="n">5</span><h2>复工前，这份清单打打勾</h2></div>
|
||||
<div class="sec-key">提前沟通、背奶备齐、托育定好，<mark>回去第一周就不慌</mark>。</div>
|
||||
<p class="sec-sub">点一下打勾，进度只存在你这台手机上</p>
|
||||
|
||||
<div class="ck fade">
|
||||
<div class="prog"><b>准备进度</b><span class="bar2"><i id="ckBar"></i></span><small id="ckNum">0 / 6</small></div>
|
||||
<ul id="ckList">
|
||||
<li data-k="talk"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>和主管沟通返岗时间与安排</b><span>岗位、工作内容、哺乳时间怎么用，最好邮件确认留底</span></div><span class="cat">沟通</span></li>
|
||||
<li data-k="pump"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>背奶装备备齐</b><span>吸奶器、储奶袋、冰包冰排；问问单位有没有哺乳室或可用的私密空间</span></div><span class="cat">背奶</span></li>
|
||||
<li data-k="care"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>定好谁来带宝宝</b><span>家人或托育机构，提前一两周试着交接、让宝宝适应</span></div><span class="cat">托育</span></li>
|
||||
<li data-k="body"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>做完产后复查</b><span>产后 42 天左右复查，伤口、盆底、腰背情况心里有数</span></div><span class="cat">身体</span></li>
|
||||
<li data-k="money"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>确认生育津贴和社保</b><span>津贴有没有申领到账、社保是否正常续缴</span></div><span class="cat">钱</span></li>
|
||||
<li data-k="keep"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>重要材料留个底</b><span>劳动合同、请假审批、工资条拍照存好，以备不时之需</span></div><span class="cat">证据</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details class="src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>法律依据与说明</summary>
|
||||
<ul>
|
||||
<li><b>《女职工劳动保护特别规定》：</b>第 5 条 不得因怀孕、生育、哺乳降低工资、辞退、解除合同；第 6 条 孕期减轻劳动量、7 个月以上不加班不排夜班、产检计入劳动时间；第 7 条 98 天产假及难产、多胞胎、流产产假；第 8 条 生育津贴；第 9 条 哺乳时间；第 10 条 哺乳室等设施</li>
|
||||
<li><b>《劳动合同法》：</b>第 35 条 变更合同应协商一致、书面形式；第 42 条 三期内不得依第 40、41 条解除合同；第 45 条 合同期满顺延至三期情形消失；第 48、87 条 违法解除的继续履行或 2 倍赔偿金</li>
|
||||
<li><b>《妇女权益保障法》（2022 年修订）：</b>第 48 条 不得因结婚、怀孕、产假、哺乳降低工资福利，限制晋职、晋级、评职称，辞退或单方解除合同</li>
|
||||
<li><b>《社会保险法》：</b>第 53～56 条 生育保险由用人单位缴纳，待遇包括生育医疗费用和生育津贴，生育津贴按单位上年度职工月平均工资计发</li>
|
||||
<li><b>《劳动争议调解仲裁法》：</b>第 27 条 仲裁时效 1 年，从知道或应当知道权利被侵害之日起算；第 53 条 劳动争议仲裁不收费</li>
|
||||
<li><b>地方规定：</b>生育奖励假天数、生育津贴折算与补差、剖宫产是否按难产、哺乳时间使用方式等，各地规定不同，以当地规定为准</li>
|
||||
<li><b>计算器说明：</b>按「98 天 + 难产 15 天 + 每多 1 个宝宝 15 天 + 本省天数」估算，起算日按预产期前 15 天（或预产期当天），实际以分娩日期和单位审批为准；产假是否顺延法定节假日以当地规定为准</li>
|
||||
</ul>
|
||||
<details class="fold src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源</summary>
|
||||
<div class="bd"><ul>
|
||||
<li>《女职工劳动保护特别规定》第 5～10 条：不得因三期降薪辞退；孕期减量、产检计入劳动时间、7 个月以上不加班不排夜班；98 天产假及难产、多胞胎、流产假；生育津贴；哺乳时间与设施</li>
|
||||
<li>《劳动合同法》第 35、42、45、48、87 条：变更合同须书面协商；三期内不得依第 40、41 条解除；合同期满顺延至三期结束；违法解除继续履行或 2 倍赔偿金</li>
|
||||
<li>《妇女权益保障法》（2022 年修订）第 48 条：不得因怀孕、产假、哺乳降低工资福利，限制晋职、晋级、评职称，辞退或解除合同</li>
|
||||
<li>《社会保险法》第 53～56 条：生育保险待遇含生育医疗费用和生育津贴</li>
|
||||
<li>《劳动争议调解仲裁法》第 27、53 条：仲裁时效 1 年，自知道或应当知道权利被侵害之日起算；仲裁不收费</li>
|
||||
<li>计算器：98 天 + 难产 15 天 + 每多 1 个宝宝 15 天 + 本省天数，按预产期前 15 天起休估算；实际以分娩日期、单位审批及当地规定（含节假日是否顺延、剖宫产是否按难产）为准</li>
|
||||
</ul></div>
|
||||
</details>
|
||||
<p class="foot">本页为法律常识整理，不构成法律意见，<br>具体以当地规定和专业意见为准。</p>
|
||||
<p class="foot">本页为法律常识整理，不构成法律意见。</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -537,21 +292,22 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
else location.href = '../../' + location.search + location.hash;
|
||||
});
|
||||
|
||||
/* 顶栏：滚动后白底细线 */
|
||||
var bar = $('#bar');
|
||||
sc.addEventListener('scroll', function () { bar.classList.toggle('on', sc.scrollTop > 8); }, { passive: true });
|
||||
|
||||
function go(id) {
|
||||
var el = document.getElementById(id); if (!el) return;
|
||||
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 56;
|
||||
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 60;
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
[].forEach.call(document.querySelectorAll('[data-go]'), function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
|
||||
|
||||
/* ---------- 产假计算器 ---------- */
|
||||
var DAY = 864e5;
|
||||
function pad(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function iso(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
|
||||
function parseDay(s) { var m = /^(\d{4})-(\d{1,2})-(\d{1,2})/.exec(s || ''); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
|
||||
function addDays(d, n) { return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); } /* 按日历日加，避开夏令时 */
|
||||
function cn(d) { return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'; }
|
||||
var WK = '日一二三四五六';
|
||||
function segVal(id) { var b = document.querySelector('#' + id + ' .on'); return b ? +b.dataset.v : 0; }
|
||||
[].forEach.call(document.querySelectorAll('.seg'), function (s) {
|
||||
s.addEventListener('click', function (e) {
|
||||
@@ -569,63 +325,33 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
$('#cDue').addEventListener('input', calc);
|
||||
$('#cDue').addEventListener('change', calc);
|
||||
|
||||
/* 计算：国家 = 98 + 难产 15 + (胎数-1)×15；合计 = 国家 + 本省；
|
||||
起算 = 预产期前 15 天（提前休）或预产期当天；最后一天 = 起算 + 合计 - 1；返岗 = 起算 + 合计 */
|
||||
/* 国家 = 98 + 难产 15 + (胎数-1)×15；合计 = 国家 + 本省；
|
||||
起休 = 预产期前 15 天（pre=0 则预产期当天）；最后一天 = 起休 + 合计 - 1；返岗 = 起休 + 合计 */
|
||||
function compute(due, hard, multi, local, pre) {
|
||||
if (pre === undefined) pre = 1;
|
||||
var nat = 98 + (hard ? 15 : 0) + (multi - 1) * 15;
|
||||
var total = nat + local;
|
||||
var start = addDays(due, pre ? -15 : 0);
|
||||
return { nat: nat, total: total, start: start, last: addDays(start, total - 1), back: addDays(start, total), oneYear: new Date(due.getFullYear() + 1, due.getMonth(), due.getDate()) };
|
||||
return { nat: nat, total: total, start: start, last: addDays(start, total - 1), back: addDays(start, total) };
|
||||
}
|
||||
window.__leaveCalc = compute; /* 自查用 */
|
||||
|
||||
function calc() {
|
||||
var box = $('#cRes'), due = parseDay($('#cDue').value);
|
||||
if (!due) { box.innerHTML = '<div class="empty"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>填上预产期，马上帮你算</div>'; return; }
|
||||
var hard = segVal('cHard'), multi = segVal('cMulti') || 1, local = localDays(), pre = segVal('cPre');
|
||||
var r = compute(due, hard, multi, local, pre);
|
||||
var parts = ['基础 98 天'];
|
||||
if (hard) parts.push('难产 +15');
|
||||
if (multi > 1) parts.push('多胞胎 +' + (multi - 1) * 15);
|
||||
parts.push(local ? '本省 +' + local : '本省 +0（未填）');
|
||||
if (!due) { box.innerHTML = '<div class="empty">填上预产期，马上帮你算</div>'; return; }
|
||||
var r = compute(due, segVal('cHard'), segVal('cMulti') || 1, localDays(), 1);
|
||||
box.innerHTML =
|
||||
'<div class="tot"><em id="rTotal">' + r.total + '</em><span>天产假</span><small>国家规定 <b id="rNat">' + r.nat + '</b> 天</small></div>' +
|
||||
'<div class="parts">' + parts.map(function (p) { return '<span>' + p + '</span>'; }).join('') + '</div>' +
|
||||
'<div class="dates">' +
|
||||
'<div class="main"><svg class="ic"><use href="#i-bag" xlink:href="#i-bag"/></svg><div><small>预计返岗日期</small><b id="rBack">' + cn(r.back) + ' 周' + WK[r.back.getDay()] + '</b></div></div>' +
|
||||
'<div><small>产假开始</small><b id="rStart">' + cn(r.start) + '</b></div>' +
|
||||
'<div><small>产假最后一天</small><b id="rLast">' + cn(r.last) + '</b></div>' +
|
||||
'</div>' +
|
||||
'<p class="note">按预产期估算，实际以分娩日期和单位审批为准。哺乳期保护约到 <b>' + cn(r.oneYear) + '</b>（宝宝满 1 周岁）。' +
|
||||
(local ? '' : '<br>记得查一下本省生育奖励假，加上后天数会更多。') + '</p>';
|
||||
'<div class="tot"><em id="rTotal">' + r.total + '</em><span>天产假</span><small>国家规定 ' + r.nat + ' 天</small></div>' +
|
||||
'<div class="dt"><div><small>开始休</small><b id="rStart">' + cn(r.start) + '</b></div>' +
|
||||
'<div><small>返岗日</small><b id="rBack">' + cn(r.back) + '</b></div></div>' +
|
||||
'<p class="note">按预产期前 15 天起休估算，以实际分娩日为准。</p>';
|
||||
}
|
||||
calc();
|
||||
|
||||
/* ---------- 复工清单（只存本机） ---------- */
|
||||
var CK = 'topic_zhichang_ck', st = {};
|
||||
try { st = JSON.parse(localStorage.getItem(CK) || '{}') || {}; } catch (e) { st = {}; }
|
||||
var lis = document.querySelectorAll('#ckList li');
|
||||
function ckPaint() {
|
||||
var n = 0;
|
||||
[].forEach.call(lis, function (li) { var on = !!st[li.dataset.k]; li.classList.toggle('done', on); if (on) n++; });
|
||||
$('#ckNum').textContent = n + ' / ' + lis.length;
|
||||
$('#ckBar').style.width = (n / lis.length * 100) + '%';
|
||||
}
|
||||
[].forEach.call(lis, function (li) {
|
||||
li.addEventListener('click', function () {
|
||||
st[li.dataset.k] = !st[li.dataset.k];
|
||||
try { localStorage.setItem(CK, JSON.stringify(st)); } catch (e) {}
|
||||
ckPaint();
|
||||
});
|
||||
});
|
||||
ckPaint();
|
||||
|
||||
/* ---------- 按孕周点亮阶段 + 预填预产期 ---------- */
|
||||
function mark(stage, ic, t, d, target) {
|
||||
function mark(stage, t, target) {
|
||||
var el = document.getElementById(stage); if (el) el.classList.add('hl');
|
||||
var u = $('#meIc'), ref = '#i-' + ic;
|
||||
u.setAttribute('href', ref); u.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', ref);
|
||||
$('#meT').textContent = t; $('#meD').textContent = d;
|
||||
$('#meT').textContent = t;
|
||||
$('#meGo').onclick = function () { go(target || stage); };
|
||||
$('#me').classList.add('on');
|
||||
}
|
||||
@@ -643,18 +369,18 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
.then(function (j) {
|
||||
var p = j && j.code === 200 && j.result; if (!p) return;
|
||||
/* 先判产后（产后返回体 week 也是 null） */
|
||||
if (p.postpartum) mark('stC', 'baby', '宝宝出生了，重点看复工和哺乳期', '每天 1 小时哺乳时间，复工清单也在下面');
|
||||
if (p.postpartum) mark('stC', '宝宝出生了，重点看哺乳期的保护');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w >= 28) mark('stA', 'pregnant', '孕 ' + w + ' 周 · 已满 7 个月', '不加班不排夜班，算算你的产假', 's2');
|
||||
else mark('stA', 'pregnant', '孕 ' + w + ' 周 · 先看孕期的权利', '产检算劳动时间，不得因怀孕降薪');
|
||||
if (w >= 28) mark('stA', '孕 ' + w + ' 周，已满 7 个月：不加班，算算产假', 's2');
|
||||
else mark('stA', '孕 ' + w + ' 周，先看孕期的保护');
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* 进场动画 */
|
||||
/* 进场动画（轻） */
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { root: sc, threshold: .12 });
|
||||
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { root: sc, threshold: .1 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user