selfrelease
d79e3baa34
- 面包屑导航组件，集成至TopNav header - 侧边栏菜单分组间距增大，分组间分隔线 - 制度公示员工阅读签收：PolicyReadRecord模型、portal路由、管理端阅读统计 - 修复Policies.tsx民主程序推进bug（字段名/API路径/参数） - 用工文本模板变量名英文转中文显示 - 通知类型TYPE_LABELS补全(RISK_ALERT/SOCIAL_INS/OVERTIME_ALERT/PAYSLIP_READY) - 通知示例数据补充 - h2标题统一为text-sm font-medium - 新增run.md
6370 lines
275 KiB
HTML
6370 lines
275 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>白话用工侠 · 改造后系统原型 V1.0</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/tabler-icons.min.css">
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
font-size: 14px;
|
||
color: #212121;
|
||
background: #F5F8FA;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* ========== LAYOUT ========== */
|
||
.app { display: flex; min-height: 100vh; }
|
||
.sidebar {
|
||
width: 232px;
|
||
background: #1E2761;
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||
.topbar {
|
||
height: 72px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #E0E6ED;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
gap: 14px;
|
||
}
|
||
|
||
/* ========== AI SEARCH BAR (强化版) ========== */
|
||
.ai-search-bar {
|
||
flex: 1;
|
||
height: 50px;
|
||
background: linear-gradient(135deg, #F0F6FF 0%, #EFF1FE 50%, #F5F0FE 100%);
|
||
border: 1.5px solid transparent;
|
||
background-clip: padding-box;
|
||
border-radius: 26px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4px 4px 4px 14px;
|
||
gap: 12px;
|
||
position: relative;
|
||
box-shadow: 0 0 0 1.5px rgba(46,117,182,0.25), 0 2px 8px rgba(46,117,182,0.06);
|
||
transition: all 0.2s;
|
||
}
|
||
.ai-search-bar:hover {
|
||
box-shadow: 0 0 0 1.5px rgba(46,117,182,0.55), 0 4px 14px rgba(46,117,182,0.12);
|
||
}
|
||
.ai-search-icon {
|
||
width: 38px; height: 38px;
|
||
background: linear-gradient(135deg, #2E75B6, #1E2761);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
.ai-search-icon .pulse {
|
||
position: absolute;
|
||
width: 100%; height: 100%;
|
||
border-radius: 50%;
|
||
border: 2px solid #2E75B6;
|
||
animation: pulse 2s ease-out infinite;
|
||
opacity: 0;
|
||
}
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); opacity: 0.7; }
|
||
100% { transform: scale(1.6); opacity: 0; }
|
||
}
|
||
.ai-search-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
.ai-search-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
margin-bottom: 2px;
|
||
}
|
||
.ai-search-label .ai-name { color: #1E2761; font-weight: 600; font-size: 12px; }
|
||
.ai-search-label .ai-tag {
|
||
background: rgba(46,117,182,0.12); color: #2E75B6;
|
||
padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 500;
|
||
}
|
||
.ai-search-label .ai-online { color: #16A34A; font-size: 10px; }
|
||
.ai-search-input {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 13px; color: #6B7280;
|
||
}
|
||
.ai-search-input .placeholder u { color: #2E75B6; text-decoration: underline; cursor: pointer; }
|
||
.ai-search-input kbd {
|
||
background: #fff; border: 1px solid #E0E6ED;
|
||
border-radius: 4px;
|
||
padding: 0 6px;
|
||
font-size: 11px;
|
||
color: #6B7280;
|
||
font-family: inherit;
|
||
margin-left: auto;
|
||
}
|
||
.ai-search-actions {
|
||
display: flex; gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
.ai-quick {
|
||
height: 42px;
|
||
padding: 0 12px;
|
||
border: 1px solid rgba(46,117,182,0.25);
|
||
border-radius: 21px;
|
||
background: #fff;
|
||
color: #1E2761;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
font-family: inherit;
|
||
transition: all 0.15s;
|
||
}
|
||
.ai-quick:hover {
|
||
background: #2E75B6; color: #fff; border-color: #2E75B6;
|
||
}
|
||
.ai-quick.danger { color: #C00000; border-color: rgba(192,0,0,0.3); }
|
||
.ai-quick.danger:hover { background: #C00000; color: #fff; border-color: #C00000; }
|
||
.ai-quick i { font-size: 14px; }
|
||
.content { flex: 1; padding: 24px 28px 40px; overflow-y: auto; }
|
||
|
||
/* ========== SIDEBAR ========== */
|
||
.logo {
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
gap: 10px;
|
||
}
|
||
.logo-icon {
|
||
width: 28px; height: 28px;
|
||
background: #2E75B6;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.logo-text { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
|
||
.logo-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; }
|
||
|
||
.nav { padding: 12px 0; flex: 1; overflow-y: auto; }
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11px;
|
||
padding: 11px 20px;
|
||
cursor: pointer;
|
||
color: rgba(255,255,255,0.85);
|
||
border-left: 3px solid transparent;
|
||
transition: all 0.15s;
|
||
font-size: 14px;
|
||
position: relative;
|
||
}
|
||
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
||
.nav-item.active {
|
||
background: rgba(46,117,182,0.25);
|
||
border-left-color: #2E75B6;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
.nav-item i { font-size: 18px; }
|
||
.nav-badge {
|
||
margin-left: auto;
|
||
background: #C00000;
|
||
color: #fff;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
}
|
||
.nav-badge.gold { background: #F0B429; color: #1E2761; }
|
||
.nav-section {
|
||
padding: 14px 20px 6px;
|
||
font-size: 11px;
|
||
color: rgba(255,255,255,0.45);
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
}
|
||
.sidebar-footer {
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
padding: 12px 20px;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.6);
|
||
}
|
||
|
||
/* ========== SIDEBAR GROUP (collapsible) ========== */
|
||
.nav-group { }
|
||
.nav-group-head { user-select: none; }
|
||
.nav-caret {
|
||
margin-left: auto;
|
||
font-size: 14px !important;
|
||
opacity: 0.6;
|
||
transition: transform 0.2s;
|
||
}
|
||
.nav-group.collapsed .nav-caret { transform: rotate(-90deg); }
|
||
.nav-group.collapsed .nav-group-body { display: none; }
|
||
.nav-group-body {
|
||
padding: 2px 0 4px;
|
||
}
|
||
.nav-sub {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 20px 8px 49px;
|
||
font-size: 13px;
|
||
color: rgba(255,255,255,0.72);
|
||
cursor: pointer;
|
||
border-left: 3px solid transparent;
|
||
transition: all 0.15s;
|
||
position: relative;
|
||
}
|
||
.nav-sub:before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 35px;
|
||
width: 4px; height: 4px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
.nav-sub:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
||
.nav-sub.active {
|
||
background: rgba(46,117,182,0.25);
|
||
border-left-color: #2E75B6;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
.nav-sub.active:before { background: #2E75B6; }
|
||
|
||
/* ========== HR BASE: STATS STRIP ========== */
|
||
.stats-strip {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.stats-strip.cols-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
|
||
.stats-strip.cols-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
|
||
.stats-strip.cols-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
|
||
.stat-tile {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 14px 12px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.stat-tile:hover {
|
||
border-color: #2E75B6;
|
||
box-shadow: 0 2px 6px rgba(46,117,182,0.10);
|
||
}
|
||
.stat-tile .lbl { font-size: 12px; color: #6B7280; margin-bottom: 6px; }
|
||
.stat-tile .val { font-size: 22px; font-weight: 700; color: #1E2761; line-height: 1; }
|
||
.stat-tile.warn .val { color: #D97706; }
|
||
.stat-tile.danger .val { color: #C00000; }
|
||
|
||
/* ========== HR BASE: TABLES ========== */
|
||
.data-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.data-toolbar .field {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
color: #4B5563;
|
||
}
|
||
.data-toolbar .input,
|
||
.data-toolbar .select {
|
||
height: 32px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
padding: 0 10px;
|
||
font-size: 13px;
|
||
color: #1E2761;
|
||
background: #fff;
|
||
min-width: 160px;
|
||
outline: none;
|
||
font-family: inherit;
|
||
}
|
||
.data-toolbar .input:focus,
|
||
.data-toolbar .select:focus { border-color: #2E75B6; }
|
||
.data-toolbar .grow { flex: 1; }
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
}
|
||
.data-table thead th {
|
||
background: #F5F8FA;
|
||
color: #4B5563;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
padding: 11px 14px;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
font-size: 12px;
|
||
}
|
||
.data-table tbody td {
|
||
padding: 13px 14px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
color: #1F2937;
|
||
}
|
||
.data-table tbody tr:last-child td { border-bottom: none; }
|
||
.data-table tbody tr:hover { background: #FAFCFE; }
|
||
.data-table a, .data-table .lnk {
|
||
color: #2E75B6;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
.data-table a:hover, .data-table .lnk:hover { text-decoration: underline; }
|
||
.data-table .lnk + .lnk { margin-left: 10px; }
|
||
.data-table .lnk.danger { color: #C00000; }
|
||
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
.tag-green { background: #DCFCE7; color: #166534; }
|
||
.tag-red { background: #FEE2E2; color: #C00000; }
|
||
.tag-yellow { background: #FEF3C7; color: #92400E; }
|
||
.tag-blue { background: #EAF2F9; color: #1E40AF; }
|
||
.tag-gray { background: #F3F4F6; color: #4B5563; }
|
||
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 12px 14px;
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-top: none;
|
||
border-radius: 0 0 8px 8px;
|
||
font-size: 12px;
|
||
color: #6B7280;
|
||
}
|
||
.pagination .pager {
|
||
display: inline-flex;
|
||
gap: 4px;
|
||
}
|
||
.pagination .pg {
|
||
min-width: 28px; height: 28px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
color: #4B5563;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
padding: 0 8px;
|
||
}
|
||
.pagination .pg.active { background: #2E75B6; color: #fff; border-color: #2E75B6; }
|
||
|
||
/* form rows for HR base */
|
||
.form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.form-row .lbl {
|
||
width: 130px;
|
||
text-align: right;
|
||
color: #374151;
|
||
font-size: 13px;
|
||
flex-shrink: 0;
|
||
}
|
||
.form-row .lbl .req { color: #C00000; margin-right: 4px; }
|
||
.form-row .input,
|
||
.form-row .select,
|
||
.form-row textarea {
|
||
flex: 1 1 0;
|
||
width: 100%;
|
||
min-width: 0;
|
||
min-height: 36px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
padding: 6px 10px;
|
||
font-size: 13px;
|
||
color: #1E2761;
|
||
background: #fff;
|
||
outline: none;
|
||
font-family: inherit;
|
||
box-sizing: border-box;
|
||
}
|
||
.form-row textarea { resize: vertical; }
|
||
.form-row .input:focus,
|
||
.form-row .select:focus,
|
||
.form-row textarea:focus { border-color: #2E75B6; }
|
||
|
||
/* 两列表单：在一个容器里并排排两组 label+input */
|
||
.form-grid-2 {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px 28px;
|
||
}
|
||
.form-grid-2 .form-row { margin-bottom: 14px; }
|
||
|
||
/* 按钮组（用于"是/否"或"上海/全国"这种二选一） */
|
||
.btn-toggle {
|
||
display: inline-flex;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.btn-toggle button {
|
||
border: 0;
|
||
background: #fff;
|
||
color: #4B5563;
|
||
padding: 8px 18px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
min-width: 64px;
|
||
}
|
||
.btn-toggle button + button { border-left: 1px solid #E0E6ED; }
|
||
.btn-toggle button.on {
|
||
background: #EAF2F9;
|
||
color: #2E75B6;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 计算器结果占位 */
|
||
.calc-result {
|
||
margin-top: 18px;
|
||
padding: 18px 20px;
|
||
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
|
||
border-radius: 8px;
|
||
color: #1E40AF;
|
||
font-size: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.calc-result.empty {
|
||
background: #F9FAFB;
|
||
color: #6B7280;
|
||
justify-content: center;
|
||
padding: 28px;
|
||
}
|
||
|
||
.info-banner {
|
||
background: #EFF6FF;
|
||
border: 1px solid #BFDBFE;
|
||
border-left: 3px solid #2E75B6;
|
||
border-radius: 6px;
|
||
padding: 12px 16px;
|
||
font-size: 13px;
|
||
color: #1E40AF;
|
||
margin-bottom: 16px;
|
||
line-height: 1.7;
|
||
}
|
||
.info-banner .title { font-weight: 600; color: #1E2761; margin-bottom: 4px; }
|
||
|
||
/* tab strip used by some HR base pages */
|
||
.tabs-strip {
|
||
display: flex;
|
||
gap: 4px;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
margin-bottom: 16px;
|
||
}
|
||
.tabs-strip .tab {
|
||
padding: 10px 18px;
|
||
font-size: 13px;
|
||
color: #4B5563;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -1px;
|
||
font-weight: 500;
|
||
}
|
||
.tabs-strip .tab:hover { color: #2E75B6; }
|
||
.tabs-strip .tab.active { color: #2E75B6; border-bottom-color: #2E75B6; }
|
||
|
||
/* application flow cards (起草申请) */
|
||
.apply-section { margin-bottom: 22px; }
|
||
.apply-section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1E2761;
|
||
margin-bottom: 10px;
|
||
padding-left: 8px;
|
||
border-left: 3px solid #2E75B6;
|
||
}
|
||
.apply-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
.apply-card {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.apply-card:hover {
|
||
border-color: #2E75B6;
|
||
box-shadow: 0 4px 12px rgba(46,117,182,0.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
.apply-card .ico {
|
||
width: 38px; height: 38px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
.apply-card .ico.blue { background: #2E75B6; }
|
||
.apply-card .ico.green { background: #16A34A; }
|
||
.apply-card .ico.cyan { background: #06B6D4; }
|
||
.apply-card .ico.gray { background: #64748B; }
|
||
.apply-card .ico.orange { background: #F59E0B; }
|
||
.apply-card .ico.purple { background: #8B5CF6; }
|
||
.apply-card .nm { font-size: 14px; color: #1E2761; font-weight: 500; }
|
||
.apply-card .sub { font-size: 11px; color: #6B7280; margin-top: 2px; }
|
||
|
||
/* diagnosis dimension cards */
|
||
.diag-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
.diag-card {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 16px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.diag-card .ico {
|
||
width: 40px; height: 40px;
|
||
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #2E75B6;
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
.diag-card .nm { font-size: 14px; color: #1E2761; font-weight: 500; }
|
||
.diag-card .meta { font-size: 11px; color: #6B7280; margin-top: 2px; }
|
||
|
||
/* bg check banner */
|
||
.bg-hero {
|
||
background: linear-gradient(135deg, #EFF6FF 0%, #E0E7FF 100%);
|
||
border-radius: 10px;
|
||
padding: 22px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.bg-hero .icon {
|
||
width: 56px; height: 56px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #2E75B6;
|
||
font-size: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
.bg-hero .title { font-size: 18px; font-weight: 600; color: #1E2761; }
|
||
.bg-hero .sub { font-size: 12px; color: #4B5563; margin-top: 4px; }
|
||
|
||
/* 背调 5 项内容卡片 */
|
||
.bg-items {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||
gap: 14px;
|
||
}
|
||
.bg-item {
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 16px 12px;
|
||
text-align: center;
|
||
background: #fff;
|
||
transition: all 0.15s;
|
||
}
|
||
.bg-item:hover {
|
||
border-color: #2E75B6;
|
||
box-shadow: 0 2px 8px rgba(46,117,182,0.08);
|
||
}
|
||
.bg-ico {
|
||
width: 44px; height: 44px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
}
|
||
.bg-nm { font-size: 13px; font-weight: 600; color: #1E2761; margin-bottom: 4px; }
|
||
.bg-sub { font-size: 11px; color: #6B7280; }
|
||
|
||
/* video card */
|
||
.video-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
.video-card {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.video-card:hover {
|
||
border-color: #2E75B6;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
|
||
}
|
||
.video-thumb {
|
||
height: 130px;
|
||
background: linear-gradient(135deg, #1E2761 0%, #2E4187 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
padding: 0 16px;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
.video-thumb .play {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(255,255,255,0.85);
|
||
font-size: 36px;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.video-card:hover .play { opacity: 1; }
|
||
.video-info {
|
||
padding: 12px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
.video-info .t {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #1E2761;
|
||
margin-bottom: 6px;
|
||
line-height: 1.4;
|
||
}
|
||
.video-info .d {
|
||
font-size: 11px;
|
||
color: #6B7280;
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
/* limit to 3 lines */
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
.video-info .foot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 12px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #F3F4F6;
|
||
font-size: 11px;
|
||
color: #6B7280;
|
||
}
|
||
.video-info .foot .btn { padding: 4px 12px; font-size: 12px; }
|
||
.sidebar-footer-spacer { }
|
||
|
||
/* ========== TOPBAR ========== */
|
||
.search-box {
|
||
flex: 1;
|
||
max-width: 480px;
|
||
height: 36px;
|
||
background: #F5F8FA;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
gap: 8px;
|
||
color: #6B7280;
|
||
font-size: 13px;
|
||
}
|
||
.search-box i { color: #9CA3AF; }
|
||
.topbar-icon {
|
||
width: 36px; height: 36px;
|
||
border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
color: #4B5563;
|
||
position: relative;
|
||
}
|
||
.topbar-icon:hover { background: #F5F8FA; }
|
||
.topbar-icon .dot {
|
||
position: absolute;
|
||
top: 8px; right: 8px;
|
||
width: 8px; height: 8px;
|
||
background: #C00000;
|
||
border-radius: 50%;
|
||
border: 2px solid #fff;
|
||
}
|
||
.user-chip {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 4px 10px 4px 4px;
|
||
border-radius: 18px;
|
||
cursor: pointer;
|
||
}
|
||
.user-chip:hover { background: #F5F8FA; }
|
||
.avatar {
|
||
width: 28px; height: 28px;
|
||
border-radius: 50%;
|
||
background: #2E75B6;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ========== PAGE BASE ========== */
|
||
.page { display: none; }
|
||
.page.active { display: block; }
|
||
.page-title {
|
||
display: flex; align-items: center; gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.page-title h1 { font-size: 22px; font-weight: 600; color: #1E2761; }
|
||
.page-title .crumb { color: #9CA3AF; font-size: 13px; }
|
||
.badge {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
.badge-new { background: #FEF3C7; color: #92400E; }
|
||
.badge-ai { background: #EAF2F9; color: #1E40AF; }
|
||
|
||
/* ========== CARDS ========== */
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
border: 1px solid #E5E7EB;
|
||
padding: 18px 20px;
|
||
}
|
||
.card-title {
|
||
font-size: 15px; font-weight: 600; color: #1E2761;
|
||
margin-bottom: 14px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.card-title .more {
|
||
margin-left: auto;
|
||
color: #6B7280;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
.card-title .more:hover { color: #2E75B6; }
|
||
|
||
/* ========== PAGE 1: RISK COCKPIT ========== */
|
||
/* 顶部价值横幅 */
|
||
.alert-banner {
|
||
background: linear-gradient(to right, #FDF4F1, #FFFFFF);
|
||
border: 1px solid #FCA5A5;
|
||
border-left: 4px solid #C00000;
|
||
border-radius: 8px;
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.alert-banner .icon {
|
||
width: 44px; height: 44px;
|
||
background: #FEE2E2;
|
||
border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #C00000;
|
||
font-size: 22px;
|
||
flex-shrink: 0;
|
||
}
|
||
.alert-banner .info { flex: 1; }
|
||
.alert-banner .info-title {
|
||
font-weight: 600; color: #C00000;
|
||
margin-bottom: 4px; font-size: 14px;
|
||
}
|
||
.alert-banner .info-desc { color: #4B5563; font-size: 13px; }
|
||
.alert-banner .info-desc strong { color: #1E2761; }
|
||
.alert-banner .actions {
|
||
display: flex; gap: 8px;
|
||
}
|
||
.btn {
|
||
height: 32px; padding: 0 14px;
|
||
border-radius: 6px;
|
||
border: 1px solid #E5E7EB;
|
||
background: #fff;
|
||
color: #1E2761;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
font-weight: 500;
|
||
transition: all 0.15s;
|
||
}
|
||
.btn:hover { background: #F5F8FA; border-color: #2E75B6; }
|
||
.btn.primary {
|
||
background: #2E75B6; color: #fff; border-color: #2E75B6;
|
||
}
|
||
.btn.primary:hover { background: #1E5A91; }
|
||
.btn.danger {
|
||
background: #C00000; color: #fff; border-color: #C00000;
|
||
}
|
||
.btn.danger:hover { background: #991919; }
|
||
.btn.small { height: 26px; padding: 0 10px; font-size: 12px; }
|
||
|
||
/* 3列布局 */
|
||
.row { display: grid; gap: 16px; margin-bottom: 16px; }
|
||
.row.cols-3 { grid-template-columns: 280px 1fr 1fr; }
|
||
.row.cols-2 { grid-template-columns: 1fr 1fr; }
|
||
.row.cols-4 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* 风险评分卡 */
|
||
.score-card {
|
||
background: linear-gradient(135deg, #1E2761 0%, #2E4187 100%);
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
}
|
||
.score-circle {
|
||
width: 160px; height: 160px;
|
||
margin: 8px auto 12px;
|
||
position: relative;
|
||
}
|
||
.score-num {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
}
|
||
.score-num .n { font-size: 44px; font-weight: 700; line-height: 1; }
|
||
.score-num .l { font-size: 11px; opacity: 0.75; margin-top: 4px; }
|
||
.score-card .label {
|
||
text-align: center;
|
||
font-size: 13px;
|
||
opacity: 0.85;
|
||
margin-bottom: 12px;
|
||
}
|
||
.score-card .trend {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
}
|
||
.score-card .trend strong { color: #FEF3C7; }
|
||
.score-meta {
|
||
display: flex; justify-content: space-between;
|
||
margin-top: 16px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid rgba(255,255,255,0.15);
|
||
font-size: 12px;
|
||
}
|
||
.score-meta strong { display: block; font-size: 16px; margin-bottom: 2px; }
|
||
|
||
/* 评分细项 */
|
||
.score-detail-card { display: flex; flex-direction: column; gap: 10px; }
|
||
.score-item {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
}
|
||
.score-item:last-child { border-bottom: none; }
|
||
.score-item .label { flex: 1; font-size: 13px; color: #374151; }
|
||
.score-item .bar {
|
||
width: 96px; height: 6px;
|
||
background: #F3F4F6;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.score-item .bar-fill {
|
||
position: absolute;
|
||
top: 0; left: 0; height: 100%;
|
||
border-radius: 3px;
|
||
}
|
||
.score-item .num { font-size: 13px; font-weight: 600; min-width: 32px; text-align: right; }
|
||
.green { color: #16A34A; }
|
||
.green-bg { background: #16A34A; }
|
||
.red { color: #C00000; }
|
||
.red-bg { background: #C00000; }
|
||
.yellow { color: #D97706; }
|
||
.yellow-bg { background: #F0B429; }
|
||
.blue { color: #2E75B6; }
|
||
.blue-bg { background: #2E75B6; }
|
||
|
||
/* 价值看板 */
|
||
.value-card {
|
||
background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
|
||
border: 1px solid #BBF7D0;
|
||
padding: 20px;
|
||
display: flex; flex-direction: column;
|
||
border-radius: 8px;
|
||
}
|
||
.value-amount {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: #166534;
|
||
line-height: 1.1;
|
||
margin: 4px 0 6px;
|
||
}
|
||
.value-amount .unit { font-size: 16px; margin-right: 2px; }
|
||
.value-label { color: #15803D; font-size: 13px; margin-bottom: 14px; }
|
||
.value-stats {
|
||
display: grid; grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 12px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid #BBF7D0;
|
||
}
|
||
.value-stats .item { text-align: center; }
|
||
.value-stats .item .n { font-size: 18px; font-weight: 600; color: #166534; }
|
||
.value-stats .item .l { font-size: 11px; color: #16A34A; margin-top: 2px; }
|
||
|
||
/* AI建议卡片流 */
|
||
.suggestion-card {
|
||
display: flex;
|
||
gap: 14px;
|
||
padding: 14px 16px;
|
||
border-radius: 6px;
|
||
border: 1px solid;
|
||
margin-bottom: 10px;
|
||
align-items: flex-start;
|
||
}
|
||
.suggestion-card .icon {
|
||
width: 32px; height: 32px;
|
||
border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
.suggestion-card .body { flex: 1; min-width: 0; }
|
||
.suggestion-card .head {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.suggestion-card .label {
|
||
font-size: 11px;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
font-weight: 500;
|
||
}
|
||
.suggestion-card .time { font-size: 11px; color: #9CA3AF; margin-left: auto; }
|
||
.suggestion-card .text { font-size: 13px; color: #374151; line-height: 1.55; }
|
||
.suggestion-card .text strong { color: #1E2761; }
|
||
.suggestion-card .action { margin-top: 8px; }
|
||
|
||
.sg-high { border-color: #FECACA; background: #FFFAFA; }
|
||
.sg-high .icon { background: #FEE2E2; color: #C00000; }
|
||
.sg-high .label { background: #FEE2E2; color: #C00000; }
|
||
.sg-med { border-color: #FED7AA; background: #FFFBF6; }
|
||
.sg-med .icon { background: #FEF3C7; color: #D97706; }
|
||
.sg-med .label { background: #FEF3C7; color: #D97706; }
|
||
.sg-val { border-color: #BBF7D0; background: #F7FEF9; }
|
||
.sg-val .icon { background: #DCFCE7; color: #166534; }
|
||
.sg-val .label { background: #DCFCE7; color: #166534; }
|
||
.sg-know { border-color: #DDD6FE; background: #FAFAFE; }
|
||
.sg-know .icon { background: #EDE9FE; color: #6D28D9; }
|
||
.sg-know .label { background: #EDE9FE; color: #6D28D9; }
|
||
|
||
/* 流程入口折叠区 */
|
||
.flow-entries {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.flow-entry {
|
||
background: #F8FAFC;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
padding: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.flow-entry:hover {
|
||
background: #fff;
|
||
border-color: #2E75B6;
|
||
transform: translateY(-1px);
|
||
}
|
||
.flow-entry .ie {
|
||
width: 32px; height: 32px;
|
||
border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 8px;
|
||
font-size: 16px;
|
||
background: #EAF2F9;
|
||
color: #2E75B6;
|
||
}
|
||
.flow-entry .nm { font-size: 13px; font-weight: 500; color: #1E2761; }
|
||
.flow-entry .desc { font-size: 11px; color: #6B7280; margin-top: 2px; }
|
||
.flow-entry.danger .ie { background: #FEE2E2; color: #C00000; }
|
||
|
||
/* ========== PAGE 2: AI CHAT ========== */
|
||
.chat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; height: calc(100vh - 130px); }
|
||
.chat-sidebar { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; overflow-y: auto; }
|
||
.chat-sidebar-title { font-size: 12px; color: #6B7280; margin-bottom: 8px; }
|
||
.chat-session {
|
||
padding: 10px 12px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
margin-bottom: 4px;
|
||
}
|
||
.chat-session:hover { background: #F5F8FA; }
|
||
.chat-session.active { background: #EAF2F9; }
|
||
.chat-session .t { font-size: 13px; color: #1E2761; font-weight: 500; }
|
||
.chat-session .meta { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
|
||
|
||
.chat-area {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
display: flex; flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.chat-head {
|
||
height: 52px;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
display: flex; align-items: center;
|
||
padding: 0 18px; gap: 12px;
|
||
}
|
||
.ai-icon {
|
||
width: 32px; height: 32px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #2E75B6, #1E2761);
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 600;
|
||
}
|
||
.chat-head .name { font-weight: 600; color: #1E2761; }
|
||
.chat-head .status { font-size: 11px; color: #16A34A; }
|
||
.chat-head .status::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: #16A34A;
|
||
margin-right: 4px;
|
||
vertical-align: 1px;
|
||
}
|
||
|
||
.chat-messages { flex: 1; overflow-y: auto; padding: 20px 24px; }
|
||
.msg { display: flex; gap: 10px; margin-bottom: 20px; }
|
||
.msg-user { flex-direction: row-reverse; }
|
||
.msg .av {
|
||
width: 32px; height: 32px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 12px; font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
.msg-user .av { background: #6B7280; }
|
||
.msg-ai .av { background: linear-gradient(135deg, #2E75B6, #1E2761); }
|
||
.msg-body { max-width: 70%; }
|
||
.msg-user .msg-body { text-align: right; }
|
||
.msg-user .bubble {
|
||
background: #2E75B6; color: #fff;
|
||
padding: 10px 14px; border-radius: 14px 14px 4px 14px;
|
||
display: inline-block;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
}
|
||
.msg-ai .bubble {
|
||
background: #F5F8FA;
|
||
padding: 14px 16px;
|
||
border-radius: 4px 14px 14px 14px;
|
||
color: #1F2937;
|
||
font-size: 13px;
|
||
line-height: 1.65;
|
||
}
|
||
.msg-ai .bubble.warn {
|
||
background: #FFFAF0;
|
||
border: 1px solid #FED7AA;
|
||
}
|
||
.ai-section {
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px dashed #E5E7EB;
|
||
}
|
||
.ai-section:first-child { margin: 0; padding: 0; border: 0; }
|
||
.ai-section .tt {
|
||
font-size: 12px; font-weight: 600;
|
||
margin-bottom: 6px;
|
||
}
|
||
.ai-section .tt.red { color: #C00000; }
|
||
.ai-section .tt.amber { color: #D97706; }
|
||
.ai-section .tt.green { color: #166534; }
|
||
.ai-section ul { padding-left: 18px; margin: 4px 0; }
|
||
.ai-section li { margin: 2px 0; }
|
||
.ai-cite { display: inline-block; background: #EAF2F9; color: #1E40AF; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
|
||
|
||
.prediction-mini {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
.pred-mini-card {
|
||
text-align: center;
|
||
padding: 10px 6px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
}
|
||
.pred-mini-card .ttl { font-size: 11px; margin-bottom: 4px; }
|
||
.pred-mini-card .amt { font-size: 16px; font-weight: 700; }
|
||
.pred-mini-card.red { background: #FEE2E2; color: #991B1B; }
|
||
.pred-mini-card.amber { background: #FEF3C7; color: #92400E; }
|
||
.pred-mini-card.green { background: #DCFCE7; color: #166534; }
|
||
|
||
.msg-actions {
|
||
margin-top: 12px;
|
||
display: flex; gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.chat-input-area {
|
||
border-top: 1px solid #E5E7EB;
|
||
padding: 12px 18px;
|
||
background: #FAFAFA;
|
||
}
|
||
.chat-quickbtns {
|
||
display: flex; gap: 6px;
|
||
margin-bottom: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.qbtn {
|
||
background: #fff;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 14px;
|
||
padding: 4px 10px;
|
||
font-size: 11px;
|
||
color: #6B7280;
|
||
cursor: pointer;
|
||
}
|
||
.qbtn:hover { border-color: #2E75B6; color: #2E75B6; }
|
||
.chat-input {
|
||
display: flex; gap: 8px;
|
||
align-items: center;
|
||
}
|
||
.chat-input textarea {
|
||
flex: 1;
|
||
height: 38px; padding: 10px 12px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
resize: none;
|
||
line-height: 1.4;
|
||
}
|
||
.chat-input textarea:focus { border-color: #2E75B6; outline: none; }
|
||
|
||
/* ========== PAGE 3: PREDICTION ========== */
|
||
.pred-input-card {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.pred-scenes {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.scene-chip {
|
||
padding: 10px 6px;
|
||
text-align: center;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
color: #4B5563;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
line-height: 1.3;
|
||
}
|
||
.scene-chip:hover { border-color: #2E75B6; }
|
||
.scene-chip.active {
|
||
background: #2E75B6;
|
||
color: #fff;
|
||
border-color: #2E75B6;
|
||
font-weight: 500;
|
||
}
|
||
.scene-chip i { display: block; font-size: 18px; margin-bottom: 4px; }
|
||
|
||
.pred-form {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-row { display: flex; flex-direction: column; gap: 4px; }
|
||
.form-row label { font-size: 12px; color: #6B7280; }
|
||
.form-row input, .form-row select {
|
||
height: 34px; padding: 0 10px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
background: #fff;
|
||
}
|
||
.form-row input:focus, .form-row select:focus {
|
||
outline: none; border-color: #2E75B6;
|
||
}
|
||
|
||
/* 三档方案 */
|
||
.pred-results {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.pred-result-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 1px solid;
|
||
}
|
||
.pred-result-card .head {
|
||
padding: 14px 16px;
|
||
color: #fff;
|
||
}
|
||
.pred-result-card .head .nm {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 2px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.pred-result-card .head .sub { font-size: 11px; opacity: 0.85; }
|
||
.pred-result-card .amt-block {
|
||
padding: 18px 16px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
}
|
||
.pred-result-card .amt {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
.pred-result-card .amt-label {
|
||
font-size: 11px;
|
||
color: #6B7280;
|
||
margin-top: 6px;
|
||
}
|
||
.pred-result-card .body { padding: 14px 16px; }
|
||
.pred-result-card .meta { font-size: 12px; color: #4B5563; margin-bottom: 10px; }
|
||
.pred-result-card .meta strong { font-weight: 600; }
|
||
.pred-result-card ul { padding-left: 18px; margin: 8px 0; font-size: 12px; color: #4B5563; }
|
||
.pred-result-card ul li { margin: 4px 0; line-height: 1.5; }
|
||
.pred-result-card .foot {
|
||
padding: 10px 16px;
|
||
background: #FAFAFA;
|
||
border-top: 1px solid #F3F4F6;
|
||
display: flex; gap: 6px;
|
||
}
|
||
.pred-red { border-color: #FCA5A5; }
|
||
.pred-red .head { background: linear-gradient(135deg, #DC2626, #991B1B); }
|
||
.pred-red .amt { color: #C00000; }
|
||
.pred-amber { border-color: #FCD34D; }
|
||
.pred-amber .head { background: linear-gradient(135deg, #F59E0B, #B45309); }
|
||
.pred-amber .amt { color: #B45309; }
|
||
.pred-green { border-color: #86EFAC; }
|
||
.pred-green .head { background: linear-gradient(135deg, #16A34A, #14532D); }
|
||
.pred-green .amt { color: #166534; }
|
||
|
||
.recommend-flag {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* ========== PAGE 4: WORKFORCE RISK MAP ========== */
|
||
.filter-bar {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 12px 18px;
|
||
margin-bottom: 14px;
|
||
display: flex; align-items: center; gap: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.filter-bar .label { font-size: 12px; color: #6B7280; }
|
||
.filter-bar select {
|
||
height: 32px; padding: 0 10px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
background: #fff;
|
||
}
|
||
.filter-stats {
|
||
display: flex; gap: 18px;
|
||
margin-left: auto;
|
||
font-size: 12px;
|
||
}
|
||
.filter-stats .it { display: flex; align-items: center; gap: 6px; color: #6B7280; }
|
||
.filter-stats .it strong { color: #1E2761; font-size: 14px; font-weight: 600; }
|
||
.filter-stats .it.r strong { color: #C00000; }
|
||
.filter-stats .it.y strong { color: #D97706; }
|
||
.filter-stats .it.g strong { color: #16A34A; }
|
||
|
||
table.staff {
|
||
width: 100%;
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
overflow: hidden;
|
||
}
|
||
table.staff th {
|
||
background: #F8FAFC;
|
||
text-align: left;
|
||
padding: 12px 14px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #4B5563;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
}
|
||
table.staff td {
|
||
padding: 12px 14px;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
color: #374151;
|
||
}
|
||
table.staff tr:last-child td { border-bottom: none; }
|
||
table.staff tr.hover-row:hover { background: #FAFAFA; cursor: pointer; }
|
||
.name-cell { display: flex; align-items: center; gap: 10px; }
|
||
.av-mini {
|
||
width: 30px; height: 30px;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
.av-mini.b1 { background: #2E75B6; }
|
||
.av-mini.b2 { background: #6366F1; }
|
||
.av-mini.b3 { background: #14B8A6; }
|
||
.av-mini.b4 { background: #EC4899; }
|
||
.av-mini.b5 { background: #F59E0B; }
|
||
.name-cell .ni { line-height: 1.3; }
|
||
.name-cell .ni .n { font-weight: 500; color: #1E2761; }
|
||
.name-cell .ni .e { font-size: 11px; color: #9CA3AF; }
|
||
|
||
.score-cell { display: flex; align-items: center; gap: 8px; }
|
||
.score-num-mini {
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
.score-bar {
|
||
width: 60px; height: 6px;
|
||
border-radius: 3px;
|
||
background: #F3F4F6;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.score-bar .f {
|
||
position: absolute; top: 0; left: 0;
|
||
height: 100%; border-radius: 3px;
|
||
}
|
||
.tag {
|
||
display: inline-flex; align-items: center; gap: 3px;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
font-size: 11px;
|
||
margin-right: 4px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.tag-r { background: #FEE2E2; color: #991B1B; }
|
||
.tag-y { background: #FEF3C7; color: #92400E; }
|
||
.tag-p { background: #EDE9FE; color: #6D28D9; }
|
||
.tag-b { background: #DBEAFE; color: #1E40AF; }
|
||
|
||
/* ========== PAGE 5: ARBITRATION EMERGENCY ========== */
|
||
.emerg-banner {
|
||
background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
padding: 24px 28px;
|
||
margin-bottom: 18px;
|
||
display: flex; align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.emerg-banner .icon {
|
||
width: 64px; height: 64px;
|
||
background: rgba(255,255,255,0.18);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 32px;
|
||
}
|
||
.emerg-banner .info { flex: 1; }
|
||
.emerg-banner h2 {
|
||
font-size: 20px; font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
.emerg-banner .desc { opacity: 0.9; font-size: 13px; }
|
||
.emerg-timer {
|
||
text-align: center;
|
||
background: rgba(0,0,0,0.2);
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
}
|
||
.emerg-timer .tm {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
font-family: 'SF Mono', Consolas, monospace;
|
||
}
|
||
.emerg-timer .lb { font-size: 11px; opacity: 0.85; margin-top: 2px; }
|
||
|
||
/* 4步进度 */
|
||
.emerg-steps {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.step-list { display: flex; gap: 8px; }
|
||
.step {
|
||
flex: 1;
|
||
padding: 14px 12px;
|
||
border-radius: 6px;
|
||
border: 1px solid #E5E7EB;
|
||
background: #FAFAFA;
|
||
position: relative;
|
||
}
|
||
.step.done { background: #F0FDF4; border-color: #BBF7D0; }
|
||
.step.current { background: #FFFBEB; border-color: #FCD34D; }
|
||
.step.current::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px; left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 30%; height: 2px;
|
||
background: #F59E0B;
|
||
}
|
||
.step .hd {
|
||
display: flex; align-items: center; gap: 6px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.step .num {
|
||
width: 22px; height: 22px;
|
||
background: #E5E7EB;
|
||
color: #6B7280;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 11px; font-weight: 600;
|
||
}
|
||
.step.done .num { background: #16A34A; color: #fff; }
|
||
.step.current .num { background: #F59E0B; color: #fff; }
|
||
.step .nm { font-size: 12px; font-weight: 600; color: #1E2761; }
|
||
.step .time { font-size: 10px; color: #9CA3AF; margin-left: auto; }
|
||
.step .desc { font-size: 11px; color: #6B7280; line-height: 1.5; }
|
||
|
||
/* 5问诊断 */
|
||
.diag-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.diag-item {
|
||
padding: 12px 14px;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 6px;
|
||
background: #FAFAFA;
|
||
}
|
||
.diag-item.answered { background: #F0FDF4; border-color: #BBF7D0; }
|
||
.diag-q {
|
||
font-size: 12px; color: #6B7280;
|
||
margin-bottom: 4px;
|
||
}
|
||
.diag-q strong { color: #1E2761; margin-right: 4px; }
|
||
.diag-a {
|
||
font-size: 13px; color: #1E2761; font-weight: 500;
|
||
}
|
||
.diag-a.input {
|
||
background: #fff;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
border: 1px solid #E0E6ED;
|
||
color: #9CA3AF;
|
||
font-weight: normal;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 证据链面板 */
|
||
.evid-list { display: flex; flex-direction: column; gap: 8px; }
|
||
.evid-item {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px;
|
||
background: #FAFAFA;
|
||
border-radius: 6px;
|
||
}
|
||
.evid-item .ie { color: #2E75B6; }
|
||
.evid-item .nm { flex: 1; font-size: 13px; color: #1E2761; }
|
||
.evid-item .st {
|
||
font-size: 11px;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
}
|
||
.evid-item .st.ok { background: #DCFCE7; color: #166534; }
|
||
.evid-item .st.warn { background: #FEF3C7; color: #92400E; }
|
||
.evid-item .st.miss { background: #FEE2E2; color: #991B1B; }
|
||
|
||
/* ========== PAGE: FILE REVIEW (文件审查) ========== */
|
||
.fr-header {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 14px 18px;
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
}
|
||
.fr-file-info { display: flex; align-items: center; gap: 12px; }
|
||
.fr-file-icon {
|
||
width: 44px; height: 44px;
|
||
background: #EAF2F9;
|
||
color: #2E75B6;
|
||
border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
}
|
||
.fr-file-name { font-size: 14px; font-weight: 500; color: #1E2761; }
|
||
.fr-file-meta { font-size: 11px; color: #6B7280; margin-top: 2px; }
|
||
.fr-summary { display: flex; gap: 16px; margin-left: 16px; }
|
||
.fr-stat {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 13px; color: #4B5563;
|
||
}
|
||
.fr-stat .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
.fr-stat.r .dot { background: #C00000; }
|
||
.fr-stat.y .dot { background: #F0B429; }
|
||
.fr-stat.g .dot { background: #16A34A; }
|
||
.fr-stat strong { font-size: 16px; font-weight: 700; color: #1E2761; }
|
||
.fr-stat.r strong { color: #C00000; }
|
||
.fr-stat.y strong { color: #D97706; }
|
||
.fr-stat.g strong { color: #16A34A; }
|
||
|
||
.fr-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 14px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.fr-left, .fr-right {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 720px;
|
||
}
|
||
.fr-doc-toolbar {
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
background: #FAFAFA;
|
||
font-size: 12px;
|
||
color: #1E2761;
|
||
font-weight: 500;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.fr-doc {
|
||
padding: 22px 28px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
line-height: 1.85;
|
||
font-size: 13px;
|
||
color: #1F2937;
|
||
}
|
||
.fr-doc .doc-title { font-size: 18px; font-weight: 600; text-align: center; color: #1E2761; margin-bottom: 4px; }
|
||
.fr-doc .doc-sub { font-size: 11px; text-align: center; color: #6B7280; margin-bottom: 18px; }
|
||
.fr-doc .doc-h { font-weight: 600; color: #1E2761; margin-top: 14px; margin-bottom: 4px; font-size: 14px; }
|
||
.fr-doc p { margin-bottom: 6px; }
|
||
.hl { padding: 1px 4px; border-radius: 3px; cursor: pointer; position: relative; }
|
||
.hl-r { background: #FEE2E2; color: #991B1B; border-bottom: 2px solid #C00000; }
|
||
.hl-y { background: #FEF3C7; color: #92400E; border-bottom: 2px solid #F0B429; }
|
||
.hl-g { background: #DCFCE7; color: #166534; border-bottom: 2px solid #16A34A; }
|
||
.hl:hover { filter: brightness(0.95); }
|
||
|
||
.fr-risk-tabs {
|
||
display: flex; gap: 0;
|
||
padding: 10px 14px 0;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
background: #FAFAFA;
|
||
}
|
||
.fr-risk-tab {
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
color: #6B7280;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
margin-right: 4px;
|
||
font-weight: 500;
|
||
}
|
||
.fr-risk-tab.active { color: #2E75B6; border-bottom-color: #2E75B6; }
|
||
.fr-right > div:not(.fr-risk-tabs) { padding: 14px; overflow-y: auto; flex: 1; }
|
||
.fr-right { padding: 0; }
|
||
.fr-right > .fr-risk-tabs { flex-shrink: 0; }
|
||
.fr-right { overflow: hidden; }
|
||
.fr-right { display: flex; flex-direction: column; }
|
||
|
||
.risk-card {
|
||
background: #fff;
|
||
border: 1px solid;
|
||
border-radius: 6px;
|
||
padding: 12px 14px;
|
||
margin-bottom: 10px;
|
||
border-left-width: 3px;
|
||
}
|
||
.risk-r { border-color: #FCA5A5; border-left-color: #C00000; }
|
||
.risk-y { border-color: #FCD34D; border-left-color: #F0B429; }
|
||
.risk-g { border-color: #86EFAC; border-left-color: #16A34A; }
|
||
.risk-head {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin-bottom: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.risk-tag {
|
||
font-size: 11px;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
font-weight: 500;
|
||
}
|
||
.risk-tag.r { background: #FEE2E2; color: #991B1B; }
|
||
.risk-tag.y { background: #FEF3C7; color: #92400E; }
|
||
.risk-tag.g { background: #DCFCE7; color: #166534; }
|
||
.risk-loc { font-size: 12px; color: #1E2761; font-weight: 500; }
|
||
.risk-cite {
|
||
margin-left: auto;
|
||
font-size: 11px;
|
||
color: #6B7280;
|
||
background: #F3F4F6;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
}
|
||
.risk-orig {
|
||
background: #FAFAFA;
|
||
border-radius: 4px;
|
||
padding: 8px 10px;
|
||
font-size: 12px;
|
||
color: #4B5563;
|
||
margin-bottom: 8px;
|
||
line-height: 1.6;
|
||
}
|
||
.risk-orig-label { color: #9CA3AF; margin-right: 4px; }
|
||
.risk-issue {
|
||
font-size: 12px;
|
||
color: #1E2761;
|
||
line-height: 1.65;
|
||
margin-bottom: 10px;
|
||
}
|
||
.risk-fix {
|
||
background: #F0F9FF;
|
||
border: 1px dashed #93C5FD;
|
||
border-radius: 4px;
|
||
padding: 8px 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.risk-fix-label { font-size: 11px; color: #1E40AF; font-weight: 500; margin-bottom: 4px; }
|
||
.risk-fix-text { font-size: 12px; color: #1E2761; line-height: 1.6; }
|
||
.risk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
|
||
|
||
.fr-foot {
|
||
background: #F8FAFC;
|
||
border: 1px solid #E0E6ED;
|
||
border-radius: 8px;
|
||
padding: 14px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* ========== PAGE: LAWYER (在线律师) ========== */
|
||
.tier-banner {
|
||
display: flex; align-items: center;
|
||
gap: 10px;
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 18px 22px;
|
||
}
|
||
.tier-block {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 10px 8px;
|
||
border-radius: 8px;
|
||
}
|
||
.tier-1 { background: #EAF2F9; }
|
||
.tier-2 { background: #FEF3C7; }
|
||
.tier-3 { background: linear-gradient(135deg, #FEE2E2, #FED7D7); }
|
||
.tier-num { font-size: 32px; font-weight: 700; line-height: 1; }
|
||
.tier-1 .tier-num { color: #1E40AF; }
|
||
.tier-2 .tier-num { color: #92400E; }
|
||
.tier-3 .tier-num { color: #991B1B; }
|
||
.tier-name { font-size: 14px; font-weight: 600; margin-top: 6px; color: #1E2761; }
|
||
.tier-desc { font-size: 11px; color: #6B7280; margin-top: 4px; line-height: 1.5; }
|
||
.tier-arrow {
|
||
font-size: 22px; color: #9CA3AF; font-weight: 300;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lawyer-card {
|
||
display: flex; align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.lawyer-card.highlight {
|
||
border-color: #16A34A;
|
||
background: #F0FDF4;
|
||
}
|
||
.lawyer-av {
|
||
width: 44px; height: 44px;
|
||
border-radius: 8px;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
.lawyer-info { flex: 1; min-width: 0; }
|
||
.lawyer-name {
|
||
font-size: 14px; font-weight: 600; color: #1E2761;
|
||
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
|
||
margin-bottom: 4px;
|
||
}
|
||
.lawyer-tag {
|
||
font-size: 10px;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
background: #EAF2F9;
|
||
color: #1E40AF;
|
||
font-weight: 500;
|
||
}
|
||
.lawyer-tag.gold { background: #FEF3C7; color: #92400E; }
|
||
.lawyer-tags { font-size: 11px; color: #6B7280; margin-bottom: 4px; }
|
||
.lawyer-stats { font-size: 11px; color: #4B5563; }
|
||
.lawyer-stats .g { color: #16A34A; font-weight: 500; }
|
||
.lawyer-status {
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
font-size: 11px;
|
||
min-width: 90px;
|
||
}
|
||
.lawyer-status .dot {
|
||
display: inline-block;
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
margin-right: 4px;
|
||
vertical-align: 1px;
|
||
}
|
||
.lawyer-status.online .dot { background: #16A34A; }
|
||
.lawyer-status.online { color: #16A34A; }
|
||
.lawyer-status.busy .dot { background: #F0B429; }
|
||
.lawyer-status.busy { color: #D97706; }
|
||
.lawyer-status.offline .dot { background: #9CA3AF; }
|
||
.lawyer-status.offline { color: #6B7280; }
|
||
|
||
.consult-record {
|
||
padding: 12px;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.consult-head {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.consult-status {
|
||
font-size: 11px;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
font-weight: 500;
|
||
}
|
||
.consult-status.active { background: #FEF3C7; color: #92400E; }
|
||
.consult-status.done { background: #DCFCE7; color: #166534; }
|
||
.consult-time { font-size: 11px; color: #9CA3AF; margin-left: auto; }
|
||
.consult-title { font-size: 13px; color: #1E2761; font-weight: 500; margin-bottom: 6px; }
|
||
.consult-meta {
|
||
font-size: 11px; color: #6B7280;
|
||
display: flex; gap: 12px;
|
||
}
|
||
.consult-meta i { font-size: 13px; margin-right: 3px; vertical-align: -1px; }
|
||
.consult-meta .g { color: #16A34A; }
|
||
|
||
.plan-card {
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
position: relative;
|
||
}
|
||
.plan-card.recommend {
|
||
border-color: #2E75B6;
|
||
border-width: 2px;
|
||
background: #F0F9FF;
|
||
}
|
||
.plan-tag {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 16px;
|
||
background: #2E75B6;
|
||
color: #fff;
|
||
font-size: 11px;
|
||
padding: 3px 10px;
|
||
border-radius: 10px;
|
||
font-weight: 500;
|
||
}
|
||
.plan-name { font-size: 14px; font-weight: 600; color: #1E2761; margin-bottom: 8px; }
|
||
.plan-price { font-size: 28px; font-weight: 700; color: #1E2761; line-height: 1; }
|
||
.plan-price .unit { font-size: 16px; vertical-align: 6px; }
|
||
.plan-price .cycle { font-size: 13px; color: #6B7280; font-weight: normal; }
|
||
.plan-desc { font-size: 12px; color: #4B5563; margin-top: 8px; line-height: 1.6; }
|
||
|
||
/* ========== PAGE: COMPLIANCE CENTER (合规中心改版) ========== */
|
||
.cc-top {
|
||
background: linear-gradient(135deg, #1E2761 0%, #2E4187 100%);
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
padding: 22px 26px;
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.cc-score-block { display: flex; align-items: center; gap: 16px; flex: 1; }
|
||
.cc-score-circle {
|
||
width: 90px; height: 90px;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
.cc-score-num {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 28px; font-weight: 700;
|
||
}
|
||
.cc-actions { display: flex; gap: 8px; }
|
||
|
||
.cc-dimensions {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.cc-dim {
|
||
background: #fff;
|
||
border: 1px solid;
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.cc-dim:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
.cc-dim-r { border-color: #FCA5A5; background: #FFFAFA; }
|
||
.cc-dim-y { border-color: #FCD34D; background: #FFFBF6; }
|
||
.cc-dim-g { border-color: #BBF7D0; background: #F7FEF9; }
|
||
.cc-dim-head {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 13px; color: #1E2761; font-weight: 500;
|
||
margin-bottom: 8px;
|
||
}
|
||
.cc-dim-head i { font-size: 16px; }
|
||
.cc-dim-score {
|
||
font-size: 26px; font-weight: 700;
|
||
color: #1E2761; line-height: 1;
|
||
}
|
||
.cc-dim-score span { font-size: 12px; color: #9CA3AF; font-weight: normal; }
|
||
.cc-dim-bar {
|
||
width: 100%; height: 4px;
|
||
background: rgba(0,0,0,0.06);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
margin-top: 8px;
|
||
}
|
||
.cc-dim-bar span {
|
||
display: block; height: 100%;
|
||
}
|
||
.cc-dim-todo {
|
||
font-size: 11px; color: #4B5563;
|
||
margin-top: 6px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.cc-dot {
|
||
width: 7px; height: 7px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
.cc-dot.r { background: #C00000; }
|
||
.cc-dot.y { background: #F0B429; }
|
||
.cc-dot.g { background: #16A34A; }
|
||
|
||
.todo-list { display: flex; flex-direction: column; gap: 8px; }
|
||
.todo-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 12px 14px;
|
||
border: 1px solid;
|
||
border-radius: 6px;
|
||
border-left-width: 3px;
|
||
}
|
||
.todo-r { border-color: #FCA5A5; border-left-color: #C00000; background: #FFFAFA; }
|
||
.todo-y { border-color: #FCD34D; border-left-color: #F0B429; background: #FFFBF6; }
|
||
.todo-g { border-color: #BBF7D0; border-left-color: #16A34A; background: #F7FEF9; }
|
||
.todo-prio {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 3px 8px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
.todo-r .todo-prio { background: #FEE2E2; color: #C00000; }
|
||
.todo-y .todo-prio { background: #FEF3C7; color: #D97706; }
|
||
.todo-g .todo-prio { background: #DCFCE7; color: #166534; }
|
||
.todo-main { flex: 1; }
|
||
.todo-text { font-size: 14px; color: #1E2761; font-weight: 500; margin-bottom: 2px; }
|
||
.todo-sub { font-size: 11px; color: #6B7280; line-height: 1.5; }
|
||
.todo-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
|
||
.todo-deadline { font-size: 11px; color: #6B7280; }
|
||
|
||
.cc-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
background: #FAFAFA;
|
||
padding: 0 14px;
|
||
}
|
||
.cc-tab {
|
||
padding: 14px 18px;
|
||
font-size: 13px;
|
||
color: #6B7280;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
font-weight: 500;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
margin-bottom: -1px;
|
||
}
|
||
.cc-tab i { font-size: 16px; }
|
||
.cc-tab:hover { color: #1E2761; }
|
||
.cc-tab.active {
|
||
color: #2E75B6;
|
||
border-bottom-color: #2E75B6;
|
||
background: #fff;
|
||
}
|
||
.cc-tab-num {
|
||
font-size: 11px;
|
||
background: #E5E7EB;
|
||
color: #4B5563;
|
||
padding: 1px 6px;
|
||
border-radius: 8px;
|
||
font-weight: 500;
|
||
}
|
||
.cc-tab.active .cc-tab-num { background: #EAF2F9; color: #2E75B6; }
|
||
.cc-panel { display: none; }
|
||
.cc-panel.active { display: block; }
|
||
|
||
.cc-panel-bar {
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.cc-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
|
||
.chip {
|
||
padding: 4px 10px;
|
||
border-radius: 12px;
|
||
background: #F5F8FA;
|
||
color: #4B5563;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
}
|
||
.chip:hover { background: #EAF2F9; }
|
||
.chip.active { background: #2E75B6; color: #fff; }
|
||
.chip.danger { background: #FEE2E2; color: #991B1B; }
|
||
|
||
.cc-table {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
.cc-table th {
|
||
background: #FAFAFA;
|
||
text-align: left;
|
||
padding: 10px 14px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #4B5563;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
}
|
||
.cc-table td {
|
||
padding: 12px 14px;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
color: #374151;
|
||
}
|
||
.cc-table tr:last-child td { border-bottom: none; }
|
||
.cc-table tr:hover { background: #FAFAFA; }
|
||
|
||
.progress-mini {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
.progress-step {
|
||
width: 20px; height: 20px;
|
||
border-radius: 50%;
|
||
background: #F3F4F6;
|
||
color: #9CA3AF;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.progress-step.done { background: #16A34A; color: #fff; }
|
||
.progress-step.current { background: #F0B429; color: #fff; box-shadow: 0 0 0 3px rgba(240,180,41,0.2); }
|
||
.progress-line {
|
||
flex: 1;
|
||
height: 2px;
|
||
background: #F3F4F6;
|
||
min-width: 16px;
|
||
}
|
||
.progress-line.done { background: #16A34A; }
|
||
|
||
.cc-metric {
|
||
background: #FAFAFA;
|
||
border-radius: 6px;
|
||
padding: 14px;
|
||
text-align: center;
|
||
}
|
||
.cc-metric-val {
|
||
font-size: 26px; font-weight: 700;
|
||
color: #1E2761;
|
||
line-height: 1;
|
||
}
|
||
.cc-metric-val.g { color: #16A34A; }
|
||
.cc-metric-val.y { color: #D97706; }
|
||
.cc-metric-val.r { color: #C00000; }
|
||
.cc-metric-lbl { font-size: 12px; color: #4B5563; margin-top: 6px; }
|
||
.cc-metric-sub { font-size: 11px; color: #9CA3AF; margin-top: 4px; }
|
||
.cc-metric-sub.g { color: #16A34A; }
|
||
.cc-metric-sub.r { color: #C00000; }
|
||
|
||
.cc-template-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.cc-template-card {
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 6px;
|
||
padding: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
text-align: left;
|
||
}
|
||
.cc-template-card:hover {
|
||
border-color: #2E75B6;
|
||
transform: translateY(-1px);
|
||
}
|
||
.cc-template-card .ie {
|
||
width: 36px; height: 36px;
|
||
border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.cc-template-card .nm { font-size: 13px; font-weight: 500; color: #1E2761; }
|
||
.cc-template-card .meta { font-size: 11px; color: #6B7280; margin-top: 2px; }
|
||
|
||
/* ========== VOICE BUTTON ========== */
|
||
.voice-btn {
|
||
margin-left: auto;
|
||
margin-right: 6px;
|
||
width: 28px; height: 28px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #DC2626, #991B1B);
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: all 0.2s;
|
||
}
|
||
.voice-btn:hover { transform: scale(1.08); }
|
||
.voice-btn::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -4px;
|
||
border-radius: 50%;
|
||
border: 2px solid #DC2626;
|
||
opacity: 0;
|
||
animation: voice-pulse 2s ease-out infinite;
|
||
}
|
||
@keyframes voice-pulse {
|
||
0% { transform: scale(0.9); opacity: 0.5; }
|
||
100% { transform: scale(1.5); opacity: 0; }
|
||
}
|
||
/* 浮动按钮的语音 */
|
||
.floating-voice {
|
||
position: absolute;
|
||
bottom: 58px; right: 50%;
|
||
transform: translateX(50%);
|
||
width: 36px; height: 36px;
|
||
background: linear-gradient(135deg, #DC2626, #991B1B);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
border: 2px solid #fff;
|
||
box-shadow: 0 2px 8px rgba(220,38,38,0.4);
|
||
}
|
||
|
||
/* ========== PAGE: EASY FLOW (AI 智能办事) ========== */
|
||
.ef-banner {
|
||
background: linear-gradient(135deg, #1E2761 0%, #2E4187 100%);
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
padding: 22px 26px;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28px;
|
||
}
|
||
.ef-banner-text { flex: 1; }
|
||
.ef-banner-text h2 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
}
|
||
.ef-banner-text .desc { opacity: 0.85; font-size: 13px; line-height: 1.7; }
|
||
.ef-banner-stats {
|
||
display: flex;
|
||
gap: 18px;
|
||
}
|
||
.ef-stat-block {
|
||
background: rgba(255,255,255,0.12);
|
||
border-radius: 8px;
|
||
padding: 14px 18px;
|
||
text-align: center;
|
||
min-width: 100px;
|
||
}
|
||
.ef-stat-block .n {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
color: #F0B429;
|
||
}
|
||
.ef-stat-block .l { font-size: 11px; opacity: 0.85; margin-top: 4px; }
|
||
|
||
/* 改造对比演示 */
|
||
.ef-demo {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
}
|
||
.ef-demo-head {
|
||
padding: 14px 18px;
|
||
background: #FAFAFA;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.ef-demo-head .nm { font-size: 15px; font-weight: 600; color: #1E2761; }
|
||
.ef-demo-head .tag {
|
||
background: #FEE2E2; color: #991B1B;
|
||
font-size: 11px; padding: 2px 8px; border-radius: 3px;
|
||
}
|
||
.ef-demo-body { display: grid; grid-template-columns: 1fr 60px 1fr; }
|
||
.ef-demo-side { padding: 20px 22px; }
|
||
.ef-old { background: #FEFAFA; border-right: 1px solid #F3F4F6; }
|
||
.ef-new { background: #F7FEF9; }
|
||
.ef-side-label {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 13px; font-weight: 600;
|
||
padding: 3px 10px;
|
||
border-radius: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.ef-old .ef-side-label { background: #FEE2E2; color: #991B1B; }
|
||
.ef-new .ef-side-label { background: #DCFCE7; color: #166534; }
|
||
.ef-step {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 9px 12px;
|
||
margin-bottom: 6px;
|
||
font-size: 12px;
|
||
color: #4B5563;
|
||
border: 1px solid #F3F4F6;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.ef-step .ef-num {
|
||
width: 18px; height: 18px;
|
||
border-radius: 50%;
|
||
background: #F3F4F6;
|
||
color: #6B7280;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.ef-old .ef-step .ef-num { background: #FEE2E2; color: #991B1B; }
|
||
.ef-new .ef-step .ef-num { background: #DCFCE7; color: #166534; }
|
||
|
||
.ef-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #FAFAFA;
|
||
font-size: 28px;
|
||
color: #2E75B6;
|
||
}
|
||
|
||
.ef-time {
|
||
margin-top: 14px;
|
||
padding-top: 12px;
|
||
border-top: 1px dashed #E5E7EB;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
}
|
||
.ef-old .ef-time { color: #991B1B; }
|
||
.ef-new .ef-time { color: #166534; }
|
||
.ef-time strong { font-size: 16px; }
|
||
|
||
/* AI 对话演示框 */
|
||
.ef-chat-demo {
|
||
background: #fff;
|
||
border: 1px solid #DCFCE7;
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.ef-chat-msg {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
align-items: flex-start;
|
||
}
|
||
.ef-chat-msg:last-child { margin-bottom: 0; }
|
||
.ef-chat-av {
|
||
width: 26px; height: 26px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
.ef-chat-msg.u .ef-chat-av { background: #6B7280; }
|
||
.ef-chat-msg.a .ef-chat-av { background: linear-gradient(135deg, #2E75B6, #1E2761); }
|
||
.ef-chat-bubble {
|
||
flex: 1;
|
||
background: #F5F8FA;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
color: #1F2937;
|
||
line-height: 1.65;
|
||
}
|
||
.ef-chat-msg.u .ef-chat-bubble { background: #EAF2F9; color: #1E40AF; }
|
||
.ef-chat-mic {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
color: #C00000;
|
||
font-size: 11px;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.ef-checklist { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #BBF7D0; }
|
||
.ef-checklist-item {
|
||
font-size: 11px; color: #166534;
|
||
margin: 3px 0;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.ef-checklist-item i { color: #16A34A; }
|
||
|
||
/* 6 个流程改造卡片 */
|
||
.ef-flows {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.ef-flow-card {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 14px;
|
||
transition: all 0.15s;
|
||
cursor: pointer;
|
||
}
|
||
.ef-flow-card:hover {
|
||
border-color: #2E75B6;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
|
||
}
|
||
.ef-flow-card.hot {
|
||
border-color: #FCD34D;
|
||
background: linear-gradient(135deg, #FFFEF9 0%, #FFFAEF 100%);
|
||
}
|
||
.ef-flow-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.ef-flow-head .ie {
|
||
width: 32px; height: 32px;
|
||
background: #EAF2F9;
|
||
color: #2E75B6;
|
||
border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
}
|
||
.ef-flow-head .nm {
|
||
font-size: 14px; font-weight: 600; color: #1E2761;
|
||
}
|
||
.ef-flow-head .hot-tag {
|
||
background: #FEE2E2; color: #991B1B;
|
||
font-size: 10px; padding: 1px 6px; border-radius: 3px;
|
||
margin-left: auto;
|
||
}
|
||
.ef-flow-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.ef-flow-side { text-align: center; padding: 8px; border-radius: 6px; }
|
||
.ef-flow-side.old { background: #FEE2E2; }
|
||
.ef-flow-side.new { background: #DCFCE7; }
|
||
.ef-flow-side .num { font-size: 18px; font-weight: 700; line-height: 1; }
|
||
.ef-flow-side.old .num { color: #991B1B; }
|
||
.ef-flow-side.new .num { color: #166534; }
|
||
.ef-flow-side .label { font-size: 10px; color: #6B7280; margin-top: 2px; }
|
||
.ef-flow-side .lbl-old { color: #991B1B; }
|
||
.ef-flow-side .lbl-new { color: #166534; }
|
||
.ef-arrow-mini { color: #9CA3AF; font-size: 16px; }
|
||
.ef-flow-foot {
|
||
font-size: 11px; color: #6B7280;
|
||
padding-top: 8px;
|
||
border-top: 1px dashed #F3F4F6;
|
||
display: flex; justify-content: space-between;
|
||
}
|
||
.ef-flow-foot strong { color: #16A34A; }
|
||
|
||
/* 5 大原则 */
|
||
.ef-principles {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 18px 20px;
|
||
margin-top: 16px;
|
||
}
|
||
.ef-principle-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 14px;
|
||
margin-top: 12px;
|
||
}
|
||
.ef-principle {
|
||
text-align: center;
|
||
padding: 14px 10px;
|
||
background: #FAFAFA;
|
||
border-radius: 8px;
|
||
}
|
||
.ef-principle .ie {
|
||
width: 40px; height: 40px;
|
||
background: #EAF2F9;
|
||
color: #2E75B6;
|
||
border-radius: 8px;
|
||
margin: 0 auto 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
}
|
||
.ef-principle .nm { font-size: 13px; font-weight: 600; color: #1E2761; }
|
||
.ef-principle .desc { font-size: 11px; color: #6B7280; margin-top: 4px; line-height: 1.5; }
|
||
|
||
/* ========== PAGE: E-SIGN (电子签中心) ========== */
|
||
.es-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.es-stat {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 16px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.es-stat .ie {
|
||
width: 44px; height: 44px;
|
||
border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
.es-stat .ie.b { background: #EAF2F9; color: #2E75B6; }
|
||
.es-stat .ie.g { background: #DCFCE7; color: #166534; }
|
||
.es-stat .ie.y { background: #FEF3C7; color: #D97706; }
|
||
.es-stat .ie.r { background: #FEE2E2; color: #C00000; }
|
||
.es-stat .info { min-width: 0; }
|
||
.es-stat .n { font-size: 22px; font-weight: 700; color: #1E2761; line-height: 1; }
|
||
.es-stat .l { font-size: 11px; color: #6B7280; margin-top: 4px; }
|
||
|
||
.es-quickactions {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.es-action-card {
|
||
background: linear-gradient(135deg, #fff 0%, #FAFAFA 100%);
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.es-action-card:hover {
|
||
border-color: #2E75B6;
|
||
box-shadow: 0 4px 12px rgba(46,117,182,0.1);
|
||
}
|
||
.es-action-card .ie {
|
||
width: 36px; height: 36px;
|
||
border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
}
|
||
.es-action-card.primary .ie { background: linear-gradient(135deg, #2E75B6, #1E2761); }
|
||
.es-action-card.secondary .ie { background: linear-gradient(135deg, #F59E0B, #B45309); }
|
||
.es-action-card.tertiary .ie { background: linear-gradient(135deg, #16A34A, #14532D); }
|
||
.es-action-card .nm {
|
||
font-size: 14px; font-weight: 600; color: #1E2761;
|
||
margin-bottom: 4px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.es-action-card .nm .tag {
|
||
background: #FEE2E2; color: #991B1B;
|
||
font-size: 10px; padding: 1px 6px; border-radius: 3px;
|
||
font-weight: 500;
|
||
}
|
||
.es-action-card .desc { font-size: 11px; color: #6B7280; line-height: 1.55; }
|
||
|
||
.es-list-card {
|
||
background: #fff;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.es-list-header {
|
||
padding: 12px 18px;
|
||
background: #FAFAFA;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.es-item {
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.es-item:last-child { border-bottom: none; }
|
||
.es-item:hover { background: #FAFAFA; }
|
||
.es-item-icon {
|
||
width: 36px; height: 36px;
|
||
border-radius: 6px;
|
||
background: #EAF2F9;
|
||
color: #2E75B6;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
.es-item-info { flex: 1; min-width: 0; }
|
||
.es-item-title {
|
||
font-size: 14px; font-weight: 500; color: #1E2761;
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.es-item-meta { font-size: 11px; color: #6B7280; display: flex; gap: 12px; }
|
||
|
||
.es-progress {
|
||
display: flex; align-items: center; gap: 8px;
|
||
min-width: 200px;
|
||
}
|
||
.es-progress-bar {
|
||
flex: 1;
|
||
height: 6px;
|
||
background: #F3F4F6;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.es-progress-bar .f {
|
||
position: absolute; left: 0; top: 0; height: 100%;
|
||
border-radius: 3px;
|
||
}
|
||
.es-progress-bar .f.g { background: #16A34A; }
|
||
.es-progress-bar .f.y { background: #F0B429; }
|
||
.es-progress-bar .f.r { background: #C00000; }
|
||
.es-progress-text { font-size: 11px; color: #4B5563; min-width: 40px; }
|
||
|
||
.es-status {
|
||
font-size: 11px;
|
||
padding: 2px 8px;
|
||
border-radius: 3px;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
.es-status.signing { background: #FEF3C7; color: #92400E; }
|
||
.es-status.signed { background: #DCFCE7; color: #166534; }
|
||
.es-status.pending { background: #F3F4F6; color: #6B7280; }
|
||
.es-status.warning { background: #FEE2E2; color: #991B1B; }
|
||
|
||
.es-capabilities {
|
||
background: linear-gradient(135deg, #F0F9FF 0%, #FAFAFA 100%);
|
||
border: 1px solid #BFDBFE;
|
||
border-radius: 8px;
|
||
padding: 18px 22px;
|
||
margin-top: 14px;
|
||
}
|
||
.es-cap-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
}
|
||
.es-cap-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
.es-cap-icon {
|
||
width: 28px; height: 28px;
|
||
border-radius: 50%;
|
||
background: #2E75B6;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
.es-cap-text { font-size: 12px; color: #1E2761; line-height: 1.6; }
|
||
.es-cap-text strong { display: block; margin-bottom: 2px; font-size: 13px; }
|
||
|
||
/* ========== UTILITY ========== */
|
||
.hint { font-size: 12px; color: #6B7280; line-height: 1.6; }
|
||
.desc-text { font-size: 13px; color: #4B5563; line-height: 1.65; margin-bottom: 12px; }
|
||
.annotation {
|
||
background: #FEF3C7;
|
||
border: 1px dashed #F0B429;
|
||
color: #92400E;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
margin-bottom: 14px;
|
||
display: flex; align-items: flex-start; gap: 6px;
|
||
}
|
||
.annotation i { color: #F0B429; margin-top: 2px; }
|
||
|
||
/* 浮动白小侠 */
|
||
.floating-ai {
|
||
position: fixed;
|
||
bottom: 24px; right: 24px;
|
||
width: 56px; height: 56px;
|
||
background: linear-gradient(135deg, #2E75B6, #1E2761);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 16px rgba(46,117,182,0.4);
|
||
z-index: 100;
|
||
}
|
||
.floating-ai .badge {
|
||
position: absolute;
|
||
top: -2px; right: -2px;
|
||
background: #C00000;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
border: 2px solid #fff;
|
||
min-width: 18px;
|
||
text-align: center;
|
||
}
|
||
.floating-ai .label-pop {
|
||
position: absolute;
|
||
right: 64px;
|
||
bottom: 12px;
|
||
background: #1E2761;
|
||
color: #fff;
|
||
padding: 8px 14px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
.floating-ai .label-pop::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -8px; top: 50%;
|
||
transform: translateY(-50%);
|
||
border: 4px solid transparent;
|
||
border-left-color: #1E2761;
|
||
}
|
||
|
||
/* 文档版本提示 */
|
||
.doc-note {
|
||
background: #1E2761;
|
||
color: #fff;
|
||
padding: 14px 24px;
|
||
margin: -24px -28px 24px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-size: 13px;
|
||
}
|
||
.doc-note .l { font-weight: 500; }
|
||
.doc-note .l .badge { background: #F0B429; color: #1E2761; padding: 2px 8px; border-radius: 4px; margin-right: 8px; font-weight: 600; font-size: 11px; }
|
||
.doc-note .r { font-size: 11px; opacity: 0.7; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app">
|
||
|
||
<!-- ========== SIDEBAR ========== -->
|
||
<aside class="sidebar">
|
||
<div class="logo">
|
||
<div class="logo-icon">侠</div>
|
||
<div>
|
||
<div class="logo-text">白话用工侠</div>
|
||
<div class="logo-sub">AI 仲裁防御咨询</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="nav">
|
||
<!-- 一级：首页 -->
|
||
<div class="nav-item active" data-page="page-cockpit">
|
||
<i class="ti ti-shield-half-filled"></i>
|
||
<span>风险驾驶舱</span>
|
||
<span class="nav-badge">3</span>
|
||
</div>
|
||
|
||
<!-- 一级：白小侠 AI（可折叠分组） -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-ai">
|
||
<i class="ti ti-sparkles"></i>
|
||
<span>白小侠 AI</span>
|
||
<span class="nav-badge gold">NEW</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-ai">
|
||
<div class="nav-sub" data-page="page-ai">智能问答</div>
|
||
<div class="nav-sub" data-page="page-file-review">文件审查 <span class="nav-badge gold" style="font-size:9px;padding:1px 4px;">HOT</span></div>
|
||
<div class="nav-sub" data-page="page-prediction">判赔预测器</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：员工管理 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-staff">
|
||
<i class="ti ti-users"></i>
|
||
<span>员工管理</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-staff">
|
||
<div class="nav-sub" data-page="page-staff">全员风险地图 <span class="nav-badge gold" style="font-size:9px;padding:1px 4px;">AI</span></div>
|
||
<div class="nav-sub" data-page="page-onboard">入职管理</div>
|
||
<div class="nav-sub" data-page="page-archive">个人风险档案</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：合同与签署 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-contract">
|
||
<i class="ti ti-file-certificate"></i>
|
||
<span>合同与签署</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-contract">
|
||
<div class="nav-sub" data-page="page-contract">合同管理</div>
|
||
<div class="nav-sub" data-page="page-esign">电子签中心 <span class="nav-badge gold" style="font-size:9px;padding:1px 4px;">HOT</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：考勤与薪资 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-payroll">
|
||
<i class="ti ti-calendar-time"></i>
|
||
<span>考勤与薪资</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-payroll">
|
||
<div class="nav-sub" data-page="page-attendance">考勤确认</div>
|
||
<div class="nav-sub" data-page="page-payslip">工资条发布</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：合规中心 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-compliance">
|
||
<i class="ti ti-clipboard-check"></i>
|
||
<span>合规中心</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-compliance">
|
||
<div class="nav-sub" data-page="page-compliance">合规总览</div>
|
||
<div class="nav-sub" data-page="page-democracy">规章制度民主程序</div>
|
||
<div class="nav-sub" data-page="page-enterprise-text">企业文本库</div>
|
||
<div class="nav-sub" data-page="page-template-text">用工文本模板库</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：用工诊断 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-diag">
|
||
<i class="ti ti-stethoscope"></i>
|
||
<span>用工诊断</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-diag">
|
||
<div class="nav-sub" data-page="page-health-check">用工体检诊断</div>
|
||
<div class="nav-sub" data-page="page-bgcheck">背景调查</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：实用工具 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-tools">
|
||
<i class="ti ti-calculator"></i>
|
||
<span>实用工具</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-tools">
|
||
<div class="nav-sub" data-page="page-tool-shebao">五险一金计算器</div>
|
||
<div class="nav-sub" data-page="page-tool-medical">医疗期计算器</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：学习与服务 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-learn">
|
||
<i class="ti ti-school"></i>
|
||
<span>学习与服务</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-learn">
|
||
<div class="nav-sub" data-page="page-video">视频中心</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一级：通知管理 -->
|
||
<div class="nav-item" data-page="page-notice">
|
||
<i class="ti ti-bell-ringing"></i>
|
||
<span>通知管理</span>
|
||
</div>
|
||
|
||
<!-- 一级：系统设置 -->
|
||
<div class="nav-group">
|
||
<div class="nav-item nav-group-head" data-group="grp-sys">
|
||
<i class="ti ti-settings"></i>
|
||
<span>系统设置</span>
|
||
<i class="ti ti-chevron-down nav-caret"></i>
|
||
</div>
|
||
<div class="nav-group-body" id="grp-sys">
|
||
<div class="nav-sub" data-page="page-user-mgmt">用户管理</div>
|
||
<div class="nav-sub" data-page="page-syslog">系统日志</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section">关键报告</div>
|
||
<div class="nav-item" data-page="page-report" style="font-size: 13px;">
|
||
<i class="ti ti-report"></i>
|
||
<span>年度价值报告</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<i class="ti ti-headphones" style="font-size: 16px;"></i>
|
||
<span>专家热线 400-***</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ========== MAIN ========== -->
|
||
<div class="main">
|
||
<!-- TOPBAR -->
|
||
<div class="topbar">
|
||
<div class="ai-search-bar">
|
||
<div class="ai-search-icon">
|
||
<span>侠</span>
|
||
<span class="pulse"></span>
|
||
</div>
|
||
<div class="ai-search-content">
|
||
<div class="ai-search-label">
|
||
<span class="ai-name">问白小侠</span>
|
||
<span class="ai-tag">劳动法 AI 顾问</span>
|
||
<span class="ai-online">● 在线</span>
|
||
</div>
|
||
<div class="ai-search-input">
|
||
<i class="ti ti-sparkles" style="color:#2E75B6;"></i>
|
||
<span class="placeholder">员工怀孕能开除吗？或<u>拖入合同让 AI 审查</u>...</span>
|
||
<span class="voice-btn" title="语音输入"><i class="ti ti-microphone"></i></span>
|
||
<kbd>↵</kbd>
|
||
</div>
|
||
</div>
|
||
<div class="ai-search-actions">
|
||
<button class="ai-quick" data-jump="page-file-review"><i class="ti ti-file-upload"></i> 文件审查</button>
|
||
<button class="ai-quick" data-jump="page-prediction"><i class="ti ti-calculator"></i> 判赔预测</button>
|
||
</div>
|
||
</div>
|
||
<div class="topbar-icon" title="知识中心">
|
||
<i class="ti ti-book"></i>
|
||
</div>
|
||
<div class="topbar-icon" title="通知">
|
||
<i class="ti ti-bell"></i>
|
||
<span class="dot"></span>
|
||
</div>
|
||
<div class="user-chip">
|
||
<div class="avatar">李</div>
|
||
<div>
|
||
<div style="font-size: 13px; font-weight: 500; color: #1E2761;">李 HR</div>
|
||
<div style="font-size: 11px; color: #6B7280;">北京阳光科技</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTENT -->
|
||
<div class="content">
|
||
|
||
<div class="doc-note">
|
||
<div class="l"><span class="badge">原型</span>白话用工侠改造后系统 · 申请流程整合到首页 · 共 26 模块 · 点击左侧菜单切换</div>
|
||
<div class="r">PRD V1.3 配套原型</div>
|
||
</div>
|
||
|
||
<!-- ============================ -->
|
||
<!-- PAGE 1: 风险驾驶舱（首页） -->
|
||
<!-- ============================ -->
|
||
<div class="page active" id="page-cockpit">
|
||
<div class="page-title">
|
||
<h1>风险驾驶舱</h1>
|
||
<span class="crumb">· 您的用工合规健康仪表盘 · 数据更新于 1 分钟前</span>
|
||
</div>
|
||
|
||
<!-- 顶部 AI 预警横幅 -->
|
||
<div class="alert-banner">
|
||
<div class="icon"><i class="ti ti-alert-triangle"></i></div>
|
||
<div class="info">
|
||
<div class="info-title">⚠️ AI 预警 · 高优先级风险事件</div>
|
||
<div class="info-desc">
|
||
员工 <strong>"刘云"</strong> 将于 2026 年 1 月 15 日合同到期（剩 64 天），目前未上传新合同信息。
|
||
若不及时续签或办理离职，预计仲裁判赔区间 <strong style="color:#C00000;">¥18,400 — ¥36,800</strong>
|
||
（基于江苏地区类似判例 17 起）
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="btn">咨询白小侠</button>
|
||
<button class="btn danger">立即处理</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主三栏：评分 + 评分细项 + 价值看板 -->
|
||
<div class="row cols-3">
|
||
<!-- 风险评分卡 -->
|
||
<div class="score-card">
|
||
<div class="score-circle">
|
||
<svg viewBox="0 0 160 160" style="transform: rotate(-90deg);">
|
||
<circle cx="80" cy="80" r="70" stroke="rgba(255,255,255,0.15)" stroke-width="12" fill="none"></circle>
|
||
<circle cx="80" cy="80" r="70" stroke="#F0B429" stroke-width="12" fill="none"
|
||
stroke-dasharray="440" stroke-dashoffset="98" stroke-linecap="round"></circle>
|
||
</svg>
|
||
<div class="score-num">
|
||
<span class="n">78</span>
|
||
<span class="l">中等风险</span>
|
||
</div>
|
||
</div>
|
||
<div class="label">合规健康度评分（/100）</div>
|
||
<div class="trend">较上月 <strong>↑ +5 分</strong></div>
|
||
<div class="score-meta">
|
||
<div>
|
||
<strong>4</strong>
|
||
<span>风险点</span>
|
||
</div>
|
||
<div>
|
||
<strong>17</strong>
|
||
<span>合规检查</span>
|
||
</div>
|
||
<div>
|
||
<strong>3 项</strong>
|
||
<span>待处理</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 评分细项 -->
|
||
<div class="card score-detail-card">
|
||
<div class="card-title">
|
||
<i class="ti ti-list-details" style="color:#2E75B6;"></i>
|
||
评分细项
|
||
<span class="more">查看详情 →</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="label">合同管理</span>
|
||
<span class="bar"><span class="bar-fill yellow-bg" style="width:78%"></span></span>
|
||
<span class="num yellow">78</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="label">规章制度</span>
|
||
<span class="bar"><span class="bar-fill yellow-bg" style="width:65%"></span></span>
|
||
<span class="num yellow">65</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="label">考勤工资</span>
|
||
<span class="bar"><span class="bar-fill green-bg" style="width:82%"></span></span>
|
||
<span class="num green">82</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="label">员工档案</span>
|
||
<span class="bar"><span class="bar-fill red-bg" style="width:45%"></span></span>
|
||
<span class="num red">45</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="label">社保公积金</span>
|
||
<span class="bar"><span class="bar-fill green-bg" style="width:88%"></span></span>
|
||
<span class="num green">88</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 价值看板 -->
|
||
<div class="value-card">
|
||
<div style="display: flex; align-items: center; gap: 6px; color: #166534; font-size: 13px; font-weight: 500;">
|
||
<i class="ti ti-shield-check"></i> 本年度 AI 价值贡献
|
||
</div>
|
||
<div class="value-amount"><span class="unit">¥</span>128,400</div>
|
||
<div class="value-label">累计帮您规避潜在赔偿损失</div>
|
||
<div class="value-stats">
|
||
<div class="item">
|
||
<div class="n">17</div>
|
||
<div class="l">拦截风险点</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="n">42</div>
|
||
<div class="l">AI 咨询次数</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="n">4</div>
|
||
<div class="l">合同条款优化</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 主动建议卡片流 -->
|
||
<div class="card" style="margin-bottom: 16px;">
|
||
<div class="card-title">
|
||
<i class="ti ti-sparkles" style="color:#2E75B6;"></i>
|
||
白小侠主动建议
|
||
<span style="background:#FEF3C7;color:#92400E;font-size:11px;padding:2px 7px;border-radius:3px;font-weight:500;margin-left:6px;">基于您当前数据生成</span>
|
||
<span class="more">查看全部 (12) →</span>
|
||
</div>
|
||
|
||
<div class="suggestion-card sg-high">
|
||
<div class="icon"><i class="ti ti-alert-octagon"></i></div>
|
||
<div class="body">
|
||
<div class="head">
|
||
<span class="label">🔴 高风险</span>
|
||
<span style="font-size:12px;color:#6B7280;">合同合规</span>
|
||
<span class="time">刚刚</span>
|
||
</div>
|
||
<div class="text">
|
||
员工 <strong>"张三"</strong> 今日入职但未签订书面合同。每超 1 个月，您将承担<strong style="color:#C00000;">双倍工资</strong>风险，最长可达 11 个月。建议在 30 天内完成签订。
|
||
</div>
|
||
<div class="action">
|
||
<button class="btn small primary"><i class="ti ti-pencil"></i> 立即签约</button>
|
||
<button class="btn small">查看判例 (23 起)</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="suggestion-card sg-med">
|
||
<div class="icon"><i class="ti ti-file-alert"></i></div>
|
||
<div class="body">
|
||
<div class="head">
|
||
<span class="label">🟡 中风险</span>
|
||
<span style="font-size:12px;color:#6B7280;">规章制度</span>
|
||
<span class="time">2 小时前</span>
|
||
</div>
|
||
<div class="text">
|
||
您公司的<strong>《考勤管理制度》</strong>未经民主程序公示。AI 检索同类案件 23 起，企业败诉率 <strong style="color:#D97706;">87%</strong>，平均赔偿 ¥6.5 万。
|
||
</div>
|
||
<div class="action">
|
||
<button class="btn small primary"><i class="ti ti-users-group"></i> 发起民主程序</button>
|
||
<button class="btn small">AI 生成公示文件</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="suggestion-card sg-val">
|
||
<div class="icon"><i class="ti ti-shield-check"></i></div>
|
||
<div class="body">
|
||
<div class="head">
|
||
<span class="label">🟢 价值</span>
|
||
<span style="font-size:12px;color:#6B7280;">AI 拦截</span>
|
||
<span class="time">今日</span>
|
||
</div>
|
||
<div class="text">
|
||
过去 30 天，白小侠为您拦截 <strong>4 处</strong>合同条款风险、回答 <strong>17 个</strong>用工问题，预估避免赔偿损失 <strong style="color:#166534;">¥12.8 万</strong>。
|
||
</div>
|
||
<div class="action">
|
||
<button class="btn small">查看价值详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="suggestion-card sg-know">
|
||
<div class="icon"><i class="ti ti-book-2"></i></div>
|
||
<div class="body">
|
||
<div class="head">
|
||
<span class="label">🟣 知识</span>
|
||
<span style="font-size:12px;color:#6B7280;">行业判例</span>
|
||
<span class="time">昨天</span>
|
||
</div>
|
||
<div class="text">
|
||
同行业近期 <strong>5 起新仲裁判例</strong>：员工因调岗起诉，企业败诉率 71%。点击查看 AI 总结的 <strong>3 条避坑建议</strong>。
|
||
</div>
|
||
<div class="action">
|
||
<button class="btn small">阅读 AI 总结</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我要办理（业务流程申请） -->
|
||
<div class="card">
|
||
<div class="card-title">
|
||
<i class="ti ti-file-text" style="color:#2E75B6;"></i>
|
||
我要办理 · 各类业务流程申请
|
||
<span class="more" style="display:flex;gap:14px;align-items:center;">
|
||
<span class="lnk apply-jump" data-page="page-apply-saved"><i class="ti ti-edit" style="font-size:12px;margin-right:2px;"></i>申请草稿 <span style="color:#C00000;">3</span></span>
|
||
<span class="lnk apply-jump" data-page="page-apply-sent"><i class="ti ti-send" style="font-size:12px;margin-right:2px;"></i>已发申请 <span style="color:#6B7280;">389</span></span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 招聘入职 -->
|
||
<div class="apply-section">
|
||
<div class="apply-section-title">招聘入职</div>
|
||
<div class="apply-grid">
|
||
<div class="apply-card"><div class="ico blue"><i class="ti ti-user-plus"></i></div><div><div class="nm">员工录用</div><div class="sub">发出 offer / 录用通知</div></div></div>
|
||
<div class="apply-card"><div class="ico green"><i class="ti ti-user-check"></i></div><div><div class="nm">员工入职</div><div class="sub">办理入职手续与登记</div></div></div>
|
||
<div class="apply-card"><div class="ico cyan"><i class="ti ti-file-signature"></i></div><div><div class="nm">自定义合同签署</div><div class="sub">上传 PDF 发起签署</div></div></div>
|
||
<div class="apply-card"><div class="ico orange"><i class="ti ti-school"></i></div><div><div class="nm">培训任务/合同</div><div class="sub">发任务或签培训协议</div></div></div>
|
||
<div class="apply-card"><div class="ico purple"><i class="ti ti-clipboard-text"></i></div><div><div class="nm">员工信息提交</div><div class="sub">收集员工资料</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 在职管理 -->
|
||
<div class="apply-section">
|
||
<div class="apply-section-title">在职管理</div>
|
||
<div class="apply-grid">
|
||
<div class="apply-card"><div class="ico green"><i class="ti ti-user-star"></i></div><div><div class="nm">员工转正</div><div class="sub">试用期转正办理</div></div></div>
|
||
<div class="apply-card"><div class="ico blue"><i class="ti ti-pencil"></i></div><div><div class="nm">合同变更</div><div class="sub">岗位/薪酬等变更</div></div></div>
|
||
<div class="apply-card"><div class="ico cyan"><i class="ti ti-refresh"></i></div><div><div class="nm">合同续签</div><div class="sub">到期前发起续订</div></div></div>
|
||
<div class="apply-card"><div class="ico gray"><i class="ti ti-player-pause"></i></div><div><div class="nm">合同中止</div><div class="sub">合同暂停办理</div></div></div>
|
||
<div class="apply-card"><div class="ico purple"><i class="ti ti-receipt"></i></div><div><div class="nm">开具收入证明</div><div class="sub">在职收入证明开具</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 离职管理 -->
|
||
<div class="apply-section">
|
||
<div class="apply-section-title">离职管理</div>
|
||
<div class="apply-grid">
|
||
<div class="apply-card"><div class="ico gray"><i class="ti ti-file-x"></i></div><div><div class="nm">合同终止</div><div class="sub">合同到期/法定终止</div></div></div>
|
||
<div class="apply-card"><div class="ico orange"><i class="ti ti-alert-triangle"></i></div><div><div class="nm">合同解除</div><div class="sub">单方/协商解除 · <span style="color:#C00000;">先咨询 AI</span></div></div></div>
|
||
<div class="apply-card"><div class="ico blue"><i class="ti ti-certificate"></i></div><div><div class="nm">开具离职证明</div><div class="sub">离职证明文件开具</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 多元化用工 -->
|
||
<div class="apply-section" style="margin-bottom:0;">
|
||
<div class="apply-section-title">多元化用工</div>
|
||
<div class="apply-grid">
|
||
<div class="apply-card"><div class="ico green"><i class="ti ti-briefcase"></i></div><div><div class="nm">灵活用工</div><div class="sub">劳务/非全日制协议</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================ -->
|
||
<!-- PAGE 2: 白小侠 AI 对话 -->
|
||
<!-- ============================ -->
|
||
<div class="page" id="page-ai">
|
||
<div class="page-title">
|
||
<h1>白小侠 AI · 智能问答</h1>
|
||
<span class="crumb">· AI 90% · 专家 9% · 律师 1% 三层兜底</span>
|
||
</div>
|
||
|
||
<div class="chat-layout">
|
||
<!-- 历史会话 -->
|
||
<div class="chat-sidebar">
|
||
<button class="btn primary" style="width:100%; justify-content:center; margin-bottom:12px;">
|
||
<i class="ti ti-plus"></i> 新对话
|
||
</button>
|
||
<div class="chat-sidebar-title">最近会话</div>
|
||
<div class="chat-session active">
|
||
<div class="t">怀孕员工迟到能开除吗？</div>
|
||
<div class="meta">1 分钟前 · 38 起判例</div>
|
||
</div>
|
||
<div class="chat-session">
|
||
<div class="t">试用期不通过赔偿标准</div>
|
||
<div class="meta">昨天 · 已转专家</div>
|
||
</div>
|
||
<div class="chat-session">
|
||
<div class="t">未签书面合同的双倍工资</div>
|
||
<div class="meta">3 天前</div>
|
||
</div>
|
||
<div class="chat-session">
|
||
<div class="t">竞业限制条款如何起草</div>
|
||
<div class="meta">上周</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 对话区 -->
|
||
<div class="chat-area">
|
||
<div class="chat-head">
|
||
<div class="ai-icon">侠</div>
|
||
<div>
|
||
<div class="name">白小侠</div>
|
||
<div class="status">在线 · 平均响应 0.8 秒</div>
|
||
</div>
|
||
<div style="margin-left:auto; display: flex; gap: 8px;">
|
||
<button class="btn small"><i class="ti ti-user-search"></i> 转专家</button>
|
||
<button class="btn small"><i class="ti ti-phone"></i> 约律师</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-messages">
|
||
|
||
<!-- 用户消息 -->
|
||
<div class="msg msg-user">
|
||
<div class="av">李</div>
|
||
<div class="msg-body">
|
||
<div class="bubble">我想开除一个怀孕员工，因为她最近经常迟到，能开吗？</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 回复 -->
|
||
<div class="msg msg-ai">
|
||
<div class="av">侠</div>
|
||
<div class="msg-body" style="max-width: 85%;">
|
||
<div class="bubble warn">
|
||
|
||
<div class="ai-section">
|
||
<div class="tt red">🚨 强风险提示：基本不建议解除</div>
|
||
<div style="font-size:12px;color:#4B5563;">
|
||
依据：《劳动合同法》第 42 条<span class="ai-cite">法律条款</span>明确规定，孕期、产期、哺乳期女职工不得依据第 40 条、第 41 条解除合同。但如果迟到属于严重违反规章制度（第 39 条），理论上可以解除。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai-section">
|
||
<div class="tt amber" style="margin-bottom:8px;">⚖️ AI 判例分析<span class="ai-cite">38 起类似判例</span></div>
|
||
<ul style="font-size:12px; color:#4B5563;">
|
||
<li>检索同类判例 38 起，<strong style="color:#C00000;">企业胜诉率仅 22%</strong>。</li>
|
||
<li>败诉原因 TOP 3：制度未民主公示、迟到次数未达"严重"标准、未给改正机会。</li>
|
||
<li><strong style="color:#C00000;">您公司的《考勤管理制度》目前显示"未完成民主程序"，已踩中 TOP 1 败诉原因。</strong></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="ai-section">
|
||
<div class="tt amber" style="margin-bottom:6px;">💰 判赔预测<span class="ai-cite">基于江苏地区类似案件</span></div>
|
||
<div class="prediction-mini">
|
||
<div class="pred-mini-card red">
|
||
<div class="ttl">强行解除·违法</div>
|
||
<div class="amt">¥113k+</div>
|
||
</div>
|
||
<div class="pred-mini-card amber">
|
||
<div class="ttl">协商离职</div>
|
||
<div class="amt">¥25k</div>
|
||
</div>
|
||
<div class="pred-mini-card green">
|
||
<div class="ttl">调岗安抚</div>
|
||
<div class="amt">¥0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="msg-actions">
|
||
<button class="btn small primary"><i class="ti ti-eye"></i> 查看判例详情</button>
|
||
<button class="btn small"><i class="ti ti-file-text"></i> 生成协商方案</button>
|
||
<button class="btn small"><i class="ti ti-route"></i> 进入场景推演</button>
|
||
<button class="btn small"><i class="ti ti-user-search"></i> 转人工专家</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="chat-input-area">
|
||
<div class="chat-quickbtns">
|
||
<span class="qbtn">📌 还有哪些情况不能解除？</span>
|
||
<span class="qbtn">📌 如何完成民主程序公示？</span>
|
||
<span class="qbtn">📌 三期员工调岗规则</span>
|
||
<span class="qbtn">📌 详细协商话术</span>
|
||
</div>
|
||
<div class="chat-input">
|
||
<textarea placeholder="问白小侠... （Enter 发送，Shift+Enter 换行）"></textarea>
|
||
<button class="btn primary" style="height:38px;"><i class="ti ti-send"></i> 发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================ -->
|
||
<!-- PAGE 3: 判赔预测器 -->
|
||
<!-- ============================ -->
|
||
<div class="page" id="page-prediction">
|
||
<div class="page-title">
|
||
<h1>判赔预测器</h1>
|
||
<span class="badge badge-ai"><i class="ti ti-sparkles" style="font-size:12px;"></i> 核心 AI 能力</span>
|
||
<span class="crumb">· 基于智慧仲裁判例库 · 真实裁决数据训练</span>
|
||
</div>
|
||
|
||
<div class="annotation">
|
||
<i class="ti ti-info-circle"></i>
|
||
<div>本工具基于公司智慧仲裁产品沉淀的真实仲裁判例 AI 大模型，预测仅供决策参考，最终以仲裁裁决为准。涉及具体诉讼请<strong>立即转人工律师</strong>。</div>
|
||
</div>
|
||
|
||
<!-- 场景选择 -->
|
||
<div class="pred-input-card">
|
||
<div style="font-size:13px;color:#6B7280;margin-bottom:10px;">第一步 · 选择争议场景（12 类）</div>
|
||
<div class="pred-scenes">
|
||
<div class="scene-chip active">
|
||
<i class="ti ti-user-x"></i>
|
||
员工严重违纪解除
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-clipboard-x"></i>
|
||
试用期不录用
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-arrows-shuffle"></i>
|
||
客观情况变化
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-users-minus"></i>
|
||
经济性裁员
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-handshake"></i>
|
||
协商一致解除
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-calendar-x"></i>
|
||
到期不续签
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-transfer"></i>
|
||
调岗调薪
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-file-x"></i>
|
||
未签书面合同
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-clock-dollar"></i>
|
||
加班费争议
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-shield-x"></i>
|
||
社保争议
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-mood-heart"></i>
|
||
女职工三期
|
||
</div>
|
||
<div class="scene-chip">
|
||
<i class="ti ti-medical-cross"></i>
|
||
工伤认定
|
||
</div>
|
||
</div>
|
||
|
||
<div style="font-size:13px;color:#6B7280;margin-bottom:10px;">第二步 · 输入案件信息</div>
|
||
<div class="pred-form">
|
||
<div class="form-row">
|
||
<label>员工姓名</label>
|
||
<input type="text" value="王明 (销售部 · 已入职 3 年)" />
|
||
</div>
|
||
<div class="form-row">
|
||
<label>违纪事实</label>
|
||
<input type="text" value="近 30 天迟到 5 次（每次超 30 分钟）" />
|
||
</div>
|
||
<div class="form-row">
|
||
<label>所在地区</label>
|
||
<select>
|
||
<option>江苏省 - 南京市</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>员工月薪</label>
|
||
<input type="text" value="¥ 12,000" />
|
||
</div>
|
||
<div class="form-row">
|
||
<label>制度民主公示</label>
|
||
<select>
|
||
<option style="color:#C00000;">⚠️ 未完成</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>违纪记录留痕</label>
|
||
<select>
|
||
<option>仅口头警告（无书面记录）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn primary" style="margin-top:6px;">
|
||
<i class="ti ti-sparkles"></i> AI 预测仲裁结果
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 三档方案 -->
|
||
<div style="font-size:14px;font-weight:600;color:#1E2761;margin-bottom:10px;">
|
||
<i class="ti ti-chart-bar" style="margin-right:4px;"></i> AI 预测结果 · 三档方案
|
||
<span style="font-size:11px;color:#6B7280;font-weight:normal;margin-left:6px;">检索判例 42 起 · 推理用时 1.2s</span>
|
||
</div>
|
||
<div class="pred-results">
|
||
|
||
<!-- 原方案 -->
|
||
<div class="pred-result-card pred-red">
|
||
<div class="head">
|
||
<div class="nm"><i class="ti ti-x"></i> 原方案（直接解除）</div>
|
||
<div class="sub">您当前的打算</div>
|
||
</div>
|
||
<div class="amt-block">
|
||
<div class="amt">¥ 86,000</div>
|
||
<div class="amt-label">预测赔偿（中位数）</div>
|
||
<div style="font-size:11px;color:#9CA3AF;margin-top:4px;">区间 ¥ 68k - ¥ 102k</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="meta">同类判例 <strong>42 起</strong> · 败诉率 <strong style="color:#C00000;">81%</strong></div>
|
||
<ul>
|
||
<li><strong>败诉主因：</strong>制度未民主公示，举证不能</li>
|
||
<li><strong>次因：</strong>迟到次数未达"严重"标准</li>
|
||
<li><strong>第三：</strong>未给改正机会</li>
|
||
</ul>
|
||
</div>
|
||
<div class="foot">
|
||
<button class="btn small" style="flex:1;">查看判例</button>
|
||
<button class="btn small" style="flex:1;">不推荐</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优化方案A -->
|
||
<div class="pred-result-card pred-amber">
|
||
<div class="head">
|
||
<div class="nm"><i class="ti ti-bulb"></i> 方案 A：补正后协商 <span class="recommend-flag"><i class="ti ti-star"></i> 推荐</span></div>
|
||
<div class="sub">先补流程，再协商一致</div>
|
||
</div>
|
||
<div class="amt-block">
|
||
<div class="amt">¥ 28,000</div>
|
||
<div class="amt-label">预测赔偿（中位数）</div>
|
||
<div style="font-size:11px;color:#9CA3AF;margin-top:4px;">区间 ¥ 22k - ¥ 35k</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="meta">同类替代方案 <strong>27 起</strong> · 胜诉率 <strong style="color:#166534;">78%</strong></div>
|
||
<ul>
|
||
<li>第 1 步：立即发起制度民主程序</li>
|
||
<li>第 2 步：7 天内补全 3 次书面违纪记录</li>
|
||
<li>第 3 步：协商一致解除（AI 自动生成方案）</li>
|
||
</ul>
|
||
</div>
|
||
<div class="foot">
|
||
<button class="btn small primary" style="flex:1;">采用此方案</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优化方案B -->
|
||
<div class="pred-result-card pred-green">
|
||
<div class="head">
|
||
<div class="nm"><i class="ti ti-shield-check"></i> 方案 B：调岗改善 <span class="recommend-flag">最优</span></div>
|
||
<div class="sub">3 个月改善期 + 自然离职</div>
|
||
</div>
|
||
<div class="amt-block">
|
||
<div class="amt">¥ 0</div>
|
||
<div class="amt-label">预测赔偿（中位数）</div>
|
||
<div style="font-size:11px;color:#9CA3AF;margin-top:4px;">0 赔付率 89%</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="meta">同类预防案 <strong>19 起</strong> · 0 赔付率 <strong style="color:#166534;">89%</strong></div>
|
||
<ul>
|
||
<li>第 1 步：启动 3 个月调岗改善期</li>
|
||
<li>第 2 步：每月绩效追踪存证</li>
|
||
<li>第 3 步：达不到要求时启动协商</li>
|
||
</ul>
|
||
</div>
|
||
<div class="foot">
|
||
<button class="btn small primary" style="flex:1;">采用此方案</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================ -->
|
||
<!-- PAGE 4: 全员风险地图 -->
|
||
<!-- ============================ -->
|
||
<div class="page" id="page-staff">
|
||
<div class="page-title">
|
||
<h1>全员风险地图</h1>
|
||
<span class="crumb">· 花名册升级版 · 每位员工 7 维仲裁风险评分</span>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<span class="label">部门：</span>
|
||
<select><option>全部部门</option></select>
|
||
<span class="label">风险等级：</span>
|
||
<select><option>全部</option></select>
|
||
<span class="label">特殊群体：</span>
|
||
<select><option>全部</option></select>
|
||
<input type="text" placeholder="搜索员工姓名..." style="height:32px;padding:0 10px;border:1px solid #E0E6ED;border-radius:6px;font-size:13px;width:180px;" />
|
||
|
||
<div class="filter-stats">
|
||
<span class="it">全部 <strong>47</strong></span>
|
||
<span class="it r">🔴 高风险 <strong>4</strong></span>
|
||
<span class="it y">🟡 中风险 <strong>12</strong></span>
|
||
<span class="it g">🟢 健康 <strong>31</strong></span>
|
||
</div>
|
||
|
||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||
<button class="btn primary"><i class="ti ti-plus"></i> 添加人员</button>
|
||
<button class="btn"><i class="ti ti-download"></i> 导出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="staff">
|
||
<thead>
|
||
<tr>
|
||
<th width="180">员工</th>
|
||
<th width="100">部门/岗位</th>
|
||
<th width="110">合同到期</th>
|
||
<th width="160">风险评分 <span class="badge badge-new">NEW</span></th>
|
||
<th>风险标签 <span class="badge badge-new">NEW</span></th>
|
||
<th width="120">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b1">王</div>
|
||
<div class="ni">
|
||
<div class="n">王明</div>
|
||
<div class="e">工号 E0023 · 3 年工龄</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>销售部<br><span style="font-size:11px;color:#9CA3AF;">销售经理</span></td>
|
||
<td>2027.06<br><span style="font-size:11px;color:#9CA3AF;">剩 18 个月</span></td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini red">38</span>
|
||
<span class="score-bar"><span class="f red-bg" style="width:38%"></span></span>
|
||
<span style="font-size:11px;color:#C00000;">高风险</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-r"><i class="ti ti-alert-triangle" style="font-size:11px;"></i> 违纪 5 次</span>
|
||
<span class="tag tag-r">迟到记录</span>
|
||
<span class="tag tag-y">绩效不达标</span>
|
||
</td>
|
||
<td><button class="btn small">个人档案 →</button></td>
|
||
</tr>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b4">刘</div>
|
||
<div class="ni">
|
||
<div class="n">刘云</div>
|
||
<div class="e">工号 E0041 · 2 年工龄</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>市场部<br><span style="font-size:11px;color:#9CA3AF;">高级专员</span></td>
|
||
<td style="color:#C00000;font-weight:500;">2026.01<br><span style="font-size:11px;color:#9CA3AF;">剩 64 天 ⚠️</span></td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini red">45</span>
|
||
<span class="score-bar"><span class="f red-bg" style="width:45%"></span></span>
|
||
<span style="font-size:11px;color:#C00000;">高风险</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-r">合同即将到期</span>
|
||
<span class="tag tag-p">哺乳期</span>
|
||
<span class="tag tag-y">考勤未签字</span>
|
||
</td>
|
||
<td><button class="btn small">个人档案 →</button></td>
|
||
</tr>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b2">张</div>
|
||
<div class="ni">
|
||
<div class="n">张三</div>
|
||
<div class="e">工号 E0078 · 今日入职</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>研发部<br><span style="font-size:11px;color:#9CA3AF;">前端工程师</span></td>
|
||
<td style="color:#C00000;">未签约</td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini red">28</span>
|
||
<span class="score-bar"><span class="f red-bg" style="width:28%"></span></span>
|
||
<span style="font-size:11px;color:#C00000;">极高</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-r"><i class="ti ti-alert-octagon" style="font-size:11px;"></i> 合同未签 14 天</span>
|
||
<span class="tag tag-r">双倍工资风险</span>
|
||
</td>
|
||
<td><button class="btn small primary">立即签约</button></td>
|
||
</tr>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b3">李</div>
|
||
<div class="ni">
|
||
<div class="n">李雪梅</div>
|
||
<div class="e">工号 E0012 · 5 年工龄</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>财务部<br><span style="font-size:11px;color:#9CA3AF;">财务主管</span></td>
|
||
<td>2028.03</td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini yellow">68</span>
|
||
<span class="score-bar"><span class="f yellow-bg" style="width:68%"></span></span>
|
||
<span style="font-size:11px;color:#D97706;">中风险</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-y">工资条 3 月未确认</span>
|
||
<span class="tag tag-b">本月调岗中</span>
|
||
</td>
|
||
<td><button class="btn small">个人档案 →</button></td>
|
||
</tr>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b5">陈</div>
|
||
<div class="ni">
|
||
<div class="n">陈军</div>
|
||
<div class="e">工号 E0033 · 4 年工龄</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>生产部<br><span style="font-size:11px;color:#9CA3AF;">车间组长</span></td>
|
||
<td>2027.09</td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini yellow">72</span>
|
||
<span class="score-bar"><span class="f yellow-bg" style="width:72%"></span></span>
|
||
<span style="font-size:11px;color:#D97706;">中风险</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-p">工伤恢复期</span>
|
||
<span class="tag tag-y">医疗期管理</span>
|
||
</td>
|
||
<td><button class="btn small">个人档案 →</button></td>
|
||
</tr>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b1">周</div>
|
||
<div class="ni">
|
||
<div class="n">周丽</div>
|
||
<div class="e">工号 E0055 · 1 年工龄</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>人事部<br><span style="font-size:11px;color:#9CA3AF;">HR 助理</span></td>
|
||
<td>2026.12</td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini green">88</span>
|
||
<span class="score-bar"><span class="f green-bg" style="width:88%"></span></span>
|
||
<span style="font-size:11px;color:#16A34A;">健康</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-b">已签竞业协议</span>
|
||
<span class="tag tag-b">已完成培训</span>
|
||
</td>
|
||
<td><button class="btn small">个人档案 →</button></td>
|
||
</tr>
|
||
|
||
<tr class="hover-row">
|
||
<td>
|
||
<div class="name-cell">
|
||
<div class="av-mini b2">高</div>
|
||
<div class="ni">
|
||
<div class="n">高敏</div>
|
||
<div class="e">工号 E0008 · 7 年工龄</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>运营部<br><span style="font-size:11px;color:#9CA3AF;">运营总监</span></td>
|
||
<td>2027.02</td>
|
||
<td>
|
||
<div class="score-cell">
|
||
<span class="score-num-mini green">94</span>
|
||
<span class="score-bar"><span class="f green-bg" style="width:94%"></span></span>
|
||
<span style="font-size:11px;color:#16A34A;">优秀</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span class="tag tag-b">全维度合规</span>
|
||
</td>
|
||
<td><button class="btn small">个人档案 →</button></td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
<div style="text-align:center; margin-top:14px; color:#6B7280; font-size:12px;">
|
||
显示第 1-7 条，共 47 条 · <a style="color:#2E75B6; cursor:pointer;">导出风险报告 PDF</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================ -->
|
||
<!-- PAGE 5: 个人风险档案 -->
|
||
<!-- ============================ -->
|
||
<div class="page" id="page-archive">
|
||
<div class="page-title">
|
||
<h1>个人风险档案</h1>
|
||
<span class="crumb">· 员工 · 王明 · 销售经理</span>
|
||
</div>
|
||
|
||
<div class="row cols-3" style="grid-template-columns: 280px 1fr 320px;">
|
||
<!-- 左：员工基本信息 -->
|
||
<div class="card" style="text-align:center;">
|
||
<div style="width:80px;height:80px;border-radius:50%;background:#2E75B6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;margin:0 auto 12px;">王</div>
|
||
<div style="font-size:16px;font-weight:600;color:#1E2761;">王明</div>
|
||
<div style="font-size:12px;color:#6B7280;margin-bottom:14px;">销售部 · 销售经理 · 3 年工龄</div>
|
||
|
||
<div style="text-align:left;border-top:1px solid #F3F4F6;padding-top:12px;font-size:12px;line-height:1.9;color:#4B5563;">
|
||
<div><strong style="color:#6B7280;">入职日期：</strong>2023-04-12</div>
|
||
<div><strong style="color:#6B7280;">合同期限：</strong>2024.06 - 2027.06</div>
|
||
<div><strong style="color:#6B7280;">月薪：</strong>¥ 12,000</div>
|
||
<div><strong style="color:#6B7280;">社保：</strong><span style="color:#16A34A;">已足额缴纳</span></div>
|
||
<div><strong style="color:#6B7280;">竞业协议：</strong>已签订</div>
|
||
</div>
|
||
|
||
<button class="btn danger" style="width:100%;margin-top:16px;">
|
||
<i class="ti ti-bolt"></i> AI 预测：若今日离职会怎样
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 中：7 维评分 + 趋势 -->
|
||
<div class="card">
|
||
<div class="card-title">
|
||
<i class="ti ti-radar-2" style="color:#C00000;"></i>
|
||
7 维仲裁风险评分
|
||
<span style="font-size:24px;font-weight:700;color:#C00000;margin-left:auto;">38</span>
|
||
<span style="font-size:12px;color:#6B7280;margin-left:4px;margin-right:6px;">/ 100</span>
|
||
<span class="badge" style="background:#FEE2E2;color:#C00000;">🔴 高风险</span>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px;">
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">① 合同合规</span>
|
||
<span class="bar"><span class="bar-fill green-bg" style="width:90%"></span></span>
|
||
<span class="num green">90</span>
|
||
</div>
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">② 工时考勤</span>
|
||
<span class="bar"><span class="bar-fill red-bg" style="width:30%"></span></span>
|
||
<span class="num red">30</span>
|
||
</div>
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">③ 薪酬异常</span>
|
||
<span class="bar"><span class="bar-fill green-bg" style="width:85%"></span></span>
|
||
<span class="num green">85</span>
|
||
</div>
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">④ 社保公积金</span>
|
||
<span class="bar"><span class="bar-fill green-bg" style="width:95%"></span></span>
|
||
<span class="num green">95</span>
|
||
</div>
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">⑤ 特殊群体</span>
|
||
<span class="bar"><span class="bar-fill green-bg" style="width:100%"></span></span>
|
||
<span class="num green">N/A</span>
|
||
</div>
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">⑥ 培训背调</span>
|
||
<span class="bar"><span class="bar-fill yellow-bg" style="width:65%"></span></span>
|
||
<span class="num yellow">65</span>
|
||
</div>
|
||
<div class="score-item" style="padding:6px 0;">
|
||
<span class="label">⑦ 行为异常</span>
|
||
<span class="bar"><span class="bar-fill red-bg" style="width:25%"></span></span>
|
||
<span class="num red">25</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#F8FAFC;border-radius:6px;padding:12px;margin-top:14px;">
|
||
<div style="font-size:12px;color:#6B7280;margin-bottom:6px;">📈 评分趋势（最近 6 个月）</div>
|
||
<svg viewBox="0 0 400 60" style="width:100%;height:48px;">
|
||
<polyline points="0,8 70,10 140,20 210,30 280,38 350,42 400,52" stroke="#C00000" stroke-width="2" fill="none"></polyline>
|
||
<circle cx="0" cy="8" r="3" fill="#C00000"></circle>
|
||
<circle cx="70" cy="10" r="3" fill="#C00000"></circle>
|
||
<circle cx="140" cy="20" r="3" fill="#C00000"></circle>
|
||
<circle cx="210" cy="30" r="3" fill="#C00000"></circle>
|
||
<circle cx="280" cy="38" r="3" fill="#C00000"></circle>
|
||
<circle cx="350" cy="42" r="3" fill="#C00000"></circle>
|
||
<circle cx="400" cy="52" r="4" fill="#C00000" stroke="#fff" stroke-width="2"></circle>
|
||
</svg>
|
||
<div style="display:flex;justify-content:space-between;font-size:10px;color:#9CA3AF;margin-top:4px;">
|
||
<span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span><span style="color:#C00000;font-weight:600;">本月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右：风险标签 + 修复路径 -->
|
||
<div class="card">
|
||
<div class="card-title">
|
||
<i class="ti ti-list-check" style="color:#D97706;"></i>
|
||
风险标签 & 修复路径
|
||
</div>
|
||
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
|
||
<span class="tag tag-r"><i class="ti ti-alert-triangle" style="font-size:11px;"></i> 违纪 5 次未存证</span>
|
||
</div>
|
||
<div style="font-size:11px;color:#6B7280;line-height:1.5;margin-left:2px;">
|
||
AI 检测：迟到 5 次仅有口头警告。若启动解除将面临举证不能风险。<a style="color:#2E75B6;cursor:pointer;">补全书面记录 →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
|
||
<span class="tag tag-r">考勤未月度签字</span>
|
||
</div>
|
||
<div style="font-size:11px;color:#6B7280;line-height:1.5;margin-left:2px;">
|
||
近 3 个月考勤记录员工未签字确认。<a style="color:#2E75B6;cursor:pointer;">发起补签 →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
|
||
<span class="tag tag-y">绩效连续不达标</span>
|
||
</div>
|
||
<div style="font-size:11px;color:#6B7280;line-height:1.5;margin-left:2px;">
|
||
Q3 绩效 C，Q4 进入末位 10%。建议启动绩效改善期。<a style="color:#2E75B6;cursor:pointer;">生成 PIP →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#FFFAF0;border:1px solid #FED7AA;border-radius:6px;padding:10px;margin-top:14px;">
|
||
<div style="font-size:12px;color:#92400E;font-weight:500;margin-bottom:4px;">💡 白小侠建议</div>
|
||
<div style="font-size:11px;color:#92400E;line-height:1.5;">
|
||
此员工存在多项不利证据缺失，<strong>不建议直接解除</strong>。建议先用 2-3 周补齐流程，再启动协商，可降低赔偿风险约 ¥58k。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="page" id="page-report">
|
||
<div class="page-title">
|
||
<h1>2026 年度 AI 价值报告</h1>
|
||
<span class="crumb">· 北京阳光科技 · 续约谈判材料 · 由白小侠 AI 自动生成</span>
|
||
</div>
|
||
|
||
<!-- 顶部价值横幅 -->
|
||
<div style="background:linear-gradient(135deg, #1E2761 0%, #2E4187 100%);color:#fff;border-radius:8px;padding:28px 32px;margin-bottom:18px;">
|
||
<div style="display:flex;align-items:center;gap:32px;">
|
||
<div style="flex:1;">
|
||
<div style="font-size:13px;opacity:0.8;margin-bottom:6px;">过去 12 个月，白小侠为您：</div>
|
||
<div style="font-size:38px;font-weight:700;line-height:1.1;margin-bottom:8px;">规避了 <span style="color:#F0B429;">¥128,400</span> 潜在赔偿</div>
|
||
<div style="opacity:0.85;font-size:13px;">≈ 您年度服务费的 <strong style="color:#F0B429;">14.3 倍</strong> 价值返还 · 投资回报率 <strong style="color:#F0B429;">1,330%</strong></div>
|
||
</div>
|
||
<div style="text-align:right;">
|
||
<div style="font-size:13px;opacity:0.7;margin-bottom:4px;">服务年费</div>
|
||
<div style="font-size:22px;font-weight:600;">¥ 8,980</div>
|
||
<button class="btn" style="background:#F0B429;color:#1E2761;border-color:#F0B429;margin-top:10px;font-weight:600;">
|
||
<i class="ti ti-refresh"></i> 立即续约（升级 AI 防御版）
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 价值四宫格 -->
|
||
<div class="row cols-4">
|
||
<div class="card" style="text-align:center;padding:20px;">
|
||
<div style="color:#C00000;font-size:30px;font-weight:700;">17</div>
|
||
<div style="color:#6B7280;font-size:12px;margin-top:4px;">拦截高风险事件</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;padding:20px;">
|
||
<div style="color:#2E75B6;font-size:30px;font-weight:700;">142</div>
|
||
<div style="color:#6B7280;font-size:12px;margin-top:4px;">AI 咨询次数</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;padding:20px;">
|
||
<div style="color:#D97706;font-size:30px;font-weight:700;">23</div>
|
||
<div style="color:#6B7280;font-size:12px;margin-top:4px;">文书审改次数</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;padding:20px;">
|
||
<div style="color:#16A34A;font-size:30px;font-weight:700;">+13</div>
|
||
<div style="color:#6B7280;font-size:12px;margin-top:4px;">合规健康度提升</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关键时间轴 -->
|
||
<div class="card" style="margin-top:14px;">
|
||
<div class="card-title">
|
||
<i class="ti ti-timeline-event" style="color:#2E75B6;"></i>
|
||
年度关键防御事件
|
||
</div>
|
||
<div style="position:relative;padding-left:20px;">
|
||
<div style="position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:#E5E7EB;"></div>
|
||
|
||
<div style="position:relative;margin-bottom:18px;">
|
||
<div style="position:absolute;left:-20px;width:14px;height:14px;border-radius:50%;background:#C00000;border:3px solid #fff;box-shadow:0 0 0 1px #C00000;"></div>
|
||
<div style="font-size:12px;color:#9CA3AF;margin-bottom:2px;">2026-03-15</div>
|
||
<div style="font-size:14px;color:#1E2761;font-weight:500;">⚠️ AI 阻止违法解除孕期员工</div>
|
||
<div style="font-size:12px;color:#4B5563;margin-top:4px;">您拟解除怀孕员工"刘云"。AI 预测违法判赔 ¥113k+，建议改为调岗安抚。<strong style="color:#16A34A;">最终规避损失 ¥113,000。</strong></div>
|
||
</div>
|
||
|
||
<div style="position:relative;margin-bottom:18px;">
|
||
<div style="position:absolute;left:-20px;width:14px;height:14px;border-radius:50%;background:#D97706;border:3px solid #fff;box-shadow:0 0 0 1px #D97706;"></div>
|
||
<div style="font-size:12px;color:#9CA3AF;margin-bottom:2px;">2026-06-22</div>
|
||
<div style="font-size:14px;color:#1E2761;font-weight:500;">🟡 AI 修正《考勤制度》民主程序</div>
|
||
<div style="font-size:12px;color:#4B5563;margin-top:4px;">AI 检出制度未公示，发起补正流程。后续 3 起考勤争议均胜诉。</div>
|
||
</div>
|
||
|
||
<div style="position:relative;margin-bottom:18px;">
|
||
<div style="position:absolute;left:-20px;width:14px;height:14px;border-radius:50%;background:#16A34A;border:3px solid #fff;box-shadow:0 0 0 1px #16A34A;"></div>
|
||
<div style="font-size:12px;color:#9CA3AF;margin-bottom:2px;">2026-08-08</div>
|
||
<div style="font-size:14px;color:#1E2761;font-weight:500;">🟢 AI 优化《销售提成方案》</div>
|
||
<div style="font-size:12px;color:#4B5563;margin-top:4px;">AI 审查标记 3 处歧义条款。优化后顺利通过 1 起销售提成争议。</div>
|
||
</div>
|
||
|
||
<div style="position:relative;">
|
||
<div style="position:absolute;left:-20px;width:14px;height:14px;border-radius:50%;background:#2E75B6;border:3px solid #fff;box-shadow:0 0 0 1px #2E75B6;"></div>
|
||
<div style="font-size:12px;color:#9CA3AF;margin-bottom:2px;">2026-10-30</div>
|
||
<div style="font-size:14px;color:#1E2761;font-weight:500;">⚖️ 仲裁应急通道（销售员王明 案）</div>
|
||
<div style="font-size:12px;color:#4B5563;margin-top:4px;">收到仲裁通知后 28 分钟内陈律师接管。当前案件进行中。</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================ -->
|
||
<!-- PAGE 8a: 文件审查（新增） -->
|
||
<!-- ============================ -->
|
||
<div class="page" id="page-file-review">
|
||
<div class="page-title">
|
||
<h1>文件 AI 审查</h1>
|
||
<span class="badge badge-ai"><i class="ti ti-sparkles" style="font-size:12px;"></i> 核心 AI 能力</span>
|
||
<span class="crumb">· 合同 · 制度 · 通知 · 协议 · 任何用工文书</span>
|
||
</div>
|
||
|
||
<!-- 顶部信息条 -->
|
||
<div class="fr-header">
|
||
<div class="fr-file-info">
|
||
<div class="fr-file-icon"><i class="ti ti-file-text"></i></div>
|
||
<div>
|
||
<div class="fr-file-name">劳动合同_张三_前端工程师_2026.docx</div>
|
||
<div class="fr-file-meta">2.4 MB · 5 页 · 上传于 2 分钟前 · 已完成 AI 审查</div>
|
||
</div>
|
||
</div>
|
||
<div class="fr-summary">
|
||
<span class="fr-stat r"><span class="dot"></span> 高风险 <strong>3</strong></span>
|
||
<span class="fr-stat y"><span class="dot"></span> 中风险 <strong>5</strong></span>
|
||
<span class="fr-stat g"><span class="dot"></span> 建议优化 <strong>2</strong></span>
|
||
</div>
|
||
<div style="display:flex;gap:8px;">
|
||
<button class="btn"><i class="ti ti-upload"></i> 重新上传</button>
|
||
<button class="btn primary"><i class="ti ti-download"></i> 导出修改版</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fr-body">
|
||
<!-- 左：合同原文 -->
|
||
<div class="fr-left">
|
||
<div class="fr-doc-toolbar">
|
||
<span><i class="ti ti-eye"></i> 原文预览</span>
|
||
<span style="margin-left:auto;color:#6B7280;font-size:11px;">点击右侧风险项 → 自动定位并替换</span>
|
||
</div>
|
||
<div class="fr-doc">
|
||
<p class="doc-title">劳动合同</p>
|
||
<p class="doc-sub">编号：BJ-LD-2026-0078</p>
|
||
|
||
<p class="doc-h">第一条 合同期限</p>
|
||
<p>本合同期限为 <span class="hl hl-r" data-risk="r1">六年</span>，自 2026 年 5 月 13 日起至 2032 年 5 月 12 日止。</p>
|
||
|
||
<p class="doc-h">第二条 试用期</p>
|
||
<p>双方约定试用期为 <span class="hl hl-r" data-risk="r2">六个月</span>，试用期内月工资为正式工资的 <span class="hl hl-y" data-risk="y1">百分之七十</span>。</p>
|
||
|
||
<p class="doc-h">第三条 工作内容</p>
|
||
<p>乙方担任前端工程师岗位，工作地点位于北京市朝阳区。<span class="hl hl-r" data-risk="r3">甲方有权根据生产经营需要随时调整乙方的工作岗位、工作地点和工资标准，乙方应无条件服从。</span></p>
|
||
|
||
<p class="doc-h">第四条 工作时间</p>
|
||
<p>实行不定时工作制（注：<span class="hl hl-y" data-risk="y2">未办理审批</span>）。乙方应根据公司安排加班，公司可以根据实际情况安排调休或支付加班费。</p>
|
||
|
||
<p class="doc-h">第五条 劳动报酬</p>
|
||
<p>乙方月工资为人民币 ¥ 18,000 元。<span class="hl hl-y" data-risk="y3">绩效部分由甲方根据当月业绩自行决定。</span></p>
|
||
|
||
<p class="doc-h">第六条 保密与竞业限制</p>
|
||
<p>乙方在职期间及离职后 <span class="hl hl-y" data-risk="y4">三年内</span>不得到任何同类企业任职。<span class="hl hl-y" data-risk="y5">竞业限制期间不支付经济补偿。</span></p>
|
||
|
||
<p class="doc-h">第七条 合同解除</p>
|
||
<p>乙方在试用期内若不符合录用条件，甲方可立即解除合同<span class="hl hl-g" data-risk="g1">且无需支付经济补偿</span>。</p>
|
||
|
||
<p class="doc-h">第八条 违约责任</p>
|
||
<p><span class="hl hl-g" data-risk="g2">乙方违反本合同任何条款，应向甲方支付违约金人民币五万元。</span></p>
|
||
|
||
<p class="doc-h">第九条 争议解决</p>
|
||
<p>因履行本合同发生的争议，由甲方所在地人民法院管辖。</p>
|
||
|
||
<p style="margin-top:18px;color:#6B7280;font-size:12px;">—— 第 1 / 5 页 ——</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右：AI 风险报告 -->
|
||
<div class="fr-right">
|
||
<div class="fr-risk-tabs">
|
||
<span class="fr-risk-tab active">全部 (10)</span>
|
||
<span class="fr-risk-tab">🔴 高风险 (3)</span>
|
||
<span class="fr-risk-tab">🟡 中风险 (5)</span>
|
||
<span class="fr-risk-tab">🟢 优化 (2)</span>
|
||
</div>
|
||
|
||
<!-- 风险项 -->
|
||
<div class="risk-card risk-r">
|
||
<div class="risk-head">
|
||
<span class="risk-tag r">🔴 高风险</span>
|
||
<span class="risk-loc">第一条 · 合同期限</span>
|
||
<span class="risk-cite">判例 12 起</span>
|
||
</div>
|
||
<div class="risk-orig">
|
||
<span class="risk-orig-label">原文：</span>合同期限为 <strong>六年</strong>
|
||
</div>
|
||
<div class="risk-issue">
|
||
超长固定期限不利于企业。根据《劳动合同法》第 14 条，连续订立两次固定期限合同后必须订立无固定期限合同，6 年期限将直接进入无固定期限阶段。
|
||
</div>
|
||
<div class="risk-fix">
|
||
<div class="risk-fix-label">💡 AI 建议替换为：</div>
|
||
<div class="risk-fix-text">本合同期限为 <strong>三年</strong>，自 2026 年 5 月 13 日起至 2029 年 5 月 12 日止</div>
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary"><i class="ti ti-check"></i> 一键采纳</button>
|
||
<button class="btn small"><i class="ti ti-eye"></i> 查看判例</button>
|
||
<button class="btn small"><i class="ti ti-message"></i> 问白小侠</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-r">
|
||
<div class="risk-head">
|
||
<span class="risk-tag r">🔴 高风险</span>
|
||
<span class="risk-loc">第二条 · 试用期</span>
|
||
<span class="risk-cite">违反法律强制性规定</span>
|
||
</div>
|
||
<div class="risk-orig">
|
||
<span class="risk-orig-label">原文：</span>试用期为 <strong>六个月</strong>
|
||
</div>
|
||
<div class="risk-issue">
|
||
<strong style="color:#C00000;">违反《劳动合同法》第 19 条强制性规定。</strong>三年期限合同试用期不得超过 3 个月。该条款被认定无效，且企业可能承担试用期超期赔偿（月工资 × 超期月数）。
|
||
</div>
|
||
<div class="risk-fix">
|
||
<div class="risk-fix-label">💡 AI 建议替换为：</div>
|
||
<div class="risk-fix-text">双方约定试用期为 <strong>三个月</strong></div>
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary"><i class="ti ti-check"></i> 一键采纳</button>
|
||
<button class="btn small"><i class="ti ti-book"></i> 法条原文</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-r">
|
||
<div class="risk-head">
|
||
<span class="risk-tag r">🔴 高风险</span>
|
||
<span class="risk-loc">第三条 · 工作内容</span>
|
||
<span class="risk-cite">败诉率 87%</span>
|
||
</div>
|
||
<div class="risk-orig">
|
||
<span class="risk-orig-label">原文：</span><strong>甲方有权随时调整乙方的工作岗位、工作地点和工资标准</strong>
|
||
</div>
|
||
<div class="risk-issue">
|
||
"随时调岗调薪条款"违反《劳动合同法》第 35 条（合同变更需协商一致）。检索同类条款引发的争议 43 起，企业败诉率 87%。
|
||
</div>
|
||
<div class="risk-fix">
|
||
<div class="risk-fix-label">💡 AI 建议替换为：</div>
|
||
<div class="risk-fix-text">因生产经营需要调整工作岗位、地点或薪资的，甲乙双方应<strong>协商一致</strong>后以书面形式确认</div>
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary"><i class="ti ti-check"></i> 一键采纳</button>
|
||
<button class="btn small"><i class="ti ti-eye"></i> 查看 43 起判例</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-y">
|
||
<div class="risk-head">
|
||
<span class="risk-tag y">🟡 中风险</span>
|
||
<span class="risk-loc">第二条 · 试用期工资</span>
|
||
</div>
|
||
<div class="risk-orig">
|
||
<span class="risk-orig-label">原文：</span>试用期工资为正式工资的 <strong>百分之七十</strong>
|
||
</div>
|
||
<div class="risk-issue">
|
||
《劳动合同法》第 20 条：试用期工资不得低于本单位相同岗位最低档工资的 80%。当前条款 70% 低于法定下限。
|
||
</div>
|
||
<div class="risk-fix">
|
||
<div class="risk-fix-label">💡 AI 建议替换为：</div>
|
||
<div class="risk-fix-text">试用期工资为正式工资的 <strong>百分之八十</strong>（不低于法定标准）</div>
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary"><i class="ti ti-check"></i> 一键采纳</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-y">
|
||
<div class="risk-head">
|
||
<span class="risk-tag y">🟡 中风险</span>
|
||
<span class="risk-loc">第四条 · 不定时工作制</span>
|
||
</div>
|
||
<div class="risk-issue">
|
||
不定时工作制需经劳动行政部门审批方可实施。当前显示<strong>未办理审批</strong>，员工申请加班费时企业举证不能。
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary">查看办理指引</button>
|
||
<button class="btn small">问白小侠</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-y">
|
||
<div class="risk-head">
|
||
<span class="risk-tag y">🟡 中风险</span>
|
||
<span class="risk-loc">第六条 · 竞业限制</span>
|
||
</div>
|
||
<div class="risk-issue">
|
||
竞业限制期间未约定经济补偿，根据司法解释，该条款<strong>对员工不具约束力</strong>。竞业限制最长 2 年，三年超期。
|
||
</div>
|
||
<div class="risk-fix">
|
||
<div class="risk-fix-label">💡 AI 建议替换为：</div>
|
||
<div class="risk-fix-text">竞业限制期为离职后 <strong>2 年</strong>。该期间内甲方应按月支付乙方离职前月平均工资的 30% 作为经济补偿</div>
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary"><i class="ti ti-check"></i> 一键采纳</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-y">
|
||
<div class="risk-head">
|
||
<span class="risk-tag y">🟡 中风险</span>
|
||
<span class="risk-loc">第五条 · 绩效工资</span>
|
||
</div>
|
||
<div class="risk-issue">
|
||
"由甲方自行决定"过于宽泛，可能被认定单方变更工资条款。建议明确绩效考核标准。
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small">查看模板</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="risk-card risk-g">
|
||
<div class="risk-head">
|
||
<span class="risk-tag g">🟢 建议优化</span>
|
||
<span class="risk-loc">第七条 · 录用条件</span>
|
||
</div>
|
||
<div class="risk-issue">
|
||
条款合法，但未明确"录用条件"具体内容。建议附《岗位录用条件说明书》并要求员工签字确认，避免试用期解除时举证不能。
|
||
</div>
|
||
<div class="risk-actions">
|
||
<button class="btn small primary">使用 AI 模板</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部：律师兜底 -->
|
||
<div class="fr-foot">
|
||
<div style="display:flex;align-items:center;gap:12px;">
|
||
<i class="ti ti-info-circle" style="color:#2E75B6;font-size:20px;"></i>
|
||
<div>
|
||
<div style="font-size:13px;color:#1E2761;font-weight:500;">AI 审查仅供参考，建议重要合同请律师终审</div>
|
||
<div style="font-size:11px;color:#6B7280;margin-top:2px;">采纳所有 AI 建议后，预估降低本合同潜在仲裁风险 ¥56,000+</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;">
|
||
<button class="btn"><i class="ti ti-history"></i> 历史版本</button>
|
||
<button class="btn primary"><i class="ti ti-user-search"></i> 请律师终审</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page" id="page-compliance">
|
||
<div class="page-title">
|
||
<h1>合规中心</h1>
|
||
<span class="crumb">· 一站式合规健康度管理 · 由 AI 持续巡检</span>
|
||
</div>
|
||
|
||
<!-- 顶部综合健康度 -->
|
||
<div class="cc-top">
|
||
<div class="cc-score-block">
|
||
<div class="cc-score-circle">
|
||
<svg viewBox="0 0 90 90" style="transform: rotate(-90deg);">
|
||
<circle cx="45" cy="45" r="38" stroke="rgba(255,255,255,0.15)" stroke-width="8" fill="none"></circle>
|
||
<circle cx="45" cy="45" r="38" stroke="#F0B429" stroke-width="8" fill="none"
|
||
stroke-dasharray="239" stroke-dashoffset="53" stroke-linecap="round"></circle>
|
||
</svg>
|
||
<div class="cc-score-num">78</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:12px;opacity:0.8;">合规综合健康度</div>
|
||
<div style="font-size:24px;font-weight:600;margin-top:2px;">中等风险</div>
|
||
<div style="font-size:12px;opacity:0.85;margin-top:4px;">较上月 ↑ +5 分 · 最近巡检 1 小时前</div>
|
||
</div>
|
||
</div>
|
||
<div class="cc-actions">
|
||
<button class="btn" style="background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.3);">
|
||
<i class="ti ti-history"></i> 历史趋势
|
||
</button>
|
||
<button class="btn" style="background:#F0B429;color:#1E2761;border-color:#F0B429;font-weight:600;">
|
||
<i class="ti ti-shield-search"></i> 立即发起 AI 全面巡检
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5 维评分卡 -->
|
||
<div class="cc-dimensions">
|
||
<div class="cc-dim cc-dim-y">
|
||
<div class="cc-dim-head">
|
||
<i class="ti ti-file-text"></i>
|
||
<span>合同管理</span>
|
||
</div>
|
||
<div class="cc-dim-score">78<span>/100</span></div>
|
||
<div class="cc-dim-bar"><span style="width:78%;background:#F0B429;"></span></div>
|
||
<div class="cc-dim-todo">
|
||
<span class="cc-dot r"></span> 3 件待办
|
||
</div>
|
||
</div>
|
||
<div class="cc-dim cc-dim-r">
|
||
<div class="cc-dim-head">
|
||
<i class="ti ti-clipboard-list"></i>
|
||
<span>规章制度</span>
|
||
</div>
|
||
<div class="cc-dim-score">65<span>/100</span></div>
|
||
<div class="cc-dim-bar"><span style="width:65%;background:#C00000;"></span></div>
|
||
<div class="cc-dim-todo">
|
||
<span class="cc-dot r"></span> 4 件待办 · 紧急
|
||
</div>
|
||
</div>
|
||
<div class="cc-dim cc-dim-g">
|
||
<div class="cc-dim-head">
|
||
<i class="ti ti-calendar-time"></i>
|
||
<span>考勤工时</span>
|
||
</div>
|
||
<div class="cc-dim-score">82<span>/100</span></div>
|
||
<div class="cc-dim-bar"><span style="width:82%;background:#16A34A;"></span></div>
|
||
<div class="cc-dim-todo">
|
||
<span class="cc-dot y"></span> 5 件待办
|
||
</div>
|
||
</div>
|
||
<div class="cc-dim cc-dim-g">
|
||
<div class="cc-dim-head">
|
||
<i class="ti ti-receipt"></i>
|
||
<span>薪酬工资</span>
|
||
</div>
|
||
<div class="cc-dim-score">85<span>/100</span></div>
|
||
<div class="cc-dim-bar"><span style="width:85%;background:#16A34A;"></span></div>
|
||
<div class="cc-dim-todo">
|
||
<span class="cc-dot g"></span> 0 件待办
|
||
</div>
|
||
</div>
|
||
<div class="cc-dim cc-dim-g">
|
||
<div class="cc-dim-head">
|
||
<i class="ti ti-shield-check"></i>
|
||
<span>社保公积金</span>
|
||
</div>
|
||
<div class="cc-dim-score">88<span>/100</span></div>
|
||
<div class="cc-dim-bar"><span style="width:88%;background:#16A34A;"></span></div>
|
||
<div class="cc-dim-todo">
|
||
<span class="cc-dot g"></span> 0 件待办
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 本周待办清单 -->
|
||
<div class="card" style="margin-top:14px;">
|
||
<div class="card-title">
|
||
<i class="ti ti-checkbox" style="color:#C00000;"></i>
|
||
本周合规待办 · 按风险优先级排序
|
||
<span style="background:#FEE2E2;color:#991B1B;font-size:11px;padding:2px 7px;border-radius:3px;font-weight:500;margin-left:8px;">12 件待处理</span>
|
||
<span class="more">导出待办清单 →</span>
|
||
</div>
|
||
|
||
<div class="todo-list">
|
||
<div class="todo-item todo-r">
|
||
<span class="todo-prio">🔴 P0</span>
|
||
<div class="todo-main">
|
||
<div class="todo-text">4 项规章制度未完成民主程序公示</div>
|
||
<div class="todo-sub">《考勤管理》《销售提成方案》《员工奖惩制度》《保密协议》— 预估降低 ¥18.6 万仲裁风险</div>
|
||
</div>
|
||
<div class="todo-meta">
|
||
<span class="todo-deadline">建议本周完成</span>
|
||
<button class="btn small primary">一键发起</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="todo-item todo-r">
|
||
<span class="todo-prio">🔴 P0</span>
|
||
<div class="todo-main">
|
||
<div class="todo-text">员工"张三"今日入职未签订书面合同</div>
|
||
<div class="todo-sub">超过 30 天将面临双倍工资风险（最长 11 个月）</div>
|
||
</div>
|
||
<div class="todo-meta">
|
||
<span class="todo-deadline">30 天内</span>
|
||
<button class="btn small primary">立即签约</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="todo-item todo-y">
|
||
<span class="todo-prio">🟡 P1</span>
|
||
<div class="todo-main">
|
||
<div class="todo-text">3 名员工合同将于 30 天内到期</div>
|
||
<div class="todo-sub">刘云 (64 天) · 王刚 (28 天) · 李华 (22 天) — 建议提前 30 天处理续签/不续签</div>
|
||
</div>
|
||
<div class="todo-meta">
|
||
<span class="todo-deadline">本月内</span>
|
||
<button class="btn small">批量处理</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="todo-item todo-y">
|
||
<span class="todo-prio">🟡 P1</span>
|
||
<div class="todo-main">
|
||
<div class="todo-text">5 名员工 2026-10 月考勤记录未签字</div>
|
||
<div class="todo-sub">考勤未签字员工发生加班费争议时企业举证不能</div>
|
||
</div>
|
||
<div class="todo-meta">
|
||
<span class="todo-deadline">本月内</span>
|
||
<button class="btn small">一键提醒</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="todo-item todo-g">
|
||
<span class="todo-prio">🟢 P2</span>
|
||
<div class="todo-main">
|
||
<div class="todo-text">企业文本库 17 份文件未经 AI 审查</div>
|
||
<div class="todo-sub">建议批量审查后入库 · 预计耗时 8 分钟</div>
|
||
</div>
|
||
<div class="todo-meta">
|
||
<span class="todo-deadline">建议性</span>
|
||
<button class="btn small">批量审查</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 切换的详细工作区 -->
|
||
<div class="card" style="margin-top:14px;padding:0;overflow:hidden;">
|
||
<div class="cc-tabs">
|
||
<span class="cc-tab active" data-tab="cc-contracts"><i class="ti ti-file-text"></i> 合同管理 <span class="cc-tab-num">47</span></span>
|
||
<span class="cc-tab" data-tab="cc-rules"><i class="ti ti-clipboard-list"></i> 制度公示 <span class="cc-tab-num">12</span></span>
|
||
<span class="cc-tab" data-tab="cc-attendance"><i class="ti ti-calendar-time"></i> 考勤工时 <span class="cc-tab-num">95%</span></span>
|
||
<span class="cc-tab" data-tab="cc-archive"><i class="ti ti-folder"></i> 员工档案 <span class="cc-tab-num">47</span></span>
|
||
<span class="cc-tab" data-tab="cc-templates"><i class="ti ti-file-stack"></i> 文本模板 <span class="cc-tab-num">126</span></span>
|
||
</div>
|
||
|
||
<!-- 合同管理 Tab -->
|
||
<div class="cc-panel active" id="cc-contracts">
|
||
<div class="cc-panel-bar">
|
||
<div class="cc-filter-chips">
|
||
<span class="chip active">全部 47</span>
|
||
<span class="chip">📝 待签 3</span>
|
||
<span class="chip">⏰ 即将到期 4</span>
|
||
<span class="chip danger">⚠️ 未审改 17</span>
|
||
</div>
|
||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||
<button class="btn small"><i class="ti ti-upload"></i> 批量上传</button>
|
||
<button class="btn small primary"><i class="ti ti-sparkles"></i> AI 批量审改</button>
|
||
</div>
|
||
</div>
|
||
<table class="cc-table">
|
||
<thead>
|
||
<tr>
|
||
<th width="200">员工</th>
|
||
<th width="100">合同类型</th>
|
||
<th width="120">期限</th>
|
||
<th width="100">签约状态</th>
|
||
<th>AI 审改</th>
|
||
<th width="140">风险</th>
|
||
<th width="100">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="name-cell"><div class="av-mini b2">张</div><div class="ni"><div class="n">张三</div><div class="e">研发部</div></div></div></td>
|
||
<td>固定期限</td>
|
||
<td style="color:#C00000;">未生效</td>
|
||
<td><span class="badge" style="background:#FEE2E2;color:#991B1B;">⚠ 未签</span></td>
|
||
<td><span class="badge" style="background:#FEE2E2;color:#991B1B;">3 处高风险</span></td>
|
||
<td><span class="tag tag-r">双倍工资</span></td>
|
||
<td><button class="btn small primary">立即签约</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="name-cell"><div class="av-mini b4">刘</div><div class="ni"><div class="n">刘云</div><div class="e">市场部</div></div></div></td>
|
||
<td>固定期限</td>
|
||
<td>剩 64 天 ⚠️</td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">已签</span></td>
|
||
<td><span class="badge" style="background:#FEF3C7;color:#92400E;">1 处中风险</span></td>
|
||
<td><span class="tag tag-y">即将到期</span></td>
|
||
<td><button class="btn small">续签 / 不续签</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="name-cell"><div class="av-mini b1">王</div><div class="ni"><div class="n">王明</div><div class="e">销售部</div></div></div></td>
|
||
<td>固定期限</td>
|
||
<td>2027-06</td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">已签</span></td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">已通过</span></td>
|
||
<td><span class="tag tag-b">合规</span></td>
|
||
<td><button class="btn small">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="name-cell"><div class="av-mini b3">李</div><div class="ni"><div class="n">李雪梅</div><div class="e">财务部</div></div></div></td>
|
||
<td>无固定期限</td>
|
||
<td>—</td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">已签</span></td>
|
||
<td><span class="badge" style="background:#F3F4F6;color:#6B7280;">待审改</span></td>
|
||
<td><span class="tag tag-b">合规</span></td>
|
||
<td><button class="btn small">AI 审改</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="name-cell"><div class="av-mini b5">陈</div><div class="ni"><div class="n">陈军</div><div class="e">生产部</div></div></div></td>
|
||
<td>固定期限</td>
|
||
<td>2027-09</td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">已签</span></td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">已通过</span></td>
|
||
<td><span class="tag tag-p">工伤恢复期</span></td>
|
||
<td><button class="btn small">查看</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="padding:12px 18px;text-align:center;color:#6B7280;font-size:12px;border-top:1px solid #F3F4F6;">显示 5 / 47 · <a style="color:#2E75B6;cursor:pointer;">查看全部 →</a></div>
|
||
</div>
|
||
|
||
<!-- 制度公示 Tab -->
|
||
<div class="cc-panel" id="cc-rules">
|
||
<div class="cc-panel-bar">
|
||
<div class="cc-filter-chips">
|
||
<span class="chip active">全部 12</span>
|
||
<span class="chip">✅ 已公示 8</span>
|
||
<span class="chip danger">⚠️ 待民主程序 4</span>
|
||
</div>
|
||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||
<button class="btn small primary"><i class="ti ti-plus"></i> 新建制度</button>
|
||
<button class="btn small"><i class="ti ti-template"></i> 模板库</button>
|
||
</div>
|
||
</div>
|
||
<table class="cc-table">
|
||
<thead>
|
||
<tr>
|
||
<th width="220">制度名称</th>
|
||
<th width="120">最近更新</th>
|
||
<th>民主程序进度</th>
|
||
<th width="120">公示状态</th>
|
||
<th width="100">风险评估</th>
|
||
<th width="140">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>《考勤管理制度》</strong></td>
|
||
<td>2025-08-12</td>
|
||
<td>
|
||
<div class="progress-mini">
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
<div class="progress-line done"></div>
|
||
<div class="progress-step current">2</div>
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">3</div>
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">4</div>
|
||
</div>
|
||
<div style="font-size:11px;color:#6B7280;margin-top:4px;">起草 → <strong>职工讨论中</strong> → 平等协商 → 公示</div>
|
||
</td>
|
||
<td><span class="badge" style="background:#FEE2E2;color:#991B1B;">⚠ 未公示</span></td>
|
||
<td><span class="tag tag-r">败诉率 87%</span></td>
|
||
<td><button class="btn small primary">推进流程</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>《销售提成方案》</strong></td>
|
||
<td>2025-10-05</td>
|
||
<td>
|
||
<div class="progress-mini">
|
||
<div class="progress-step current">1</div>
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">2</div>
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">3</div>
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">4</div>
|
||
</div>
|
||
<div style="font-size:11px;color:#6B7280;margin-top:4px;"><strong>起草中</strong> → 职工讨论 → 平等协商 → 公示</div>
|
||
</td>
|
||
<td><span class="badge" style="background:#FEE2E2;color:#991B1B;">⚠ 未公示</span></td>
|
||
<td><span class="tag tag-r">高风险</span></td>
|
||
<td><button class="btn small primary">推进流程</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>《员工奖惩制度》</strong></td>
|
||
<td>2024-06-12</td>
|
||
<td>
|
||
<div class="progress-mini">
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
<div class="progress-line done"></div>
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
<div class="progress-line done"></div>
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
<div class="progress-line done"></div>
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
</div>
|
||
<div style="font-size:11px;color:#16A34A;margin-top:4px;">✓ 全流程完成 · 已公示 1 年 5 月</div>
|
||
</td>
|
||
<td><span class="badge" style="background:#DCFCE7;color:#166534;">✓ 已公示</span></td>
|
||
<td><span class="tag tag-b">合规</span></td>
|
||
<td><button class="btn small">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>《保密与竞业限制》</strong></td>
|
||
<td>2025-09-22</td>
|
||
<td>
|
||
<div class="progress-mini">
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
<div class="progress-line done"></div>
|
||
<div class="progress-step done"><i class="ti ti-check"></i></div>
|
||
<div class="progress-line done"></div>
|
||
<div class="progress-step current">3</div>
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">4</div>
|
||
</div>
|
||
<div style="font-size:11px;color:#6B7280;margin-top:4px;">起草 → 职工讨论 → <strong>平等协商中</strong> → 公示</div>
|
||
</td>
|
||
<td><span class="badge" style="background:#FEF3C7;color:#92400E;">推进中</span></td>
|
||
<td><span class="tag tag-y">中风险</span></td>
|
||
<td><button class="btn small">推进</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 考勤工时 Tab -->
|
||
<div class="cc-panel" id="cc-attendance">
|
||
<div style="padding:18px;">
|
||
<div class="row cols-4">
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val g">95%</div>
|
||
<div class="cc-metric-lbl">本月考勤签字率</div>
|
||
<div class="cc-metric-sub">5 名员工待补签</div>
|
||
</div>
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val">38h</div>
|
||
<div class="cc-metric-lbl">本月人均加班</div>
|
||
<div class="cc-metric-sub g">≤ 36h 法定上限超 2h</div>
|
||
</div>
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val y">¥ 2.3k</div>
|
||
<div class="cc-metric-lbl">未支付加班费风险</div>
|
||
<div class="cc-metric-sub">3 名员工 · 待核算</div>
|
||
</div>
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val">2</div>
|
||
<div class="cc-metric-lbl">不定时工作制</div>
|
||
<div class="cc-metric-sub r">⚠ 1 个未审批</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:18px;padding:14px;background:#FFFAF0;border:1px dashed #FED7AA;border-radius:6px;">
|
||
<div style="font-size:13px;font-weight:500;color:#92400E;margin-bottom:6px;">⚠️ AI 检测发现</div>
|
||
<div style="font-size:12px;color:#92400E;line-height:1.6;">
|
||
本月有 5 名员工的考勤记录员工未签字确认，存在加班费争议时举证不能的风险。建议立即发起电子签确认。
|
||
</div>
|
||
<button class="btn small primary" style="margin-top:8px;">一键发起签字</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 员工档案 Tab -->
|
||
<div class="cc-panel" id="cc-archive">
|
||
<div style="padding:18px;">
|
||
<div class="row cols-4">
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val g">88%</div>
|
||
<div class="cc-metric-lbl">员工档案完整度</div>
|
||
</div>
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val y">12</div>
|
||
<div class="cc-metric-lbl">背调记录缺失</div>
|
||
</div>
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val">94%</div>
|
||
<div class="cc-metric-lbl">入职培训签收率</div>
|
||
</div>
|
||
<div class="cc-metric">
|
||
<div class="cc-metric-val g">100%</div>
|
||
<div class="cc-metric-lbl">竞业协议签订率</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:18px;color:#6B7280;font-size:13px;text-align:center;padding:30px;">
|
||
<i class="ti ti-folder" style="font-size:32px;color:#D1D5DB;"></i>
|
||
<div style="margin-top:8px;">员工档案详细管理 · 跳转员工管理模块查看</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文本模板 Tab -->
|
||
<div class="cc-panel" id="cc-templates">
|
||
<div style="padding:18px;">
|
||
<div class="cc-template-grid">
|
||
<div class="cc-template-card">
|
||
<div class="ie" style="background:#EAF2F9;color:#2E75B6;"><i class="ti ti-file-text"></i></div>
|
||
<div class="nm">劳动合同模板</div>
|
||
<div class="meta">12 种 · 已 AI 优化</div>
|
||
</div>
|
||
<div class="cc-template-card">
|
||
<div class="ie" style="background:#FEF3C7;color:#92400E;"><i class="ti ti-alert-triangle"></i></div>
|
||
<div class="nm">违纪处分通知</div>
|
||
<div class="meta">8 种 · 含证据要件</div>
|
||
</div>
|
||
<div class="cc-template-card">
|
||
<div class="ie" style="background:#FEE2E2;color:#991B1B;"><i class="ti ti-user-minus"></i></div>
|
||
<div class="nm">解除通知模板</div>
|
||
<div class="meta">6 种 · 按解除依据分类</div>
|
||
</div>
|
||
<div class="cc-template-card">
|
||
<div class="ie" style="background:#DCFCE7;color:#166534;"><i class="ti ti-handshake"></i></div>
|
||
<div class="nm">协商一致协议</div>
|
||
<div class="meta">4 种 · 含 N+1 标准条款</div>
|
||
</div>
|
||
<div class="cc-template-card">
|
||
<div class="ie" style="background:#EDE9FE;color:#6D28D9;"><i class="ti ti-shield-lock"></i></div>
|
||
<div class="nm">保密竞业协议</div>
|
||
<div class="meta">5 种 · 含经济补偿条款</div>
|
||
</div>
|
||
<div class="cc-template-card">
|
||
<div class="ie" style="background:#EAF2F9;color:#2E75B6;"><i class="ti ti-clipboard"></i></div>
|
||
<div class="nm">规章制度模板</div>
|
||
<div class="meta">11 种 · 含民主程序流程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="page" id="page-esign">
|
||
<div class="page-title">
|
||
<h1>电子签中心</h1>
|
||
<span class="badge badge-ai"><i class="ti ti-file-signature" style="font-size:12px;"></i> 客户咨询 TOP 1</span>
|
||
<span class="crumb">· 年签署 5,080 次 · 平均用时 2.3 分钟 · 法律效力等同纸质</span>
|
||
</div>
|
||
|
||
<!-- 顶部统计 -->
|
||
<div class="es-stats">
|
||
<div class="es-stat">
|
||
<div class="ie y"><i class="ti ti-clock"></i></div>
|
||
<div class="info">
|
||
<div class="n">5</div>
|
||
<div class="l">待签合同</div>
|
||
</div>
|
||
</div>
|
||
<div class="es-stat">
|
||
<div class="ie g"><i class="ti ti-check"></i></div>
|
||
<div class="info">
|
||
<div class="n">23</div>
|
||
<div class="l">本月已签</div>
|
||
</div>
|
||
</div>
|
||
<div class="es-stat">
|
||
<div class="ie b"><i class="ti ti-bolt"></i></div>
|
||
<div class="info">
|
||
<div class="n">2.3<span style="font-size:14px;">min</span></div>
|
||
<div class="l">平均签署用时</div>
|
||
</div>
|
||
</div>
|
||
<div class="es-stat">
|
||
<div class="ie g"><i class="ti ti-shield-check"></i></div>
|
||
<div class="info">
|
||
<div class="n">100%</div>
|
||
<div class="l">证据链合规率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷入口 -->
|
||
<div class="es-quickactions">
|
||
<div class="es-action-card primary">
|
||
<div class="ie"><i class="ti ti-file-plus"></i></div>
|
||
<div class="nm">发起新签 <span class="tag">最常用</span></div>
|
||
<div class="desc">单份/批量发起签署，支持 AI 预审 + 自动催签</div>
|
||
</div>
|
||
<div class="es-action-card secondary">
|
||
<div class="ie"><i class="ti ti-template"></i></div>
|
||
<div class="nm">从模板签</div>
|
||
<div class="desc">劳动合同 / 保密协议 / 离职协议等 12 套法律模板</div>
|
||
</div>
|
||
<div class="es-action-card tertiary">
|
||
<div class="ie"><i class="ti ti-microphone"></i></div>
|
||
<div class="nm">语音发起</div>
|
||
<div class="desc">说"给张三发劳动合同" · 白小侠自动调起并预填</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 待签合同列表 -->
|
||
<div class="es-list-card" style="margin-bottom:14px;">
|
||
<div class="es-list-header">
|
||
<i class="ti ti-list-check" style="color:#D97706;font-size:18px;"></i>
|
||
<span style="font-size:14px;font-weight:600;color:#1E2761;">待签合同 (5)</span>
|
||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||
<button class="btn small"><i class="ti ti-bell"></i> 一键催签</button>
|
||
<button class="btn small primary"><i class="ti ti-plus"></i> 发起新签</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="es-item">
|
||
<div class="es-item-icon"><i class="ti ti-file-text"></i></div>
|
||
<div class="es-item-info">
|
||
<div class="es-item-title">
|
||
劳动合同_张三_前端工程师_2026.docx
|
||
<span class="es-status warning">⚠ 已 AI 审出 3 处高风险</span>
|
||
</div>
|
||
<div class="es-item-meta">
|
||
<span><i class="ti ti-user"></i> 张三</span>
|
||
<span><i class="ti ti-clock"></i> 2 小时前发起</span>
|
||
<span><i class="ti ti-files"></i> 来源：合同模板</span>
|
||
</div>
|
||
</div>
|
||
<div class="es-progress">
|
||
<div class="es-progress-bar"><span class="f r" style="width:30%"></span></div>
|
||
<span class="es-progress-text">待审改</span>
|
||
</div>
|
||
<button class="btn small danger"><i class="ti ti-edit"></i> 先 AI 审改</button>
|
||
</div>
|
||
|
||
<div class="es-item">
|
||
<div class="es-item-icon"><i class="ti ti-shield-lock"></i></div>
|
||
<div class="es-item-info">
|
||
<div class="es-item-title">
|
||
保密与竞业限制协议_王红.docx
|
||
<span class="es-status signed">✓ AI 已通过</span>
|
||
</div>
|
||
<div class="es-item-meta">
|
||
<span><i class="ti ti-user"></i> 王红</span>
|
||
<span><i class="ti ti-clock"></i> 昨天 14:30</span>
|
||
<span><i class="ti ti-check"></i> 公司已签</span>
|
||
</div>
|
||
</div>
|
||
<div class="es-progress">
|
||
<div class="es-progress-bar"><span class="f y" style="width:50%"></span></div>
|
||
<span class="es-progress-text">1/2 签</span>
|
||
</div>
|
||
<button class="btn small"><i class="ti ti-send"></i> 催签</button>
|
||
</div>
|
||
|
||
<div class="es-item">
|
||
<div class="es-item-icon"><i class="ti ti-handshake"></i></div>
|
||
<div class="es-item-info">
|
||
<div class="es-item-title">
|
||
协商解除协议_李华.docx
|
||
<span class="es-status signed">✓ AI 已通过</span>
|
||
</div>
|
||
<div class="es-item-meta">
|
||
<span><i class="ti ti-user"></i> 李华</span>
|
||
<span><i class="ti ti-clock"></i> 3 小时前</span>
|
||
<span><i class="ti ti-currency-yen"></i> 经济补偿 N+1</span>
|
||
</div>
|
||
</div>
|
||
<div class="es-progress">
|
||
<div class="es-progress-bar"></div>
|
||
<span class="es-progress-text">0/2 签</span>
|
||
</div>
|
||
<button class="btn small primary"><i class="ti ti-send"></i> 发起</button>
|
||
</div>
|
||
|
||
<div class="es-item">
|
||
<div class="es-item-icon"><i class="ti ti-clipboard-list"></i></div>
|
||
<div class="es-item-info">
|
||
<div class="es-item-title">
|
||
《考勤管理制度》公示确认书 · 47 名员工
|
||
<span class="es-status pending">待批量发起</span>
|
||
</div>
|
||
<div class="es-item-meta">
|
||
<span><i class="ti ti-users"></i> 47 人</span>
|
||
<span><i class="ti ti-files"></i> 民主程序后</span>
|
||
<span><i class="ti ti-info-circle"></i> AI 建议本周完成</span>
|
||
</div>
|
||
</div>
|
||
<div class="es-progress">
|
||
<div class="es-progress-bar"></div>
|
||
<span class="es-progress-text">未发起</span>
|
||
</div>
|
||
<button class="btn small primary"><i class="ti ti-users-group"></i> 批量发起</button>
|
||
</div>
|
||
|
||
<div class="es-item">
|
||
<div class="es-item-icon"><i class="ti ti-receipt"></i></div>
|
||
<div class="es-item-info">
|
||
<div class="es-item-title">
|
||
2026-10 工资条电子签 · 47 名员工
|
||
<span class="es-status signing">42/47 已签</span>
|
||
</div>
|
||
<div class="es-item-meta">
|
||
<span><i class="ti ti-users"></i> 47 人</span>
|
||
<span><i class="ti ti-clock"></i> 5 天前发起</span>
|
||
<span><i class="ti ti-alert-triangle" style="color:#D97706;"></i> 5 人未签</span>
|
||
</div>
|
||
</div>
|
||
<div class="es-progress">
|
||
<div class="es-progress-bar"><span class="f g" style="width:89%"></span></div>
|
||
<span class="es-progress-text">89%</span>
|
||
</div>
|
||
<button class="btn small"><i class="ti ti-bell"></i> 催 5 人</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 增强能力 -->
|
||
<div class="es-capabilities">
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#1E2761;">
|
||
<i class="ti ti-sparkles" style="color:#2E75B6;"></i>
|
||
电子签 + AI 的独有能力 · 别家电子签做不到的
|
||
</div>
|
||
<div class="es-cap-grid">
|
||
<div class="es-cap-item">
|
||
<div class="es-cap-icon"><i class="ti ti-search"></i></div>
|
||
<div class="es-cap-text">
|
||
<strong>签前 AI 审查</strong>
|
||
所有合同发起前自动调用文件审查模块，识别高风险条款并提示修改，避免签了之后才发现问题。
|
||
</div>
|
||
</div>
|
||
<div class="es-cap-item">
|
||
<div class="es-cap-icon"><i class="ti ti-shield-check"></i></div>
|
||
<div class="es-cap-text">
|
||
<strong>证据链 5 维留痕</strong>
|
||
时间戳 · IP 地理位置 · 设备指纹 · 生物识别 · 区块链哈希存证，仲裁中举证效力远超纸质。
|
||
</div>
|
||
</div>
|
||
<div class="es-cap-item">
|
||
<div class="es-cap-icon"><i class="ti ti-device-mobile"></i></div>
|
||
<div class="es-cap-text">
|
||
<strong>多渠道签署</strong>
|
||
员工可通过 PC、App、小程序、短信链接任一方式签署，对方不需要安装任何软件。
|
||
</div>
|
||
</div>
|
||
<div class="es-cap-item">
|
||
<div class="es-cap-icon"><i class="ti ti-bell"></i></div>
|
||
<div class="es-cap-text">
|
||
<strong>智能催签</strong>
|
||
AI 根据签署紧急程度（如合同到期前）智能调整催签节奏 · 6h/24h/3天 多频率推送。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page" id="page-apply-saved">
|
||
<div class="page-title">
|
||
<h1>申请草稿</h1>
|
||
<span class="crumb">· 暂存未发起的申请，可继续编辑</span>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>申请项：</span><select class="select"><option>全部</option><option>员工入职</option><option>员工录用</option><option>合同续签</option><option>灵活用工</option></select></div>
|
||
<div class="field"><span>关键词：</span><input class="input" placeholder="搜索接收人/标题"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th style="width:60px;">序号</th><th>申请项</th><th>接收人</th><th>保存时间</th><th>状态</th><th style="width:160px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>员工入职</td><td>张三</td><td>2025-11-19 17:32:10</td><td><span class="tag tag-gray">草稿</span></td><td><span class="lnk">继续编辑</span><span class="lnk danger">删除</span></td></tr>
|
||
<tr><td>2</td><td>合同续签</td><td>马闻韬</td><td>2025-11-18 10:08:21</td><td><span class="tag tag-gray">草稿</span></td><td><span class="lnk">继续编辑</span><span class="lnk danger">删除</span></td></tr>
|
||
<tr><td>3</td><td>灵活用工</td><td>崔玥林</td><td>2025-11-12 09:45:00</td><td><span class="tag tag-gray">草稿</span></td><td><span class="lnk">继续编辑</span><span class="lnk danger">删除</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-3 共 3 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 我的申请 - 已发申请 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-apply-sent">
|
||
<div class="page-title">
|
||
<h1>已发申请</h1>
|
||
<span class="crumb">· 已发起的申请记录与签署进度</span>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>申请项：</span><select class="select"><option>全部</option><option>员工入职</option><option>员工录用</option><option>灵活用工</option><option>合同续签</option></select></div>
|
||
<div class="field"><span>接收人：</span><input class="input" placeholder="请输入"></div>
|
||
<div class="field"><span>状态：</span><select class="select"><option>全部</option><option>进行中</option><option>已完成</option><option>已撤销</option></select></div>
|
||
<div class="field"><span>发起时间：</span><input class="input" type="date" style="min-width:140px;"><span>~</span><input class="input" type="date" style="min-width:140px;"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th style="width:60px;">序号</th><th>申请项</th><th>接收人</th><th>发起时间</th><th>状态</th><th>签署状态</th><th style="width:140px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>员工入职</td><td>张三</td><td>2025-11-20 10:59:36</td><td><span class="tag tag-blue">进行中</span></td><td><span class="tag tag-yellow">未签署</span></td><td><span class="lnk">详情</span><span class="lnk danger">撤销</span></td></tr>
|
||
<tr><td>2</td><td>灵活用工</td><td>张三</td><td>2025-10-29 10:50:42</td><td><span class="tag tag-gray">已撤销</span></td><td><span class="tag tag-yellow">未签署</span></td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>3</td><td>员工录用</td><td>聂萍</td><td>2025-09-16 17:35:33</td><td><span class="tag tag-gray">已撤销</span></td><td><span class="tag tag-gray">无需签署</span></td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>4</td><td>合同续签</td><td>马闻韬</td><td>2025-09-15 16:48:49</td><td><span class="tag tag-gray">已撤销</span></td><td><span class="tag tag-green">已签署</span></td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>5</td><td>员工入职</td><td>崔玥林</td><td>2025-09-15 16:31:05</td><td><span class="tag tag-green">已完成</span></td><td><span class="tag tag-red">已拒签</span></td><td><span class="lnk">详情</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-5 共 389 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">3</button><button class="pg">4</button><button class="pg">5</button><button class="pg">…</button><button class="pg">39</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
<div class="page" id="page-onboard">
|
||
<div class="page-title">
|
||
<h1>入职管理</h1>
|
||
<span class="crumb">· 入职流程候选人台账</span>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>姓名：</span><input class="input" placeholder="请输入姓名"></div>
|
||
<div class="field"><span>身份证号：</span><input class="input" placeholder="请输入身份证号" style="min-width:220px;"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
<div class="grow"></div>
|
||
<button class="btn primary"><i class="ti ti-plus"></i> 添加人员</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th>姓名</th><th>性别</th><th>手机号</th><th>身份证号</th><th>员工状态</th><th style="width:180px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>闫明杰</td><td>男</td><td>15938762511</td><td>410423199503121011</td><td><span class="tag tag-green">在职</span></td><td><span class="lnk">查看详情</span></td></tr>
|
||
<tr><td>闫明杰2</td><td>男</td><td>15938762512</td><td>410423199503121012</td><td><span class="tag tag-yellow">待入职</span></td><td><span class="lnk">查看详情</span><span class="lnk">办理入职</span></td></tr>
|
||
<tr><td>张三33</td><td>男</td><td>15938762513</td><td>410423199503121013</td><td><span class="tag tag-yellow">待入职</span></td><td><span class="lnk">查看详情</span><span class="lnk">办理入职</span></td></tr>
|
||
<tr><td>张三</td><td>男</td><td>13800138000</td><td>110101199801011234</td><td><span class="tag tag-green">在职</span></td><td><span class="lnk">查看详情</span></td></tr>
|
||
<tr><td>郭宪强</td><td>未知</td><td>15626473067</td><td>130434199104101013</td><td><span class="tag tag-yellow">待入职</span></td><td><span class="lnk">查看详情</span></td></tr>
|
||
<tr><td>李四</td><td>未知</td><td>15626473068</td><td>130434199104101012</td><td><span class="tag tag-yellow">待入职</span></td><td><span class="lnk">查看详情</span></td></tr>
|
||
<tr><td>王晶晶</td><td>未知</td><td>13288214455</td><td>130434199111161026</td><td><span class="tag tag-yellow">待入职</span></td><td><span class="lnk">查看详情</span></td></tr>
|
||
<tr><td>石文渊</td><td>男</td><td>13299110011</td><td>411322199403314913</td><td><span class="tag tag-yellow">待入职</span></td><td><span class="lnk">查看详情</span><span class="lnk">办理入职</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-8 共 18 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 合同管理 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-contract">
|
||
<div class="page-title">
|
||
<h1>合同管理</h1>
|
||
<span class="crumb">· 全量合同档案与到期监控</span>
|
||
</div>
|
||
|
||
<div class="stats-strip cols-7">
|
||
<div class="stat-tile"><div class="lbl">全部</div><div class="val">125</div></div>
|
||
<div class="stat-tile"><div class="lbl">劳动合同</div><div class="val">73</div></div>
|
||
<div class="stat-tile"><div class="lbl">劳务合同</div><div class="val">7</div></div>
|
||
<div class="stat-tile"><div class="lbl">非全日制</div><div class="val">0</div></div>
|
||
<div class="stat-tile"><div class="lbl">其他协议留存</div><div class="val">45</div></div>
|
||
<div class="stat-tile warn"><div class="lbl">试用期即将到期</div><div class="val">0</div></div>
|
||
<div class="stat-tile danger"><div class="lbl">劳动合同即将到期</div><div class="val">0</div></div>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>合同类型：</span><select class="select"><option>请选择合同类型</option><option>劳动合同</option><option>劳务合同</option><option>非全日制</option><option>其他</option></select></div>
|
||
<div class="field"><span>合同状态：</span><select class="select"><option>请选择合同状态</option><option>履约中</option><option>已到期</option><option>即将到期</option></select></div>
|
||
<div class="field"><span>创建时间：</span><input class="input" type="date" style="min-width:140px;"><span>~</span><input class="input" type="date" style="min-width:140px;"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th>合同名称</th><th>合同类型</th><th>归属人</th><th>起始时间</th><th>到期时间</th><th>合同状态</th><th style="width:160px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>劳动合同</td><td>劳动合同</td><td>郭宪强</td><td>2026-02-01</td><td>2027-04-30</td><td><span class="tag tag-green">履约中</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span><span class="lnk danger">删除</span></td></tr>
|
||
<tr><td>测试合同</td><td>劳务合同</td><td>聂萍</td><td>2025-08-12</td><td>2025-08-16</td><td><span class="tag tag-gray">已到期</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span><span class="lnk danger">删除</span></td></tr>
|
||
<tr><td>劳动合同（2025-07-29）</td><td>劳动合同</td><td>马闻韬</td><td>2025-07-28</td><td>2026-07-31</td><td><span class="tag tag-green">履约中</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span></td></tr>
|
||
<tr><td>劳动合同</td><td>劳动合同</td><td>张三</td><td>2024-01-01</td><td>2025-01-01</td><td><span class="tag tag-gray">已到期</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span><span class="lnk danger">删除</span></td></tr>
|
||
<tr><td>劳务合同最新728</td><td>劳务合同</td><td>李欣原</td><td>2025-07-28</td><td>2025-08-31</td><td><span class="tag tag-gray">已到期</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span><span class="lnk danger">删除</span></td></tr>
|
||
<tr><td>123</td><td>劳动合同</td><td>徐向阳</td><td>2025-06-19</td><td>2025-06-30</td><td><span class="tag tag-gray">已到期</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span></td></tr>
|
||
<tr><td>esigntest自话用工（北京）科技服务有限公司PAAR</td><td>其他</td><td>崔玥林</td><td>2025-04-23</td><td>2025-04-23</td><td><span class="tag tag-gray">已到期</span></td><td><span class="lnk">查看</span><span class="lnk">下载</span><span class="lnk danger">删除</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-7 共 125 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">3</button><button class="pg">…</button><button class="pg">13</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 考勤确认 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-attendance">
|
||
<div class="page-title">
|
||
<h1>考勤确认</h1>
|
||
<span class="crumb">· 月度考勤发布与员工确认记录</span>
|
||
</div>
|
||
|
||
<div class="info-banner">
|
||
<div class="title"><i class="ti ti-info-circle"></i> 考勤确认使用说明</div>
|
||
1. 仅支持上传平台提供的标准模板，暂不支持自定义模板；<br>
|
||
2. 发布后员工在小程序首页查看和确认。
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<input class="input" placeholder="搜索姓名" style="min-width:200px;">
|
||
<input class="input" type="date" style="min-width:140px;"><span>~</span><input class="input" type="date" style="min-width:140px;">
|
||
<div class="grow"></div>
|
||
<button class="btn primary"><i class="ti ti-upload"></i> 发布考勤表</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th>姓名</th><th>员工确认情况 ▾</th><th>发布时间 ▾</th><th style="width:120px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>张三</td><td><span class="tag tag-blue">已反馈</span></td><td>2025-06-04 18:01:07</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>李欣原</td><td><span class="tag tag-green">已读</span></td><td>2025-06-04 18:00:10</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>马闻韬</td><td><span class="tag tag-green">已读</span></td><td>2025-05-16 16:09:30</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>崔玥林</td><td><span class="tag tag-green">已读</span></td><td>2025-05-16 16:00:46</td><td><span class="lnk">详情</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-4 共 4 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 工资条发布 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-payslip">
|
||
<div class="page-title">
|
||
<h1>工资条发布</h1>
|
||
<span class="crumb">· 工资条发布与员工确认</span>
|
||
</div>
|
||
|
||
<div class="info-banner">
|
||
<div class="title"><i class="ti ti-info-circle"></i> 工资条发布使用说明</div>
|
||
1. 仅支持上传平台提供的标准模板，暂不支持自定义模板；<br>
|
||
2. 发布后员工在小程序首页查看和确认；<br>
|
||
3. 定时发送前支持取消发送。
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<input class="input" placeholder="搜索姓名" style="min-width:200px;">
|
||
<input class="input" type="date" style="min-width:140px;"><span>~</span><input class="input" type="date" style="min-width:140px;">
|
||
<div class="grow"></div>
|
||
<button class="btn"><i class="ti ti-clock"></i> 定时发送记录</button>
|
||
<button class="btn primary"><i class="ti ti-send"></i> 发布工资条</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th>姓名</th><th>标题</th><th>员工确认情况 ▾</th><th>发布状态 ▾</th><th>发布时间 ▾</th><th style="width:100px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>张三</td><td>555</td><td><span class="tag tag-yellow">未读</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-09-18 13:07:46</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>444</td><td><span class="tag tag-yellow">未读</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-09-18 13:03:11</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>333</td><td><span class="tag tag-yellow">未读</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-09-18 12:40:24</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>222</td><td><span class="tag tag-yellow">未读</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-09-18 12:32:14</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>111</td><td><span class="tag tag-yellow">未读</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-09-18 12:10:08</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>8月份工资</td><td><span class="tag tag-green">已读</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-09-09 09:33:50</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>定时发送</td><td><span class="tag tag-blue">已反馈</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-06-06 15:30:00</td><td><span class="lnk">详情</span></td></tr>
|
||
<tr><td>张三</td><td>五月份工资</td><td><span class="tag tag-blue">已反馈</span></td><td><span class="tag tag-green">已发布</span></td><td>2025-06-06 10:07:16</td><td><span class="lnk">详情</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-8 共 16 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 规章制度民主程序 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-democracy">
|
||
<div class="page-title">
|
||
<h1>规章制度民主程序</h1>
|
||
<span class="crumb">· 规章制度民主表决与公示</span>
|
||
</div>
|
||
|
||
<div class="info-banner">
|
||
<div class="title"><i class="ti ti-info-circle"></i> 使用说明</div>
|
||
<div style="line-height:1.85;">
|
||
1. 请先上传企业规章制度等文件到「企业文本库」后再来此发起； 2. 民主程序按所选部门发布，相关员工收到小程序待办任务和短信通知；<br>
|
||
3. 截止后部门内半数以上员工无异议则视为通过；否则需 HR 修改后重新发布； 4. 民主程序通过可发起公示，员工可在小程序-我的-公司制度中查看。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-bottom:16px;">
|
||
<div class="card-title"><i class="ti ti-edit"></i> 发起民主程序</div>
|
||
|
||
<div class="form-grid-2">
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>选择文件：</div>
|
||
<select class="select"><option>请选择企业文本库中的文件</option><option>考勤制度.pdf</option><option>员工手册.pdf</option></select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>标题：</div>
|
||
<input class="input" placeholder="请输入民主程序标题">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>表决人员：</div>
|
||
<div style="flex:1;display:flex;gap:18px;align-items:center;">
|
||
<label style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#374151;"><input type="radio" name="vote-scope" checked> 全体员工</label>
|
||
<label style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#374151;"><input type="radio" name="vote-scope"> 按部门</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>截止日期：</div>
|
||
<input class="input" type="date">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row" style="align-items:flex-start;">
|
||
<div class="lbl" style="padding-top:8px;"><span class="req">*</span>说明：</div>
|
||
<textarea class="input" rows="4">根据《劳动合同法》第 4 条规定，现公司通过白话用工侠托管平台向相关员工就文件征求意见。请收到民主程序短信的员工登录白话用工侠小程序，点击待办任务，查看已发布文件并完成意见征集。对文件内容有意见或建议的，请在截止日期前在小程序提交反馈。逾期未提交的，将视为无意见或建议。</textarea>
|
||
</div>
|
||
|
||
<div style="text-align:center;margin-top:10px;">
|
||
<button class="btn primary"><i class="ti ti-send"></i> 发布民主程序</button>
|
||
<button class="btn" style="margin-left:8px;">保存草稿</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="tabs-strip" style="margin-bottom:14px;">
|
||
<div class="tab active" data-democracy-tab="dem-vote">民主记录</div>
|
||
<div class="tab" data-democracy-tab="dem-public">公示记录</div>
|
||
</div>
|
||
|
||
<div id="dem-vote" class="democracy-panel">
|
||
<table class="data-table">
|
||
<thead><tr><th style="width:60px;">序号</th><th>文本名称</th><th>发起时间</th><th>表决人员</th><th>民主状态</th><th style="width:160px;">操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>测试合同 - 副本 (7).pdf</td><td>2025-04-23</td><td>产品一部</td><td><span class="tag tag-green">民主通过</span></td><td><span class="lnk">详情</span><span class="lnk">发起公示</span></td></tr>
|
||
<tr><td>2</td><td>测试合同 - 副本 (9).pdf</td><td>2025-04-23</td><td>产品一部, 研发二部</td><td><span class="tag tag-green">民主通过</span></td><td><span class="lnk">详情</span><span class="lnk">发起公示</span></td></tr>
|
||
<tr><td>3</td><td>考勤制度.pdf</td><td>2025-04-23</td><td>全体人员</td><td><span class="tag tag-green">民主通过</span></td><td><span class="lnk">详情</span><span class="lnk">发起公示</span></td></tr>
|
||
<tr><td>4</td><td>计算机基础.pdf</td><td>2025-04-22</td><td>全体人员</td><td><span class="tag tag-green">民主通过</span></td><td><span class="lnk">详情</span><span class="lnk">发起公示</span></td></tr>
|
||
<tr><td>5</td><td>进阶篇.pdf</td><td>2025-04-22</td><td>业务一线, 业务二线</td><td><span class="tag tag-green">民主通过</span></td><td><span class="lnk">详情</span><span class="lnk">发起公示</span></td></tr>
|
||
<tr><td>6</td><td>托管服务落地指导手册大纲-0915最终版.pdf</td><td>2025-02-10</td><td>全体人员</td><td><span class="tag tag-green">民主通过</span></td><td><span class="lnk">详情</span><span class="lnk">发起公示</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-6 共 17 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
<div id="dem-public" class="democracy-panel" style="display:none;">
|
||
<table class="data-table">
|
||
<thead><tr><th style="width:60px;">序号</th><th>文本名称</th><th>公示开始</th><th>公示结束</th><th>状态</th><th style="width:140px;">操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>考勤制度.pdf</td><td>2025-04-23</td><td>持续公示</td><td><span class="tag tag-blue">公示中</span></td><td><span class="lnk">详情</span><span class="lnk danger">废弃</span></td></tr>
|
||
<tr><td>2</td><td>员工手册.pdf</td><td>2025-04-22</td><td>持续公示</td><td><span class="tag tag-blue">公示中</span></td><td><span class="lnk">详情</span><span class="lnk danger">废弃</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 企业文本库 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-enterprise-text">
|
||
<div class="page-title">
|
||
<h1>企业文本库</h1>
|
||
<span class="crumb">· 企业自有规章制度、合同等文本</span>
|
||
</div>
|
||
|
||
<div class="info-banner">
|
||
<div class="title"><i class="ti ti-info-circle"></i> 使用说明</div>
|
||
1. 可新建企业自己的用工文本模板，并针对不同类型用工文本发起相应流程；<br>
|
||
2. 如需上传企业自己的规章制度，建议参考我们在"用工文本模板库"中提供的"员工手册（范本）"进行参考，避免出现用工风险问题；<br>
|
||
3. 当前仅支持规章制度类型（后续逐步更新），对该类型可以直接发起民主公示程序，为企业提供合规流程，保驾护航。
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>文本名称：</span><input class="input" placeholder="请输入文本名称"></div>
|
||
<div class="field"><span>文本类型：</span><select class="select"><option>请选择文本类型</option><option>规章制度</option><option>合同文本</option><option>其他</option></select></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
<div class="grow"></div>
|
||
<button class="btn primary"><i class="ti ti-folder-plus"></i> 新建</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th style="width:180px;">文本编号</th><th>文本名称</th><th>文本类型</th><th>创建人</th><th>创建时间 ▾</th><th style="width:200px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1914974805631696898</td><td>测试合同 - 副本 (7).pdf</td><td>规章制度</td><td>崔玥林</td><td>2025-04-23 17:29:07</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td>1914943929023733762</td><td>测试合同 - 副本 (9).pdf</td><td>规章制度</td><td>崔玥林</td><td>2025-04-23 15:26:25</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td>1914614112470441985</td><td>考勤制度.pdf</td><td>规章制度</td><td>崔玥林</td><td>2025-04-22 17:35:51</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td>1914594474078056449</td><td>计算机基础.pdf</td><td>规章制度</td><td>崔玥林</td><td>2025-04-22 16:17:49</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td>1914586301053112322</td><td>进阶篇.pdf</td><td>规章制度</td><td>崔玥林</td><td>2025-04-22 15:45:20</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td>1888848753675235330</td><td>托管服务落地指导手册大纲-0915最终版.pdf</td><td>规章制度</td><td>崔玥林</td><td>2025-02-10 15:13:31</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td>1858783886703685633</td><td>enterpriseText-185841791587818291...</td><td>规章制度</td><td>崔玥林</td><td>2024-11-19 16:06:28</td><td><span class="lnk">预览</span><span class="lnk">民主公示</span><span class="lnk">更多 ▾</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-7 共 15 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 用工文本模板库 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-template-text">
|
||
<div class="page-title">
|
||
<h1>用工文本模板库</h1>
|
||
<span class="crumb">· 平台提供的标准用工文本模板</span>
|
||
</div>
|
||
|
||
<div class="info-banner">
|
||
<div class="title"><i class="ti ti-info-circle"></i> 使用说明</div>
|
||
平台提供员工手册、劳动合同、各类协议等标准范本，企业可参考或下载使用。范本由白话用工侠法律团队审核，遵循最新劳动法规。
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>分类：</span><select class="select"><option>全部</option><option>员工手册</option><option>劳动合同</option><option>劳务/灵活用工</option><option>各类协议</option><option>通知/证明</option></select></div>
|
||
<div class="field"><span>关键词：</span><input class="input" placeholder="模板名称"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th>模板名称</th><th>分类</th><th>更新时间</th><th>说明</th><th style="width:160px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>员工手册（范本）</td><td>员工手册</td><td>2025-09-01</td><td>覆盖入职、考勤、薪酬、奖惩、离职等完整框架</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>固定期限劳动合同（标准版）</td><td>劳动合同</td><td>2025-09-01</td><td>含试用期、保密、竞业等通用条款</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>非全日制劳动合同</td><td>劳动合同</td><td>2025-09-01</td><td>非全日制用工标准范本</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>劳务合同（个人）</td><td>劳务/灵活用工</td><td>2025-09-01</td><td>个人提供劳务标准合同</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>培训服务协议</td><td>各类协议</td><td>2025-09-01</td><td>含服务期/违约金条款</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>保密与竞业限制协议</td><td>各类协议</td><td>2025-09-01</td><td>商业秘密保护与竞业限制</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>解除/终止劳动合同通知书</td><td>通知/证明</td><td>2025-09-01</td><td>各情形通知书模板</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
<tr><td>离职证明</td><td>通知/证明</td><td>2025-09-01</td><td>合规离职证明模板</td><td><span class="lnk">预览</span><span class="lnk">下载</span><span class="lnk">引用为企业文本</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 用工体检诊断 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-health-check">
|
||
<div class="page-title">
|
||
<h1>用工体检诊断</h1>
|
||
<span class="crumb">· 年度合规体检 · 出具《企业劳动用工体检诊断报告》</span>
|
||
</div>
|
||
|
||
<div class="bg-hero" style="background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);">
|
||
<div class="icon"><i class="ti ti-stethoscope"></i></div>
|
||
<div style="flex:1;">
|
||
<div class="title">用工体检诊断</div>
|
||
<div class="sub">每年为企业提供一次用工体检诊断服务。结合企业规模、行业特点、发展阶段等，按照合规风险点和合规义务为企业进行诊断，出具《企业劳动用工体检诊断报告》让企业知晓现存劳动问题，并提供解决办法。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row cols-2" style="align-items:flex-start;">
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-checkup-list"></i> 诊断维度</div>
|
||
<div class="diag-grid">
|
||
<div class="diag-card"><div class="ico"><i class="ti ti-file-certificate"></i></div><div><div class="nm">劳动合同管理</div><div class="meta">期限/试用期/必备条款</div></div></div>
|
||
<div class="diag-card"><div class="ico"><i class="ti ti-clipboard-check"></i></div><div><div class="nm">规章制度管理</div><div class="meta">制定/民主公示</div></div></div>
|
||
<div class="diag-card"><div class="ico"><i class="ti ti-shield-check"></i></div><div><div class="nm">社会保险管理</div><div class="meta">缴纳险种/基数</div></div></div>
|
||
<div class="diag-card"><div class="ico"><i class="ti ti-search"></i></div><div><div class="nm">员工背景调查</div><div class="meta">入职合规审核</div></div></div>
|
||
<div class="diag-card"><div class="ico"><i class="ti ti-clock-hour-4"></i></div><div><div class="nm">工作时间与加班</div><div class="meta">工时制/加班费</div></div></div>
|
||
<div class="diag-card"><div class="ico"><i class="ti ti-lock"></i></div><div><div class="nm">保密与竞业限制协议</div><div class="meta">协议规范与补偿</div></div></div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:18px;">
|
||
<button class="btn primary" style="height:38px;padding:0 28px;font-size:14px;"><i class="ti ti-stethoscope"></i> 开始诊断</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-report"></i> 诊断报告</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #E5E7EB;border-radius:8px;">
|
||
<div style="width:36px;height:36px;background:#FEF3C7;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#92400E;flex-shrink:0;"><i class="ti ti-file-text" style="font-size:18px;"></i></div>
|
||
<div style="flex:1;">
|
||
<div style="font-size:13px;font-weight:600;color:#1E2761;">2025 年度用工诊断报告</div>
|
||
<div style="font-size:11px;color:#6B7280;">2025-11-07 13:46:42 · 61.84 分 <span class="tag tag-red" style="margin-left:6px;">高风险</span></div>
|
||
</div>
|
||
<button class="btn small"><i class="ti ti-download"></i> 下载</button>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #E5E7EB;border-radius:8px;">
|
||
<div style="width:36px;height:36px;background:#EAF2F9;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1E40AF;flex-shrink:0;"><i class="ti ti-file-text" style="font-size:18px;"></i></div>
|
||
<div style="flex:1;">
|
||
<div style="font-size:13px;font-weight:600;color:#1E2761;">2024 年度用工诊断报告</div>
|
||
<div style="font-size:11px;color:#6B7280;">2024-10-16 16:03:08</div>
|
||
</div>
|
||
<button class="btn small"><i class="ti ti-download"></i> 下载</button>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #E5E7EB;border-radius:8px;">
|
||
<div style="width:36px;height:36px;background:#EAF2F9;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1E40AF;flex-shrink:0;"><i class="ti ti-file-text" style="font-size:18px;"></i></div>
|
||
<div style="flex:1;">
|
||
<div style="font-size:13px;font-weight:600;color:#1E2761;">2023 年度用工诊断报告</div>
|
||
<div style="font-size:11px;color:#6B7280;">2023-08-12 15:41:53</div>
|
||
</div>
|
||
<button class="btn small"><i class="ti ti-download"></i> 下载</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 背景调查 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-bgcheck">
|
||
<div class="page-title">
|
||
<h1>背景调查</h1>
|
||
<span class="crumb">· 候选人多维度合规背调</span>
|
||
</div>
|
||
|
||
<div class="bg-hero">
|
||
<div class="icon"><i class="ti ti-search"></i></div>
|
||
<div style="flex:1;">
|
||
<div class="title">背景调查</div>
|
||
<div class="sub">温馨提示：发起背调前请务必取得候选人的授权同意。背调结果实时反馈，可在"背调记录"中下载完整报告。</div>
|
||
</div>
|
||
<div style="display:flex;gap:24px;">
|
||
<div style="text-align:center;">
|
||
<div style="font-size:11px;color:#6B7280;">免费次数</div>
|
||
<div style="font-size:22px;font-weight:700;color:#2E75B6;">22 <span style="font-size:12px;font-weight:500;">次</span></div>
|
||
</div>
|
||
<div style="text-align:center;">
|
||
<div style="font-size:11px;color:#6B7280;">付费次数</div>
|
||
<div style="font-size:22px;font-weight:700;color:#1E2761;">0 <span style="font-size:12px;font-weight:500;">次</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabs-strip">
|
||
<div class="tab active" data-bg-tab="bg-create">发起背调</div>
|
||
<div class="tab" data-bg-tab="bg-records">背调记录</div>
|
||
</div>
|
||
|
||
<div id="bg-create" class="bg-panel">
|
||
<div class="card" style="margin-bottom:14px;">
|
||
<div class="card-title" style="color:#1E40AF;"><i class="ti ti-package"></i> 背调内容（每次背调包含以下 5 项）</div>
|
||
<div class="bg-items">
|
||
<div class="bg-item">
|
||
<div class="bg-ico" style="background:#EAF2F9;color:#2E75B6;"><i class="ti ti-id"></i></div>
|
||
<div class="bg-nm">身份信息</div>
|
||
<div class="bg-sub">姓名/身份证一致性</div>
|
||
</div>
|
||
<div class="bg-item">
|
||
<div class="bg-ico" style="background:#FEE2E2;color:#C00000;"><i class="ti ti-file-alert"></i></div>
|
||
<div class="bg-nm">不良记录</div>
|
||
<div class="bg-sub">失信被执行人核查</div>
|
||
</div>
|
||
<div class="bg-item">
|
||
<div class="bg-ico" style="background:#F3E8FF;color:#8B5CF6;"><i class="ti ti-pill"></i></div>
|
||
<div class="bg-nm">吸毒记录</div>
|
||
<div class="bg-sub">公安系统核查</div>
|
||
</div>
|
||
<div class="bg-item">
|
||
<div class="bg-ico" style="background:#FEF3C7;color:#D97706;"><i class="ti ti-gavel"></i></div>
|
||
<div class="bg-nm">诉讼记录</div>
|
||
<div class="bg-sub">涉诉信息查询</div>
|
||
</div>
|
||
<div class="bg-item">
|
||
<div class="bg-ico" style="background:#CCFBF1;color:#0F766E;"><i class="ti ti-credit-card-off"></i></div>
|
||
<div class="bg-nm">网贷黑名单</div>
|
||
<div class="bg-sub">多头借贷与逾期</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-edit"></i> 填写候选人信息</div>
|
||
<div class="form-grid-2">
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>候选人姓名：</div>
|
||
<input class="input" placeholder="请输入系统中的人员姓名">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl">身份证号：</div>
|
||
<input class="input" placeholder="请输入身份证号（可选）">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#FFFBEB;border:1px solid #FCD34D;border-radius:6px;padding:12px 16px;font-size:12px;color:#78350F;line-height:1.85;margin-bottom:14px;">
|
||
<strong>额度说明：</strong>服务到期后免费额度自动清空；免费、付费额度并存时优先消耗免费额度；如需购买付费额度请联系销售。
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
|
||
<label style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#4B5563;"><input type="checkbox"> 已阅读并同意《背调须知及免责声明》</label>
|
||
<div>
|
||
<button class="btn">取消</button>
|
||
<button class="btn primary" style="margin-left:8px;"><i class="ti ti-search"></i> 发起背调</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="bg-records" class="bg-panel" style="display:none;">
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>候选人：</span><input class="input" placeholder="请输入候选人姓名"></div>
|
||
<div class="field"><span>身份证：</span><input class="input" placeholder="请输入身份证号" style="min-width:200px;"></div>
|
||
<div class="field"><span>状态：</span><select class="select"><option>全部</option><option>已完成</option><option>进行中</option></select></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead><tr><th style="width:60px;">序号</th><th>候选人</th><th>身份证号</th><th>订单状态</th><th>创建时间 ▾</th><th style="width:180px;">操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>张三</td><td>110101199801011234</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-09 15:54:44</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>2</td><td>张三</td><td>110101199801011234</td><td><span class="tag tag-green">已完成</span></td><td>2026-01-19 13:56:55</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>3</td><td>李欣原</td><td>410423199503121011</td><td><span class="tag tag-green">已完成</span></td><td>2025-09-24 16:32:32</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>4</td><td>李欣原</td><td>410423199503121011</td><td><span class="tag tag-green">已完成</span></td><td>2025-09-24 16:31:13</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>5</td><td>李欣原</td><td>410423199503121011</td><td><span class="tag tag-green">已完成</span></td><td>2025-09-24 16:29:16</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>6</td><td>李欣原</td><td>410423199503121011</td><td><span class="tag tag-green">已完成</span></td><td>2025-07-29 16:42:38</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>7</td><td>徐向阳</td><td>130434199104101013</td><td><span class="tag tag-green">已完成</span></td><td>2025-02-10 15:11:16</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
<tr><td>8</td><td>聂萍</td><td>411322199403314913</td><td><span class="tag tag-green">已完成</span></td><td>2025-02-10 10:38:25</td><td><span class="lnk">详情</span><span class="lnk">下载报告</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-8 共 12 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 视频中心 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-video">
|
||
<div class="page-title">
|
||
<h1>视频中心</h1>
|
||
<span class="crumb">· 企业用工风险管控系统视频课程</span>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<input class="input grow" placeholder="搜索课程标题，例如：劳动法、仲裁、试用期">
|
||
<select class="select"><option>全部分类</option><option>招聘入职</option><option>培训服务期</option><option>合同管理</option><option>规章制度</option><option>考勤加班</option><option>解除离职</option><option>仲裁应对</option></select>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 搜索</button>
|
||
</div>
|
||
|
||
<div class="video-grid">
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块一<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">招聘与试用期风险管理</div>
|
||
<div class="d">招聘环节合规要点、offer 法律风险、试用期约定与解除条件。</div>
|
||
<div class="foot"><span>白小侠 · 28 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块二<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">培训与服务期风控管理</div>
|
||
<div class="d">培训费用专款专用、服务期约定要点、违约金计算与举证。</div>
|
||
<div class="foot"><span>白小侠 · 32 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块三<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">保密与竞业限制风控管理</div>
|
||
<div class="d">保密协议、竞业限制协议的设计、补偿与违约金条款实务讲解。</div>
|
||
<div class="foot"><span>白小侠 · 26 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块四<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">调岗调薪风险管理</div>
|
||
<div class="d">合规调岗调薪的合理性、必要性论证与协商一致变更要点。</div>
|
||
<div class="foot"><span>白小侠 · 24 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块五<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">规章制度民主程序</div>
|
||
<div class="d">规章制度合规制定流程：起草、民主程序、公示告知的法律要点。</div>
|
||
<div class="foot"><span>白小侠 · 30 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块六<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">考勤与加班管理</div>
|
||
<div class="d">工时制选择、加班费计算、考勤证据链构建。</div>
|
||
<div class="foot"><span>白小侠 · 22 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb">模块七<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">解除与离职管理</div>
|
||
<div class="d">合法解除程序、经济补偿计算、离职面谈与证据留存。</div>
|
||
<div class="foot"><span>白小侠 · 35 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="video-card">
|
||
<div class="video-thumb" style="background:linear-gradient(135deg,#7C3AED 0%,#4338CA 100%);">劳动法<br>专题<div class="play"><i class="ti ti-player-play-filled"></i></div></div>
|
||
<div class="video-info">
|
||
<div class="t">仲裁应对实务专题</div>
|
||
<div class="d">通过真实案例讲解仲裁庭审、证据准备与代理思路。</div>
|
||
<div class="foot"><span>白小侠 · 48 分钟</span><button class="btn small primary">立即学习</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 五险一金计算器 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-tool-shebao">
|
||
<div class="page-title">
|
||
<h1>五险一金计算器</h1>
|
||
<span class="crumb">· 按城市快速计算社保公积金</span>
|
||
</div>
|
||
|
||
<div class="info-banner">
|
||
<div class="title"><i class="ti ti-info-circle"></i> 使用说明</div>
|
||
按当前所在城市的最新缴费比例和上下限自动计算。结果仅供参考，最终以当地社保局公布数据为准。
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-calculator"></i> 缴费基数与比例</div>
|
||
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>缴纳城市：</div>
|
||
<select class="select"><option>请选择城市</option><option>北京</option><option>上海</option><option>深圳</option><option>广州</option><option>杭州</option><option>南京</option><option>苏州</option></select>
|
||
</div>
|
||
|
||
<div class="form-grid-2">
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>是否缴纳社保：</div>
|
||
<div class="btn-toggle">
|
||
<button class="on">是</button>
|
||
<button>否</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>社保类型：</div>
|
||
<select class="select"><option>请选择</option><option>城镇职工</option><option>城乡居民</option></select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>社保基数：</div>
|
||
<input class="input" placeholder="请输入社保基数（元/月）">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl">自定义工伤保险：</div>
|
||
<div class="btn-toggle">
|
||
<button>是</button>
|
||
<button class="on">否</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>是否缴纳公积金：</div>
|
||
<div class="btn-toggle">
|
||
<button class="on">是</button>
|
||
<button>否</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>公积金比例：</div>
|
||
<select class="select"><option>请选择</option><option>5%</option><option>7%</option><option>10%</option><option>12%</option></select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>公积金基数：</div>
|
||
<input class="input" placeholder="请输入公积金基数（元/月）">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border-top:1px dashed #E0E6ED;padding-top:18px;margin-top:6px;text-align:center;">
|
||
<button class="btn primary" style="height:38px;padding:0 28px;font-size:14px;"><i class="ti ti-calculator"></i> 立即计算</button>
|
||
<button class="btn" style="height:38px;padding:0 28px;font-size:14px;margin-left:8px;"><i class="ti ti-refresh"></i> 重置</button>
|
||
</div>
|
||
|
||
<div class="calc-result empty">
|
||
<i class="ti ti-arrow-up"></i> 填写完上方信息后点击「立即计算」查看明细
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 医疗期计算器 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-tool-medical">
|
||
<div class="page-title">
|
||
<h1>医疗期计算器</h1>
|
||
<span class="crumb">· 按地区与工龄计算医疗期</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-calculator"></i> 填写信息</div>
|
||
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>选择所在地区：</div>
|
||
<div class="btn-toggle">
|
||
<button class="on">上海</button>
|
||
<button>全国（非上海）</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid-2">
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>本单位入职日期：</div>
|
||
<input class="input" type="date">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>计算截止日期：</div>
|
||
<input class="input" type="date">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="lbl"><span class="req">*</span>累计病休天数：</div>
|
||
<input class="input" placeholder="请输入累计病休天数（天）">
|
||
</div>
|
||
|
||
<div style="border-top:1px dashed #E0E6ED;padding-top:18px;margin-top:6px;text-align:center;">
|
||
<button class="btn primary" style="height:38px;padding:0 28px;font-size:14px;"><i class="ti ti-calculator"></i> 立即计算</button>
|
||
<button class="btn" style="height:38px;padding:0 28px;font-size:14px;margin-left:8px;"><i class="ti ti-refresh"></i> 重置</button>
|
||
</div>
|
||
|
||
<div class="calc-result empty">
|
||
<i class="ti ti-arrow-up"></i> 填写完上方信息后点击「立即计算」查看医疗期天数
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:16px;">
|
||
<div class="card-title"><i class="ti ti-book"></i> 计算规则 & 法律依据</div>
|
||
<ol style="margin:0;padding-left:20px;font-size:13px;color:#374151;line-height:1.9;">
|
||
<li>《关于本市劳动者在履行劳动合同期间患病或者非因工负伤的医疗期标准的规定》沪府发(2015)40 号（效期延长至 2025 年 6 月 30 日）第 2 条：劳动者在本单位工作第 1 年，医疗期为 3 个月；以后工作每满 1 年，医疗期增加 1 个月，但不超过 24 个月。</li>
|
||
<li>同上规定第 3 条：劳动者经劳动能力鉴定委员会鉴定为完全丧失劳动能力但不符合退休、退职条件的，应当延长医疗期；约定延长的医疗期与前条规定的医疗期合计不得低于 24 个月。</li>
|
||
<li>《上海市劳动保障局关于病假工资计算的公告》第 1 条：职工疾病或非因工负伤休假日数按实际休假日数计算，连续休假期内含有休息日、节假日的应予剔除。</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 通知管理 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-notice">
|
||
<div class="page-title">
|
||
<h1>通知管理</h1>
|
||
<span class="crumb">· 系统消息与员工通知</span>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>类型：</span><select class="select"><option>全部</option><option>系统通知</option><option>合同到期</option><option>试用期</option><option>民主程序</option><option>背调结果</option></select></div>
|
||
<div class="field"><span>状态：</span><select class="select"><option>全部</option><option>未读</option><option>已读</option></select></div>
|
||
<div class="field"><span>关键词：</span><input class="input" placeholder="标题/内容"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<div class="grow"></div>
|
||
<button class="btn"><i class="ti ti-check"></i> 全部标为已读</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th style="width:80px;">类型</th><th>标题</th><th>接收人</th><th>发送时间 ▾</th><th>状态</th><th style="width:120px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><span class="tag tag-red">合同到期</span></td><td>刘云未设置合同信息，请尽快补充</td><td>李 HR</td><td>2025-11-20 09:30</td><td><span class="tag tag-yellow">未读</span></td><td><span class="lnk">查看</span><span class="lnk">标为已读</span></td></tr>
|
||
<tr><td><span class="tag tag-blue">民主程序</span></td><td>考勤制度.pdf 民主程序已通过</td><td>李 HR</td><td>2025-04-23 18:00</td><td><span class="tag tag-green">已读</span></td><td><span class="lnk">查看</span></td></tr>
|
||
<tr><td><span class="tag tag-blue">背调结果</span></td><td>张三 的背景调查报告已生成</td><td>李 HR</td><td>2026-04-09 16:00</td><td><span class="tag tag-yellow">未读</span></td><td><span class="lnk">查看</span><span class="lnk">标为已读</span></td></tr>
|
||
<tr><td><span class="tag tag-yellow">试用期</span></td><td>员工郭宪强试用期即将到期（30天）</td><td>李 HR</td><td>2025-10-30 10:00</td><td><span class="tag tag-green">已读</span></td><td><span class="lnk">查看</span></td></tr>
|
||
<tr><td><span class="tag tag-gray">系统</span></td><td>2025 年度用工诊断报告已生成</td><td>李 HR</td><td>2025-11-07 13:46</td><td><span class="tag tag-green">已读</span></td><td><span class="lnk">查看</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-5 共 38 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">3</button><button class="pg">4</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 系统设置 - 用户管理 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-user-mgmt">
|
||
<div class="page-title">
|
||
<h1>用户管理</h1>
|
||
<span class="crumb">系统设置 / 用户管理</span>
|
||
</div>
|
||
|
||
<div class="row" style="grid-template-columns: 240px 1fr; align-items:flex-start;">
|
||
<div class="card" style="padding:14px;">
|
||
<div class="card-title" style="font-size:13px;margin-bottom:8px;"><i class="ti ti-sitemap"></i> 组织架构</div>
|
||
<div style="font-size:13px;color:#1E2761;line-height:2;">
|
||
<div style="font-weight:600;">▾ 北京白话共享企业管理有限公司 PAAK</div>
|
||
<div style="padding-left:18px;">▾ 产品部</div>
|
||
<div style="padding-left:36px;color:#4B5563;">产品一部</div>
|
||
<div style="padding-left:36px;color:#4B5563;">产品二部</div>
|
||
<div style="padding-left:18px;">▾ 研发部</div>
|
||
<div style="padding-left:36px;color:#4B5563;">研发一部</div>
|
||
<div style="padding-left:36px;color:#4B5563;">研发二部</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>关键词：</span><input class="input" placeholder="请输入姓名、账号、手机号"></div>
|
||
<div class="field"><span>状态：</span><select class="select"><option>请选择状态</option><option>正常</option><option>禁用</option></select></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
<button class="btn"><i class="ti ti-refresh"></i> 重置</button>
|
||
<div class="grow"></div>
|
||
<button class="btn primary"><i class="ti ti-plus"></i> 新增用户</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th style="width:40px;"><input type="checkbox"></th><th>账号</th><th>姓名</th><th>性别</th><th>手机</th><th>状态</th><th style="width:140px;">操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><input type="checkbox"></td><td>test9999</td><td>崔玥林</td><td>男</td><td>15103488567</td><td><span class="tag tag-green">正常</span></td><td><span class="lnk">编辑</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td><input type="checkbox"></td><td>testCyl</td><td>Cyl</td><td>男</td><td>18630662611</td><td><span class="tag tag-green">正常</span></td><td><span class="lnk">编辑</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td><input type="checkbox"></td><td>test7777</td><td>test7777</td><td>男</td><td>15034425955</td><td><span class="tag tag-green">正常</span></td><td><span class="lnk">编辑</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td><input type="checkbox"></td><td>test6666</td><td>test6666</td><td>男</td><td>15034425977</td><td><span class="tag tag-green">正常</span></td><td><span class="lnk">编辑</span><span class="lnk">更多 ▾</span></td></tr>
|
||
<tr><td><input type="checkbox"></td><td>test5555</td><td>test5555</td><td>男</td><td>15034426955</td><td><span class="tag tag-green">正常</span></td><td><span class="lnk">编辑</span><span class="lnk">更多 ▾</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-5 共 5 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- 系统设置 - 系统日志 -->
|
||
<!-- ============================================================ -->
|
||
<div class="page" id="page-syslog">
|
||
<div class="page-title">
|
||
<h1>系统日志</h1>
|
||
<span class="crumb">系统设置 / 系统日志</span>
|
||
</div>
|
||
|
||
<div class="data-toolbar">
|
||
<div class="field"><span>操作人：</span><input class="input" placeholder="姓名/账号"></div>
|
||
<div class="field"><span>操作类型：</span><select class="select"><option>全部</option><option>登录</option><option>新增</option><option>修改</option><option>删除</option><option>查询</option><option>导出</option></select></div>
|
||
<div class="field"><span>模块：</span><select class="select"><option>全部</option><option>花名册</option><option>合同管理</option><option>考勤确认</option><option>工资条发布</option><option>背景调查</option><option>用户管理</option></select></div>
|
||
<div class="field"><span>时间：</span><input class="input" type="date" style="min-width:140px;"><span>~</span><input class="input" type="date" style="min-width:140px;"></div>
|
||
<button class="btn primary"><i class="ti ti-search"></i> 查询</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr><th>操作时间 ▾</th><th>操作人</th><th>账号</th><th>操作类型</th><th>模块</th><th>操作内容</th><th>IP</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>2025-11-20 11:02:18</td><td>崔玥林</td><td>test9999</td><td><span class="tag tag-blue">新增</span></td><td>合同管理</td><td>创建合同《劳动合同 - 郭宪强》</td><td>10.0.1.23</td></tr>
|
||
<tr><td>2025-11-20 10:59:36</td><td>李 HR</td><td>cyhr</td><td><span class="tag tag-blue">新增</span></td><td>我的申请</td><td>发起员工入职申请（张三）</td><td>10.0.1.45</td></tr>
|
||
<tr><td>2025-11-19 17:32:10</td><td>李 HR</td><td>cyhr</td><td><span class="tag tag-yellow">修改</span></td><td>员工管理</td><td>编辑员工信息（刘云）</td><td>10.0.1.45</td></tr>
|
||
<tr><td>2025-11-19 16:06:28</td><td>崔玥林</td><td>test9999</td><td><span class="tag tag-blue">新增</span></td><td>企业文本库</td><td>上传 enterpriseText-185841...pdf</td><td>10.0.1.23</td></tr>
|
||
<tr><td>2025-11-18 10:08:21</td><td>马闻韬</td><td>mwt</td><td><span class="tag tag-green">登录</span></td><td>系统</td><td>用户登录</td><td>10.0.2.18</td></tr>
|
||
<tr><td>2025-11-07 13:46:42</td><td>崔玥林</td><td>test9999</td><td><span class="tag tag-blue">新增</span></td><td>用工体检诊断</td><td>生成《2025 年度用工诊断报告》</td><td>10.0.1.23</td></tr>
|
||
<tr><td>2025-04-23 18:00:00</td><td>李 HR</td><td>cyhr</td><td><span class="tag tag-blue">新增</span></td><td>规章制度民主程序</td><td>发起民主程序：考勤制度.pdf</td><td>10.0.1.45</td></tr>
|
||
<tr><td>2025-04-22 17:35:51</td><td>崔玥林</td><td>test9999</td><td><span class="tag tag-blue">新增</span></td><td>企业文本库</td><td>上传考勤制度.pdf</td><td>10.0.1.23</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination"><span>1-8 共 1,247 条</span><div class="pager"><button class="pg">‹</button><button class="pg active">1</button><button class="pg">2</button><button class="pg">3</button><button class="pg">…</button><button class="pg">125</button><button class="pg">›</button></div></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 浮动白小侠 -->
|
||
<div class="floating-ai">
|
||
<div class="floating-voice" title="按住说话"><i class="ti ti-microphone"></i></div>
|
||
<i class="ti ti-sparkles" style="font-size:24px;"></i>
|
||
<span class="badge">3</span>
|
||
<span class="label-pop">3 条新建议 · 长按麦克风说话</span>
|
||
</div>
|
||
|
||
<script>
|
||
// 通用：切到指定 page 并同步左侧导航高亮
|
||
function switchPage(pid) {
|
||
if (!pid) return;
|
||
// 清除一级和二级的 active
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
document.querySelectorAll('.nav-sub').forEach(n => n.classList.remove('active'));
|
||
// 找一级或二级里 data-page 等于 pid 的，加 active
|
||
const navTop = document.querySelector(`.nav-item[data-page="${pid}"]`);
|
||
if (navTop) navTop.classList.add('active');
|
||
const navSub = document.querySelector(`.nav-sub[data-page="${pid}"]`);
|
||
if (navSub) {
|
||
navSub.classList.add('active');
|
||
// 同时展开其所在分组
|
||
const group = navSub.closest('.nav-group');
|
||
if (group) group.classList.remove('collapsed');
|
||
}
|
||
// 切换 page
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
const tp = document.getElementById(pid);
|
||
if (tp) tp.classList.add('active');
|
||
const content = document.querySelector('.content');
|
||
if (content) content.scrollTop = 0;
|
||
}
|
||
|
||
// 一级导航项点击（带 data-page 的）
|
||
document.querySelectorAll('.nav-item[data-page]').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
switchPage(this.dataset.page);
|
||
});
|
||
});
|
||
|
||
// 二级导航项点击
|
||
document.querySelectorAll('.nav-sub[data-page]').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
switchPage(this.dataset.page);
|
||
});
|
||
});
|
||
|
||
// 一级分组头点击：展开/折叠
|
||
document.querySelectorAll('.nav-group-head[data-group]').forEach(head => {
|
||
head.addEventListener('click', function(e) {
|
||
// 仅在点击分组头本身（包括 caret）时折叠；二级项有自己的 stopPropagation
|
||
const group = this.closest('.nav-group');
|
||
if (group) group.classList.toggle('collapsed');
|
||
});
|
||
});
|
||
|
||
// 顶部 AI 入口快捷跳转
|
||
document.querySelectorAll('.ai-quick[data-jump]').forEach(btn => {
|
||
btn.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
switchPage(this.dataset.jump);
|
||
});
|
||
});
|
||
|
||
// 合规中心 Tab 切换
|
||
document.querySelectorAll('.cc-tab[data-tab]').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
const tid = this.dataset.tab;
|
||
document.querySelectorAll('.cc-tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
document.querySelectorAll('.cc-panel').forEach(p => p.classList.remove('active'));
|
||
const tp = document.getElementById(tid);
|
||
if (tp) tp.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 民主程序 Tab 切换（民主记录/公示记录）
|
||
document.querySelectorAll('.tabs-strip [data-democracy-tab]').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
const tid = this.dataset.democracyTab;
|
||
// 切换同级 tab 的 active
|
||
this.parentElement.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
// 切换面板
|
||
document.querySelectorAll('.democracy-panel').forEach(p => p.style.display = 'none');
|
||
const tp = document.getElementById(tid);
|
||
if (tp) tp.style.display = '';
|
||
});
|
||
});
|
||
|
||
// 背景调查 Tab 切换（发起背调/背调记录）
|
||
document.querySelectorAll('.tabs-strip [data-bg-tab]').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
const tid = this.dataset.bgTab;
|
||
this.parentElement.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
document.querySelectorAll('.bg-panel').forEach(p => p.style.display = 'none');
|
||
const tp = document.getElementById(tid);
|
||
if (tp) tp.style.display = '';
|
||
});
|
||
});
|
||
|
||
// 风险报告 Tab 切换
|
||
document.querySelectorAll('.fr-risk-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
document.querySelectorAll('.fr-risk-tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 文件审查：左右联动 - 点击右侧风险卡片，左侧对应高亮闪烁
|
||
document.querySelectorAll('.risk-card').forEach((card, idx) => {
|
||
card.addEventListener('click', function(e) {
|
||
if (e.target.closest('button')) return;
|
||
const hls = document.querySelectorAll('.fr-doc .hl');
|
||
const hl = hls[idx];
|
||
if (hl) {
|
||
hl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
hl.style.transition = 'all 0.2s';
|
||
const orig = hl.style.boxShadow;
|
||
hl.style.boxShadow = '0 0 0 3px rgba(46,117,182,0.4)';
|
||
setTimeout(() => { hl.style.boxShadow = orig; }, 1500);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 文件审查：点击"一键采纳" 模拟替换
|
||
document.querySelectorAll('.risk-card .btn.primary').forEach((btn, idx) => {
|
||
if (btn.textContent.includes('采纳')) {
|
||
btn.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
const card = this.closest('.risk-card');
|
||
const fix = card.querySelector('.risk-fix-text');
|
||
if (!fix) return;
|
||
const hls = document.querySelectorAll('.fr-doc .hl');
|
||
const allCards = Array.from(document.querySelectorAll('.risk-card'));
|
||
const i = allCards.indexOf(card);
|
||
const hl = hls[i];
|
||
if (hl) {
|
||
const parent = hl.parentElement;
|
||
const newHl = document.createElement('span');
|
||
newHl.className = 'hl';
|
||
newHl.style.background = '#DCFCE7';
|
||
newHl.style.color = '#166534';
|
||
newHl.style.borderBottom = '2px solid #16A34A';
|
||
newHl.innerHTML = '✓ ' + fix.innerHTML;
|
||
parent.replaceChild(newHl, hl);
|
||
card.style.opacity = '0.55';
|
||
this.innerHTML = '<i class="ti ti-check"></i> 已采纳';
|
||
this.disabled = true;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 场景选择切换
|
||
document.querySelectorAll('.scene-chip').forEach(chip => {
|
||
chip.addEventListener('click', function() {
|
||
document.querySelectorAll('.scene-chip').forEach(c => c.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 浮动按钮hover提示
|
||
const fai = document.querySelector('.floating-ai');
|
||
if (fai) {
|
||
const pop = fai.querySelector('.label-pop');
|
||
if (pop) {
|
||
pop.style.display = 'none';
|
||
fai.addEventListener('mouseenter', () => pop.style.display = 'block');
|
||
fai.addEventListener('mouseleave', () => pop.style.display = 'none');
|
||
}
|
||
}
|
||
|
||
// AI 入口 placeholder 滚动展示热门问题
|
||
const placeholders = [
|
||
'员工怀孕能开除吗？或<u>拖入合同让 AI 审查</u>...',
|
||
'合同到期不续签要赔多少钱？',
|
||
'试用期不通过的解除流程是怎样？',
|
||
'上传规章制度，AI 帮您审查合规风险...',
|
||
'调岗调薪没员工同意，能强制吗？'
|
||
];
|
||
let phIdx = 0;
|
||
const phEl = document.querySelector('.ai-search-input .placeholder');
|
||
if (phEl) {
|
||
setInterval(() => {
|
||
phIdx = (phIdx + 1) % placeholders.length;
|
||
phEl.style.transition = 'opacity 0.3s';
|
||
phEl.style.opacity = '0';
|
||
setTimeout(() => {
|
||
phEl.innerHTML = placeholders[phIdx];
|
||
phEl.style.opacity = '1';
|
||
}, 300);
|
||
}, 3500);
|
||
}
|
||
|
||
// 起草申请 - 业务卡片点击（首页"我要办理"区域，原型阶段：提示打开对应表单）
|
||
document.querySelectorAll('#page-cockpit .apply-card').forEach(card => {
|
||
card.addEventListener('click', function() {
|
||
const nm = this.querySelector('.nm');
|
||
const name = nm ? nm.textContent.trim() : '该申请';
|
||
document.querySelectorAll('#page-cockpit .apply-card').forEach(c => {
|
||
c.style.borderColor = '';
|
||
c.style.boxShadow = '';
|
||
});
|
||
this.style.borderColor = '#2E75B6';
|
||
this.style.boxShadow = '0 0 0 3px rgba(46,117,182,0.18)';
|
||
setTimeout(() => alert(`即将打开「${name}」起草表单（原型演示）`), 50);
|
||
});
|
||
});
|
||
|
||
// 首页"申请草稿 / 已发申请"链接跳转
|
||
document.querySelectorAll('.apply-jump[data-page]').forEach(el => {
|
||
el.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
switchPage(this.dataset.page);
|
||
});
|
||
});
|
||
|
||
// 默认折叠次级分组，保留首页与"白小侠 AI"展开
|
||
(function initNavCollapse() {
|
||
document.querySelectorAll('.nav-group').forEach((g, idx) => {
|
||
const head = g.querySelector('.nav-group-head');
|
||
if (!head) return;
|
||
const groupId = head.dataset.group;
|
||
// 仅 grp-ai 默认展开，其余折叠
|
||
if (groupId !== 'grp-ai') g.classList.add('collapsed');
|
||
});
|
||
})();
|
||
|
||
/* ===================================================================== */
|
||
/* ============ 后端对接：白小侠对话 + 判赔预测（真实 API） ============ */
|
||
/* ===================================================================== */
|
||
|
||
// ★ 后端地址：如果你的服务不在本机 8000 端口，改这一行即可
|
||
var API_BASE = 'http://127.0.0.1:8000';
|
||
|
||
function _esc(s){ return (s==null?'':String(s)).replace(/[&<>"']/g, function(c){
|
||
return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); }
|
||
function _money(n){ if(n==null||isNaN(n)) return '—'; return '¥' + Number(n).toLocaleString('zh-CN',{maximumFractionDigits:0}); }
|
||
function _moneyK(n){ if(n==null||isNaN(n)) return '—'; return (n>=1000)? ('¥'+Math.round(n/1000)+'k') : ('¥'+Math.round(n)); }
|
||
|
||
/* ---------------- 1) 白小侠对话（SSE 流式 /api/chat） ---------------- */
|
||
(function initChat(){
|
||
var page = document.getElementById('page-ai');
|
||
if(!page) return;
|
||
var msgsEl = page.querySelector('.chat-messages');
|
||
var textarea = page.querySelector('.chat-input textarea');
|
||
var sendBtn = page.querySelector('.chat-input .btn.primary');
|
||
var quickBtns = page.querySelectorAll('.chat-quickbtns .qbtn');
|
||
var newChatBtn= page.querySelector('.chat-sidebar .btn.primary');
|
||
if(!msgsEl || !textarea || !sendBtn) return;
|
||
|
||
var chatId = 'web-' + Date.now();
|
||
var sending = false;
|
||
|
||
function addUser(text){
|
||
var d = document.createElement('div');
|
||
d.className = 'msg msg-user';
|
||
d.innerHTML = '<div class="av">我</div><div class="msg-body"><div class="bubble">'+_esc(text)+'</div></div>';
|
||
msgsEl.appendChild(d); msgsEl.scrollTop = msgsEl.scrollHeight;
|
||
}
|
||
function addAi(){
|
||
var d = document.createElement('div');
|
||
d.className = 'msg msg-ai';
|
||
d.innerHTML = '<div class="av">侠</div><div class="msg-body" style="max-width:85%"><div class="bubble">'+
|
||
'<span class="ai-text"></span><span class="ai-cursor">▍</span></div></div>';
|
||
msgsEl.appendChild(d); msgsEl.scrollTop = msgsEl.scrollHeight;
|
||
return d.querySelector('.ai-text');
|
||
}
|
||
|
||
async function send(text){
|
||
text = (text||'').trim();
|
||
if(!text || sending) return;
|
||
sending = true;
|
||
addUser(text);
|
||
textarea.value = '';
|
||
var aiText = addAi();
|
||
try {
|
||
var resp = await fetch(API_BASE + '/api/chat', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({ message:text, user_id:'web', chat_id:chatId })
|
||
});
|
||
if(!resp.ok || !resp.body) throw new Error('HTTP ' + resp.status);
|
||
var reader = resp.body.getReader();
|
||
var decoder = new TextDecoder();
|
||
var buf = '';
|
||
while(true){
|
||
var r = await reader.read();
|
||
if(r.done) break;
|
||
buf += decoder.decode(r.value, {stream:true});
|
||
buf = buf.replace(/\r/g, ''); // sse_starlette 用 \r\n 分隔事件,先归一为 \n 再按 \n\n 切分
|
||
var idx;
|
||
while((idx = buf.indexOf('\n\n')) >= 0){
|
||
var raw = buf.slice(0, idx); buf = buf.slice(idx + 2);
|
||
var dataStr = '';
|
||
raw.split('\n').forEach(function(line){
|
||
if(line.indexOf('data:') === 0) dataStr += line.slice(5).trim();
|
||
});
|
||
if(!dataStr) continue;
|
||
try {
|
||
var evt = JSON.parse(dataStr);
|
||
var parts = (evt.content && evt.content.parts) || [];
|
||
var full = parts.length ? parts[parts.length - 1] : '';
|
||
if(full){ aiText.textContent = full; msgsEl.scrollTop = msgsEl.scrollHeight; }
|
||
if(evt.event_type === 'error'){
|
||
aiText.textContent = '[出错] ' + ((evt.error && evt.error.message) || evt.delta || '未知错误');
|
||
}
|
||
} catch(e){ /* 忽略半包 */ }
|
||
}
|
||
}
|
||
} catch(e){
|
||
aiText.textContent = '⚠️ 无法连接后端（' + e.message + '）。\n请确认已启动 uvicorn chat_app.main:app，且地址为 ' + API_BASE +
|
||
'（如端口不同，改 HTML 顶部 API_BASE）。';
|
||
} finally {
|
||
var cur = aiText.parentElement.querySelector('.ai-cursor');
|
||
if(cur) cur.remove();
|
||
sending = false;
|
||
}
|
||
}
|
||
|
||
sendBtn.addEventListener('click', function(){ send(textarea.value); });
|
||
textarea.addEventListener('keydown', function(e){
|
||
if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); send(textarea.value); }
|
||
});
|
||
quickBtns.forEach(function(b){
|
||
b.addEventListener('click', function(){ send(b.textContent.replace(/^[^\u4e00-\u9fa5A-Za-z0-9]*\s*/, '')); });
|
||
});
|
||
if(newChatBtn) newChatBtn.addEventListener('click', function(){
|
||
msgsEl.innerHTML = '';
|
||
chatId = 'web-' + Date.now();
|
||
var t = document.createElement('div');
|
||
t.className = 'msg msg-ai';
|
||
t.innerHTML = '<div class="av">侠</div><div class="msg-body"><div class="bubble">您好，我是白小侠，劳动用工方面的法律问题都可以问我。</div></div>';
|
||
msgsEl.appendChild(t);
|
||
});
|
||
|
||
// 转专家
|
||
var transferBtn = Array.prototype.slice.call(page.querySelectorAll('.chat-head .btn'))
|
||
.filter(function(b){ return b.textContent.indexOf('转专家') >= 0; })[0];
|
||
if(transferBtn) transferBtn.addEventListener('click', async function(){
|
||
try {
|
||
var r = await fetch(API_BASE + '/api/transfer_expert', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({ chat_id:chatId, user_id:'web', reason:'用户点击转专家' })
|
||
});
|
||
var j = await r.json();
|
||
alert(j.success ? ('已转接专家。\n通道: ' + j.ws_path + '\n实时推送: ' + (j.redis_ready ? '已就绪' : '未启用（需 Redis）')) : '转接失败');
|
||
} catch(e){ alert('转专家请求失败: ' + e.message); }
|
||
});
|
||
})();
|
||
|
||
/* ---------------- 2) 判赔预测（/api/case/predict） ---------------- */
|
||
(function initPrediction(){
|
||
var page = document.getElementById('page-prediction');
|
||
if(!page) return;
|
||
var predictBtn = Array.prototype.slice.call(page.querySelectorAll('.btn.primary'))
|
||
.filter(function(b){ return b.textContent.indexOf('AI 预测') >= 0; })[0];
|
||
if(!predictBtn) return;
|
||
|
||
var fields = page.querySelectorAll('.pred-form .form-row input, .pred-form .form-row select');
|
||
// 字段顺序: 0姓名 1违纪事实 2地区 3月薪 4制度公示 5留痕
|
||
var cards = page.querySelectorAll('.pred-results .pred-result-card');
|
||
// 三档: 0原方案(红/forced_terminate) 1方案A(黄/negotiate) 2方案B(绿/adjust)
|
||
|
||
function num(s){ var m=(s||'').replace(/[,，\s¥￥]/g,'').match(/\d+(\.\d+)?/); return m?parseFloat(m[0]):null; }
|
||
function years(s){ var m=(s||'').match(/(\d+)\s*年/); return m?parseInt(m[1],10):null; }
|
||
|
||
function fill(card, opt){
|
||
if(!card || !opt) return;
|
||
var amtEl = card.querySelector('.amt-block .amt');
|
||
var mid = Math.round(((opt.amount_min||0)+(opt.amount_max||0))/2);
|
||
if(amtEl) amtEl.textContent = _money(mid);
|
||
// amt-block 的第 3 个 div 是区间行
|
||
var blockDivs = card.querySelectorAll('.amt-block > div');
|
||
var rangeEl = blockDivs.length >= 3 ? blockDivs[2] : null;
|
||
if(rangeEl){
|
||
if((opt.amount_min||0) === (opt.amount_max||0)){
|
||
rangeEl.textContent = (mid===0 ? '0 赔付（合规处置）' : ('约 ' + _money(mid)));
|
||
} else {
|
||
rangeEl.textContent = '区间 ' + _moneyK(opt.amount_min) + ' - ' + _moneyK(opt.amount_max);
|
||
}
|
||
}
|
||
}
|
||
|
||
predictBtn.addEventListener('click', async function(){
|
||
var nameVal = fields[0] ? fields[0].value : '';
|
||
var factVal = fields[1] ? fields[1].value : '';
|
||
var areaVal = fields[2] ? fields[2].value : '';
|
||
var salary = num(fields[3] ? fields[3].value : '');
|
||
var wy = years(nameVal) || 3;
|
||
var sceneEl = page.querySelector('.scene-chip.active');
|
||
var scene = sceneEl ? sceneEl.textContent.trim() : '';
|
||
var question = (scene ? scene + '；' : '') + (factVal || nameVal || '员工解除争议');
|
||
|
||
var orig = predictBtn.innerHTML;
|
||
predictBtn.innerHTML = '<i class="ti ti-loader"></i> AI 预测中...';
|
||
predictBtn.disabled = true;
|
||
try {
|
||
var r = await fetch(API_BASE + '/api/case/predict', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({ question:question, monthly_salary:salary, work_years:wy, area:areaVal })
|
||
});
|
||
var j = await r.json();
|
||
if(!j.success) throw new Error(j.message || '预测失败');
|
||
var byKey = {}; (j.options||[]).forEach(function(o){ byKey[o.key] = o; });
|
||
fill(cards[0], byKey['forced_terminate']);
|
||
fill(cards[1], byKey['negotiate']);
|
||
fill(cards[2], byKey['adjust']);
|
||
|
||
// 顶部统计行追加来源标记
|
||
var head = page.querySelector('.pred-results') ? page.querySelector('.pred-results').previousElementSibling : null;
|
||
if(head){
|
||
var span = head.querySelector('span');
|
||
if(span) span.textContent = (j.estimated ? 'LLM 估算' : '规则测算（月薪 '+_money(salary)+' · 工龄 '+wy+' 年）') + ' · 地区 ' + (j.area||'—');
|
||
}
|
||
} catch(e){
|
||
alert('判赔预测失败: ' + e.message + '\n请确认后端已启动: ' + API_BASE);
|
||
} finally {
|
||
predictBtn.innerHTML = orig;
|
||
predictBtn.disabled = false;
|
||
}
|
||
});
|
||
})();
|
||
|
||
/* ---------------- 3) 文件审查（/api/upload + /api/contract/review） ---------------- */
|
||
(function initFileReview(){
|
||
var page = document.getElementById('page-file-review');
|
||
if(!page) return;
|
||
var headerBtns = page.querySelectorAll('.fr-header button');
|
||
var reuploadBtn = Array.prototype.slice.call(headerBtns).filter(function(b){ return b.textContent.indexOf('重新上传')>=0; })[0];
|
||
var exportBtn = Array.prototype.slice.call(headerBtns).filter(function(b){ return b.textContent.indexOf('导出修改版')>=0; })[0];
|
||
var fileNameEl = page.querySelector('.fr-file-name');
|
||
var fileMetaEl = page.querySelector('.fr-file-meta');
|
||
var summaryEl = page.querySelector('.fr-summary');
|
||
var docEl = page.querySelector('.fr-doc');
|
||
var rightEl = page.querySelector('.fr-right');
|
||
var tabsEl = page.querySelector('.fr-risk-tabs');
|
||
if(!docEl || !rightEl) return;
|
||
|
||
var LEVEL = {
|
||
high: {cn:'高风险', emoji:'🔴', card:'risk-r', tag:'r', hl:'hl-r'},
|
||
medium: {cn:'中风险', emoji:'🟡', card:'risk-y', tag:'y', hl:'hl-y'},
|
||
low: {cn:'优化', emoji:'🟢', card:'risk-g', tag:'g', hl:'hl-g'}
|
||
};
|
||
function lv(k){ return LEVEL[k] || LEVEL.medium; }
|
||
|
||
var fileInput = document.createElement('input');
|
||
fileInput.type = 'file';
|
||
fileInput.accept = '.pdf,.docx,.doc,.txt';
|
||
fileInput.style.display = 'none';
|
||
document.body.appendChild(fileInput);
|
||
if(reuploadBtn) reuploadBtn.addEventListener('click', function(){ fileInput.click(); });
|
||
fileInput.addEventListener('change', function(){
|
||
if(fileInput.files && fileInput.files[0]) doReview(fileInput.files[0]);
|
||
});
|
||
|
||
var curFileId = null, curTenant = '';
|
||
|
||
function setSummary(s){
|
||
if(!summaryEl) return;
|
||
summaryEl.innerHTML =
|
||
'<span class="fr-stat r"><span class="dot"></span> 高风险 <strong>'+(s.high||0)+'</strong></span>'+
|
||
'<span class="fr-stat y"><span class="dot"></span> 中风险 <strong>'+(s.medium||0)+'</strong></span>'+
|
||
'<span class="fr-stat g"><span class="dot"></span> 建议优化 <strong>'+(s.low||0)+'</strong></span>';
|
||
}
|
||
function hlText(text, highlight, hlClass, riskId){
|
||
text = _esc(text||'');
|
||
if(highlight){
|
||
var h = _esc(highlight);
|
||
var i = text.indexOf(h);
|
||
if(i>=0) return text.slice(0,i)+'<span class="hl '+hlClass+'" data-risk="'+riskId+'">'+h+'</span>'+text.slice(i+h.length);
|
||
}
|
||
return text;
|
||
}
|
||
function renderDoc(risks){
|
||
var html = '<p class="doc-title">合同原文 · 风险条款</p><p class="doc-sub">点击右侧风险项 → 自动定位</p>';
|
||
risks.forEach(function(r){
|
||
var L = lv(r.risk_level);
|
||
html += '<p class="doc-h">'+_esc(r.clause_no||'')+' '+_esc(r.clause_title||'')+'</p>';
|
||
html += '<p data-doc-risk="'+r.risk_id+'">'+ hlText(r.original_text, r.highlight, L.hl, r.risk_id) +'</p>';
|
||
});
|
||
docEl.innerHTML = html;
|
||
}
|
||
function renderCards(risks){
|
||
Array.prototype.slice.call(rightEl.querySelectorAll('.risk-card')).forEach(function(c){ c.remove(); });
|
||
risks.forEach(function(r){
|
||
var L = lv(r.risk_level);
|
||
var card = document.createElement('div');
|
||
card.className = 'risk-card '+L.card;
|
||
card.setAttribute('data-level', r.risk_level);
|
||
var citeHtml = r.tag ? '<span class="risk-cite">'+_esc(r.tag)+'</span>' : '';
|
||
var fixHtml = r.replacement ?
|
||
('<div class="risk-fix"><div class="risk-fix-label">💡 AI 建议替换为：</div><div class="risk-fix-text">'+_esc(r.replacement)+'</div></div>') : '';
|
||
var basis = r.legal_basis ? ('依据：'+_esc(r.legal_basis)+'。') : '';
|
||
card.innerHTML =
|
||
'<div class="risk-head">'+
|
||
'<span class="risk-tag '+L.tag+'">'+L.emoji+' '+L.cn+'</span>'+
|
||
'<span class="risk-loc">'+_esc((r.clause_no||'')+(r.clause_title?(' · '+r.clause_title):''))+'</span>'+
|
||
citeHtml+
|
||
'</div>'+
|
||
'<div class="risk-orig"><span class="risk-orig-label">原文：</span>'+_esc(r.original_text||'')+'</div>'+
|
||
'<div class="risk-issue">'+basis+_esc(r.risk_reason||'')+'</div>'+
|
||
fixHtml+
|
||
'<div class="risk-actions"><button class="btn small primary"><i class="ti ti-message"></i> 问白小侠</button></div>';
|
||
rightEl.appendChild(card);
|
||
card.addEventListener('click', function(e){
|
||
if(e.target.closest('button')) return;
|
||
var seg = docEl.querySelector('[data-doc-risk="'+r.risk_id+'"]');
|
||
if(seg){
|
||
seg.scrollIntoView({behavior:'smooth', block:'center'});
|
||
var hl = seg.querySelector('.hl') || seg;
|
||
var o = hl.style.boxShadow; hl.style.transition='all .2s';
|
||
hl.style.boxShadow='0 0 0 3px rgba(46,117,182,0.4)';
|
||
setTimeout(function(){ hl.style.boxShadow=o; }, 1500);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
function setTabs(s){
|
||
if(!tabsEl) return;
|
||
tabsEl.innerHTML =
|
||
'<span class="fr-risk-tab active" data-f="all">全部 ('+(s.total||0)+')</span>'+
|
||
'<span class="fr-risk-tab" data-f="high">🔴 高风险 ('+(s.high||0)+')</span>'+
|
||
'<span class="fr-risk-tab" data-f="medium">🟡 中风险 ('+(s.medium||0)+')</span>'+
|
||
'<span class="fr-risk-tab" data-f="low">🟢 优化 ('+(s.low||0)+')</span>';
|
||
tabsEl.querySelectorAll('.fr-risk-tab').forEach(function(t){
|
||
t.addEventListener('click', function(){
|
||
tabsEl.querySelectorAll('.fr-risk-tab').forEach(function(x){ x.classList.remove('active'); });
|
||
this.classList.add('active');
|
||
var f = this.getAttribute('data-f');
|
||
rightEl.querySelectorAll('.risk-card').forEach(function(c){
|
||
c.style.display = (f==='all' || c.getAttribute('data-level')===f) ? '' : 'none';
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
async function doReview(file){
|
||
fileNameEl.textContent = file.name;
|
||
fileMetaEl.textContent = '上传中...';
|
||
setSummary({high:0,medium:0,low:0});
|
||
docEl.innerHTML = '<p style="color:#6B7280">⏳ 正在上传并解析文件...</p>';
|
||
Array.prototype.slice.call(rightEl.querySelectorAll('.risk-card')).forEach(function(c){ c.remove(); });
|
||
try {
|
||
var fd = new FormData();
|
||
fd.append('file', file);
|
||
fd.append('user_id', 'web');
|
||
var up = await fetch(API_BASE+'/api/upload', {method:'POST', body:fd});
|
||
var uj = await up.json();
|
||
if(!up.ok || !uj.file_id) throw new Error(uj.detail || ('上传失败 HTTP '+up.status));
|
||
curFileId = uj.file_id;
|
||
var sizeMB = (uj.size_bytes/1024/1024).toFixed(1);
|
||
fileMetaEl.textContent = sizeMB+' MB · '+(uj.page_count||'?')+' 页 · AI 审查中...';
|
||
docEl.innerHTML = '<p style="color:#6B7280">⏳ AI 正在逐条审查条款（依赖 LLM，请稍候）...</p>';
|
||
|
||
var rv = await fetch(API_BASE+'/api/contract/review', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({file_id: curFileId, tenant_id: curTenant})
|
||
});
|
||
var rj = await rv.json();
|
||
if(!rv.ok || !rj.success) throw new Error(rj.detail || rj.message || ('审查失败 HTTP '+rv.status));
|
||
|
||
var risks = rj.risks || [];
|
||
var summary = rj.summary || {high:0,medium:0,low:0,total:risks.length};
|
||
fileNameEl.textContent = rj.file_name || file.name;
|
||
fileMetaEl.textContent = sizeMB+' MB · '+(uj.page_count||'?')+' 页 · 已完成 AI 审查 · 用时 '+(((rj.elapsed_ms||0)/1000).toFixed(1))+'s';
|
||
setSummary(summary);
|
||
setTabs(summary);
|
||
if(risks.length){ renderDoc(risks); renderCards(risks); }
|
||
else { docEl.innerHTML = '<p style="color:#166534">✓ 未发现明显风险条款。</p>'; }
|
||
} catch(e){
|
||
fileMetaEl.textContent = '审查失败';
|
||
docEl.innerHTML = '<p style="color:#C00000">⚠️ '+_esc(e.message)+'<br>请确认后端已启动（'+API_BASE+'），且已安装解析依赖（python-docx / pdfplumber）。</p>';
|
||
}
|
||
}
|
||
|
||
if(exportBtn) exportBtn.addEventListener('click', async function(){
|
||
if(!curFileId){ alert('请先上传并审查一份合同'); return; }
|
||
var orig = exportBtn.innerHTML;
|
||
exportBtn.innerHTML = '<i class="ti ti-loader"></i> 生成中...';
|
||
exportBtn.disabled = true;
|
||
try {
|
||
var r = await fetch(API_BASE+'/api/contract/export', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({file_id: curFileId, tenant_id: curTenant})
|
||
});
|
||
var j = await r.json();
|
||
if(!j.success) throw new Error(j.message||'导出失败');
|
||
var text = j.original_text || '';
|
||
(j.replacements||[]).forEach(function(rep){
|
||
if(rep.find) text = text.split(rep.find).join(rep.replace||rep.find);
|
||
});
|
||
var blob = new Blob([text], {type:'text/plain;charset=utf-8'});
|
||
var a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = '修改版_'+(fileNameEl.textContent||'合同').replace(/\.(docx?|pdf|txt)$/i,'')+'.txt';
|
||
a.click(); URL.revokeObjectURL(a.href);
|
||
} catch(e){ alert('导出失败: '+e.message); }
|
||
finally { exportBtn.innerHTML=orig; exportBtn.disabled=false; }
|
||
});
|
||
})();
|
||
|
||
/* 流式光标闪烁 + loader 旋转 */
|
||
(function injectStyle(){
|
||
var css = '.ai-cursor{display:inline-block;animation:bxblink 1s steps(2) infinite;color:#2E75B6;font-weight:700;margin-left:1px;}'+
|
||
'@keyframes bxblink{0%,100%{opacity:1}50%{opacity:0}}'+
|
||
'.msg-ai .ai-text{white-space:pre-wrap;}'+
|
||
'.ti-loader{display:inline-block;animation:bxspin 0.8s linear infinite;}'+
|
||
'@keyframes bxspin{to{transform:rotate(360deg)}}';
|
||
var s = document.createElement('style'); s.textContent = css; document.head.appendChild(s);
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|