Skip to content

A
aozhiYX
Commit 3e2035b6 by suyuchen
Options

feat(navigation): 添加VIP客户服务机制页面和导航菜单

- 在aside.html中添加认证管理导航菜单项（注释状态） - 在aside.html中完善导航子菜单结构 - 创建VIP客户服务机制页面，包含完整的VIP服务功能 - 添加VIP专属服务、服务通道和负责人机制展示 - 配置页面样式和响应式布局 - 添加项目配置文件.gitignore、git_toolbox_prj.xml和vcs.xml
parent abcfa1eb
Showing with 2735 additions and 2 deletions
.idea/git_toolbox_prj.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="GitToolBoxProjectSettings">
<option name="commitMessageIssueKeyValidationOverride">
<BoolValueOverride>
<option name="enabled" value="true" />
</BoolValueOverride>
</option>
<option name="commitMessageValidationEnabledOverride">
<BoolValueOverride>
<option name="enabled" value="true" />
</BoolValueOverride>
</option>
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
VIP客户服务机制.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIP客户服务机制 | VIP Customer Service</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--danger-color: #EF4444;
--vip-gold: #F59E0B;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 260px;
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-nav {
padding: 16px 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
}
.nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.top-header {
position: fixed;
top: 0;
left: 260px;
right: 0;
height: 64px;
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
/* 主内容区 */
.main-content {
margin-left: 260px;
margin-top: 64px;
padding: 32px;
min-height: calc(100vh - 64px);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
}
.page-title {
font-size: 28px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 12px;
}
.vip-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: linear-gradient(135deg, var(--vip-gold) 0%, #D97706 100%);
color: white;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
.btn-primary {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(27, 100, 243, 0.2);
}
.btn-primary:hover {
background: var(--primary-hover);
box-shadow: 0 4px 8px rgba(27, 100, 243, 0.3);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--card-bg);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--bg-color);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* 卡片 */
.card {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
/* VIP特色服务 */
.vip-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}
.vip-feature-card {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 12px;
padding: 20px;
transition: all 0.2s;
}
.vip-feature-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--vip-gold);
transform: translateY(-2px);
}
.feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--vip-gold) 0%, #D97706 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-bottom: 16px;
}
.feature-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.feature-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* 负责人信息 */
.manager-card {
display: flex;
gap: 20px;
padding: 20px;
background: var(--bg-color);
border-radius: 12px;
margin-top: 16px;
}
.manager-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vip-gold) 0%, #D97706 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
font-weight: 600;
flex-shrink: 0;
}
.manager-info {
flex: 1;
}
.manager-name {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.manager-role {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.manager-contact {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.contact-item svg {
width: 16px;
height: 16px;
color: var(--primary-color);
}
/* 服务通道 */
.service-channels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.channel-card {
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
transition: all 0.2s;
}
.channel-card:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
}
.channel-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.channel-icon {
width: 40px;
height: 40px;
background: rgba(27, 100, 243, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
}
.channel-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.channel-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 12px;
}
.channel-detail {
font-size: 13px;
color: var(--text-tertiary);
padding: 8px 12px;
background: var(--bg-color);
border-radius: 6px;
}
/* 服务标准 */
.service-standards {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
.standard-item {
display: flex;
gap: 16px;
padding: 16px;
background: var(--bg-color);
border-radius: 8px;
border-left: 4px solid var(--vip-gold);
}
.standard-icon {
width: 24px;
height: 24px;
color: var(--vip-gold);
flex-shrink: 0;
margin-top: 2px;
}
.standard-content {
flex: 1;
}
.standard-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.standard-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* 表格 */
.table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
.table th,
.table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
}
.table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-primary);
}
.table td {
color: var(--text-secondary);
}
.table tbody tr:hover {
background: var(--bg-color);
}
/* 响应式 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.main-content {
margin-left: 0;
}
.top-header {
left: 0;
}
.vip-features,
.service-channels {
grid-template-columns: 1fr;
}
.manager-card {
flex-direction: column;
text-align: center;
}
}
</style>
</head>
<body>
<!-- 左侧导航栏 -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">S</div>
<div class="logo-text">售后系统</div>
</div>
<nav class="sidebar-nav">
<div class="nav-group-title">客户服务</div>
<a href="VIP客户服务机制.html" class="nav-item active">
<svg class="nav-icon" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
VIP客户服务机制
</a>
</nav>
</aside>
<!-- 顶部工具栏 -->
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">VIP客户服务机制</span>
</div>
</div>
<div class="header-right">
<div class="user-avatar">管</div>
</div>
</header>
<!-- 主内容区 -->
<main class="main-content">
<div class="page-header">
<div>
<h1 class="page-title">
VIP客户服务机制
<span class="vip-badge">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 14px; height: 14px;">
<path fill="currentColor" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
VIP
</span>
</h1>
<p class="page-subtitle">为VIP客户建立专门的服务通道和负责人机制，提升VIP客户的服务体验</p>
</div>
<button class="btn-primary">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
</svg>
添加VIP客户
</button>
</div>
<!-- VIP特色服务 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">VIP特色服务</h2>
</div>
<div class="vip-features">
<div class="vip-feature-card">
<div class="feature-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 24px; height: 24px;">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
</svg>
</div>
<div class="feature-title">专属客户成功经理</div>
<div class="feature-description">为每位VIP客户配备专属客户成功经理，7×24小时待命，提供一对一专业服务支持。</div>
</div>
<div class="vip-feature-card">
<div class="feature-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 24px; height: 24px;">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
</svg>
</div>
<div class="feature-title">优先响应机制</div>
<div class="feature-description">VIP客户的所有工单自动标记为最高优先级，享受优先处理，响应时间缩短50%。</div>
</div>
<div class="vip-feature-card">
<div class="feature-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 24px; height: 24px;">
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
</svg>
</div>
<div class="feature-title">快速现场支持</div>
<div class="feature-description">承诺在2小时内（一线城市）或4小时内（其他城市）派遣工程师到达现场，提供快速响应。</div>
</div>
<div class="vip-feature-card">
<div class="feature-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 24px; height: 24px;">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
</svg>
</div>
<div class="feature-title">定期健康检查</div>
<div class="feature-description">每季度提供设备健康检查服务，主动发现潜在问题，预防性维护，确保设备稳定运行。</div>
</div>
<div class="vip-feature-card">
<div class="feature-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 24px; height: 24px;">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
</svg>
</div>
<div class="feature-title">专属服务报告</div>
<div class="feature-description">每月提供专属服务报告，包括服务统计、问题分析、改进建议等，帮助客户优化设备使用。</div>
</div>
<div class="vip-feature-card">
<div class="feature-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 24px; height: 24px;">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
</svg>
</div>
<div class="feature-title">定制化解决方案</div>
<div class="feature-description">根据VIP客户的特殊需求，提供定制化的解决方案和服务，满足个性化业务需求。</div>
</div>
</div>
</div>
<!-- 专属服务通道 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">专属服务通道</h2>
</div>
<div class="service-channels">
<div class="channel-card">
<div class="channel-header">
<div class="channel-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 20px; height: 20px;">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
</svg>
</div>
<div class="channel-title">VIP专属热线</div>
</div>
<div class="channel-description">7×24小时专属热线，直接接入VIP客户服务团队，无需等待，快速响应。</div>
<div class="channel-detail">热线号码：400-XXX-VIP（按1进入VIP通道）</div>
</div>
<div class="channel-card">
<div class="channel-header">
<div class="channel-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 20px; height: 20px;">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
</div>
<div class="channel-title">VIP专属邮箱</div>
</div>
<div class="channel-description">专属邮箱地址，所有邮件自动标记为VIP优先级，优先处理。</div>
<div class="channel-detail">邮箱地址：vip@company.com</div>
</div>
<div class="channel-card">
<div class="channel-header">
<div class="channel-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 20px; height: 20px;">
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
</svg>
</div>
<div class="channel-title">在线工单系统</div>
</div>
<div class="channel-description">VIP客户工单自动标记为最高优先级，享受优先处理和快速响应。</div>
<div class="channel-detail">系统自动识别VIP客户，优先分配处理</div>
</div>
<div class="channel-card">
<div class="channel-header">
<div class="channel-icon">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 20px; height: 20px;">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
</div>
<div class="channel-title">客户成功经理</div>
</div>
<div class="channel-description">专属客户成功经理，7×24小时待命，提供一对一专业服务支持。</div>
<div class="channel-detail">直接联系专属客户成功经理</div>
</div>
</div>
</div>
<!-- 负责人机制 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">专属负责人机制</h2>
</div>
<div class="manager-card">
<div class="manager-avatar">张</div>
<div class="manager-info">
<div class="manager-name">张经理</div>
<div class="manager-role">VIP客户成功经理</div>
<div class="manager-contact">
<div class="contact-item">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
</svg>
<span>电话：138-XXXX-XXXX</span>
</div>
<div class="contact-item">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
<span>邮箱：zhang.manager@company.com</span>
</div>
<div class="contact-item">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/>
</svg>
<span>微信：zhang_manager_vip</span>
</div>
</div>
</div>
</div>
<div style="margin-top: 20px; padding: 16px; background: var(--bg-color); border-radius: 8px;">
<div style="font-size: 14px; color: var(--text-secondary); line-height: 1.8;">
<strong style="color: var(--text-primary);">负责人职责：</strong>
<ul style="margin-top: 8px; padding-left: 20px;">
<li>作为VIP客户的主要联系人，负责协调所有服务需求</li>
<li>定期主动联系客户，了解设备运行状况和服务需求</li>
<li>快速响应客户问题，协调内部资源，确保问题及时解决</li>
<li>定期提供服务报告和改进建议</li>
<li>协助客户优化设备使用，提升设备运行效率</li>
</ul>
</div>
</div>
</div>
<!-- 服务标准 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">VIP服务标准</h2>
</div>
<div class="service-standards">
<div class="standard-item">
<svg class="standard-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="standard-content">
<div class="standard-title">响应时间标准</div>
<div class="standard-description">工单响应时间 ≤ 15分钟，问题初步诊断时间 ≤ 30分钟，现场到达时间（一线城市）≤ 2小时。</div>
</div>
</div>
<div class="standard-item">
<svg class="standard-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="standard-content">
<div class="standard-title">服务可用性</div>
<div class="standard-description">7×24小时服务支持，包括电话、邮件、在线工单等多种渠道，确保随时可以联系到服务团队。</div>
</div>
</div>
<div class="standard-item">
<svg class="standard-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="standard-content">
<div class="standard-title">定期服务</div>
<div class="standard-description">每季度提供设备健康检查，每月提供专属服务报告，主动发现和解决潜在问题。</div>
</div>
</div>
<div class="standard-item">
<svg class="standard-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="standard-content">
<div class="standard-title">定制化服务</div>
<div class="standard-description">根据VIP客户的特殊需求，提供定制化的解决方案和服务，满足个性化业务需求。</div>
</div>
</div>
</div>
</div>
<!-- VIP客户列表 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">VIP客户列表</h2>
<button class="btn-secondary">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
</svg>
导出列表
</button>
</div>
<table class="table">
<thead>
<tr>
<th>客户名称</th>
<th>客户成功经理</th>
<th>联系方式</th>
<th>服务等级</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>ABC制造有限公司</strong></td>
<td>张经理</td>
<td>138-XXXX-XXXX</td>
<td><span class="vip-badge" style="font-size: 11px; padding: 2px 8px;">VIP</span></td>
<td><span style="color: var(--success-color);">●</span> 正常</td>
<td>
<button class="btn-secondary" style="padding: 4px 12px; font-size: 12px;">查看详情</button>
</td>
</tr>
<tr>
<td><strong>XYZ科技股份有限公司</strong></td>
<td>李经理</td>
<td>139-XXXX-XXXX</td>
<td><span class="vip-badge" style="font-size: 11px; padding: 2px 8px;">VIP</span></td>
<td><span style="color: var(--success-color);">●</span> 正常</td>
<td>
<button class="btn-secondary" style="padding: 4px 12px; font-size: 12px;">查看详情</button>
</td>
</tr>
<tr>
<td><strong>DEF工业集团</strong></td>
<td>王经理</td>
<td>137-XXXX-XXXX</td>
<td><span class="vip-badge" style="font-size: 11px; padding: 2px 8px;">VIP</span></td>
<td><span style="color: var(--success-color);">●</span> 正常</td>
<td>
<button class="btn-secondary" style="padding: 4px 12px; font-size: 12px;">查看详情</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
// 菜单展开/折叠
function toggleSubmenu(item) {
item.classList.toggle('expanded');
}
</script>
</body>
</html>
aside.html
...@@ -28,6 +28,18 @@ ...@@ -28,6 +28,18 @@
设备机型 设备机型
</a> </a>
</div> </div>
<!-- <div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>认证管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>-->
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)"> <div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20"> <svg class="nav-icon" viewBox="0 0 20 20">
...@@ -40,6 +52,11 @@ ...@@ -40,6 +52,11 @@
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/> <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg> </svg>
</div> </div>
<div class="nav-submenu">
<a href="认证管理.html" class="nav-subitem ">
Textile Exchange Certifications
</a>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)"> <div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20"> <svg class="nav-icon" viewBox="0 0 20 20">
......
img_5.png 0 → 100644
img_5.png

76.4 KB

停机问题处理流程.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>停机问题处理流程 | Downtime Issue Process</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--danger-color: #EF4444;
--warning-color: #EAB308;
--success-color: #22C55E;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 260px;
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-nav {
padding: 16px 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
}
.nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.top-header {
position: fixed;
top: 0;
left: 260px;
right: 0;
height: 64px;
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
/* 主内容区 */
.main-content {
margin-left: 260px;
margin-top: 64px;
padding: 32px;
min-height: calc(100vh - 64px);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
}
.page-title {
font-size: 28px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.page-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
.btn-primary {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(27, 100, 243, 0.2);
}
.btn-primary:hover {
background: var(--primary-hover);
box-shadow: 0 4px 8px rgba(27, 100, 243, 0.3);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--card-bg);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--bg-color);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* 卡片 */
.card {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
/* 流程步骤 */
.process-flow {
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
padding-left: 40px;
}
.process-flow::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.process-step {
position: relative;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
transition: all 0.2s;
}
.process-step:hover {
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.process-step::before {
content: '';
position: absolute;
left: -32px;
top: 24px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--primary-color);
border: 3px solid var(--card-bg);
box-shadow: 0 0 0 2px var(--primary-color);
}
.step-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.step-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.step-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.badge-urgent {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
}
.badge-high {
background: rgba(234, 179, 8, 0.1);
color: #EAB308;
}
.step-content {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.8;
}
.step-details {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
}
.detail-item {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.detail-label {
font-weight: 500;
color: var(--text-primary);
min-width: 100px;
}
.detail-value {
color: var(--text-secondary);
flex: 1;
}
/* 响应时间表 */
.response-time-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
.response-time-table th,
.response-time-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
}
.response-time-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-primary);
}
.response-time-table td {
color: var(--text-secondary);
}
.time-critical {
color: var(--danger-color);
font-weight: 600;
}
/* 特殊通道说明 */
.special-channel {
background: linear-gradient(135deg, rgba(27, 100, 243, 0.05) 0%, rgba(27, 100, 243, 0.02) 100%);
border-left: 4px solid var(--primary-color);
padding: 20px;
border-radius: 8px;
margin-top: 16px;
}
.special-channel-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.special-channel-content {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.8;
}
.channel-feature {
display: flex;
align-items: start;
gap: 12px;
margin-top: 12px;
}
.channel-feature-icon {
width: 20px;
height: 20px;
color: var(--primary-color);
flex-shrink: 0;
margin-top: 2px;
}
/* 响应式 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.main-content {
margin-left: 0;
}
.top-header {
left: 0;
}
.process-flow {
padding-left: 30px;
}
.process-step::before {
left: -22px;
}
}
</style>
</head>
<body>
<!-- 左侧导航栏 -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">S</div>
<div class="logo-text">售后系统</div>
</div>
<nav class="sidebar-nav">
<div class="nav-group-title">流程管理</div>
<a href="停机问题处理流程.html" class="nav-item active">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
停机问题处理流程
</a>
</nav>
</aside>
<!-- 顶部工具栏 -->
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">停机问题处理流程</span>
</div>
</div>
<div class="header-right">
<div class="user-avatar">管</div>
</div>
</header>
<!-- 主内容区 -->
<main class="main-content">
<div class="page-header">
<div>
<h1 class="page-title">停机问题处理流程</h1>
<p class="page-subtitle">针对客户24小时连续生产情况下的停机问题，制定特殊通道及处理流程</p>
</div>
<button class="btn-primary">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/>
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/>
</svg>
导出流程文档
</button>
</div>
<!-- 特殊通道说明 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">特殊通道说明</h2>
</div>
<div class="special-channel">
<div class="special-channel-title">
<svg class="channel-feature-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
24小时连续生产客户专用通道
</div>
<div class="special-channel-content">
<p>针对24小时连续生产的企业客户，我们建立了专门的停机问题处理通道，确保在设备故障时能够快速响应并恢复生产。</p>
<div class="channel-feature">
<svg class="channel-feature-icon" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<div>
<strong>7×24小时热线支持：</strong>提供全天候技术支持热线，确保随时可以联系到技术支持团队。
</div>
</div>
<div class="channel-feature">
<svg class="channel-feature-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
</svg>
<div>
<strong>优先响应机制：</strong>停机问题自动标记为最高优先级，跳过常规工单排队流程，直接分配给高级技术支持工程师。
</div>
</div>
<div class="channel-feature">
<svg class="channel-feature-icon" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
</svg>
<div>
<strong>现场支持保障：</strong>承诺在指定时间内派遣技术工程师到达现场，提供现场技术支持服务。
</div>
</div>
</div>
</div>
</div>
<!-- 处理流程 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">处理流程步骤</h2>
</div>
<div class="process-flow">
<!-- 步骤1：问题报告 -->
<div class="process-step">
<div class="step-header">
<div class="step-title">
<span>步骤1：问题报告与接收</span>
<span class="step-badge badge-urgent">紧急</span>
</div>
</div>
<div class="step-content">
<p>客户通过24小时热线、在线工单系统或紧急联系渠道报告停机问题。系统自动识别为连续生产客户，立即触发特殊处理流程。</p>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">响应时间：</span>
<span class="detail-value time-critical">≤ 5分钟</span>
</div>
<div class="detail-item">
<span class="detail-label">接收渠道：</span>
<span class="detail-value">24小时热线、在线工单系统、紧急联系邮箱、VIP客户专属通道</span>
</div>
<div class="detail-item">
<span class="detail-label">自动操作：</span>
<span class="detail-value">系统自动标记为P0级别，发送紧急通知给技术支持团队负责人</span>
</div>
</div>
</div>
</div>
<!-- 步骤2：初步诊断 -->
<div class="process-step">
<div class="step-header">
<div class="step-title">
<span>步骤2：远程初步诊断</span>
<span class="step-badge badge-urgent">紧急</span>
</div>
</div>
<div class="step-content">
<p>技术支持工程师立即联系客户，通过远程诊断工具、电话指导等方式进行初步问题诊断，确定问题性质和紧急程度。</p>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">响应时间：</span>
<span class="detail-value time-critical">≤ 15分钟</span>
</div>
<div class="detail-item">
<span class="detail-label">诊断方式：</span>
<span class="detail-value">远程桌面、视频通话、电话指导、设备日志分析</span>
</div>
<div class="detail-item">
<span class="detail-label">判断标准：</span>
<span class="detail-value">是否可远程解决、是否需要现场支持、预计恢复时间</span>
</div>
</div>
</div>
</div>
<!-- 步骤3：解决方案制定 -->
<div class="process-step">
<div class="step-header">
<div class="step-title">
<span>步骤3：解决方案制定与执行</span>
<span class="step-badge badge-high">高优先级</span>
</div>
</div>
<div class="step-content">
<p>根据初步诊断结果，制定解决方案。优先尝试远程解决，如无法远程解决，立即启动现场支持流程。</p>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">远程解决：</span>
<span class="detail-value">优先通过远程方式解决问题，目标时间 ≤ 30分钟</span>
</div>
<div class="detail-item">
<span class="detail-label">现场支持：</span>
<span class="detail-value">如需要现场支持，立即派遣工程师，承诺到达时间：一线城市 ≤ 2小时，其他城市 ≤ 4小时</span>
</div>
<div class="detail-item">
<span class="detail-label">备件支持：</span>
<span class="detail-value">如需更换备件，优先从最近备件库调拨，紧急情况下可安排快递加急配送</span>
</div>
</div>
</div>
</div>
<!-- 步骤4：现场支持 -->
<div class="process-step">
<div class="step-header">
<div class="step-title">
<span>步骤4：现场技术支持</span>
<span class="step-badge badge-high">高优先级</span>
</div>
</div>
<div class="step-content">
<p>现场工程师到达后，立即进行设备检查、故障定位和修复工作。同时保持与客户和总部的实时沟通。</p>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">现场工作：</span>
<span class="detail-value">设备检查、故障定位、问题修复、功能测试、恢复验证</span>
</div>
<div class="detail-item">
<span class="detail-label">沟通机制：</span>
<span class="detail-value">每30分钟向客户和总部汇报进展，重大问题实时沟通</span>
</div>
<div class="detail-item">
<span class="detail-label">目标时间：</span>
<span class="detail-value">现场问题解决目标时间 ≤ 4小时（从到达现场开始计算）</span>
</div>
</div>
</div>
</div>
<!-- 步骤5：问题解决确认 -->
<div class="process-step">
<div class="step-header">
<div class="step-title">
<span>步骤5：问题解决与确认</span>
<span class="step-badge badge-high">高优先级</span>
</div>
</div>
<div class="step-content">
<p>问题解决后，进行全面的功能测试和验证，确保设备正常运行。与客户确认问题已解决，并完成相关文档记录。</p>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">验证内容：</span>
<span class="detail-value">设备功能测试、性能测试、稳定性验证、客户确认</span>
</div>
<div class="detail-item">
<span class="detail-label">文档记录：</span>
<span class="detail-value">故障报告、解决方案、更换备件清单、客户签字确认</span>
</div>
<div class="detail-item">
<span class="detail-label">后续跟进：</span>
<span class="detail-value">24小时内电话回访，确认设备运行正常，收集客户反馈</span>
</div>
</div>
</div>
</div>
<!-- 步骤6：总结与改进 -->
<div class="process-step">
<div class="step-header">
<div class="step-title">
<span>步骤6：问题总结与流程改进</span>
</div>
</div>
<div class="step-content">
<p>问题解决后，进行问题根因分析，总结经验教训，优化处理流程，防止类似问题再次发生。</p>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">根因分析：</span>
<span class="detail-value">3个工作日内完成问题根因分析报告</span>
</div>
<div class="detail-item">
<span class="detail-label">改进措施：</span>
<span class="detail-value">制定预防措施、更新知识库、优化处理流程、培训相关人员</span>
</div>
<div class="detail-item">
<span class="detail-label">客户沟通：</span>
<span class="detail-value">向客户提供根因分析报告和改进措施说明</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 响应时间标准 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">响应时间标准</h2>
</div>
<table class="response-time-table">
<thead>
<tr>
<th>阶段</th>
<th>时间要求</th>
<th>责任人</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>问题接收</td>
<td class="time-critical">≤ 5分钟</td>
<td>客服中心</td>
<td>自动识别并标记为P0级别</td>
</tr>
<tr>
<td>初步响应</td>
<td class="time-critical">≤ 15分钟</td>
<td>技术支持工程师</td>
<td>主动联系客户，开始远程诊断</td>
</tr>
<tr>
<td>远程诊断</td>
<td class="time-critical">≤ 30分钟</td>
<td>技术支持工程师</td>
<td>完成初步诊断，确定解决方案</td>
</tr>
<tr>
<td>现场到达（一线城市）</td>
<td class="time-critical">≤ 2小时</td>
<td>现场工程师</td>
<td>从接到现场支持需求开始计算</td>
</tr>
<tr>
<td>现场到达（其他城市）</td>
<td class="time-critical">≤ 4小时</td>
<td>现场工程师</td>
<td>从接到现场支持需求开始计算</td>
</tr>
<tr>
<td>问题解决</td>
<td class="time-critical">≤ 4小时</td>
<td>现场工程师</td>
<td>从到达现场开始计算</td>
</tr>
<tr>
<td>问题确认</td>
<td>立即</td>
<td>客户</td>
<td>客户确认设备恢复正常运行</td>
</tr>
<tr>
<td>回访跟进</td>
<td>24小时内</td>
<td>客户成功经理</td>
<td>电话回访，确认设备运行状态</td>
</tr>
</tbody>
</table>
</div>
<!-- 联系方式 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">紧急联系方式</h2>
</div>
<div class="step-details">
<div class="detail-item">
<span class="detail-label">24小时热线：</span>
<span class="detail-value">400-XXX-XXXX（按1进入紧急通道）</span>
</div>
<div class="detail-item">
<span class="detail-label">紧急邮箱：</span>
<span class="detail-value">emergency@company.com</span>
</div>
<div class="detail-item">
<span class="detail-label">在线工单：</span>
<span class="detail-value">系统自动识别连续生产客户，优先处理</span>
</div>
<div class="detail-item">
<span class="detail-label">VIP客户经理：</span>
<span class="detail-value">专属客户成功经理，7×24小时待命</span>
</div>
</div>
</div>
</main>
<script>
// 菜单展开/折叠
function toggleSubmenu(item) {
item.classList.toggle('expanded');
}
</script>
</body>
</html>
后.png 0 → 100644
后.png

353 KB

服务价格标准化.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务价格标准化 | Service Price Standardization</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--danger-color: #EF4444;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 260px;
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-nav {
padding: 16px 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
}
.nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.top-header {
position: fixed;
top: 0;
left: 260px;
right: 0;
height: 64px;
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
/* 主内容区 */
.main-content {
margin-left: 260px;
margin-top: 64px;
padding: 32px;
min-height: calc(100vh - 64px);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
}
.page-title {
font-size: 28px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.page-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
.btn-primary {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(27, 100, 243, 0.2);
}
.btn-primary:hover {
background: var(--primary-hover);
box-shadow: 0 4px 8px rgba(27, 100, 243, 0.3);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--card-bg);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--bg-color);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* 卡片 */
.card {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
/* 标签页 */
.tabs {
display: flex;
gap: 8px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 24px;
}
.tab {
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
margin-bottom: -1px;
}
.tab:hover {
color: var(--text-primary);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* 价格表 */
.price-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
.price-table th,
.price-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
}
.price-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-primary);
}
.price-table td {
color: var(--text-secondary);
}
.price-table tbody tr:hover {
background: var(--bg-color);
}
.price-value {
font-weight: 600;
color: var(--primary-color);
}
.price-unit {
color: var(--text-tertiary);
font-size: 12px;
margin-left: 4px;
}
/* 白皮书链接 */
.whitepaper-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border: 1px solid var(--primary-color);
border-radius: 8px;
transition: all 0.2s;
}
.whitepaper-link:hover {
background: var(--primary-color);
color: white;
}
/* 价格说明 */
.price-note {
background: rgba(27, 100, 243, 0.05);
border-left: 4px solid var(--primary-color);
padding: 16px;
border-radius: 8px;
margin-top: 16px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.8;
}
.price-note-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
/* 响应式 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.main-content {
margin-left: 0;
}
.top-header {
left: 0;
}
.price-table {
font-size: 12px;
}
.price-table th,
.price-table td {
padding: 8px;
}
}
</style>
</head>
<body>
<!-- 左侧导航栏 -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">S</div>
<div class="logo-text">售后系统</div>
</div>
<nav class="sidebar-nav">
<div class="nav-group-title">服务管理</div>
<a href="服务价格标准化.html" class="nav-item active">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
</svg>
服务价格标准化
</a>
</nav>
</aside>
<!-- 顶部工具栏 -->
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">服务价格标准化</span>
</div>
</div>
<div class="header-right">
<div class="user-avatar">管</div>
</div>
</header>
<!-- 主内容区 -->
<main class="main-content">
<div class="page-header">
<div>
<h1 class="page-title">服务价格标准化</h1>
<p class="page-subtitle">质保期外的服务价格标准化，包括人工费用、零件费用等，形成标准报价单</p>
</div>
<div style="display: flex; gap: 12px;">
<a href="#" class="whitepaper-link" target="_blank">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
</svg>
查看《服务价格白皮书》
</a>
<button class="btn-primary">
<svg class="nav-icon" viewBox="0 0 20 20" style="width: 16px; height: 16px;">
<path d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
</svg>
导出报价单
</button>
</div>
</div>
<!-- 价格标准说明 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">价格标准说明</h2>
</div>
<div class="price-note">
<div class="price-note-title">适用范围</div>
<p>本价格标准适用于质保期外的所有服务项目，包括现场技术支持、远程技术支持、设备维修、备件更换等服务。价格标准基于《服务价格白皮书》制定，确保价格透明、公正、合理。</p>
<div class="price-note-title" style="margin-top: 16px;">价格调整机制</div>
<p>价格标准每季度更新一次，根据市场行情、成本变化等因素进行调整。重大价格调整将提前30天通知客户。具体价格以最新版《服务价格白皮书》为准。</p>
</div>
</div>
<!-- 人工费用标准 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">人工费用标准</h2>
</div>
<div class="tabs">
<div class="tab active" onclick="switchTab('labor-onsite')">现场服务</div>
<div class="tab" onclick="switchTab('labor-remote')">远程服务</div>
</div>
<div id="labor-onsite" class="tab-content active">
<table class="price-table">
<thead>
<tr>
<th>服务类型</th>
<th>工程师级别</th>
<th>标准价格</th>
<th>加班价格（工作日18:00后/周末/节假日）</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>现场技术支持</td>
<td>初级工程师</td>
<td class="price-value">800<span class="price-unit">元/小时</span></td>
<td class="price-value">1200<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>现场技术支持</td>
<td>中级工程师</td>
<td class="price-value">1200<span class="price-unit">元/小时</span></td>
<td class="price-value">1800<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>现场技术支持</td>
<td>高级工程师</td>
<td class="price-value">1800<span class="price-unit">元/小时</span></td>
<td class="price-value">2700<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>现场技术支持</td>
<td>技术专家</td>
<td class="price-value">2500<span class="price-unit">元/小时</span></td>
<td class="price-value">3750<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>设备安装调试</td>
<td>中级工程师</td>
<td class="price-value">1500<span class="price-unit">元/小时</span></td>
<td class="price-value">2250<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>设备维修</td>
<td>根据故障复杂度</td>
<td class="price-value">1200-2500<span class="price-unit">元/小时</span></td>
<td class="price-value">1800-3750<span class="price-unit">元/小时</span></td>
<td>根据故障复杂度和所需工程师级别确定</td>
</tr>
<tr>
<td>差旅费</td>
<td>-</td>
<td class="price-value">实报实销</td>
<td>-</td>
<td>交通、住宿费用按实际发生费用报销</td>
</tr>
</tbody>
</table>
</div>
<div id="labor-remote" class="tab-content">
<table class="price-table">
<thead>
<tr>
<th>服务类型</th>
<th>工程师级别</th>
<th>标准价格</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>远程技术支持</td>
<td>初级工程师</td>
<td class="price-value">400<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>远程技术支持</td>
<td>中级工程师</td>
<td class="price-value">600<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>远程技术支持</td>
<td>高级工程师</td>
<td class="price-value">900<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>远程技术支持</td>
<td>技术专家</td>
<td class="price-value">1200<span class="price-unit">元/小时</span></td>
<td>按实际工作时间计费，不足1小时按1小时计算</td>
</tr>
<tr>
<td>远程故障诊断</td>
<td>根据故障复杂度</td>
<td class="price-value">600-1200<span class="price-unit">元/小时</span></td>
<td>根据故障复杂度和所需工程师级别确定</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 零件费用标准 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">零件费用标准</h2>
</div>
<table class="price-table">
<thead>
<tr>
<th>零件类别</th>
<th>价格说明</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>标准备件</td>
<td class="price-value">按标准价格表</td>
<td>标准备件价格以《服务价格白皮书》附件中的标准备件价格表为准</td>
</tr>
<tr>
<td>定制零件</td>
<td class="price-value">成本价 + 20%</td>
<td>定制零件按成本价加20%管理费计算</td>
</tr>
<tr>
<td>进口零件</td>
<td class="price-value">成本价 + 关税 + 15%</td>
<td>进口零件按成本价、关税、15%管理费计算</td>
</tr>
<tr>
<td>紧急采购零件</td>
<td class="price-value">标准价格 + 30%</td>
<td>紧急采购的零件在标准价格基础上加收30%紧急采购费</td>
</tr>
<tr>
<td>运费</td>
<td class="price-value">实报实销</td>
<td>零件运输费用按实际发生费用计算</td>
</tr>
</tbody>
</table>
<div class="price-note">
<div class="price-note-title">零件价格查询</div>
<p>具体零件价格请参考《服务价格白皮书》附件中的详细价格表，或联系客服查询最新价格。零件价格会根据市场行情定期更新。</p>
</div>
</div>
<!-- 其他费用标准 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">其他费用标准</h2>
</div>
<table class="price-table">
<thead>
<tr>
<th>费用类型</th>
<th>收费标准</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>设备检测费</td>
<td class="price-value">500-2000<span class="price-unit">元/次</span></td>
<td>根据设备类型和检测项目确定，具体价格见《服务价格白皮书》</td>
</tr>
<tr>
<td>设备校准费</td>
<td class="price-value">800-3000<span class="price-unit">元/次</span></td>
<td>根据设备类型和校准精度要求确定</td>
</tr>
<tr>
<td>设备升级费</td>
<td class="price-value">按项目报价</td>
<td>设备升级项目根据具体需求提供详细报价</td>
</tr>
<tr>
<td>培训费</td>
<td class="price-value">2000-5000<span class="price-unit">元/天</span></td>
<td>现场培训按天计费，远程培训按小时计费（参考远程技术支持价格）</td>
</tr>
<tr>
<td>报告编制费</td>
<td class="price-value">1000-3000<span class="price-unit">元/份</span></td>
<td>根据报告复杂度和页数确定</td>
</tr>
</tbody>
</table>
</div>
<!-- 报价单生成 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">快速报价单生成</h2>
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
<div>
<label style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px;">服务类型</label>
<select style="width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px;">
<option>现场技术支持</option>
<option>远程技术支持</option>
<option>设备维修</option>
<option>设备安装调试</option>
<option>设备检测</option>
<option>设备校准</option>
</select>
</div>
<div>
<label style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px;">工程师级别</label>
<select style="width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px;">
<option>初级工程师</option>
<option>中级工程师</option>
<option>高级工程师</option>
<option>技术专家</option>
</select>
</div>
<div>
<label style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px;">预计服务时长（小时）</label>
<input type="number" min="1" value="4" style="width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px;">
</div>
<div>
<label style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px;">是否加班时段</label>
<select style="width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px;">
<option>否</option>
<option>是（工作日18:00后）</option>
<option>是（周末）</option>
<option>是（节假日）</option>
</select>
</div>
</div>
<div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
<div>
<div style="font-size: 14px; color: var(--text-secondary); margin-bottom: 4px;">预估费用</div>
<div style="font-size: 24px; font-weight: 600; color: var(--primary-color);">¥4,800</div>
</div>
<button class="btn-primary">生成报价单</button>
</div>
</div>
</main>
<script>
function switchTab(tabId) {
// 隐藏所有标签内容
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// 移除所有标签的active状态
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
// 显示选中的标签内容
document.getElementById(tabId).classList.add('active');
// 激活选中的标签
event.target.classList.add('active');
}
</script>
</body>
</html>
知识仓库.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -1327,7 +1327,7 @@ ...@@ -1327,7 +1327,7 @@
<div class="main-content"> <div class="main-content">
<div class="content-area"> <div class="content-area">
<div class="card"> <div class="card">
<img src="./img_1.png" alt="" style="width: 100%;"> <img src="./img_5.png" alt="" style="width: 100%;">
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment