专题页 v3：加设计感+每页推荐工具（共用 _shared/tools.js）；生娃计算器扩到15项+快速/详细估算；测一测改成妈妈类型卡+按类型推荐工具
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -6,18 +6,19 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>孕妈产后复工 · 职场维权指南</title>
|
||||
<!-- 孕期专题 · 职场维权（孕期首页「其他妈妈也在搜」第 5 条）。
|
||||
2026-10-31 按《孕期专题页统一设计规范 v2》重做：清新、简洁、核心明确；主色 #5B6CFF。
|
||||
2026-10-31 v3：在 v2「清新简洁」基础上加设计感——渐变 hero + 结论卡、描边数字卡、三段权益时间轴、产假刻度条、编号步骤卡、推荐工具（_shared/tools.js）。主色 #5B6CFF。
|
||||
只写全国通用法条（《女职工劳动保护特别规定》《劳动合同法》《妇女权益保障法》《社会保险法》《劳动争议调解仲裁法》），
|
||||
地方差异一律写「以当地规定为准」。自成一页：不引 app.js；返回兜底走相对路径 ../../ 并带回 search + hash。 -->
|
||||
<style>
|
||||
:root{--c:#5B6CFF;--cbg:#EEF0FF;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--sec:#F7F8FA}
|
||||
:root{--c:#5B6CFF;--cbg:#EEF0FF;--c4:#F8F9FF;--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:#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))}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
img{display:block;max-width:100%}
|
||||
button,input{font:inherit;border:0;background:none;color:inherit}
|
||||
button{cursor:pointer}
|
||||
b{color:var(--h)}
|
||||
.num{font-variant-numeric:tabular-nums}
|
||||
.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}
|
||||
|
||||
@@ -25,125 +26,179 @@ b{color:var(--h)}
|
||||
.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:active{transform:scale(.94)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
|
||||
|
||||
.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)}
|
||||
.hero{position:relative;overflow:hidden;margin-top:-48px;padding:62px 20px 24px;background:linear-gradient(160deg,var(--cbg) 0%,#fff 70%)}
|
||||
.blob{position:absolute;border-radius:50%;background:var(--c);pointer-events:none}
|
||||
.blob.b1{width:220px;height:220px;right:-70px;top:-60px;opacity:.08}
|
||||
.blob.b2{width:120px;height:120px;left:-50px;top:210px;opacity:.06}
|
||||
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--c);letter-spacing:.06em}
|
||||
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--c)}
|
||||
h1{position:relative;margin-top:8px;font-size:28px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.mk{background:linear-gradient(transparent 62%,rgba(91,108,255,.2) 0)}
|
||||
.pic{position:relative;margin:14px -20px 0 auto;width:80%;height:176px;border-radius:24px 0 0 24px;overflow:hidden}
|
||||
.pic img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
|
||||
.ans{position:relative;margin:-40px 28px 0 0;padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(91,108,255,.10)}
|
||||
.tag{display:inline-block;font-size:11.5px;font-weight:600;line-height:20px;padding:0 9px;border-radius:99px;background:var(--cbg);color:var(--c)}
|
||||
.ans p{margin-top:6px;font-size:17px;font-weight:700;line-height:1.55;color:var(--h)}
|
||||
|
||||
/* 个性化提示条 */
|
||||
.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{display:none;margin:12px 20px 0;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:var(--sec);font-size:13px;line-height:1.5;color:var(--t)}
|
||||
.me.on{display:flex}
|
||||
.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}
|
||||
|
||||
/* 记住这 3 点 */
|
||||
.key{margin-top:28px}
|
||||
/* 节标题 */
|
||||
.sh{display:flex;align-items:baseline;gap:8px}
|
||||
.sh i{font-style:normal;font-size:13px;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums;letter-spacing:.04em}
|
||||
.sh small{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:#B8BEFF}
|
||||
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}
|
||||
.lead{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
|
||||
/* 分节 */
|
||||
.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}
|
||||
/* 记住这 3 点 */
|
||||
.key{margin:36px 20px 0}
|
||||
.kgrid{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
|
||||
.kc{padding:12px 10px 14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.kc .n{display:flex;align-items:baseline;gap:3px;font-size:34px;line-height:1;font-weight:800;color:transparent;-webkit-text-stroke:1.4px var(--c);font-variant-numeric:tabular-nums;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}
|
||||
.kc .n small{font-size:13px;font-weight:700;color:var(--c);-webkit-text-stroke:0;font-family:inherit}
|
||||
.kc b{display:block;margin-top:10px;font-size:14.5px;line-height:1.4}
|
||||
.kc span{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--m)}
|
||||
|
||||
/* 三阶段卡 */
|
||||
.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}
|
||||
/* 分节大卡 */
|
||||
.sec{margin:36px 12px 0;padding:24px 16px;border-radius:24px;background:var(--sec);scroll-margin-top:56px}
|
||||
.sec.w{background:#fff;padding:0 8px}
|
||||
.sec.p{background:var(--c4)}
|
||||
|
||||
/* 01 时间轴 */
|
||||
.tl{list-style:none;margin-top:18px;position:relative}
|
||||
.tl>li:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:-22px;width:2px;background:linear-gradient(rgba(91,108,255,.55),rgba(91,108,255,.18))}
|
||||
.tl>li{position:relative;padding-left:48px}
|
||||
.tl>li+li{margin-top:22px}
|
||||
.tl .dot{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 0 0 1px #DDE1FF}
|
||||
.tl .dot .ic{width:20px;height:20px}
|
||||
.tl .row{display:flex;align-items:center;gap:8px;min-height:36px}
|
||||
.tl .row b{font-size:16px}
|
||||
.tl .row small{margin-left:auto;font-size:12px;font-weight:600;color:var(--c);background:var(--cbg);border-radius:99px;padding:0 8px;line-height:22px;white-space:nowrap}
|
||||
.tl .now{display:none;font-size:11px;font-weight:600;color:#fff;background:var(--c);border-radius:99px;padding:0 7px;line-height:19px}
|
||||
.tl .card{margin-top:6px;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
|
||||
.tl ul{list-style:none}
|
||||
.tl ul li{position:relative;padding-left:13px;font-size:14px;line-height:1.75}
|
||||
.tl ul li::before{content:"";position:absolute;left:1px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.5}
|
||||
.tl ul li b{font-weight:600}
|
||||
.tl>li.hl .dot{background:var(--c);color:#fff;box-shadow:0 0 0 5px rgba(91,108,255,.16)}
|
||||
.tl>li.hl .now{display:inline-block}
|
||||
.tl>li.hl .card{border-color:#C9CFFF;box-shadow:0 6px 18px rgba(91,108,255,.10)}
|
||||
|
||||
/* 折叠 */
|
||||
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{margin-top:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
|
||||
details.fold summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--h);cursor:pointer}
|
||||
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 summary>.ic{width:18px;height:18px;color:var(--c)}
|
||||
details.fold summary .arr{margin-left:auto;width:16px;height:16px;color:var(--m);transition:transform .25s}
|
||||
details.fold[open] summary .arr{transform:rotate(180deg)}
|
||||
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:12px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
/* 02 计算器 + 刻度条 */
|
||||
.calc{margin-top:14px;padding:16px;border-radius:20px;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}
|
||||
.hint{display:block;margin-top:4px;font-size:12px;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: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{flex:1;min-width:0;height:36px;border-radius:10px;font-size:14px;color:var(--t);white-space:nowrap;transition:transform .15s}
|
||||
.seg button:active{transform:scale(.98)}
|
||||
.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 button:active{transform:scale(.96)}
|
||||
.stp .inp{margin-top:0;flex:1;min-width:0;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
|
||||
.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}
|
||||
|
||||
/* 维权四步 */
|
||||
.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}
|
||||
.res{margin-top:16px;padding:16px 14px 14px;border-radius:16px;background:var(--cbg)}
|
||||
.tot{display:flex;align-items:baseline;gap:6px;color:var(--c)}
|
||||
.tot em{font-style:normal;font-size:40px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
|
||||
.tot span{font-size:15px;font-weight:700}
|
||||
.tot small{margin-left:auto;font-size:12px;color:var(--m)}
|
||||
.ruler{position:relative;margin-top:16px;padding-top:18px}
|
||||
.track{position:relative;display:flex;height:14px;border-radius:7px;background:#fff;overflow:hidden}
|
||||
.track i{display:block;height:100%;transition:width .35s ease}
|
||||
.track .s0{background:var(--c)}
|
||||
.track .s1{background:rgba(91,108,255,.62)}
|
||||
.track .s2{background:rgba(91,108,255,.40)}
|
||||
.track .s3{background:repeating-linear-gradient(-45deg,rgba(91,108,255,.38) 0 3px,rgba(91,108,255,.14) 3px 6px)}
|
||||
.due{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--c);white-space:nowrap;line-height:14px}
|
||||
.due::after{content:"";position:absolute;left:50%;top:15px;width:2px;height:20px;margin-left:-1px;border-radius:1px;background:var(--h)}
|
||||
.ticks{position:relative;height:22px;margin-top:2px}
|
||||
.ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--m);font-variant-numeric:tabular-nums;line-height:1}
|
||||
.ticks span::before{content:"";display:block;width:1px;height:5px;margin:0 auto 3px;background:#C3C8D6}
|
||||
.ticks span:first-child{transform:none}
|
||||
.ticks span:first-child::before{margin-left:0}
|
||||
.ticks span:last-child{transform:translateX(-100%)}
|
||||
.ticks span:last-child::before{margin-right:0}
|
||||
.lgd{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--t);font-variant-numeric:tabular-nums}
|
||||
.lgd span{display:inline-flex;align-items:center;gap:5px}
|
||||
.lgd i{width:10px;height:10px;border-radius:3px}
|
||||
.dt{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.dt div{padding:9px 10px;border-radius:12px;background:#fff;line-height:1.35}
|
||||
.dt small{display:block;font-size:12px;color:var(--m)}
|
||||
.dt b{display:block;margin-top:3px;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
|
||||
.res .empty{margin-top:12px;font-size:13px;color:var(--t);text-align:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.6)}
|
||||
.res .note{margin-top:8px;font-size:12px;color:var(--m);line-height:1.5}
|
||||
|
||||
/* 03 维权步骤卡 */
|
||||
.warn{margin-top:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:#fff;border:1px dashed #BFC6FF;font-size:13.5px;line-height:1.5;color:var(--t)}
|
||||
.warn .ic{color:var(--c)}
|
||||
.warn b{font-weight:700}
|
||||
.steps{list-style:none;margin-top:14px;position:relative}
|
||||
.steps::before{content:"";position:absolute;left:29px;top:24px;bottom:24px;border-left:2px dashed #D3D8FF}
|
||||
.st{position:relative;display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .15s}
|
||||
.st+.st{margin-top:10px}
|
||||
.st:active{transform:scale(.98)}
|
||||
.st .n{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
|
||||
.st div{flex:1;min-width:0}
|
||||
.st b{display:block;font-size:15.5px;line-height:1.4}
|
||||
.st span{display:block;font-size:12.5px;color:var(--m);line-height:1.5;margin-top:1px}
|
||||
.st .lim{flex:none;align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--c);background:var(--cbg);border-radius:99px;padding:0 8px;line-height:22px}
|
||||
.hot{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.hot a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--m);font-size:12px;line-height:1.35;transition:transform .15s}
|
||||
.hot a:active{transform:scale(.98)}
|
||||
.hot a .ic{color:var(--c)}
|
||||
.hot a b{display:block;font-size:16px;color:var(--h)}
|
||||
.hot a b{display:block;font-size:17px;color:var(--h);font-variant-numeric:tabular-nums;letter-spacing:.02em}
|
||||
|
||||
/* 推荐工具 */
|
||||
#tools{margin:36px 20px 0}
|
||||
|
||||
/* 页底 */
|
||||
.src{margin:24px 20px 0}
|
||||
.src{margin:28px 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}
|
||||
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.fade{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}.track i{transition:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></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>
|
||||
<symbol id="i-alert" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.3h.01"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
@@ -152,56 +207,64 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<span class="t">孕期专题</span>
|
||||
</header>
|
||||
|
||||
<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="hero">
|
||||
<i class="blob b1"></i><i class="blob b2"></i>
|
||||
<p class="eyebrow">孕期专题 · 职场篇</p>
|
||||
<h1>孕妈产后复工，<br><span class="mk">职场维权</span>指南</h1>
|
||||
<div class="pic"><img src="img/hero.webp" alt="职场妈妈抱着宝宝站在办公室窗前"></div>
|
||||
<div class="ans">
|
||||
<span class="tag">一句话答案</span>
|
||||
<p>孕期、产期、哺乳期，<br>单位不能因此辞退你、降你工资。</p>
|
||||
</div>
|
||||
</section>
|
||||
<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 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>
|
||||
<section class="key">
|
||||
<h2>记住这 3 点</h2>
|
||||
<div class="kgrid">
|
||||
<div class="kc fade"><span class="n">98<small>天</small></span><b>产假底线</b><span>难产多胎另加</span></div>
|
||||
<div class="kc fade"><span class="n">0<small>扣薪</small></span><b>产检算上班</b><span>也不算请假</span></div>
|
||||
<div class="kc fade"><span class="n">1<small>小时</small></span><b>每天哺乳</b><span>到宝宝 1 岁</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1 三个阶段 -->
|
||||
<!-- 01 三段权益时间轴 -->
|
||||
<section class="sec" id="s1">
|
||||
<h2>三个阶段的保护</h2>
|
||||
<div class="sh"><i>01</i><h2>三个阶段的保护</h2><small>TIMELINE</small></div>
|
||||
<p class="lead">不得降薪、不得辞退，合同到期也要顺延。</p>
|
||||
|
||||
<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>
|
||||
<ol class="tl">
|
||||
<li class="fade" id="stA">
|
||||
<span class="dot"><svg class="ic"><use href="#i-preg" xlink:href="#i-preg"/></svg></span>
|
||||
<div class="row"><b>孕期</b><span class="now">你在这里</span><small>怀孕上班</small></div>
|
||||
<div class="card"><ul>
|
||||
<li>产检时间<b>计入劳动时间</b></li>
|
||||
<li>凭医院证明，可减工作量或调岗</li>
|
||||
<li>满 7 个月，<b>不加班、不排夜班</b></li>
|
||||
</ul></div>
|
||||
</li>
|
||||
<li class="fade" id="stB">
|
||||
<span class="dot"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span>
|
||||
<div class="row"><b>产假</b><span class="now">你在这里</span><small class="num">至少 98 天</small></div>
|
||||
<div class="card"><ul>
|
||||
<li>其中<b>产前可休 15 天</b></li>
|
||||
<li>难产、多胞胎各加 15 天</li>
|
||||
<li>本省奖励假另加，以当地规定为准</li>
|
||||
</ul></div>
|
||||
</li>
|
||||
<li class="fade" id="stC">
|
||||
<span class="dot"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg></span>
|
||||
<div class="row"><b>哺乳期</b><span class="now">你在这里</span><small>到宝宝 1 岁</small></div>
|
||||
<div class="card"><ul>
|
||||
<li>每天<b>1 小时哺乳</b>，算在上班时间内</li>
|
||||
<li>不加班、不排夜班</li>
|
||||
<li>合同到期，<b>顺延到哺乳期结束</b></li>
|
||||
</ul></div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg>还有这些也受保护</summary>
|
||||
<summary><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg>还有这些也受保护<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<div class="bd">
|
||||
<p><b>流产假：</b>怀孕未满 4 个月 15 天，满 4 个月 42 天。</p>
|
||||
<p><b>晋升：</b>不得因怀孕、生育、哺乳限制晋职、晋级、评职称。</p>
|
||||
@@ -211,9 +274,9 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- 2 产假计算器 -->
|
||||
<!-- 02 产假刻度条 + 计算器 -->
|
||||
<section class="sec w" id="s2">
|
||||
<h2>我的产假怎么算</h2>
|
||||
<div class="sh"><i>02</i><h2>我的产假怎么算</h2><small>CALCULATOR</small></div>
|
||||
<p class="lead">98 天是底线，加上本省天数才是你能休的。</p>
|
||||
|
||||
<div class="calc fade">
|
||||
@@ -234,20 +297,30 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<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>
|
||||
</div>
|
||||
<div class="res" id="cRes"></div>
|
||||
<div class="res" id="cRes">
|
||||
<div class="tot"><em id="rTotal">98</em><span>天产假</span><small id="rNat">国家规定 98 天</small></div>
|
||||
<div class="ruler" aria-hidden="true">
|
||||
<span class="due" id="rDue">预产期</span>
|
||||
<div class="track"><i class="s0" id="b0"></i><i class="s1" id="b1"></i><i class="s2" id="b2"></i><i class="s3" id="b3"></i></div>
|
||||
<div class="ticks" id="rTicks"></div>
|
||||
</div>
|
||||
<div class="lgd" id="rLgd"></div>
|
||||
<div id="rDates"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 维权 -->
|
||||
<section class="sec" id="s3">
|
||||
<h2>被劝退、降薪怎么办</h2>
|
||||
<p class="lead">别签「自愿离职」，先留证据。</p>
|
||||
<!-- 03 维权步骤卡 -->
|
||||
<section class="sec p" id="s3">
|
||||
<div class="sh"><i>03</i><h2>被劝退、降薪怎么办</h2><small>STEPS</small></div>
|
||||
<p class="lead">先留证据，按这 4 步走。</p>
|
||||
|
||||
<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>
|
||||
<div class="warn fade"><svg class="ic"><use href="#i-alert" xlink:href="#i-alert"/></svg><span>被要求签字时，<b>别签「自愿离职」</b>，先带回去想清楚。</span></div>
|
||||
<ol class="steps">
|
||||
<li class="st fade"><span class="n">1</span><div><b>留证据</b><span>聊天记录、工资条、通知截图备份</span></div></li>
|
||||
<li class="st fade"><span class="n">2</span><div><b>书面沟通</b><span>发邮件写明诉求，保留回复</span></div></li>
|
||||
<li class="st fade"><span class="n">3</span><div><b>劳动监察投诉</b><span>找当地人社局劳动监察大队</span></div></li>
|
||||
<li class="st fade"><span class="n">4</span><div><b>申请劳动仲裁</b><span>不收费，自知道被侵权起算</span></div><span class="lim">时效 1 年</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>
|
||||
@@ -255,7 +328,7 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</div>
|
||||
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>产假期间，钱怎么发？</summary>
|
||||
<summary><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>产假期间，钱怎么发？<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<div class="bd">
|
||||
<p><b>交了生育保险：</b>由生育保险基金发生育津贴，按单位上年度职工月平均工资计发。</p>
|
||||
<p><b>没交：</b>单位按你产假前的工资发。</p>
|
||||
@@ -264,8 +337,10 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<div id="tools"></div>
|
||||
|
||||
<details class="fold src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源</summary>
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<div class="bd"><ul>
|
||||
<li>《女职工劳动保护特别规定》第 5～10 条：不得因三期降薪辞退；孕期减量、产检计入劳动时间、7 个月以上不加班不排夜班；98 天产假及难产、多胞胎、流产假；生育津贴；哺乳时间与设施</li>
|
||||
<li>《劳动合同法》第 35、42、45、48、87 条：变更合同须书面协商；三期内不得依第 40、41 条解除；合同期满顺延至三期结束；违法解除继续履行或 2 倍赔偿金</li>
|
||||
@@ -278,6 +353,7 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<p class="foot">本页为法律常识整理，不构成法律意见。</p>
|
||||
</div>
|
||||
|
||||
<script src="../_shared/tools.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -302,7 +378,20 @@ details.fold .bd p+p{margin-top:6px}
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
/* ---------- 产假计算器 ---------- */
|
||||
/* ---------- 推荐工具（孕周拿到后重画一次，好显示「孕N周开放」） ---------- */
|
||||
var toolsEl = $('#tools');
|
||||
function tools(wk) {
|
||||
if (!window.TopicTools) return;
|
||||
toolsEl.className = '';
|
||||
TopicTools.render(toolsEl, [
|
||||
{ id: 'chanjianrili', why: '排好产检时间，请产检假有依据' },
|
||||
{ id: 'daichanqingdan', why: '休产假前，把待产包一次备齐' },
|
||||
{ id: 'taidong', why: '上班间隙，也别忘了数胎动' }
|
||||
], { title: '用得上的工具', color: '#5B6CFF', bg: '#EEF0FF', wk: wk || 0 });
|
||||
}
|
||||
tools(0);
|
||||
|
||||
/* ---------- 产假计算器 + 刻度条 ---------- */
|
||||
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; }
|
||||
@@ -336,15 +425,30 @@ details.fold .bd p+p{margin-top:6px}
|
||||
}
|
||||
window.__leaveCalc = compute; /* 自查用 */
|
||||
|
||||
var C = ['var(--c)', 'rgba(91,108,255,.62)', 'rgba(91,108,255,.40)', 'repeating-linear-gradient(-45deg,rgba(91,108,255,.38) 0 3px,rgba(91,108,255,.14) 3px 6px)'];
|
||||
function calc() {
|
||||
var box = $('#cRes'), due = parseDay($('#cDue').value);
|
||||
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>国家规定 ' + 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>';
|
||||
var hard = segVal('cHard'), multi = segVal('cMulti') || 1, local = localDays();
|
||||
var due = parseDay($('#cDue').value);
|
||||
var r = compute(due || new Date(), hard, multi, local, 1);
|
||||
var parts = [98, hard ? 15 : 0, (multi - 1) * 15, local];
|
||||
var names = ['国家 98', '难产 +15', '多胞胎 +' + parts[2], '本省 +' + local];
|
||||
/* 刻度：满格取 ≥ 合计、步长 30 的整数倍，最少 150 天 */
|
||||
var max = Math.max(150, Math.ceil(r.total / 30) * 30), step = max > 240 ? 60 : 30;
|
||||
$('#rTotal').textContent = r.total;
|
||||
$('#rNat').textContent = '国家规定 ' + r.nat + ' 天';
|
||||
['b0', 'b1', 'b2', 'b3'].forEach(function (id, i) { document.getElementById(id).style.width = (parts[i] / max * 100) + '%'; });
|
||||
$('#rDue').style.left = (15 / max * 100) + '%';
|
||||
var tk = '';
|
||||
for (var v = 0; v <= max; v += step) tk += '<span style="left:' + (v / max * 100) + '%">' + v + '</span>';
|
||||
$('#rTicks').innerHTML = tk;
|
||||
var lg = '';
|
||||
parts.forEach(function (p, i) { if (p) lg += '<span><i style="background:' + C[i] + '"></i>' + names[i] + '</span>'; });
|
||||
$('#rLgd').innerHTML = lg;
|
||||
$('#rDates').innerHTML = due
|
||||
? '<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>'
|
||||
: '<div class="empty">填上预产期，算出起休和返岗日</div>';
|
||||
}
|
||||
calc();
|
||||
|
||||
@@ -372,17 +476,27 @@ details.fold .bd p+p{margin-top:6px}
|
||||
if (p.postpartum) mark('stC', '宝宝出生了，重点看哺乳期的保护');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
tools(w);
|
||||
if (w >= 28) mark('stA', '孕 ' + w + ' 周，已满 7 个月：不加班，算算产假', 's2');
|
||||
else mark('stA', '孕 ' + w + ' 周，先看孕期的保护');
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* 进场动画（轻） */
|
||||
/* 进场动画：同一批进入视口的按顺序错开 60ms */
|
||||
var fades = document.querySelectorAll('.fade');
|
||||
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: .1 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
var io = new IntersectionObserver(function (es) {
|
||||
var k = 0;
|
||||
es.forEach(function (e) {
|
||||
if (!e.isIntersecting) return;
|
||||
e.target.style.transitionDelay = (k++ * 60) + 'ms';
|
||||
e.target.classList.add('in');
|
||||
io.unobserve(e.target);
|
||||
});
|
||||
}, { root: sc, threshold: .1 });
|
||||
[].forEach.call(fades, function (el) { io.observe(el); });
|
||||
} else [].forEach.call(fades, function (el) { el.classList.add('in'); });
|
||||
|
||||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
var y0 = 0;
|
||||
|
||||
Reference in New Issue
Block a user