3191 lines
147 KiB
HTML
3191 lines
147 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>陶川 - 化工技术专员简历</title>
|
||
|
||
<!-- 引入主题CSS -->
|
||
<link rel="stylesheet" href=".superdesign/design_iterations/chemical_theme_1.css">
|
||
|
||
<!-- Google Fonts -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Lucide Icons -->
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
|
||
<style>
|
||
/* 优雅设计系统 */
|
||
:root {
|
||
--primary-elegant: #2c5f5d;
|
||
--secondary-elegant: #4a9b8e;
|
||
--accent-elegant: #d4a574;
|
||
--neutral-dark: #1a1a1a;
|
||
--neutral-medium: #404040;
|
||
--neutral-light: #f8f9fa;
|
||
--glass-subtle: rgba(255, 255, 255, 0.08);
|
||
--shadow-elegant: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||
--shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||
--transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
--border-radius-elegant: 20px;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', 'Inter', sans-serif;
|
||
background:
|
||
linear-gradient(135deg,
|
||
#0f1419 0%,
|
||
#1a2332 35%,
|
||
#0f1419 100%),
|
||
radial-gradient(circle at 20% 80%, rgba(44, 95, 93, 0.15) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 20%, rgba(74, 155, 142, 0.1) 0%, transparent 50%);
|
||
color: #e2e8f0;
|
||
line-height: 1.7;
|
||
overflow-x: hidden;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 精简化学装饰背景 */
|
||
.subtle-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
opacity: 0.02;
|
||
}
|
||
|
||
.chemical-element {
|
||
position: absolute;
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 1px solid var(--primary-elegant);
|
||
border-radius: 8px;
|
||
animation: float-gentle 20s ease-in-out infinite;
|
||
}
|
||
|
||
.chemical-element:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
|
||
.chemical-element:nth-child(2) { top: 30%; right: 15%; animation-delay: 7s; }
|
||
.chemical-element:nth-child(3) { bottom: 25%; left: 20%; animation-delay: 14s; }
|
||
|
||
@keyframes float-gentle {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
|
||
50% { transform: translateY(-20px) rotate(5deg); opacity: 0.6; }
|
||
}
|
||
|
||
/* 优雅动画 */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* 导航栏优雅版 */
|
||
nav {
|
||
background: linear-gradient(to bottom,
|
||
rgba(26, 26, 26, 0.95),
|
||
rgba(26, 26, 26, 0.85));
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(44, 95, 93, 0.2);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
animation: slideIn 0.6s ease-out;
|
||
}
|
||
|
||
nav::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 20%;
|
||
right: 20%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
var(--primary-elegant),
|
||
transparent);
|
||
}
|
||
|
||
nav a {
|
||
color: rgba(226, 232, 240, 0.7);
|
||
transition: var(--transition-smooth);
|
||
position: relative;
|
||
padding: 1rem 1.5rem;
|
||
font-weight: 500;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--secondary-elegant);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
nav a.active {
|
||
color: var(--secondary-elegant);
|
||
}
|
||
|
||
nav a.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 25%;
|
||
right: 25%;
|
||
height: 2px;
|
||
background: var(--secondary-elegant);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 安全警示条优雅版 */
|
||
.safety-banner {
|
||
background: linear-gradient(45deg,
|
||
var(--accent-elegant) 0px,
|
||
var(--accent-elegant) 8px,
|
||
var(--neutral-dark) 8px,
|
||
var(--neutral-dark) 16px);
|
||
background-size: 16px 16px;
|
||
height: 3px;
|
||
animation: safety-move 3s linear infinite;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
@keyframes safety-move {
|
||
0% { background-position: 0 0; }
|
||
100% { background-position: 16px 0; }
|
||
}
|
||
|
||
/* 英雄区域优雅版 */
|
||
.hero {
|
||
background:
|
||
linear-gradient(135deg,
|
||
rgba(26, 26, 26, 0.9) 0%,
|
||
rgba(44, 95, 93, 0.1) 50%,
|
||
rgba(26, 26, 26, 0.9) 100%);
|
||
border-radius: var(--border-radius-elegant);
|
||
padding: 4rem;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
animation: fadeInUp 0.8s ease-out;
|
||
border: 1px solid rgba(74, 155, 142, 0.15);
|
||
box-shadow: var(--shadow-elegant);
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -30%;
|
||
width: 300px;
|
||
height: 300px;
|
||
background: radial-gradient(circle,
|
||
rgba(74, 155, 142, 0.08) 0%,
|
||
transparent 70%);
|
||
border-radius: 50%;
|
||
animation: pulse-subtle 8s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-subtle {
|
||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||
50% { opacity: 0.6; transform: scale(1.1); }
|
||
}
|
||
|
||
.hero-content {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 4rem;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-avatar {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary-elegant), var(--secondary-elegant));
|
||
padding: 3px;
|
||
box-shadow:
|
||
0 0 40px rgba(74, 155, 142, 0.3),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
object-position: center 15%;
|
||
background: #1a1a1a;
|
||
border: 2px solid rgba(26, 26, 26, 0.8);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 3.5rem;
|
||
font-weight: 600;
|
||
background: linear-gradient(135deg,
|
||
#e2e8f0 0%,
|
||
var(--secondary-elegant) 50%,
|
||
#e2e8f0 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 0.5rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.hero .position {
|
||
font-size: 1.5rem;
|
||
color: var(--accent-elegant);
|
||
font-weight: 400;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* 新增英雄区样式 */
|
||
.molecule-animation {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
opacity: 0.15;
|
||
}
|
||
|
||
.molecule {
|
||
position: absolute;
|
||
animation: float-molecule 20s ease-in-out infinite;
|
||
}
|
||
|
||
.molecule-1 {
|
||
top: 20%;
|
||
left: 10%;
|
||
}
|
||
|
||
.molecule-2 {
|
||
top: 60%;
|
||
right: 15%;
|
||
animation-delay: -10s;
|
||
}
|
||
|
||
@keyframes float-molecule {
|
||
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||
25% { transform: translate(30px, -20px) rotate(90deg) scale(1.1); }
|
||
50% { transform: translate(-20px, 10px) rotate(180deg) scale(0.95); }
|
||
75% { transform: translate(40px, 30px) rotate(270deg) scale(1.05); }
|
||
}
|
||
|
||
.atom {
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--accent-elegant);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 20px rgba(74, 155, 142, 0.5);
|
||
}
|
||
|
||
.atom-center {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: var(--primary-elegant);
|
||
}
|
||
|
||
.atom-1 { transform: translate(-30px, 0); }
|
||
.atom-2 { transform: translate(30px, 0); }
|
||
.atom-3 { transform: translate(0, -30px); }
|
||
|
||
.bond {
|
||
position: absolute;
|
||
width: 30px;
|
||
height: 2px;
|
||
background: rgba(74, 155, 142, 0.3);
|
||
transform-origin: center;
|
||
}
|
||
|
||
.bond-1 { transform: rotate(0deg); }
|
||
.bond-2 { transform: rotate(120deg); }
|
||
.bond-3 { transform: rotate(240deg); }
|
||
|
||
.hero-left {
|
||
flex: 0 0 320px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-avatar-container {
|
||
position: relative;
|
||
width: 240px;
|
||
height: 240px;
|
||
}
|
||
|
||
/* 电子轨道环 */
|
||
.avatar-chemical-ring {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 电子1 */
|
||
.electron-1 {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-left: -4px;
|
||
margin-top: -4px;
|
||
background: var(--accent-elegant);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 10px rgba(74, 155, 142, 0.8),
|
||
0 0 20px rgba(74, 155, 142, 0.4);
|
||
animation: electron-orbit-1 3s linear infinite;
|
||
}
|
||
|
||
/* 电子2 */
|
||
.electron-2 {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 6px;
|
||
height: 6px;
|
||
margin-left: -3px;
|
||
margin-top: -3px;
|
||
background: var(--primary-elegant);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 8px rgba(74, 155, 142, 0.6),
|
||
0 0 15px rgba(74, 155, 142, 0.3);
|
||
animation: electron-orbit-2 5s linear infinite;
|
||
}
|
||
|
||
/* 电子3 */
|
||
.electron-3 {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 5px;
|
||
height: 5px;
|
||
margin-left: -2.5px;
|
||
margin-top: -2.5px;
|
||
background: var(--secondary-elegant);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 6px rgba(226, 232, 240, 0.8),
|
||
0 0 12px rgba(226, 232, 240, 0.4);
|
||
animation: electron-orbit-3 7s linear infinite reverse;
|
||
}
|
||
|
||
@keyframes electron-orbit-1 {
|
||
from {
|
||
transform: rotate(0deg) translateX(120px) rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg) translateX(120px) rotate(-360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes electron-orbit-2 {
|
||
from {
|
||
transform: rotate(120deg) translateX(140px) rotate(-120deg);
|
||
}
|
||
to {
|
||
transform: rotate(480deg) translateX(140px) rotate(-480deg);
|
||
}
|
||
}
|
||
|
||
@keyframes electron-orbit-3 {
|
||
from {
|
||
transform: rotate(240deg) translateX(100px) rotate(-240deg);
|
||
}
|
||
to {
|
||
transform: rotate(600deg) translateX(100px) rotate(-600deg);
|
||
}
|
||
}
|
||
|
||
@keyframes orbit-pulse {
|
||
0%, 100% {
|
||
opacity: 0.3;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.6;
|
||
transform: scale(1.02);
|
||
}
|
||
}
|
||
|
||
.avatar-status {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
background: rgba(26, 26, 26, 0.9);
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border: 1px solid rgba(74, 155, 142, 0.3);
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #4ade80;
|
||
border-radius: 50%;
|
||
animation: pulse-status 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-status {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.6; transform: scale(0.8); }
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 0.75rem;
|
||
color: #4ade80;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hero-tags {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.hero-tag {
|
||
background: rgba(44, 95, 93, 0.1);
|
||
border: 1px solid rgba(74, 155, 142, 0.2);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
transition: var(--transition-smooth);
|
||
cursor: default;
|
||
}
|
||
|
||
.hero-tag:hover {
|
||
background: rgba(44, 95, 93, 0.2);
|
||
border-color: var(--accent-elegant);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.hero-tag i {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--accent-elegant);
|
||
}
|
||
|
||
.hero-tag span {
|
||
font-size: 0.9rem;
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
.hero-right {
|
||
flex: 1;
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
.hero-title-group {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.hero-name {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
color: var(--secondary-elegant);
|
||
margin-bottom: 0.5rem;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.name-en {
|
||
font-size: 1.5rem;
|
||
color: rgba(226, 232, 240, 0.5);
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
}
|
||
|
||
.hero-position {
|
||
font-size: 1.5rem;
|
||
color: var(--accent-elegant);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.position-icon {
|
||
font-size: 1.8rem;
|
||
animation: bounce 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-5px); }
|
||
}
|
||
|
||
.hero-bio {
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.hero-bio p {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
color: #cbd5e1;
|
||
text-align: justify;
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: 3rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary-elegant);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.9rem;
|
||
color: rgba(226, 232, 240, 0.7);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.hero-btn {
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: 8px;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
transition: var(--transition-smooth);
|
||
background: none;
|
||
}
|
||
|
||
.hero-btn i {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.hero-btn.primary {
|
||
background: linear-gradient(135deg, var(--primary-elegant), var(--secondary-elegant));
|
||
color: white;
|
||
}
|
||
|
||
.hero-btn.primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 25px rgba(74, 155, 142, 0.3);
|
||
}
|
||
|
||
.hero-btn.secondary {
|
||
border: 2px solid rgba(74, 155, 142, 0.3);
|
||
color: var(--accent-elegant);
|
||
}
|
||
|
||
.hero-btn.secondary:hover {
|
||
background: rgba(44, 95, 93, 0.1);
|
||
border-color: var(--accent-elegant);
|
||
}
|
||
|
||
.hero-bottom-decoration {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.decoration-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
rgba(74, 155, 142, 0.3),
|
||
transparent);
|
||
}
|
||
|
||
.decoration-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
background: var(--accent-elegant);
|
||
border-radius: 50%;
|
||
margin: 0 1rem;
|
||
box-shadow: 0 0 10px rgba(74, 155, 142, 0.5);
|
||
}
|
||
|
||
/* 教育背景优雅版 */
|
||
.education {
|
||
background: rgba(26, 26, 26, 0.6);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(74, 155, 142, 0.15);
|
||
border-radius: var(--border-radius-elegant);
|
||
padding: 3rem;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
animation: fadeInUp 0.8s ease-out 0.2s both;
|
||
box-shadow: var(--shadow-elegant);
|
||
}
|
||
|
||
.education::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg,
|
||
var(--primary-elegant),
|
||
var(--secondary-elegant),
|
||
var(--accent-elegant));
|
||
border-radius: var(--border-radius-elegant) var(--border-radius-elegant) 0 0;
|
||
}
|
||
|
||
.education h2 {
|
||
color: var(--secondary-elegant);
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
margin-bottom: 2rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.education-info {
|
||
display: grid;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.education .school {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: #f1f5f9;
|
||
}
|
||
|
||
.education .major {
|
||
color: var(--accent-elegant);
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.education .period {
|
||
color: rgba(226, 232, 240, 0.7);
|
||
font-size: 1rem;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.education-courses {
|
||
margin-top: 2rem;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid rgba(74, 155, 142, 0.2);
|
||
}
|
||
|
||
.education-courses h3 {
|
||
color: var(--primary-elegant);
|
||
font-size: 1.2rem;
|
||
margin-bottom: 1.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.courses-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.course-item {
|
||
background: rgba(44, 95, 93, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
padding: 1rem;
|
||
border-radius: 12px;
|
||
border-left: 3px solid var(--accent-elegant);
|
||
transition: var(--transition-smooth);
|
||
font-size: 0.95rem;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
.course-item:hover {
|
||
background: rgba(44, 95, 93, 0.2);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(212, 165, 116, 0.15);
|
||
}
|
||
|
||
/* 技能矩阵区域 - 全新设计 */
|
||
.skills-matrix-section {
|
||
animation: fadeInUp 1s ease-out 0.4s both;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
}
|
||
|
||
.matrix-title {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
}
|
||
|
||
.matrix-title h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2.8rem;
|
||
font-weight: 600;
|
||
background: linear-gradient(135deg, var(--secondary-elegant), var(--accent-elegant));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.matrix-subtitle {
|
||
color: rgba(248, 249, 250, 0.6);
|
||
font-size: 1rem;
|
||
letter-spacing: 3px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* 矩阵控制器 */
|
||
.matrix-controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.matrix-btn {
|
||
background: rgba(26, 26, 26, 0.8);
|
||
border: 1px solid rgba(74, 155, 142, 0.2);
|
||
color: rgba(248, 249, 250, 0.7);
|
||
padding: 0.8rem 1.5rem;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-size: 0.9rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.matrix-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border-radius: 50%;
|
||
background: rgba(74, 155, 142, 0.3);
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.6s ease, height 0.6s ease;
|
||
}
|
||
|
||
.matrix-btn:hover::before {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.matrix-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(74, 155, 142, 0.3);
|
||
color: var(--accent-elegant);
|
||
border-color: var(--accent-elegant);
|
||
}
|
||
|
||
.matrix-btn.active {
|
||
background: linear-gradient(135deg, rgba(74, 155, 142, 0.2), rgba(44, 95, 93, 0.3));
|
||
color: var(--accent-elegant);
|
||
border-color: var(--accent-elegant);
|
||
}
|
||
|
||
.matrix-btn i {
|
||
width: 18px;
|
||
height: 18px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.matrix-btn span {
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 技能矩阵主体 */
|
||
.skills-matrix {
|
||
position: relative;
|
||
}
|
||
|
||
.matrix-group {
|
||
margin-bottom: 3rem;
|
||
opacity: 0;
|
||
animation: matrixFadeIn 0.8s ease-out forwards;
|
||
}
|
||
|
||
.matrix-group:nth-child(2) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
@keyframes matrixFadeIn {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
}
|
||
|
||
.matrix-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
padding: 1rem 1.5rem;
|
||
background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(44, 95, 93, 0.3));
|
||
border-radius: 15px;
|
||
border: 1px solid rgba(74, 155, 142, 0.2);
|
||
}
|
||
|
||
.matrix-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--accent-elegant);
|
||
border-radius: 10px;
|
||
color: white;
|
||
}
|
||
|
||
.matrix-icon i {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.matrix-header h3 {
|
||
flex: 1;
|
||
color: var(--secondary-elegant);
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.matrix-progress {
|
||
width: 150px;
|
||
height: 6px;
|
||
background: rgba(74, 155, 142, 0.1);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--accent-elegant), var(--secondary-elegant));
|
||
border-radius: 3px;
|
||
transition: width 1s ease;
|
||
animation: progressPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes progressPulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.8; }
|
||
}
|
||
|
||
/* 矩阵网格 */
|
||
.matrix-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
/* 核心能力组特殊布局 - 每行1个 */
|
||
.matrix-group[data-group="core"] .matrix-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
/* 复合能力组特殊布局 - 每行3个 */
|
||
.matrix-group[data-group="composite"] .matrix-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
/* 复合能力最后两个技能在同一行平均分配 */
|
||
.matrix-group[data-group="composite"] .matrix-cell:nth-child(10) {
|
||
grid-column: 1 / 2;
|
||
}
|
||
|
||
.matrix-group[data-group="composite"] .matrix-cell:nth-child(11) {
|
||
grid-column: 2 / 3;
|
||
}
|
||
|
||
/* 核心能力和复合能力组默认展示内容 */
|
||
.matrix-group[data-group="core"] .cell-content,
|
||
.matrix-group[data-group="composite"] .cell-content {
|
||
max-height: 200px;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* 移动端响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.matrix-group[data-group="composite"] .matrix-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.matrix-group[data-group="composite"] .matrix-cell:nth-child(10),
|
||
.matrix-group[data-group="composite"] .matrix-cell:nth-child(11) {
|
||
grid-column: 1;
|
||
}
|
||
}
|
||
|
||
.matrix-cell {
|
||
position: relative;
|
||
background: rgba(26, 26, 26, 0.6);
|
||
border: 1px solid rgba(74, 155, 142, 0.15);
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.matrix-cell::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
var(--accent-elegant),
|
||
transparent);
|
||
transform: translateX(-100%);
|
||
transition: transform 0.6s ease;
|
||
}
|
||
|
||
.matrix-cell:hover::before {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.matrix-cell:hover {
|
||
transform: translateY(-5px) scale(1.02);
|
||
box-shadow: 0 15px 40px rgba(74, 155, 142, 0.2);
|
||
border-color: var(--accent-elegant);
|
||
background: rgba(44, 95, 93, 0.3);
|
||
}
|
||
|
||
.cell-inner {
|
||
padding: 1.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.cell-number {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: rgba(74, 155, 142, 0.15);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.cell-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--secondary-elegant);
|
||
margin-bottom: 1rem;
|
||
padding-right: 2rem;
|
||
}
|
||
|
||
.cell-content {
|
||
font-size: 0.9rem;
|
||
color: rgba(248, 249, 250, 0.7);
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.5s ease;
|
||
}
|
||
|
||
.matrix-cell:hover .cell-content {
|
||
max-height: 200px;
|
||
}
|
||
|
||
.cell-level {
|
||
display: flex;
|
||
gap: 0.3rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.level-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: rgba(74, 155, 142, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.level-dot.active {
|
||
background: var(--accent-elegant);
|
||
box-shadow: 0 0 10px rgba(74, 155, 142, 0.5);
|
||
}
|
||
|
||
/* 矩阵视图模式 */
|
||
.matrix-view-mode {
|
||
display: none;
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.matrix-view-mode.active {
|
||
display: grid;
|
||
}
|
||
|
||
.matrix-view-mode .matrix-cell {
|
||
aspect-ratio: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.matrix-view-mode .cell-inner {
|
||
text-align: center;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.matrix-view-mode .cell-content {
|
||
display: none;
|
||
}
|
||
|
||
.matrix-view-mode .cell-level {
|
||
justify-content: center;
|
||
}
|
||
|
||
.skills-title::before,
|
||
.skills-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 20%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
var(--primary-elegant));
|
||
}
|
||
|
||
.skills-title::before {
|
||
left: 0;
|
||
}
|
||
|
||
.skills-title::after {
|
||
right: 0;
|
||
background: linear-gradient(90deg,
|
||
var(--primary-elegant),
|
||
transparent);
|
||
}
|
||
|
||
.skills-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.skill-panel {
|
||
background: rgba(26, 26, 26, 0.6);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(74, 155, 142, 0.15);
|
||
border-radius: var(--border-radius-elegant);
|
||
padding: 2.5rem;
|
||
position: relative;
|
||
box-shadow: var(--shadow-elegant);
|
||
transition: var(--transition-smooth);
|
||
}
|
||
|
||
.skill-panel:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: var(--shadow-hover);
|
||
}
|
||
|
||
.skill-panel::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg,
|
||
var(--primary-elegant),
|
||
var(--secondary-elegant));
|
||
border-radius: var(--border-radius-elegant) var(--border-radius-elegant) 0 0;
|
||
}
|
||
|
||
.skill-panel h3 {
|
||
color: var(--secondary-elegant);
|
||
font-size: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.skill-panel h3 i {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: var(--accent-elegant);
|
||
}
|
||
|
||
.skill-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.skill-item {
|
||
background: rgba(44, 95, 93, 0.08);
|
||
border-left: 3px solid var(--accent-elegant);
|
||
padding: 1.2rem;
|
||
border-radius: 8px;
|
||
transition: var(--transition-smooth);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
.skill-item:hover {
|
||
background: rgba(44, 95, 93, 0.15);
|
||
transform: translateX(5px);
|
||
box-shadow: 0 5px 20px rgba(212, 165, 116, 0.1);
|
||
}
|
||
|
||
/* 项目区域优雅版 */
|
||
.projects-section {
|
||
margin-bottom: 3rem;
|
||
animation: fadeInUp 1.2s ease-out 0.6s both;
|
||
}
|
||
|
||
.projects-title {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.projects-title h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2.8rem;
|
||
font-weight: 600;
|
||
color: var(--secondary-elegant);
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.project-card {
|
||
background: rgba(26, 26, 26, 0.6);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(74, 155, 142, 0.15);
|
||
border-radius: var(--border-radius-elegant);
|
||
overflow: hidden;
|
||
margin-bottom: 2rem;
|
||
transition: var(--transition-smooth);
|
||
opacity: 0;
|
||
animation: fadeInUp 0.8s ease-out forwards;
|
||
box-shadow: var(--shadow-elegant);
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* 左侧图片，右侧内容布局（默认，奇数卡片） */
|
||
.project-card:nth-child(odd) {
|
||
flex-direction: row;
|
||
}
|
||
|
||
/* 左侧内容，右侧图片布局（偶数卡片） */
|
||
.project-card:nth-child(even) {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.project-card:nth-child(1) { animation-delay: 0.1s; }
|
||
.project-card:nth-child(2) { animation-delay: 0.2s; }
|
||
.project-card:nth-child(3) { animation-delay: 0.3s; }
|
||
.project-card:nth-child(4) { animation-delay: 0.4s; }
|
||
.project-card:nth-child(5) { animation-delay: 0.5s; }
|
||
|
||
.project-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: var(--shadow-hover);
|
||
}
|
||
|
||
.project-image-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 300px;
|
||
flex: 0 0 45%;
|
||
min-width: 45%;
|
||
}
|
||
|
||
.project-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: var(--transition-smooth);
|
||
filter: brightness(0.8) contrast(1.1);
|
||
}
|
||
|
||
.project-card:hover .project-image {
|
||
transform: scale(1.05);
|
||
filter: brightness(0.9) contrast(1.2);
|
||
}
|
||
|
||
.project-image-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(to bottom,
|
||
transparent 0%,
|
||
rgba(26, 26, 26, 0.4) 50%,
|
||
rgba(26, 26, 26, 0.8) 100%);
|
||
}
|
||
|
||
.project-content {
|
||
padding: 2rem;
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.project-number {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: linear-gradient(135deg, var(--primary-elegant), var(--secondary-elegant));
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
color: white;
|
||
box-shadow: 0 5px 15px rgba(74, 155, 142, 0.3);
|
||
}
|
||
|
||
.project-title {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: var(--secondary-elegant);
|
||
margin-bottom: 1rem;
|
||
margin-top: 0.5rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.project-desc {
|
||
color: #cbd5e1;
|
||
margin-bottom: 1.5rem;
|
||
line-height: 1.7;
|
||
font-size: 0.95rem;
|
||
flex: 1;
|
||
}
|
||
|
||
.project-meta {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid rgba(74, 155, 142, 0.2);
|
||
}
|
||
|
||
.project-meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: rgba(226, 232, 240, 0.7);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.project-meta-item i {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: var(--accent-elegant);
|
||
}
|
||
|
||
/* 个人评价优雅版 */
|
||
.evaluation {
|
||
background: rgba(26, 26, 26, 0.6);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(74, 155, 142, 0.15);
|
||
border-radius: var(--border-radius-elegant);
|
||
padding: 3rem;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
animation: fadeInUp 1.4s ease-out 0.8s both;
|
||
box-shadow: var(--shadow-elegant);
|
||
}
|
||
|
||
.evaluation::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg,
|
||
var(--secondary-elegant),
|
||
var(--accent-elegant));
|
||
border-radius: var(--border-radius-elegant) var(--border-radius-elegant) 0 0;
|
||
}
|
||
|
||
.evaluation h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
color: var(--secondary-elegant);
|
||
font-size: 2.2rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.evaluation-content {
|
||
background: rgba(44, 95, 93, 0.05);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
border: 1px solid rgba(74, 155, 142, 0.1);
|
||
}
|
||
|
||
.evaluation p {
|
||
font-size: 1.1rem;
|
||
line-height: 2;
|
||
color: #e2e8f0;
|
||
text-indent: 2rem;
|
||
text-align: justify;
|
||
}
|
||
|
||
/* 联系方式优雅版 */
|
||
.contact {
|
||
background: rgba(26, 26, 26, 0.6);
|
||
backdrop-filter: blur(15px);
|
||
border-radius: var(--border-radius-elegant);
|
||
padding: 3rem;
|
||
text-align: center;
|
||
animation: fadeInUp 1.6s ease-out 1s both;
|
||
border: 1px solid rgba(212, 165, 116, 0.2);
|
||
box-shadow: var(--shadow-elegant);
|
||
}
|
||
|
||
.contact::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg,
|
||
var(--accent-elegant),
|
||
var(--secondary-elegant));
|
||
border-radius: var(--border-radius-elegant) var(--border-radius-elegant) 0 0;
|
||
}
|
||
|
||
.contact h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2.2rem;
|
||
font-weight: 600;
|
||
color: var(--accent-elegant);
|
||
margin-bottom: 2.5rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.contact-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
.contact-item {
|
||
background: rgba(44, 95, 93, 0.1);
|
||
border: 1px solid rgba(212, 165, 116, 0.2);
|
||
border-radius: 15px;
|
||
padding: 2rem 1.5rem;
|
||
transition: var(--transition-smooth);
|
||
cursor: pointer;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.contact-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(212, 165, 116, 0.2);
|
||
background: rgba(44, 95, 93, 0.15);
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin: 0 auto 1.5rem;
|
||
background: linear-gradient(135deg, var(--accent-elegant), #c9975b);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 5px 20px rgba(212, 165, 116, 0.3);
|
||
transition: var(--transition-smooth);
|
||
}
|
||
|
||
.contact-item:hover .contact-icon {
|
||
transform: scale(1.1);
|
||
background: linear-gradient(135deg, var(--secondary-elegant), var(--primary-elegant));
|
||
}
|
||
|
||
.contact-icon i {
|
||
width: 28px;
|
||
height: 28px;
|
||
color: white;
|
||
}
|
||
|
||
.contact-label {
|
||
font-weight: 600;
|
||
color: var(--accent-elegant);
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 1.1rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.contact-value {
|
||
color: #cbd5e1;
|
||
font-size: 1rem;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.hero {
|
||
padding: 2.5rem;
|
||
}
|
||
.hero-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 2rem;
|
||
}
|
||
.hero h1 { font-size: 2.5rem; }
|
||
.hero .position { font-size: 1.2rem; }
|
||
.skills-container { grid-template-columns: 1fr; }
|
||
.contact-grid { grid-template-columns: 1fr; }
|
||
.project-meta { grid-template-columns: 1fr; }
|
||
.courses-grid { grid-template-columns: 1fr; }
|
||
.education, .skill-panel, .contact, .evaluation {
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* 移动端项目卡片垂直布局 */
|
||
.project-card,
|
||
.project-card:nth-child(odd),
|
||
.project-card:nth-child(even) {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.project-image-container {
|
||
flex: none;
|
||
height: 200px;
|
||
min-width: 100%;
|
||
}
|
||
|
||
.project-number {
|
||
top: -25px;
|
||
right: 2rem;
|
||
}
|
||
}
|
||
|
||
/* 滚动条优雅版 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(26, 26, 26, 0.5);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(to bottom,
|
||
var(--primary-elegant),
|
||
var(--secondary-elegant));
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(to bottom,
|
||
var(--secondary-elegant),
|
||
var(--accent-elegant));
|
||
}
|
||
|
||
/* 优雅的复制提示 */
|
||
.toast {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
background: linear-gradient(135deg, var(--primary-elegant), var(--secondary-elegant));
|
||
color: white;
|
||
padding: 15px 30px;
|
||
border-radius: 25px;
|
||
box-shadow: var(--shadow-hover);
|
||
animation: slideInUp 0.4s ease-out;
|
||
z-index: 1000;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 1rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
@keyframes slideInUp {
|
||
from {
|
||
transform: translateY(100px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 2000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(15, 15, 15, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
animation: fadeIn 0.3s ease-out;
|
||
}
|
||
|
||
.modal.show {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background: linear-gradient(135deg,
|
||
rgba(26, 26, 26, 0.95) 0%,
|
||
rgba(44, 95, 93, 0.1) 100%);
|
||
border: 1px solid rgba(74, 155, 142, 0.2);
|
||
border-radius: var(--border-radius-elegant);
|
||
max-width: 95vw;
|
||
max-height: 95vh;
|
||
width: 1200px;
|
||
height: 800px;
|
||
position: relative;
|
||
box-shadow: var(--shadow-hover);
|
||
backdrop-filter: blur(20px);
|
||
overflow: hidden;
|
||
animation: modalSlideIn 0.4s ease-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes modalSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-50px) scale(0.9);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 2rem;
|
||
border-bottom: 1px solid rgba(74, 155, 142, 0.2);
|
||
background: rgba(44, 95, 93, 0.1);
|
||
}
|
||
|
||
.modal-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
color: var(--secondary-elegant);
|
||
margin: 0;
|
||
}
|
||
|
||
.modal-close {
|
||
font-size: 2rem;
|
||
color: var(--neutral-light);
|
||
cursor: pointer;
|
||
padding: 0.5rem;
|
||
border-radius: 50%;
|
||
transition: var(--transition-smooth);
|
||
line-height: 1;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
background: rgba(212, 165, 116, 0.2);
|
||
color: var(--accent-elegant);
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* 流程导航栏样式 */
|
||
.process-nav {
|
||
background: rgba(26, 26, 26, 0.8);
|
||
border-bottom: 1px solid rgba(74, 155, 142, 0.2);
|
||
padding: 1rem 2rem;
|
||
overflow-x: auto;
|
||
/* 隐藏滚动条 */
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
/* 隐藏滚动条 - Chrome, Safari and Opera */
|
||
.process-nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.process-nav-items {
|
||
display: flex;
|
||
gap: 1rem;
|
||
min-width: max-content;
|
||
}
|
||
|
||
.process-nav-item {
|
||
padding: 0.8rem 1.5rem;
|
||
border-radius: 12px;
|
||
background: rgba(44, 95, 93, 0.1);
|
||
border: 1px solid rgba(74, 155, 142, 0.2);
|
||
color: rgba(248, 249, 250, 0.7);
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: var(--transition-smooth);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.process-nav-item:hover {
|
||
background: rgba(44, 95, 93, 0.2);
|
||
color: var(--accent-elegant);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.process-nav-item.active {
|
||
background: var(--accent-elegant);
|
||
color: white;
|
||
border-color: var(--accent-elegant);
|
||
}
|
||
|
||
/* 弹窗主体样式 */
|
||
.modal-body {
|
||
display: flex;
|
||
height: calc(100% - 160px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.process-image-container {
|
||
flex: 0 0 45%;
|
||
background: rgba(15, 15, 15, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 2rem;
|
||
border-right: 1px solid rgba(74, 155, 142, 0.2);
|
||
}
|
||
|
||
.process-image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow-elegant);
|
||
}
|
||
|
||
.process-content {
|
||
flex: 1;
|
||
padding: 2rem;
|
||
overflow-y: auto;
|
||
background: rgba(26, 26, 26, 0.3);
|
||
}
|
||
|
||
.process-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
color: var(--accent-elegant);
|
||
margin-bottom: 2rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.process-description,
|
||
.process-work {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.process-description h4,
|
||
.process-work h4 {
|
||
font-size: 1.3rem;
|
||
color: var(--secondary-elegant);
|
||
margin-bottom: 1rem;
|
||
font-weight: 600;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 2px solid var(--accent-elegant);
|
||
display: inline-block;
|
||
}
|
||
|
||
.process-desc-text {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
color: rgba(248, 249, 250, 0.9);
|
||
text-align: justify;
|
||
text-indent: 2rem;
|
||
}
|
||
|
||
.process-work-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.process-work-item {
|
||
background: rgba(44, 95, 93, 0.08);
|
||
margin-bottom: 1rem;
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
border-left: 4px solid var(--accent-elegant);
|
||
position: relative;
|
||
transition: var(--transition-smooth);
|
||
}
|
||
|
||
.process-work-item:hover {
|
||
background: rgba(44, 95, 93, 0.15);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.process-work-item::before {
|
||
content: counter(work-counter);
|
||
counter-increment: work-counter;
|
||
position: absolute;
|
||
top: 1rem;
|
||
left: -2px;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: var(--accent-elegant);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.process-work-list {
|
||
counter-reset: work-counter;
|
||
}
|
||
|
||
.work-item-text {
|
||
font-size: 1rem;
|
||
line-height: 1.7;
|
||
color: rgba(248, 249, 250, 0.9);
|
||
margin-left: 1.5rem;
|
||
}
|
||
|
||
/* 响应式弹窗 */
|
||
@media (max-width: 1024px) {
|
||
.modal-content {
|
||
width: 95vw;
|
||
height: 90vh;
|
||
}
|
||
|
||
.modal-body {
|
||
flex-direction: column;
|
||
height: calc(100% - 140px);
|
||
}
|
||
|
||
.process-image-container {
|
||
flex: 0 0 40%;
|
||
border-right: none;
|
||
border-bottom: 1px solid rgba(74, 155, 142, 0.2);
|
||
}
|
||
|
||
.process-content {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.modal-content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.process-nav {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.process-nav-item {
|
||
padding: 0.6rem 1rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.process-image-container,
|
||
.process-content {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.process-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 精简背景装饰 -->
|
||
<div class="subtle-bg">
|
||
<div class="chemical-element"></div>
|
||
<div class="chemical-element"></div>
|
||
<div class="chemical-element"></div>
|
||
</div>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="px-8 py-4">
|
||
<div class="safety-banner"></div>
|
||
<div class="max-w-7xl mx-auto flex justify-between items-center mt-3">
|
||
<a href="#home" class="text-xl font-bold active">陶川</a>
|
||
<div class="flex gap-6">
|
||
<a href="#skills">技能</a>
|
||
<a href="#projects">项目</a>
|
||
<a href="#evaluation">评价</a>
|
||
<a href="#contact">联系</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主容器 -->
|
||
<main class="max-w-7xl mx-auto px-8 py-8 relative z-10">
|
||
|
||
<!-- 个人简介（英雄区） -->
|
||
<section id="home" class="hero">
|
||
<div class="hero-content">
|
||
<!-- 左侧信息卡片 -->
|
||
<div class="hero-left">
|
||
<div class="hero-avatar-container">
|
||
<div class="avatar-chemical-ring">
|
||
<div class="electron-1"></div>
|
||
<div class="electron-2"></div>
|
||
<div class="electron-3"></div>
|
||
</div>
|
||
<div class="hero-avatar">
|
||
<img src="陶川.png" alt="陶川">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 右侧详细介绍 -->
|
||
<div class="hero-right">
|
||
<div class="hero-title-group">
|
||
<h1 class="hero-name">
|
||
陶川
|
||
<span class="name-en">Tao Chuan</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<!-- 个人简介 -->
|
||
<div class="hero-bio">
|
||
<p>专注于化工生产安全与质量管理体系建设，具备ISO9001/14001/45001三体系实施经验。熟悉化工企业生产流程与安全管控要点，能够独立完成体系文件编制、内部审核及改进工作。</p>
|
||
</div>
|
||
|
||
|
||
<!-- 行动按钮 -->
|
||
<div class="hero-actions">
|
||
<button class="hero-btn primary" onclick="document.querySelector('.contact').scrollIntoView({behavior: 'smooth'})">
|
||
<i data-lucide="mail"></i>
|
||
<span>联系我</span>
|
||
</button>
|
||
<button class="hero-btn secondary" onclick="document.querySelector('.projects-section').scrollIntoView({behavior: 'smooth'})">
|
||
<i data-lucide="briefcase"></i>
|
||
<span>查看项目</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部装饰线 -->
|
||
<div class="hero-bottom-decoration">
|
||
<div class="decoration-line"></div>
|
||
<div class="decoration-dot"></div>
|
||
<div class="decoration-line"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 教育背景 -->
|
||
<section class="education">
|
||
<h2>教育背景</h2>
|
||
<div class="education-info">
|
||
<p class="school">河南应用技术职业学院</p>
|
||
<p class="major">应用化工技术</p>
|
||
<p class="period">2019.09 - 2022.06</p>
|
||
</div>
|
||
<div class="education-courses">
|
||
<h3>主修课程</h3>
|
||
<div class="courses-grid">
|
||
<div class="course-item">化工原理</div>
|
||
<div class="course-item">有机化学</div>
|
||
<div class="course-item">无机化学</div>
|
||
<div class="course-item">分析化学</div>
|
||
<div class="course-item">物理化学</div>
|
||
<div class="course-item">化工仪表与自动化</div>
|
||
<div class="course-item">化工设备机械基础</div>
|
||
<div class="course-item">化工制图</div>
|
||
<div class="course-item">化工安全技术</div>
|
||
<div class="course-item">精细化工工艺</div>
|
||
<div class="course-item">化工分离技术</div>
|
||
<div class="course-item">高分子化学</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技能矩阵 -->
|
||
<section id="skills" class="skills-matrix-section">
|
||
<div class="matrix-title">
|
||
<h2>技能矩阵</h2>
|
||
<p class="matrix-subtitle">专业能力全景图</p>
|
||
</div>
|
||
|
||
<!-- 技能矩阵网格 -->
|
||
<div class="matrix-container">
|
||
<!-- 技能矩阵主体 -->
|
||
<div class="skills-matrix">
|
||
<!-- 核心能力组 -->
|
||
<div class="matrix-group" data-group="core">
|
||
<div class="matrix-header">
|
||
<div class="matrix-icon">
|
||
<i data-lucide="atom"></i>
|
||
</div>
|
||
<h3>核心能力</h3>
|
||
<div class="matrix-progress">
|
||
<div class="progress-bar" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-grid">
|
||
<div class="matrix-cell" data-skill="1" data-level="expert">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">01</div>
|
||
<div class="cell-title">体系标准理解</div>
|
||
<div class="cell-content">
|
||
对 ISO9001 与 ISO14001 等体系标准有深入理解，熟悉标准中质量与环境管理的核心条款，能理解化工生产中关键控制点与环境影响控制的要求。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-skill="2" data-level="expert">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">02</div>
|
||
<div class="cell-title">文档版本控制</div>
|
||
<div class="cell-content">
|
||
熟练进行文档编制与版本控制工作，掌握体系文件、作业指导书、变更记录起草与修订流程，熟悉电子文控系统中从创建、审批、发布、更新到废止整个生命周期的操作与权限设置，以保证文件内容准确、规范与可追踪。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-skill="3" data-level="advanced">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">03</div>
|
||
<div class="cell-title">审核能力</div>
|
||
<div class="cell-content">
|
||
具备组织与参与内部／外部审核能力，能协助制作审核检查表，参与审核活动，发现不符合项后应用根本原因分析，提出改进措施并追踪落实效果。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-skill="4" data-level="advanced">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">04</div>
|
||
<div class="cell-title">培训实施</div>
|
||
<div class="cell-content">
|
||
能协助工程师设计与实施体系标准培训，负责向生产、检验、环境安全等部门员工传达 ISO 流程与制度要求。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-skill="5" data-level="advanced">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">05</div>
|
||
<div class="cell-title">数据分析</div>
|
||
<div class="cell-content">
|
||
有质量与环境指标监控与数据分析基础，能使用 Excel 等工具整理与分析不良率、客户投诉率、废水排放等关键指标趋势，协助体系目标设定与月度／年度报表撰写，支持管理层决策。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-skill="6" data-level="intermediate">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">06</div>
|
||
<div class="cell-title">系统操作</div>
|
||
<div class="cell-content">
|
||
熟悉化工行业常用辅助系统与仪器操作基础，包括电子文档管理系统／ QMS/EMS 软件的基本操作，以及环境检测或质量检测仪器的样品制备与数据记录流程。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-skill="7" data-level="expert">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">07</div>
|
||
<div class="cell-title">细节管理</div>
|
||
<div class="cell-content">
|
||
责任心强、关注细节、适应能力好，能准确处理文件版本号、变更日志等细节事项，对制度与标准修订或体系变更保持敏感，能快速学习新体系要求与工具操作。
|
||
</div>
|
||
<div class="cell-level">
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
<span class="level-dot active"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 复合能力组 -->
|
||
<div class="matrix-group" data-group="composite">
|
||
<div class="matrix-header">
|
||
<div class="matrix-icon">
|
||
<i data-lucide="flask-conical"></i>
|
||
</div>
|
||
<h3>复合能力</h3>
|
||
<div class="matrix-progress">
|
||
<div class="progress-bar" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-grid">
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">01</div>
|
||
<h4 class="cell-title">质量管理体系基础认知能力</h4>
|
||
<p class="cell-content">了解化工企业质量管理体系的相关流程（如 ISO 9001 中的质量方针制定、流程文件编写、过程监控、内部审核、CAPA 处理与持续改进），熟悉关键质量控制环节与指标，基本掌握检测与报表记录、异常反馈与纠正预防动作能力。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 85%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">02</div>
|
||
<h4 class="cell-title">产品质量基础意识与5S习惯</h4>
|
||
<p class="cell-content">理解什么是"合格产品"、质量控制的原料、过程和出厂三个阶段；熟悉常见的质量异常现象及处理流程；基本掌握5S现场管理的基本做法，如定点放置、日常清洁和异常标识。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 80%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">03</div>
|
||
<h4 class="cell-title">安全意识与基础防护知识（EHS）</h4>
|
||
<p class="cell-content">熟悉化工行业中常见的安全隐患，如泄漏、腐蚀、高温等；熟悉穿戴劳保用品、遵守操作规程等基本要求；掌握个人防护装备（如手套、防毒面罩等）的使用方法与简单应急处理步骤。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 90%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">04</div>
|
||
<h4 class="cell-title">化工生产流程基础认知</h4>
|
||
<p class="cell-content">掌握化工产品从原料接收、处理、反应、提纯、包装出厂的基本流程；熟悉连续生产和间歇操作的区别；基本掌握一线岗位在每个环节中要做的主要工作任务和注意事项。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 88%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">05</div>
|
||
<h4 class="cell-title">基础实验与数据记录能力</h4>
|
||
<p class="cell-content">掌握化工实验从取样、实验、结果记录的基本流程；熟悉常见实验工具（如量筒、滴定管、天平等）的使用方法；掌握如何记录数据、计算简单平均值，以及填写常规实验记录表。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 82%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">06</div>
|
||
<h4 class="cell-title">化工常见操作与设备基础知识</h4>
|
||
<p class="cell-content">了解工厂中常见的工艺操作，如加热、搅拌、冷却等；熟悉基本设备如泵、反应釜、管道、阀门的名称和功能；基本掌握设备外观识别、启停按钮操作及简单管道走向的判断。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">07</div>
|
||
<h4 class="cell-title">精细化学品性质理解</h4>
|
||
<p class="cell-content">了解常见精细化工产品（如清洗剂、香精、添加剂等）的大致种类和用途；熟悉典型化学原料的结构特征（酸、碱、醇等）；基本掌握化学品"成分—性能—用途"的相关联系。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 78%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">08</div>
|
||
<h4 class="cell-title">仪表识别与常见参数理解能力</h4>
|
||
<p class="cell-content">了解工厂常见的仪表测量参数如温度、压力、液位、流量等；熟悉这些参数在现场仪表上的单位与读数方式；学习掌握仪表指针或数字显示，并能简单判断是否异常。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 76%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">09</div>
|
||
<h4 class="cell-title">自动化控制系统初步认知</h4>
|
||
<p class="cell-content">掌握自动控制在化工生产中可以实现开关控制、数据采集等作用；熟悉PLC的基本逻辑控制与DCS系统中组态界面查看、参数读取与数据报警识别的初级操作；了解如何在控制画面中查看生产状态，识别基本按钮和报警信息。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 70%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">10</div>
|
||
<h4 class="cell-title">图纸识图与软件基础应用能力</h4>
|
||
<p class="cell-content">了解工厂中常见的图纸类型，如整体工艺图、仪表图；熟悉图纸中代表设备、阀门、管线的常见符号；具备chemical draw图纸打开、放大缩小和识别图中设备编号的能力。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 73%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-cell" data-category="composite">
|
||
<div class="cell-inner">
|
||
<div class="cell-number">11</div>
|
||
<h4 class="cell-title">跨岗位沟通与任务对接基础能力</h4>
|
||
<p class="cell-content">关注工厂不同岗位之间需要协作，如操作工与质检、设备维修、仓库等；熟悉日常沟通的基本用语和会议流程；具备说明问题、工作记录、汇报进度，配合他人完成任务的能力。</p>
|
||
<div class="cell-level">
|
||
<div class="level-bar" style="--level: 85%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 项目案例 -->
|
||
<section id="projects" class="projects-section">
|
||
<div class="projects-title">
|
||
<h2>项目案例</h2>
|
||
</div>
|
||
|
||
<!-- 项目卡片1 -->
|
||
<div class="project-card" onclick="openProjectModal(1)" style="cursor: pointer;">
|
||
<div class="project-image-container">
|
||
<img src="public/某化工厂炼化装置日常调试与运维项目/某化工厂炼化装置日常调试与运维项目-总图.jpg"
|
||
alt="炼化装置" class="project-image">
|
||
<div class="project-image-overlay"></div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-number">01</div>
|
||
<h3 class="project-title">某化工厂炼化装置日常调试与运维项目</h3>
|
||
<p class="project-desc">
|
||
本项目主要涉及化工厂炼化装置中泵、压缩机及管路等关键设备的日常调试与运维。任务由自动化设备维护技术员与化工设备维护员共同执行，重点在于完成设备的状态监测、信号调试、传感器校准与电气连线检查。通过本项目的实施，确保设备高效稳定运行，保障生产连续性，并有效降低设备故障风险，提高了整体生产效率，确保了设备的长期稳定性与安全性。
|
||
</p>
|
||
<div class="project-meta">
|
||
<span class="project-meta-item">
|
||
<i data-lucide="building-2"></i>
|
||
安徽实华工程技术股份有限公司
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="briefcase"></i>
|
||
自动化设备维护技术员
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="calendar"></i>
|
||
2024.03~2024.12
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目卡片2 -->
|
||
<div class="project-card" onclick="openProjectModal(2)" style="cursor: pointer;">
|
||
<div class="project-image-container">
|
||
<img src="public/某石化企业的自动化仪表选型装调与运维/某石化企业的自动化仪表选型装调与运维-总图.jpg"
|
||
alt="自动化仪表" class="project-image">
|
||
<div class="project-image-overlay"></div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-number">02</div>
|
||
<h3 class="project-title">某石化企业的自动化仪表选型装调与运维</h3>
|
||
<p class="project-desc">
|
||
本项目聚焦石化企业生产装置的自动化仪表系统，涵盖温度、压力、流量、液位等关键参数的监测与控制。仪表的选型、安装与稳定性直接影响生产的安全性与质量。项目通过建立系统化的仪表选型标准、现场安装规范、联合调试方法以及长期运维机制，实现了'仪表选型精准化—安装调试规范化—运维管理数字化'的目标。企业通过项目实施，生产过程参数稳定率≥99%，设备故障停机率降低了15%，并顺利通过了行业安全环保监管部门的专项检查。
|
||
</p>
|
||
<div class="project-meta">
|
||
<span class="project-meta-item">
|
||
<i data-lucide="building-2"></i>
|
||
上海青石化学有限公司
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="briefcase"></i>
|
||
化工仪表工程师
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="calendar"></i>
|
||
2024.03~2024.12
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目卡片3 -->
|
||
<div class="project-card" onclick="openProjectModal(3)" style="cursor: pointer;">
|
||
<div class="project-image-container">
|
||
<img src="public/某化工厂预聚法制取聚氨酯项目/某化工厂预聚法制取聚氨酯项目-总图.jpg"
|
||
alt="聚氨酯实验" class="project-image">
|
||
<div class="project-image-overlay"></div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-number">03</div>
|
||
<h3 class="project-title">某化工厂预聚法制取聚氨酯项目</h3>
|
||
<p class="project-desc">
|
||
本项目旨在通过预聚法工艺大规模生产聚氨酯，以满足建筑、汽车及电子行业对高性能材料的需求。核心目标是通过科学选择原料、精确控制NCO/OH比、反应温度、搅拌速率等关键工艺参数，确保最终产品具有优异的力学性能、耐热性与化学稳定性。通过引入在线监测、温控系统与环保措施，项目实现了生产效率与质量的双重提升，且为化工厂建立了可推广的绿色生产模式。
|
||
</p>
|
||
<div class="project-meta">
|
||
<span class="project-meta-item">
|
||
<i data-lucide="building-2"></i>
|
||
大连百傲化学股份有限公司
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="briefcase"></i>
|
||
化工工艺技术员
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="calendar"></i>
|
||
2024.03~2024.12
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目卡片4 -->
|
||
<div class="project-card" onclick="openProjectModal(4)" style="cursor: pointer;">
|
||
<div class="project-image-container">
|
||
<img src="public/化工安全生产隐患排查项目/化工安全生产隐患排查项目.jpg"
|
||
alt="安全检查" class="project-image">
|
||
<div class="project-image-overlay"></div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-number">04</div>
|
||
<h3 class="project-title">化工安全生产隐患排查项目</h3>
|
||
<p class="project-desc">
|
||
本项目聚焦化工生产中的安全隐患排查与管理体系建设，旨在通过规范化的隐患识别、整改与复查机制，提升企业的安全管理能力。项目涵盖了设备设施、环境条件、作业行为、物料储存等领域的风险排查，确保通过严格的隐患排查与隐患整改形成闭环管理。通过系统化、周期化的排查工作，有效降低了工厂事故发生率，并促进了员工的安全意识提升。
|
||
</p>
|
||
<div class="project-meta">
|
||
<span class="project-meta-item">
|
||
<i data-lucide="building-2"></i>
|
||
唐山德顺科技有限公司
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="briefcase"></i>
|
||
化工安全员
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="calendar"></i>
|
||
2024.03~2024.12
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目卡片5 -->
|
||
<div class="project-card" onclick="openProjectModal(5)" style="cursor: pointer;">
|
||
<div class="project-image-container">
|
||
<img src="public/某化工企业生产安全事故应急预案编制与实施项目/某化工企业生产安全事故应急预案编制与实施项目-总图.jpg"
|
||
alt="应急预案" class="project-image">
|
||
<div class="project-image-overlay"></div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-number">05</div>
|
||
<h3 class="project-title">某化工企业生产安全事故应急预案编制与实施项目</h3>
|
||
<p class="project-desc">
|
||
本项目旨在为成都市某化工企业构建符合国家标准《GB/T 29639-2020》的生产安全事故应急预案体系，强化企业在危险化学品生产、储存、运输及使用中的风险防控与应急响应能力。通过建立分级响应机制、制定专项应急预案和现场处置方案，确保企业在面对火灾爆炸、中毒窒息、触电事故等高危情境时，能快速、果断地启动响应，降低损失，提高企业事故处理的系统化与标准化。
|
||
</p>
|
||
<div class="project-meta">
|
||
<span class="project-meta-item">
|
||
<i data-lucide="building-2"></i>
|
||
河南中原石化工程有限公司
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="briefcase"></i>
|
||
EHS安全工程师
|
||
</span>
|
||
<span class="project-meta-item">
|
||
<i data-lucide="calendar"></i>
|
||
2024.03~2024.12
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 个人评价 -->
|
||
<section id="evaluation" class="evaluation">
|
||
<h2>个人评价</h2>
|
||
<div class="evaluation-content">
|
||
<p>
|
||
在ISO体系专员实习中，我能够主动参与ISO9001、14001、45001三体系的文件建设与运行工作，积累了较为全面的标准条款理解与应用经验。熟练掌握体系文件的编制、版本控制及电子文控系统的操作流程，具备较强的文档管理与数据分析能力。能够协助完成体系培训的组织与资料整理，确保制度要求在各部门有效传达和执行。注重细节与规范，善于用数据支撑管理改进，展现出较强的学习力、责任心和推进体系持续优化的能力。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section id="contact" class="contact">
|
||
<h2>联系方式</h2>
|
||
<div class="contact-grid">
|
||
<div class="contact-item" onclick="copyToClipboard('13812345678')">
|
||
<div class="contact-icon">
|
||
<i data-lucide="phone"></i>
|
||
</div>
|
||
<span class="contact-label">电话</span>
|
||
<span class="contact-value">138-1234-5678</span>
|
||
</div>
|
||
<div class="contact-item" onclick="copyToClipboard('taochuan@email.com')">
|
||
<div class="contact-icon">
|
||
<i data-lucide="mail"></i>
|
||
</div>
|
||
<span class="contact-label">邮箱</span>
|
||
<span class="contact-value">taochuan@email.com</span>
|
||
</div>
|
||
<div class="contact-item" onclick="window.alert('请通过电话或邮箱联系')">
|
||
<div class="contact-icon">
|
||
<i data-lucide="message-circle"></i>
|
||
</div>
|
||
<span class="contact-label">微信</span>
|
||
<span class="contact-value">tclxy9990216</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- 项目详情弹窗 -->
|
||
<div id="projectModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle" class="modal-title">项目详情</h2>
|
||
<span class="modal-close" onclick="closeProjectModal()">×</span>
|
||
</div>
|
||
|
||
<!-- 流程导航栏 -->
|
||
<div class="process-nav">
|
||
<div id="processNavItems" class="process-nav-items">
|
||
<!-- 动态生成流程导航项 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!-- 左侧：流程图片 -->
|
||
<div class="process-image-container">
|
||
<img id="processImage" src="" alt="流程图片" class="process-image">
|
||
</div>
|
||
|
||
<!-- 右侧：流程内容 -->
|
||
<div class="process-content">
|
||
<h3 id="processTitle" class="process-title">流程标题</h3>
|
||
<div class="process-description">
|
||
<h4>流程描述</h4>
|
||
<p id="processDesc" class="process-desc-text"></p>
|
||
</div>
|
||
<div class="process-work">
|
||
<h4>工作内容</h4>
|
||
<div id="processWork" class="process-work-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化Lucide图标
|
||
lucide.createIcons();
|
||
|
||
// 平滑滚动导航
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
|
||
// 更新活动导航项
|
||
document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 复制到剪贴板功能
|
||
function copyToClipboard(text) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
toast.innerHTML = '✅ 已复制到剪贴板';
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(() => {
|
||
toast.style.animation = 'slideInUp 0.4s ease reverse';
|
||
setTimeout(() => {
|
||
if (document.body.contains(toast)) {
|
||
document.body.removeChild(toast);
|
||
}
|
||
}, 400);
|
||
}, 2000);
|
||
}).catch(() => {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
toast.innerHTML = '❌ 复制失败，请手动复制';
|
||
toast.style.background = 'linear-gradient(135deg, #dc2626, #b91c1c)';
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(() => {
|
||
toast.style.animation = 'slideInUp 0.4s ease reverse';
|
||
setTimeout(() => {
|
||
if (document.body.contains(toast)) {
|
||
document.body.removeChild(toast);
|
||
}
|
||
}, 400);
|
||
}, 2000);
|
||
});
|
||
}
|
||
|
||
// 轻微的视差效果
|
||
window.addEventListener('scroll', () => {
|
||
const scrolled = window.pageYOffset;
|
||
const elements = document.querySelectorAll('.chemical-element');
|
||
elements.forEach((el, index) => {
|
||
const speed = 0.1 + (index * 0.05);
|
||
el.style.transform = `translateY(${scrolled * speed}px)`;
|
||
});
|
||
});
|
||
|
||
// 交叉观察器
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// 观察需要动画的元素
|
||
document.querySelectorAll('.skill-panel, .project-card').forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(20px)';
|
||
el.style.transition = 'all 0.6s ease-out';
|
||
observer.observe(el);
|
||
});
|
||
|
||
// 智能导航栏
|
||
let lastScroll = 0;
|
||
const navbar = document.querySelector('nav');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const currentScroll = window.pageYOffset;
|
||
|
||
if (currentScroll > 100) {
|
||
if (currentScroll > lastScroll) {
|
||
navbar.style.transform = 'translateY(-100%)';
|
||
} else {
|
||
navbar.style.transform = 'translateY(0)';
|
||
}
|
||
} else {
|
||
navbar.style.transform = 'translateY(0)';
|
||
}
|
||
|
||
lastScroll = currentScroll;
|
||
});
|
||
|
||
// 项目数据
|
||
const projectsData = {
|
||
1: {
|
||
title: "某化工厂炼化装置日常调试与运维项目",
|
||
processes: [
|
||
{
|
||
name: "流程一：设备开机前检查",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程一：设备开机前检查.jpg",
|
||
description: "在正式启动设备之前，技术员需要对泵、压缩机及管路等设备进行全面检查，确保电气回路、传感器及润滑系统处于正常工作状态。这一流程的目的是预防设备运行中的潜在故障，确保设备无遗漏地进入生产状态，并为后续的运行提供安全保障。",
|
||
work: [
|
||
"传感器检查：使用校准工具逐一检查温度、压力传感器的读数，若有偏差超过±0.5% FS，进行重新校准，确保信号稳定可靠，防止误报警。",
|
||
"电气回路确认：使用兆欧表测试电机回路绝缘电阻，确保电阻≥20MΩ。若未达到标准，需更换老化电缆，防止电气故障引发设备损坏。",
|
||
"润滑油状态检查：检测润滑油的透明度与酸值，若出现乳化或杂质含量＞0.1%，则立即更换，防止轴承磨损加剧，确保设备长期运行。",
|
||
"设备安全确认：检查泵体、阀门与管路是否有漏点、松动或损坏，确保设备无故障进行启动，防止突发性故障发生。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程二：信号与接口调试",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程二：信号与接口调试.jpg",
|
||
description: "在设备开始投入使用之前，技术员需对PLC与DCS系统进行信号调试，确保传感器与执行机构的数据交互正常。此流程可以排除由传感器故障或信号延迟引发的误操作问题。通过调试，可以确保设备按预设逻辑正确运行，避免因信号异常影响设备性能。",
|
||
work: [
|
||
"I/O点位核查：逐点测试PLC与DCS系统中的输入输出信号，确保动作与显示一致。若发现延迟超过1秒，检查通讯模块，确保数据链路正常。",
|
||
"报警功能测试：通过模拟超温状态测试报警系统的响应，当温度超过85℃时，确保系统及时发出声光报警，若未及时响应，调整报警逻辑，避免安全隐患。",
|
||
"联锁保护验证：通过模拟压力异常，要求系统在3秒内自动切断电机。若联锁动作延迟，则检查PLC程序及联锁回路，确保安全性不受威胁。",
|
||
"信号一致性确认：对主副传感器的数据进行交叉比对，确保无信号丢失或数据误差，避免因为传感器故障导致的错误判断。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程三：设备空载试运转",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程三：设备空载试运转.jpg",
|
||
description: "在设备正式投入生产前，技术员需要对泵、压缩机等关键设备进行空载试运转，检查设备的电流波动、振动幅度与噪声水平，确保设备能够在无负荷状态下稳定运行，并具备负荷条件。这一流程有助于及早发现设备潜在故障并及时进行处理。",
|
||
work: [
|
||
"电流波动监控：启动设备时，监控电流波动，确保电流保持在额定值±10%范围内。若电流超出范围，则立即停机检查，排除电机绕组短路或负载卡滞问题。",
|
||
"振动幅度监测：使用振动仪检测设备的轴承振动，确保振动幅度不超过2.8mm/s，若超过该标准，则说明设备对中不良，需重新调整设备位置或更换轴承。",
|
||
"噪声水平检查：测量设备噪声，确保噪声控制在85dB以内。若超过该标准，可能是由于润滑不足或零部件松动导致的，应立即进行润滑或紧固处理。",
|
||
"温度监控：定期监控设备温度，确保泵体温度不超过85℃，避免因过热而损坏设备内部零件。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程四：带负荷运行监控",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程四：带负荷运行监控.jpg",
|
||
description: "在设备逐步加载生产工况时，技术员需持续跟踪关键参数（如温度、压力、流量等），确保设备稳定运行。此流程可以及时发现设备异常，并进行调整，保障生产工况的正常运转。",
|
||
work: [
|
||
"温度监测：在运行过程中，持续监控泵体温度，确保温度保持在额定范围内。若发现温度过高，应立即调整冷却水系统，防止密封损坏或设备过热。",
|
||
"压力波动检测：定期监控压力变化，确保压力波动范围不超过±0.3MPa，若出现异常波动，应检查阀门控制系统或管路堵塞问题，确保系统平稳运行。",
|
||
"流量监控：确保流量保持在设定值±5%的范围内，若出现偏差，则应检查管路系统的完整性，及时进行检修以保证生产稳定。",
|
||
"运行状态记录：每天记录设备的运行参数，确保数据的完整性与可追溯性，以便后续检查和分析。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程五：异常信号排查",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程五：异常信号排查.jpg",
|
||
description: "当设备运行参数出现异常波动时，自动化维护技术员需要对传感器信号进行快速排查，判断是否为传感器误报或设备真实故障。此流程有助于在设备出现早期异常时及时发现并处理，避免因延误处理导致更严重的问题。",
|
||
work: [
|
||
"数据交叉验证：通过比对主副传感器的数据读数，若差值超过2%，则判断为传感器故障，需立即更换，确保数据准确性。",
|
||
"异常趋势分析：若监控数据呈现短时波动，但趋势平稳，通常为干扰信号；若波动持续或升高，则可能是设备故障的信号，需立即排查并处理。",
|
||
"快速处理措施：一旦确认传感器损坏，应在2小时内完成更换工作，确保监测信号不间断，避免因误报导致生产误操作。",
|
||
"故障排除记录：每次异常处理后，需填写详细记录并输入系统，以便后续分析与预防类似故障的发生。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程六：现场维护操作",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程六：现场维护操作.jpg",
|
||
description: "在设备出现小故障或设备状态不稳定时，维护员需要进行现场维护与修复，包括紧固松动螺栓、更换老化密封件、补充润滑油等。此流程的目标是确保设备能尽快恢复正常运行，减少生产停机时间。",
|
||
work: [
|
||
"密封件更换：如发现设备泵体出现滴漏，需立即停机并更换机械密封。更换后通过压力测试确认无渗漏，确保密封性能恢复。",
|
||
"螺栓紧固：检查设备振动部位的螺栓，并使用扭矩扳手复核扭矩，确保紧固到位，避免松动引发设备位移或泄漏。",
|
||
"润滑补充：检测设备的润滑油位，确保油位在视镜的2/3高度，若不足则及时补充合格润滑油，防止部件摩擦加剧。",
|
||
"故障修复后检测：在小故障修复后进行二次复测，确认设备各项指标正常后，方可恢复正常生产。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程七：后期巡检记录",
|
||
image: "public/某化工厂炼化装置日常调试与运维项目/流程七：后期巡检记录.jpg",
|
||
description: "在完成设备的维护与修复后，维护员需要填写巡检表并记录设备的运行数据，以便后续的分析与管理。通过这些记录，可以追溯设备的维修历史，为未来的维护工作提供依据。",
|
||
work: [
|
||
"巡检表填写：详细记录设备的电流、温度、压力等运行数据，确保数据的完整性和准确性，以便进行后续分析。",
|
||
"故障处理记录：对每一次小故障的修复进行详细记录，便于形成经验库，指导后续的设备维护。",
|
||
"经验反馈：在班组例会上分享故障处理经验与解决方案，形成标准操作指引，提升团队整体的维护水平。",
|
||
"数据归档：将巡检记录与维修档案归档，确保数据的可追溯性，为未来设备改进与备件采购提供准确依据。"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
2: {
|
||
title: "某石化企业的自动化仪表选型装调与运维",
|
||
processes: [
|
||
{
|
||
name: "流程一：仪表需求分析",
|
||
image: "public/某石化企业的自动化仪表选型装调与运维/流程一：仪表需求分析.jpg",
|
||
description: "在项目启动阶段，对石化装置的生产工艺特点进行深入分析，明确需要监测的参数类型与范围。结合高温、高压、腐蚀性介质等生产条件，制定详细的仪表需求清单，并依据国家与行业标准进行比对，确保选型方案满足工艺要求，为后续选型提供准确依据。",
|
||
work: [
|
||
"需求清单制定：根据生产工艺，整理温度、压力、流量、液位等关键参数的监测需求，确保涵盖从低温到高温、低压到高压等各类工况。",
|
||
"工艺差距分析：对现有仪表的性能进行分析，提出对腐蚀性介质环境下仪表寿命短、漂移大等问题的优化建议。",
|
||
"标准对比与适配性确认：依据GB/T、SH/T等标准，与工艺需求逐项对比，确认选型方案满足规范要求。",
|
||
"风险识别：对潜在的工艺异常和操作风险进行识别，确保所选仪表能够应对特殊工况，保障生产安全。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程二：仪表选型",
|
||
image: "public/某石化企业的自动化仪表选型装调与运维/流程二：仪表选型.jpg",
|
||
description: "在明确需求后，进入仪表选型阶段。通过对比国内外主流仪表品牌与型号，结合工艺特性、防爆等级和安装环境，筛选出适合的型号，并根据行业标准进行参数确认，确保所有选型仪表能够满足长期稳定运行的需求。",
|
||
work: [
|
||
"品牌与型号对比：根据需求清单对比不同品牌和型号，选择适配性强、性能稳定的设备，如电磁流量计、差压液位计、K型热电偶等。",
|
||
"防爆等级确认：确保所有仪表均符合Ex d II CT4等防爆标准，满足石化行业易燃易爆环境的安全要求。",
|
||
"材质适配性验证：根据介质腐蚀性选择耐腐蚀材质（如哈氏合金、PTFE衬里等），确保仪表长期稳定工作。",
|
||
"精度与防护要求确认：对仪表的精度、防护等级（如IP65）进行确认，确保满足高温、高压等极端环境条件下的运行需求。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程三：安装前准备",
|
||
image: "public/某石化企业的自动化仪表选型装调与运维/流程三：安装前准备.jpg",
|
||
description: "在仪表安装前进行全面的现场准备工作，包括对仪表的预校验、安装条件的确认、支架防护和伴热设施的布置检查等，确保仪表的安装过程符合规范，并避免后期出现不必要的返工。",
|
||
work: [
|
||
"仪表预校验：对所有仪表进行出厂校验，检查量程与灵敏度，确保偏差控制在±0.25%以内。",
|
||
"现场条件确认：对安装环境进行检查，确认支架基础、安装位置、伴热和防护设施是否到位，避免运行中出现安装问题。",
|
||
"电气安全确认：检查电缆的绝缘电阻是否满足要求（≥20MΩ），确保电气系统安全可靠。",
|
||
"防护准备：在高温或易腐蚀区域为仪表配备伴热与隔热装置，确保其稳定运行。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程四：仪表现场安装",
|
||
image: "public/某石化企业的自动化仪表选型装调与运维/流程四：仪表现场安装.jpg",
|
||
description: "在现场安装阶段，严格按照国家和行业标准进行安装，确保仪表与工艺介质接触良好，位置准确，避免因安装问题影响仪表的测量精度和稳定性。",
|
||
work: [
|
||
"测点布置：按照安装规范，确保温度传感器插入深度不小于管径的1/3，压力导管布置合理，避免积液或气堵。",
|
||
"安装方式确认：确保流量计、液位计等仪表安装方向正确，避免因方向错误导致测量失效。",
|
||
"支架与加固：对高振动区域增加支架并进行加固，避免长期运行中出现松动或错位。",
|
||
"安装验收：安装后进行现场检查，确保所有仪表位置、方向及固定方式符合要求。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程五：联合调试与系统校验",
|
||
image: "public/某石化企业的自动化仪表选型装调与运维/流程五：联合调试与系统校验.jpg",
|
||
description: "在仪表安装完成后，进入联合调试与系统校验阶段。此阶段重点验证仪表与DCS系统之间的数据一致性及信号采集的准确性，确保所有仪表能够在高温、高压等环境下稳定运行，并确保系统的报警功能能够及时响应。",
|
||
work: [
|
||
"单点校验：对每个测点进行单点校验，确保其输出与标准值之间的误差控制在±0.5%以内，满足仪表精度要求。",
|
||
"DCS信号校对：对比现场采集信号与DCS中控显示信号，确保差异控制在2%以内，保证数据一致性。",
|
||
"系统联调：进行系统联调，验证现场仪表与执行机构的联动效果，确保信号的实时传输及执行机构的响应无误。",
|
||
"报警功能验证：对报警阈值进行设置与校验，确保系统能够在超过阈值时发出报警并触发联锁，保证工艺安全。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程六：运行监控与维护巡检",
|
||
image: "public/某石化企业的自动化仪表选型装调与运维/流程六：运行监控与维护巡检.jpg",
|
||
description: "在仪表投运后，建立定期巡检与运行监控机制，确保仪表长期稳定运行，及时发现仪表漂移、故障及数据异常。通过巡检、数据采集及分析，确保设备在生产过程中始终保持准确性，并及时进行维护与校准。",
|
||
work: [
|
||
"实时监控：通过DCS系统实时监测关键仪表的数据，确保温度、压力、流量、液位等测量值在正常范围内。",
|
||
"定期巡检：安排每天对关键仪表进行巡检，检查其运行状态、数据漂移和异常波动，确保仪表性能稳定。",
|
||
"故障反馈与修复：发现仪表出现漂移或异常波动时，及时反馈并进行必要的修复或更换，确保生产不受影响。",
|
||
"维护记录：将所有巡检、维修和校准记录进行归档，并定期分析仪表故障原因，形成报告供管理层参考。"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
3: {
|
||
title: "某化工厂预聚法制取聚氨酯项目",
|
||
processes: [
|
||
{
|
||
name: "流程一：原料选择",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程一：原料选择.jpg",
|
||
description: "在项目启动阶段，首先需要选择适合目标产品的聚醇与异氰酸酯，并精确控制NCO/OH比。该环节直接影响后续的预聚物合成与扩链反应，确保聚氨酯材料具备所需的性能。除了选择合适的原料，储存和预处理同样是保证反应顺利进行的关键。",
|
||
work: [
|
||
"聚醇与异氰酸酯选型：协助化工工程师筛选适用于不同需求的聚醇（聚醚多元醇和聚酯多元醇），并根据最终产品的性能要求选择相应的异氰酸酯（如TDI、MDI）；",
|
||
"NCO/OH比控制：参与NCO/OH比例的控制实验，确保预聚物具有足够的反应活性位点，以便后续反应顺利进行；",
|
||
"原料储存与处理：负责确保聚醇在干燥环境中存放，防止吸湿引起反应不完全，并对聚醇进行加热至80℃以确保其完全熔化；",
|
||
"安全与环境要求：协助进行异氰酸酯使用环境的安全评估，并确保反应过程中通风设备正常运行，减少挥发性气体的风险；"
|
||
]
|
||
},
|
||
{
|
||
name: "流程二：预聚物制备",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程二：预聚物制备.jpg",
|
||
description: "通过反应聚醇和异氰酸酯，在密闭反应器中进行预聚物合成。此过程中温度、搅拌速率与反应时间需要严格控制，以确保预聚物分子具有适宜的活性与分子量分布，为后续的扩链反应奠定基础。",
|
||
work: [
|
||
"反应设备监控：协助操作耐腐蚀不锈钢反应器，调节温度、搅拌速率等关键参数，确保反应顺利进行；",
|
||
"温度控制：负责维持反应温度在80℃，保证反应速率稳定且不出现副反应；",
|
||
"搅拌速率控制：协助设定搅拌速率为400 rpm，以确保物料混合均匀，避免局部过热或粘度失控；",
|
||
"反应时间与催化剂应用：确保反应时间在3–4小时内，适时加入DMDEE催化剂，提升反应效率并确保原料转化率；"
|
||
]
|
||
},
|
||
{
|
||
name: "流程三：扩链反应",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程三：扩链反应.jpg",
|
||
description: "在预聚物制备完成后，进行扩链反应。通过加入扩链剂，延长聚氨酯的分子链长度，优化产品的力学性能和耐热性。此过程要求精确控制反应温度、时间与扩链剂的用量，以确保反应充分且副产物尽可能少。",
|
||
work: [
|
||
"扩链剂选择与添加：协助选择适合的扩链剂（如1,4-丁二醇、乙二胺等），并进行试验，确保所选扩链剂有助于提高最终产品的硬度、强度和弹性；",
|
||
"反应温度与时间控制：确保扩链反应温度维持在80℃，并控制反应时间在1小时，以确保扩链反应完全，避免未反应残留；",
|
||
"氮气保护：在扩链反应过程中，使用干燥氮气保护反应体系，防止水分进入引发副反应，保证反应的稳定性；",
|
||
"反应稳定性监控：记录反应过程中的各项数据，确保反应无明显相分离，最终产品分子链的规整性良好；"
|
||
]
|
||
},
|
||
{
|
||
name: "流程四：交联反应",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程四：交联反应.jpg",
|
||
description: "通过引入交联剂，进一步将扩链后的预聚物转化为三维网状结构，提升聚氨酯的力学强度、耐热性和尺寸稳定性。交联反应对最终产品的性能具有决定性作用，因此反应条件的控制至关重要。",
|
||
work: [
|
||
"交联剂选型：协助选择适当的交联剂（如甘油、三羟基丙烷等），并进行实验，测试不同交联剂对材料力学强度和耐热性的影响；",
|
||
"反应温度与时间控制：确保交联反应温度在80℃，反应时间控制在规定范围内，以保证交联反应的均匀性和产品的稳定性；",
|
||
"交联密度监控：监控交联反应的进程，确保交联密度达到设计要求，以提升产品的性能；",
|
||
"反应性能验证：协助完成交联后的性能测试，如耐热性测试、网络结构均匀性检测，确保最终产品的品质；"
|
||
]
|
||
},
|
||
{
|
||
name: "流程五：成型与固化",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程五：成型与固化.jpg",
|
||
description: "成型与固化是聚氨酯生产的最后步骤，决定了最终产品的形态与力学性能。通过模具成型、温度控制与固化时间的精确调节，确保产品具备稳定的物理化学性能。此阶段需要确保反应过程的均匀性，并排查成型过程中可能出现的缺陷，如气泡、裂纹等。",
|
||
work: [
|
||
"模具预热与处理：协助模具的预热，确保模具表面温度达到60–80℃，并均匀喷涂脱模剂，避免成型过程中出现粘模或缺陷；",
|
||
"固化温度与时间控制：确保固化温度维持在80–120℃，固化时间控制在6–12小时，确保反应完全并形成稳定的三维交联结构；",
|
||
"压力控制：在固化过程中保持恒定压力，防止气泡残留，确保成品密实度和质量的稳定；",
|
||
"缺陷排查：通过目视检查及其他无损检测方法，排查成品是否存在气泡、裂纹等缺陷，确保产品的外观与内在结构稳定；"
|
||
]
|
||
},
|
||
{
|
||
name: "流程六：质量与性能验证",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程六：质量与性能验证.jpg",
|
||
description: "为了确保聚氨酯制品符合目标应用的性能要求，必须进行严格的质量验证和性能测试。测试内容包括力学性能、耐热性、耐化学性等，确保产品在实际应用中的可靠性和稳定性。通过使用现代测试技术，如拉伸测试、热重分析等，验证材料是否达到了行业标准。",
|
||
work: [
|
||
"力学性能测试：参与拉伸、压缩、撕裂等力学性能测试，验证聚氨酯材料的强度、弹性及韧性，确保其满足设计要求；",
|
||
"耐热性与化学稳定性测试：通过热重分析（TGA）和差示扫描量热（DSC）评估聚氨酯的耐热性，确保产品在高温环境下仍能保持稳定性能；",
|
||
"耐化学性测试：进行耐酸碱、耐油、耐溶剂等化学稳定性测试，确保聚氨酯制品能够适应复杂的工作环境；",
|
||
"微观结构分析：通过红外光谱（FTIR）与扫描电子显微镜（SEM）分析材料的分子结构与微观形貌，确保交联网络均匀，且无不良杂质；"
|
||
]
|
||
},
|
||
{
|
||
name: "流程七：安全控制与环保措施",
|
||
image: "public/某化工厂预聚法制取聚氨酯项目/流程七：安全控制与环保措施.jpg",
|
||
description: "聚氨酯的生产涉及高反应活性化学品及高温操作，因此工艺中的安全与环保控制至关重要。本环节通过完善的防护措施、废气与废液处理系统以及严格的安全培训，保障生产过程的安全性与环保合规性，确保人员健康并符合行业法规。",
|
||
work: [
|
||
"防护设备与环境监控：确保所有操作区域配置适当的排风系统，操作人员佩戴适当的防护设备（如防毒面具、耐化学手套等），减少有害气体的暴露；",
|
||
"废气处理与环保控制：对产生的含异氰酸酯废气进行处理，采用活性炭吸附与洗涤塔净化系统，确保废气排放符合环保标准；",
|
||
"废液与废料处理：聚氨酯生产中的废液需集中收集，由专业环保机构进行处理，避免污染环境；",
|
||
"安全培训与应急演练：定期对操作人员进行安全培训，模拟处理突发泄漏或火灾事故的应急演练，确保生产安全；"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
4: {
|
||
title: "化工安全生产隐患排查项目",
|
||
processes: [
|
||
{
|
||
name: "流程一：隐患排查计划制定",
|
||
image: "public/化工安全生产隐患排查项目/流程一：隐患排查计划制定.jpg",
|
||
description: "根据企业实际情况及相关法规标准，制定年度及月度隐患排查计划，明确排查范围、重点部位、责任部门与时间节点，确保隐患排查工作系统化与可执行。该计划要根据隐患的严重性与可能性分级，优先解决高风险隐患。",
|
||
work: [
|
||
"排查周期设定：根据设备设施、危险源的风险等级设定排查频率，设备类每月检查，重大危险源每周检查。",
|
||
"重点部位明确：对高压反应釜、化学品储罐等重点设备和作业区域进行专项排查，确保潜在风险能够及时发现。",
|
||
"责任分配：将隐患排查责任明确分配到车间、班组，形成'计划—执行—监督'责任链，确保任务按时、按质完成。",
|
||
"排查计划审批：排查计划需经过企业安全委员会的审批，确保符合生产安排与监管要求，且具有操作性。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程二：设备设施检查",
|
||
image: "public/化工安全生产隐患排查项目/流程二：设备设施检查.jpg",
|
||
description: "对生产中的关键设备进行安全检查，特别是对反应釜、压力容器、输送泵等设备的运行状态、报警装置、维保记录进行监控，确保设备运行符合安全标准。",
|
||
work: [
|
||
"设备巡检：每月对关键设备进行全方位检查，记录设备的运行状态、报警装置是否正常，保证无故障运转。",
|
||
"压力容器检查：检查压力表读数是否稳定，精度要求必须在±1.5%范围内，若不符合要求需进行校验或更换。",
|
||
"管道腐蚀监控：检查金属管道壁厚是否超过设计标准的20%，发现异常磨损及时更换或加装防腐设施。",
|
||
"维保记录管理：所有设备须有完整的维保记录，缺失记录需立即补全并建立电子台账，确保设备的安全性可追溯。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程三：环境安全条件检测",
|
||
image: "public/化工安全生产隐患排查项目/流程三：环境安全条件检测.jpg",
|
||
description: "通过对车间的通风、照明、噪声及有害气体浓度等环境安全条件进行检测，确保工作环境符合国家职业卫生标准，防止环境污染对员工健康造成影响。",
|
||
work: [
|
||
"有害气体检测：对苯、甲苯等有害气体进行浓度检测，确保其不超过国家标准，若超标需采取紧急处理措施。",
|
||
"噪声监控：测量工作区域的噪声强度，确保噪声不超过85 dB，若超标需安装隔音设施或为员工配备降噪耳罩。",
|
||
"照明标准检查：对车间照明进行检测，确保照度不低于300lx，避免低照度环境导致作业误判或安全隐患。",
|
||
"通风换气检查：检查车间每小时的换气次数，确保达到国家规定的12次，必要时维修通风系统以保证空气流通。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程四：作业行为规范检查",
|
||
image: "public/化工安全生产隐患排查项目/流程四：作业行为规范检查.jpg",
|
||
description: "通过现场巡查与视频监控，确保员工在操作过程中遵守安全规程，佩戴劳动防护用品，并且在动火作业、高空作业等特殊作业中执行相关作业票证和安全操作规程。",
|
||
work: [
|
||
"劳保用品佩戴检查：确保呼吸器、防护手套佩戴率 ≥95%，未佩戴时立即纠正并记录，安排专项培训。",
|
||
"动火作业监督：动火作业必须执行作业票证审批制度，进行作业前气体浓度检测，确保无火灾爆炸隐患。",
|
||
"高空作业检查：确保2米以上高空作业的员工佩戴安全带，并设置安全防护栏，防止发生坠落事故。",
|
||
"作业许可管理：检修作业必须遵循LOTO（上锁挂牌）程序，确保设备停机状态下进行，防止误操作。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程五：物料储存管理",
|
||
image: "public/化工安全生产隐患排查项目/流程五：物料储存管理.jpg",
|
||
description: "通过对危险化学品仓库及储罐区的全面检查，确保物料储存符合安全标准，并制定防泄漏措施和安全操作规程。",
|
||
work: [
|
||
"化学品分类管理：强氧化剂与易燃液体必须分区储存，避免混放引发自燃或爆炸。",
|
||
"储存堆放规范：确保仓库内物料堆放高度不超过1.8米，避免堆放过高引发倾倒事故。",
|
||
"防泄漏措施：储罐区必须配置防渗池，容积不低于最大单罐容量的110%，防止泄漏污染环境。",
|
||
"台账管理：确保所有物料的储存、使用和运输环节都有台账记录，台账必须每日更新并电子化，确保数据可追溯。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程六：应急预案编制与演练",
|
||
image: "public/化工安全生产隐患排查项目/流程六：应急预案编制与演练.jpg",
|
||
description: "根据企业危险源清单和潜在事故类型，优化应急预案，组织定期的应急演练，确保在发生突发事故时，员工能够迅速反应并按照预案进行应急处置。",
|
||
work: [
|
||
"应急预案完善：根据化工生产的风险特性，编制并完善包含化学品泄漏、火灾、爆炸等事故的应急预案，确保预案符合国家及地方的应急管理规定。",
|
||
"应急演练组织：每季度组织至少一次全员应急演练，通过模拟突发事件，检查员工的应急反应能力及预案执行情况。",
|
||
"演练评估：演练结束后，撰写演练评估报告，记录存在的不足，并提出改进措施，确保每次演练后的反思能够应用到下一次演练中。",
|
||
"应急物资检查：定期检查应急物资的完好性，确保防毒面具、灭火器等应急装备在有效期内且保持良好状态，确保应急物资随时可用。"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
5: {
|
||
title: "某化工企业生产安全事故应急预案编制与实施项目",
|
||
processes: [
|
||
{
|
||
name: "流程一：编制应急预案组织体系",
|
||
image: "public/某化工企业生产安全事故应急预案编制与实施项目/流程一：编制应急预案组织体系.jpg",
|
||
description: "本阶段通过构建企业应急预案的编制机制，明确各职能部门与责任人的职责分工，确保预案编制具备法定合规性与操作性。通过跨部门协作，建立版本控制标准及修订流程，确保编制过程闭环管理，并为后续的应急响应提供强有力的组织保障。",
|
||
work: [
|
||
"组织体系构建：通过跨部门工作小组，明确编制、评审、发布、实施、修订五个环节的责任主体与流程，确保每个环节有明确负责人。",
|
||
"职责分配与任务划分：根据《GB/T 29639-2020》的要求，制定并归档各职能部门职责清单，形成系统化的组织结构，便于后续查阅与闭环管理。",
|
||
"版本控制与修订标准：制定文档控制模板（包括版本号、更新日期及编制人信息），并明确每年根据法规或企业变化进行修订。",
|
||
"跨部门反馈机制：确保各部门在参与预案编制过程中，能定期提供反馈，并通过签署承诺书确保责任落实。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程二：建立应急响应分级机制",
|
||
image: "public/某化工企业生产安全事故应急预案编制与实施项目/流程二：建立应急响应分级机制.jpg",
|
||
description: "基于企业的风险评估，构建适合化工企业的三级响应体系，明确不同事故类型下的响应等级及触发条件。通过设定清晰的启动预警机制和分级报告链路，确保从班组到应急指挥部的层层响应，确保事故可控。",
|
||
work: [
|
||
"响应等级与标准设定：根据事故的伤亡人数、经济损失、环境影响等量化触发条件，明确Ⅰ级、Ⅱ级和Ⅲ级响应的标准。",
|
||
"预警与启动条件：通过明确的分级预警机制，确保从班组到公司层级的快速响应。Ⅰ级响应要求在30分钟内启动外部单位协同，确保全程联动。",
|
||
"逐级联动报告链：从班组到应急指挥部设立清晰的报告链，每个级别设定责任人、响应时限与联系人信息，确保事故发生时信息传递迅速且有效。",
|
||
"外部协同联动：Ⅰ级响应触发时，立即启动与消防、医院及环保等外部单位的联动机制，并确保外部单位在规定时间内到达现场。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程三：构建综合应急组织架构",
|
||
image: "public/某化工企业生产安全事故应急预案编制与实施项目/流程三：构建综合应急组织架构.jpg",
|
||
description: "在确保预案编制和响应机制的基础上，本阶段构建企业级统一应急指挥体系，设立应急指挥部，并设立警戒疏散、抢险抢修、医疗救护、后勤保障、通讯联络五大功能小组。",
|
||
work: [
|
||
"指挥部结构与会议机制：根据企业需求设立统一的应急指挥部，明确各小组的职能与组织架构。定期召开应急演练与评审会议，确保应急指挥体系高效运行。",
|
||
"岗位职责手册：每个小组成员都需制定职责手册，明确工作流程、联系人、通讯方式等信息，确保现场快速响应与资源调配。",
|
||
"现场响应人员责任：每班组设立'第一响应人'，负责事故初步处置，并在发生紧急情况时快速启动报告链。",
|
||
"应急演练与培训：组织应急演练与桌面演习，确保各小组成员了解应急流程，并能高效协作。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程四：制定应急物资与装备管理",
|
||
image: "public/某化工企业生产安全事故应急预案编制与实施项目/流程四：制定应急物资与装备管理.jpg",
|
||
description: "本阶段通过梳理应急物资清单，并对物资状态进行定期盘点，确保应急物资随时可用。通过确保必要物资的更新与状态监控，提升现场处置能力。",
|
||
work: [
|
||
"应急物资台账管理：建立应急物资清单，涵盖灭火器、防毒面具、气体检测仪等设备，并进行定期盘点与状态记录。",
|
||
"物资储备与更新：根据每个设备的有效期，设定采购与更新机制，确保设备符合安全标准并能够随时使用。",
|
||
"物资分配与职责落实：确保每个小组成员负责特定物资的管理与维护，并定期检查物资状态，确保不出现短缺或过期情况。",
|
||
"物资状态可视化：运用 Excel 或 PowerPoint 制作图表，直观呈现物资状态与库存情况，便于应急指挥部快速调配资源。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程五：实施专项与现场应急处置预案",
|
||
image: "public/某化工企业生产安全事故应急预案编制与实施项目/流程五：实施专项与现场应急处置预案.jpg",
|
||
description: "本阶段重点在于对典型事故类型（如火灾爆炸、泄漏、触电等）进行专项应急预案的设计与实施，确保在实际应急事件发生时，各类事故能够按照预定流程迅速、准确地处理，减少损失。",
|
||
work: [
|
||
"事故情景设计：根据化工企业的实际情况，设计火灾、泄漏、触电、高处坠落等常见事故类型的专项应急预案，确保应急响应流程的覆盖面广且切合实际。",
|
||
"流程节点设计：每类事故设计'确认→报警→隔离→救护→通报→处置'标准流程，明确每个环节的时限要求（如报警响应≤5分钟，隔离措施≤10分钟）。",
|
||
"现场应急卡片与图示：为现场员工配备简单易懂的应急卡片和应急流程图，确保每个操作员都能在第一时间内根据卡片执行处置步骤。",
|
||
"PPE配置建议：根据不同事故类型，明确现场个人防护装备（PPE）的配置标准与使用要求，并随时更新，以应对新型危险。"
|
||
]
|
||
},
|
||
{
|
||
name: "流程六：应急演练与培训管理",
|
||
image: "public/某化工企业生产安全事故应急预案编制与实施项目/流程六：应急演练与培训管理.jpg",
|
||
description: "定期开展应急演练与培训，确保所有员工对应急预案有足够的理解与掌握，提升其在实际事故中的反应能力。",
|
||
work: [
|
||
"演练计划编制：根据事故类型与应急预案的内容，制定年度演练计划，确保涵盖所有可能的高危事故类型。",
|
||
"演练实施与评估：定期组织桌面演练与实战演练，确保每个员工熟悉应急响应流程，并通过演练评估实际应对能力。",
|
||
"演练总结与反馈：每次演练后进行总结，记录演练中的优缺点，并根据演练结果调整预案或培训内容。",
|
||
"培训资料更新与分发：根据演练总结与反馈，更新培训资料，确保每次培训内容的针对性与实用性，定期分发并确保所有员工参训。"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
// 当前选中的项目和流程
|
||
let currentProject = null;
|
||
let currentProcessIndex = 0;
|
||
|
||
// 打开项目弹窗
|
||
function openProjectModal(projectId) {
|
||
currentProject = projectsData[projectId];
|
||
currentProcessIndex = 0;
|
||
|
||
if (!currentProject) return;
|
||
|
||
const modal = document.getElementById('projectModal');
|
||
const modalTitle = document.getElementById('modalTitle');
|
||
|
||
modalTitle.textContent = currentProject.title;
|
||
|
||
// 生成流程导航
|
||
generateProcessNav();
|
||
|
||
// 显示第一个流程
|
||
showProcess(0);
|
||
|
||
// 显示弹窗
|
||
modal.classList.add('show');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
// 关闭项目弹窗
|
||
function closeProjectModal() {
|
||
const modal = document.getElementById('projectModal');
|
||
modal.classList.remove('show');
|
||
document.body.style.overflow = 'auto';
|
||
currentProject = null;
|
||
currentProcessIndex = 0;
|
||
}
|
||
|
||
// 生成流程导航栏
|
||
function generateProcessNav() {
|
||
const navContainer = document.getElementById('processNavItems');
|
||
navContainer.innerHTML = '';
|
||
|
||
currentProject.processes.forEach((process, index) => {
|
||
const navItem = document.createElement('div');
|
||
navItem.className = `process-nav-item ${index === 0 ? 'active' : ''}`;
|
||
navItem.textContent = process.name;
|
||
navItem.onclick = () => showProcess(index);
|
||
navContainer.appendChild(navItem);
|
||
});
|
||
|
||
// 添加鼠标滚轮左右滑动功能
|
||
const processNav = document.querySelector('.process-nav');
|
||
if (processNav) {
|
||
processNav.addEventListener('wheel', (e) => {
|
||
e.preventDefault();
|
||
// 将垂直滚动转换为水平滚动
|
||
processNav.scrollLeft += e.deltaY;
|
||
}, { passive: false });
|
||
}
|
||
}
|
||
|
||
// 显示指定流程
|
||
function showProcess(index) {
|
||
if (!currentProject || index < 0 || index >= currentProject.processes.length) return;
|
||
|
||
currentProcessIndex = index;
|
||
const process = currentProject.processes[index];
|
||
|
||
// 更新导航栏活动状态
|
||
document.querySelectorAll('.process-nav-item').forEach((item, i) => {
|
||
item.classList.toggle('active', i === index);
|
||
});
|
||
|
||
// 更新内容
|
||
document.getElementById('processImage').src = process.image;
|
||
document.getElementById('processTitle').textContent = process.name;
|
||
document.getElementById('processDesc').textContent = process.description;
|
||
|
||
// 更新工作内容
|
||
const workContainer = document.getElementById('processWork');
|
||
workContainer.innerHTML = '';
|
||
|
||
process.work.forEach(workItem => {
|
||
const workDiv = document.createElement('div');
|
||
workDiv.className = 'process-work-item';
|
||
workDiv.innerHTML = `<div class="work-item-text">${workItem}</div>`;
|
||
workContainer.appendChild(workDiv);
|
||
});
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
document.getElementById('projectModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeProjectModal();
|
||
}
|
||
});
|
||
|
||
// ESC键关闭弹窗
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && document.getElementById('projectModal').classList.contains('show')) {
|
||
closeProjectModal();
|
||
}
|
||
});
|
||
|
||
// 技能矩阵交互功能
|
||
const matrixBtns = document.querySelectorAll('.matrix-btn');
|
||
const matrixGroups = document.querySelectorAll('.matrix-group');
|
||
const matrixCells = document.querySelectorAll('.matrix-cell');
|
||
|
||
// 控制按钮点击事件
|
||
matrixBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
// 移除所有活动状态
|
||
matrixBtns.forEach(b => b.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
const category = this.dataset.category;
|
||
|
||
// 处理不同的视图模式
|
||
if (category === 'all') {
|
||
// 显示所有技能
|
||
matrixGroups.forEach(group => {
|
||
group.style.display = 'block';
|
||
setTimeout(() => {
|
||
group.style.opacity = '1';
|
||
group.style.transform = 'translateY(0)';
|
||
}, 100);
|
||
});
|
||
document.querySelector('.skills-matrix').classList.remove('matrix-view-mode');
|
||
} else if (category === 'core') {
|
||
// 只显示核心能力
|
||
matrixGroups.forEach(group => {
|
||
if (group.dataset.group === 'core') {
|
||
group.style.display = 'block';
|
||
setTimeout(() => {
|
||
group.style.opacity = '1';
|
||
group.style.transform = 'translateY(0)';
|
||
}, 100);
|
||
} else {
|
||
group.style.opacity = '0';
|
||
group.style.transform = 'translateY(20px)';
|
||
setTimeout(() => {
|
||
group.style.display = 'none';
|
||
}, 500);
|
||
}
|
||
});
|
||
} else if (category === 'composite') {
|
||
// 只显示复合能力
|
||
matrixGroups.forEach(group => {
|
||
if (group.dataset.group === 'composite') {
|
||
group.style.display = 'block';
|
||
setTimeout(() => {
|
||
group.style.opacity = '1';
|
||
group.style.transform = 'translateY(0)';
|
||
}, 100);
|
||
} else {
|
||
group.style.opacity = '0';
|
||
group.style.transform = 'translateY(20px)';
|
||
setTimeout(() => {
|
||
group.style.display = 'none';
|
||
}, 500);
|
||
}
|
||
});
|
||
} else if (category === 'grid-view') {
|
||
// 切换到矩阵视图
|
||
document.querySelector('.skills-matrix').classList.toggle('matrix-view-mode');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 技能卡片悬停动画
|
||
matrixCells.forEach(cell => {
|
||
cell.addEventListener('mouseenter', function() {
|
||
const levelDots = this.querySelectorAll('.level-dot');
|
||
levelDots.forEach((dot, index) => {
|
||
setTimeout(() => {
|
||
dot.style.transform = 'scale(1.3)';
|
||
setTimeout(() => {
|
||
dot.style.transform = 'scale(1)';
|
||
}, 200);
|
||
}, index * 50);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |