4471 lines
208 KiB
Plaintext
4471 lines
208 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>王强 - 工业产品设计师</title>
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- AOS动画库已被GSAP替代 -->
|
||
<!-- <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet"> -->
|
||
<!-- Font Awesome图标 -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
|
||
<style>
|
||
:root {
|
||
--primary-color: #667eea;
|
||
--secondary-color: #764ba2;
|
||
--accent-color: #f093fb;
|
||
--dark-color: #2c3e50;
|
||
--light-color: #ecf0f1;
|
||
--text-color: #333;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--text-color);
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* 加载动画 */
|
||
.loader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.loader.hidden {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.loader-content {
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 5px solid rgba(255,255,255,0.3);
|
||
border-top: 5px solid white;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.navbar {
|
||
background: rgba(0,0,0,0.1) !important;
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s ease;
|
||
padding: 1rem 0;
|
||
/* 确保导航栏始终可见 */
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
transform: translateY(0) !important;
|
||
display: block !important;
|
||
}
|
||
|
||
.navbar.scrolled {
|
||
background: rgba(255,255,255,0.95) !important;
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.navbar.scrolled .navbar-nav .nav-link {
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: white !important;
|
||
}
|
||
|
||
.navbar.scrolled .navbar-brand {
|
||
color: var(--dark-color) !important;
|
||
}
|
||
|
||
.nav-link {
|
||
color: white !important;
|
||
font-weight: 500;
|
||
margin: 0 10px;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: var(--accent-color) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--accent-color);
|
||
transition: all 0.3s ease;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.nav-link:hover::after {
|
||
width: 80%;
|
||
}
|
||
|
||
/* 激活状态的导航链接 */
|
||
.nav-link.active {
|
||
color: var(--accent-color) !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-link.active::after {
|
||
width: 100%;
|
||
background: var(--accent-color);
|
||
height: 3px;
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.hero {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 粒子背景 */
|
||
#particles-js {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 头部区域的容器让鼠标事件穿透 */
|
||
.hero .container {
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
text-align: center;
|
||
color: white;
|
||
pointer-events: none; /* 让鼠标事件穿透透明区域 */
|
||
}
|
||
|
||
.hero-avatar {
|
||
width: 200px;
|
||
height: 200px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 30px;
|
||
border: 5px solid rgba(255,255,255,0.3);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 4rem;
|
||
animation: pulse 2s ease-in-out infinite alternate;
|
||
pointer-events: auto; /* 允许头像区域的交互 */
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); }
|
||
100% { transform: scale(1.05); }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero .subtitle {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 30px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.hero .description {
|
||
font-size: 1.1rem;
|
||
max-width: 600px;
|
||
margin: 0 auto 40px;
|
||
opacity: 0.9;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.contact-buttons .btn {
|
||
margin: 0 10px;
|
||
padding: 12px 30px;
|
||
border-radius: 25px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
color: white;
|
||
background: rgba(255,255,255,0.1);
|
||
backdrop-filter: blur(10px);
|
||
pointer-events: auto; /* 重新启用按钮的鼠标事件 */
|
||
}
|
||
|
||
.contact-buttons .btn:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
}
|
||
|
||
.scroll-indicator {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: white;
|
||
animation: bounce 2s infinite;
|
||
z-index: 3;
|
||
pointer-events: auto; /* 允许滚动指示器的点击交互 */
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
|
||
40% { transform: translateX(-50%) translateY(-10px); }
|
||
60% { transform: translateX(-50%) translateY(-5px); }
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.content-section {
|
||
padding: 100px 0;
|
||
}
|
||
|
||
.content-section:nth-child(even) {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
position: relative;
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100px;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 项目卡片 */
|
||
.project-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 40px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
border-left: 5px solid var(--primary-color);
|
||
}
|
||
|
||
.project-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.project-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--dark-color);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.project-meta {
|
||
color: #7f8c8d;
|
||
margin-bottom: 20px;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.project-meta i {
|
||
margin-right: 8px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 现代项目展示样式 */
|
||
.modern-project-showcase {
|
||
background: white;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.modern-project-showcase:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 30px 80px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 左侧深色展示区域 */
|
||
.project-showcase-left {
|
||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||
color: white;
|
||
padding: 30px 25px; /* 适应更大宽度，增加内边距 */
|
||
height: 100%;
|
||
min-height: 480px; /* 保持最小高度 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.project-category {
|
||
font-size: 0.8rem; /* 适应更大空间，稍微增大 */
|
||
letter-spacing: 2px;
|
||
color: rgba(255,255,255,0.7);
|
||
margin-bottom: 18px; /* 适中间距 */
|
||
font-weight: 500;
|
||
}
|
||
|
||
.project-showcase-title {
|
||
font-size: 1.5rem; /* 适应更大空间，增大字体 */
|
||
font-weight: 700;
|
||
margin-bottom: 22px; /* 适中间距 */
|
||
line-height: 1.2;
|
||
}
|
||
|
||
|
||
|
||
.project-preview {
|
||
position: relative;
|
||
border-radius: 12px; /* 恢复稍大的圆角 */
|
||
overflow: hidden;
|
||
margin-top: 30px; /* 适应更大空间，增加上边距 */
|
||
cursor: pointer;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
aspect-ratio: 1/1; /* 保持正方形 */
|
||
}
|
||
|
||
/* 为不支持aspect-ratio的旧版浏览器提供备用方案 */
|
||
@supports not (aspect-ratio: 1/1) {
|
||
.project-preview {
|
||
height: 320px; /* 备用固定高度，接近正方形 */
|
||
}
|
||
|
||
.project-preview img {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 响应式备用方案 */
|
||
@media (max-width: 991px) {
|
||
@supports not (aspect-ratio: 1/1) {
|
||
.project-preview {
|
||
height: 280px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
@supports not (aspect-ratio: 1/1) {
|
||
.project-preview {
|
||
height: 250px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
@supports not (aspect-ratio: 1/1) {
|
||
.project-preview {
|
||
height: 220px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.project-preview img {
|
||
width: 100%;
|
||
aspect-ratio: 1/1; /* 设置为正方形 */
|
||
object-fit: cover;
|
||
border-radius: 12px; /* 匹配容器圆角 */
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.preview-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
border-radius: 12px; /* 匹配容器圆角 */
|
||
}
|
||
|
||
.project-preview:hover .preview-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.preview-overlay i {
|
||
font-size: 2rem;
|
||
color: white;
|
||
}
|
||
|
||
|
||
|
||
/* 右侧浅色信息区域 */
|
||
.project-showcase-right {
|
||
padding: 35px 30px; /* 从50px 40px减少到35px 30px */
|
||
background: #f8f9fa;
|
||
height: 100%;
|
||
min-height: 480px; /* 从600px减少到480px */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.project-info-tag {
|
||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
padding: 8px 16px; /* 进一步减小 */
|
||
border-radius: 20px;
|
||
font-size: 0.8rem; /* 进一步减小 */
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
text-transform: uppercase;
|
||
display: inline-block;
|
||
margin-bottom: 20px; /* 进一步减小 */
|
||
width: fit-content;
|
||
}
|
||
|
||
.project-info-title {
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
color: var(--dark-color);
|
||
margin-bottom: 30px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.project-meta-info {
|
||
margin-bottom: 25px; /* 进一步减小 */
|
||
}
|
||
|
||
.meta-item {
|
||
margin-bottom: 12px; /* 减小间距 */
|
||
font-size: 0.9rem; /* 大幅减小字体 */
|
||
color: #6c757d;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.meta-item strong {
|
||
color: var(--dark-color);
|
||
font-size: 0.95rem; /* 稍大于普通文字 */
|
||
font-weight: 600;
|
||
}
|
||
|
||
.project-description {
|
||
color: #6c757d;
|
||
line-height: 1.5; /* 进一步减小行高 */
|
||
margin-bottom: 20px; /* 进一步减小间距 */
|
||
font-size: 0.85rem; /* 大幅减小字体 */
|
||
}
|
||
|
||
.view-details-btn {
|
||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px; /* 进一步减小 */
|
||
border-radius: 20px; /* 进一步减小 */
|
||
font-weight: 600;
|
||
font-size: 0.85rem; /* 进一步减小字体 */
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px; /* 进一步减小间距 */
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
margin-top: auto;
|
||
width: fit-content;
|
||
}
|
||
|
||
.view-details-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 30px rgba(103, 126, 234, 0.3);
|
||
}
|
||
|
||
.view-details-btn i {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.view-details-btn:hover i {
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 991px) {
|
||
.project-showcase-left,
|
||
.project-showcase-right {
|
||
min-height: auto;
|
||
padding: 25px 20px; /* 进一步减小内边距 */
|
||
}
|
||
|
||
.project-showcase-left {
|
||
border-radius: 20px 20px 0 0;
|
||
padding: 25px 20px; /* 移动端适中的内边距 */
|
||
}
|
||
|
||
.project-showcase-right {
|
||
border-radius: 0 0 20px 20px;
|
||
}
|
||
|
||
.project-showcase-title {
|
||
font-size: 1.4rem; /* 移动端标题字体，适应更大空间 */
|
||
}
|
||
|
||
.project-category {
|
||
font-size: 0.75rem; /* 稍微增大 */
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.project-preview {
|
||
margin-top: 25px; /* 增加上边距 */
|
||
}
|
||
|
||
/* 移动端字体调整 */
|
||
.project-info-tag {
|
||
font-size: 0.75rem;
|
||
padding: 6px 14px;
|
||
}
|
||
|
||
.meta-item {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.meta-item strong {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.project-description {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.view-details-btn {
|
||
font-size: 0.8rem;
|
||
padding: 8px 16px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.project-showcase-left,
|
||
.project-showcase-right {
|
||
padding: 25px 18px; /* 进一步减小内边距 */
|
||
}
|
||
|
||
.project-showcase-title {
|
||
font-size: 1.3rem; /* 768px以下适中大小 */
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.project-info-title {
|
||
font-size: 1.3rem; /* 减小标题字体 */
|
||
}
|
||
|
||
.project-category {
|
||
font-size: 0.7rem; /* 稍微增大 */
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.project-preview {
|
||
margin-top: 20px; /* 适中上边距 */
|
||
}
|
||
|
||
/* 小屏幕字体进一步调整 */
|
||
.project-info-tag {
|
||
font-size: 0.7rem;
|
||
padding: 5px 12px;
|
||
}
|
||
|
||
.meta-item {
|
||
font-size: 0.8rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.meta-item strong {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.project-description {
|
||
font-size: 0.75rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.view-details-btn {
|
||
font-size: 0.75rem;
|
||
padding: 7px 14px;
|
||
}
|
||
|
||
/* 职责部分移动端优化 */
|
||
.project-responsibilities {
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.project-responsibilities h5 {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.responsibility-text-compact {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
|
||
|
||
.responsibilities-modal-content {
|
||
margin: 10% auto;
|
||
width: 95%;
|
||
}
|
||
|
||
.responsibilities-modal-header {
|
||
padding: 20px;
|
||
}
|
||
|
||
.responsibilities-modal-header h3 {
|
||
font-size: 1.2rem;
|
||
padding-right: 40px;
|
||
}
|
||
|
||
.responsibilities-modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 移动设备上的滑动动画优化 */
|
||
@keyframes modalSlideInFromLeftMobile {
|
||
from {
|
||
transform: translateX(-100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes modalSlideOutToRightMobile {
|
||
from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.responsibilities-modal-content {
|
||
animation: modalSlideInFromLeftMobile 0.3s ease;
|
||
}
|
||
|
||
.responsibilities-modal-content.closing {
|
||
animation: modalSlideOutToRightMobile 0.3s ease;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.modern-project-showcase {
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.project-showcase-left,
|
||
.project-showcase-right {
|
||
padding: 15px 10px; /* 超小屏幕最小内边距 */
|
||
}
|
||
|
||
.project-showcase-left {
|
||
padding: 18px 12px; /* 稍微增加内边距 */
|
||
}
|
||
|
||
.project-showcase-title {
|
||
font-size: 1.2rem; /* 超小屏幕标题，稍微增大 */
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.project-category {
|
||
font-size: 0.65rem; /* 稍微增大 */
|
||
margin-bottom: 10px;
|
||
letter-spacing: 1.5px;
|
||
}
|
||
|
||
.project-preview {
|
||
margin-top: 15px; /* 适中上边距 */
|
||
}
|
||
|
||
.project-info-title {
|
||
font-size: 1.1rem; /* 最小屏幕标题 */
|
||
}
|
||
|
||
.project-preview img {
|
||
aspect-ratio: 1/1; /* 保持正方形比例 */
|
||
}
|
||
|
||
/* 超小屏幕字体优化 */
|
||
.project-info-tag {
|
||
font-size: 0.65rem;
|
||
padding: 4px 10px;
|
||
}
|
||
|
||
.meta-item {
|
||
font-size: 0.75rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.meta-item strong {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.project-description {
|
||
font-size: 0.7rem;
|
||
margin-bottom: 12px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.view-details-btn {
|
||
font-size: 0.7rem;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
/* 职责部分超小屏幕优化 */
|
||
.project-responsibilities {
|
||
padding: 8px;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.project-responsibilities h5 {
|
||
font-size: 0.7rem;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.responsibilities-list-compact {
|
||
max-height: 150px;
|
||
}
|
||
|
||
.responsibility-number-compact {
|
||
width: 14px;
|
||
height: 14px;
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.responsibility-text-compact {
|
||
font-size: 0.6rem;
|
||
line-height: 1.25;
|
||
}
|
||
}
|
||
|
||
/* 图片模态框样式 */
|
||
.image-modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 10000;
|
||
padding-top: 50px;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0,0,0,0.9);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.image-modal-content {
|
||
margin: auto;
|
||
display: block;
|
||
width: 90%;
|
||
max-width: 1000px;
|
||
border-radius: 10px;
|
||
animation: zoom 0.3s ease;
|
||
}
|
||
|
||
@keyframes zoom {
|
||
from { transform: scale(0.1); }
|
||
to { transform: scale(1); }
|
||
}
|
||
|
||
/* 紧凑型岗位职责样式 */
|
||
.project-responsibilities {
|
||
margin: 12px 0; /* 进一步减小外边距 */
|
||
background: #f8f9fa;
|
||
border-radius: 6px; /* 减小圆角 */
|
||
padding: 12px; /* 减小内边距 */
|
||
border-left: 3px solid var(--primary-color);
|
||
}
|
||
|
||
.project-responsibilities h5 {
|
||
color: var(--dark-color);
|
||
font-size: 0.8rem; /* 进一步减小标题字体 */
|
||
font-weight: 600;
|
||
margin-bottom: 8px; /* 减小下边距 */
|
||
padding-bottom: 4px; /* 减小内边距 */
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.responsibilities-list-compact {
|
||
max-height: 300px; /* 减小最大高度 */
|
||
overflow-y: auto;
|
||
padding-right: 3px; /* 减小右边距 */
|
||
}
|
||
|
||
.responsibility-item-compact {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 6px; /* 减小间距 */
|
||
padding: 4px 0; /* 减小内边距 */
|
||
}
|
||
|
||
.responsibility-number-compact {
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
width: 16px; /* 减小尺寸 */
|
||
height: 16px; /* 减小尺寸 */
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.65rem; /* 进一步减小字体 */
|
||
font-weight: bold;
|
||
margin-right: 6px; /* 减小右边距 */
|
||
flex-shrink: 0;
|
||
margin-top: 1px; /* 减小顶部边距 */
|
||
}
|
||
|
||
.responsibility-text-compact {
|
||
color: #666;
|
||
font-size: 0.7rem; /* 进一步减小字体 */
|
||
line-height: 1.3; /* 减小行高 */
|
||
}
|
||
|
||
/* 紧凑型滚动条样式 */
|
||
.responsibilities-list-compact::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
|
||
.responsibilities-list-compact::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.responsibilities-list-compact::-webkit-scrollbar-thumb {
|
||
background: rgba(103, 126, 234, 0.3);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.responsibilities-list-compact::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(103, 126, 234, 0.5);
|
||
}
|
||
|
||
.image-modal-close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 35px;
|
||
color: #fff;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
transition: 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.image-modal-close:hover,
|
||
.image-modal-close:focus {
|
||
color: #bbb;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.image-modal-caption {
|
||
margin: auto;
|
||
display: block;
|
||
width: 80%;
|
||
max-width: 700px;
|
||
text-align: center;
|
||
color: #ccc;
|
||
padding: 10px 0;
|
||
height: 50px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* 职责详情弹窗样式 */
|
||
.responsibilities-modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 10001;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0,0,0,0.5);
|
||
backdrop-filter: blur(3px);
|
||
}
|
||
|
||
.responsibilities-modal-content {
|
||
background-color: white;
|
||
margin: 5% auto;
|
||
padding: 0;
|
||
border-radius: 15px;
|
||
width: 95%;
|
||
max-width: 1400px; /* 增加最大宽度 */
|
||
max-height: 85vh; /* 增加高度 */
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
animation: modalSlideInFromLeft 0.4s ease;
|
||
}
|
||
|
||
.responsibilities-modal-content.closing {
|
||
animation: modalSlideOutToRight 0.4s ease;
|
||
}
|
||
|
||
@keyframes modalSlideInFromLeft {
|
||
from {
|
||
transform: translateX(-100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes modalSlideOutToRight {
|
||
from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.responsibilities-modal-header {
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
padding: 25px 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.responsibilities-modal-header h3 {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.responsibilities-modal-close {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: white;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.responsibilities-modal-close:hover {
|
||
background: rgba(255,255,255,0.2);
|
||
transform: translateY(-50%) rotate(90deg);
|
||
}
|
||
|
||
.responsibilities-modal-body {
|
||
padding: 0;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 顶部标签导航样式 */
|
||
.modal-top-tabs {
|
||
display: flex;
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
margin: 0 20px 20px 20px;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.modal-tab-btn {
|
||
flex: 1;
|
||
min-width: 140px;
|
||
max-width: 200px;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: #6c757d;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.modal-tab-btn.active {
|
||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(103, 126, 234, 0.3);
|
||
}
|
||
|
||
.modal-tab-btn:hover:not(.active) {
|
||
background: rgba(103, 126, 234, 0.1);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.modal-tab-btn i {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 左右两栏布局 */
|
||
.modal-main-content {
|
||
display: flex;
|
||
height: 100%;
|
||
max-height: 60vh;
|
||
}
|
||
|
||
.modal-left-panel {
|
||
flex: 0 0 45%;
|
||
background: #2c3e50;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 0 0 0 15px;
|
||
}
|
||
|
||
.modal-right-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: white;
|
||
padding: 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 流程图片容器样式 */
|
||
.process-image-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.process-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.process-image-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0,0,0,0.7));
|
||
color: white;
|
||
padding: 30px 25px 25px;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.modal-left-panel:hover .process-image-overlay {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.process-image-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.process-image-subtitle {
|
||
font-size: 0.9rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 流程内容区域 */
|
||
.process-content-area {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 隐藏流程内容滚动条但保持功能 */
|
||
.process-content-area::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.process-content-area::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.process-content-area::-webkit-scrollbar-thumb {
|
||
background: rgba(103, 126, 234, 0.3);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.process-content-area::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(103, 126, 234, 0.5);
|
||
}
|
||
|
||
/* 流程标签内容样式 */
|
||
.process-tab-content {
|
||
display: none;
|
||
animation: fadeInContent 0.3s ease;
|
||
}
|
||
|
||
.process-tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeInContent {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.process-tab-content h4 {
|
||
color: var(--dark-color);
|
||
margin-bottom: 15px;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid var(--primary-color);
|
||
}
|
||
|
||
/* 流程描述样式 */
|
||
.process-description {
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
border-left: 4px solid var(--primary-color);
|
||
}
|
||
|
||
.process-description p {
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
color: var(--dark-color);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 流程亮点样式 */
|
||
.process-highlights h5 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 15px;
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.highlight-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.highlight-list li {
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
border-left: 4px solid var(--secondary-color);
|
||
}
|
||
|
||
.highlight-label {
|
||
display: inline-block;
|
||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin-right: 10px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* 仿真指标网格 */
|
||
.metrics-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.metric-item {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||
text-align: center;
|
||
border-top: 3px solid var(--primary-color);
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 0.9rem;
|
||
color: #6c757d;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 1rem;
|
||
color: var(--dark-color);
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.metric-result {
|
||
font-size: 1.1rem;
|
||
color: var(--primary-color);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 测试结果样式 */
|
||
.test-results {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.test-group {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.test-group h6 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 15px;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
border-bottom: 1px solid #e9ecef;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.test-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f1f3f4;
|
||
}
|
||
|
||
.test-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.test-target {
|
||
font-size: 0.9rem;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.test-result {
|
||
font-weight: 600;
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.test-result.success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
|
||
.test-result.warning {
|
||
background: #fff3cd;
|
||
color: #856404;
|
||
}
|
||
|
||
.test-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.test-list li {
|
||
padding: 8px 0;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.test-list li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--primary-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 成本优化样式 */
|
||
.cost-optimization {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.cost-item {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||
border-left: 4px solid var(--secondary-color);
|
||
}
|
||
|
||
.cost-category {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--dark-color);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.cost-change {
|
||
font-size: 0.95rem;
|
||
color: #6c757d;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.cost-result {
|
||
font-size: 1rem;
|
||
color: var(--primary-color);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cost-summary {
|
||
margin-top: 30px;
|
||
padding: 25px;
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.final-cost {
|
||
color: white;
|
||
}
|
||
|
||
.cost-label {
|
||
display: block;
|
||
font-size: 1rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cost-value {
|
||
display: block;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.cost-target {
|
||
font-size: 0.9rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.responsibilities-modal-content {
|
||
width: 98%;
|
||
max-height: 95vh;
|
||
}
|
||
|
||
.modal-top-tabs {
|
||
margin: 0 10px 15px 10px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.modal-tab-btn {
|
||
min-width: 80px;
|
||
padding: 8px 6px;
|
||
font-size: 0.8rem;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.modal-main-content {
|
||
flex-direction: column;
|
||
max-height: 70vh;
|
||
}
|
||
|
||
.modal-left-panel {
|
||
flex: 0 0 30%;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.modal-right-panel {
|
||
flex: 1;
|
||
padding: 15px;
|
||
}
|
||
|
||
.process-content-area {
|
||
padding: 0;
|
||
}
|
||
|
||
.metrics-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.test-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 5px;
|
||
}
|
||
}
|
||
|
||
.responsibility-detail {
|
||
margin-bottom: 25px;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
border-left: 4px solid var(--primary-color);
|
||
}
|
||
|
||
.responsibility-detail:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.responsibility-number {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
margin-right: 15px;
|
||
float: left;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.responsibility-text {
|
||
line-height: 1.6;
|
||
color: var(--dark-color);
|
||
text-align: justify;
|
||
}
|
||
|
||
/* 技能展示 */
|
||
.skills-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.skill-category {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
transform: scale(0);
|
||
opacity: 0;
|
||
}
|
||
|
||
.skill-category:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.skill-category h3 {
|
||
color: var(--dark-color);
|
||
margin-bottom: 25px;
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.skill-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.skill-list li {
|
||
margin-bottom: 15px;
|
||
padding: 12px 0;
|
||
padding-left: 25px;
|
||
position: relative;
|
||
line-height: 1.6;
|
||
color: var(--dark-color);
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.skill-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.skill-list li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 12px;
|
||
color: var(--primary-color);
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.skill-list li strong {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 技能卡片高度统一 */
|
||
.skill-category .skill-list {
|
||
min-height: 400px;
|
||
}
|
||
|
||
/* 复合能力卡片滚动样式 */
|
||
.skill-category:last-child .skill-list {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
min-height: auto;
|
||
/* 隐藏滚动条但保留滚动功能 */
|
||
-ms-overflow-style: none; /* IE和Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
/* 隐藏webkit滚动条 */
|
||
.skill-category:last-child .skill-list::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 基本资料 */
|
||
.info-item {
|
||
margin-bottom: 15px;
|
||
font-size: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-item i {
|
||
color: var(--primary-color);
|
||
width: 20px;
|
||
}
|
||
|
||
.subsection-title {
|
||
font-size: 1.5rem;
|
||
color: var(--dark-color);
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid var(--primary-color);
|
||
}
|
||
|
||
.course-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.course-list li {
|
||
margin-bottom: 8px;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.course-list li::before {
|
||
content: '▶';
|
||
color: var(--primary-color);
|
||
position: absolute;
|
||
left: 0;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
/* 教育背景 */
|
||
.education-item {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
border-left: 5px solid var(--secondary-color);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.education-item:hover {
|
||
transform: translateX(10px);
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 实习经历标签导航 */
|
||
.experience-tabs {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.experience-tab-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.experience-tab-btn {
|
||
background: rgba(55, 65, 81, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
border: 2px solid rgba(75, 85, 99, 0.8);
|
||
color: #fff;
|
||
padding: 1rem 1.5rem;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.experience-tab-btn:hover {
|
||
background: rgba(75, 85, 99, 0.95);
|
||
border-color: rgba(102, 126, 234, 0.6);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.experience-tab-btn.active {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-color: #667eea;
|
||
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
|
||
color: #fff;
|
||
}
|
||
|
||
.experience-tab-content {
|
||
min-height: 400px;
|
||
}
|
||
|
||
.experience-content {
|
||
display: none;
|
||
}
|
||
|
||
.experience-content.active {
|
||
display: block;
|
||
animation: fadeInUp 0.5s ease-out;
|
||
}
|
||
|
||
/* 占位内容样式 */
|
||
.placeholder-content {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.placeholder-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
padding: 3rem;
|
||
text-align: center;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
max-width: 500px;
|
||
width: 100%;
|
||
}
|
||
|
||
.placeholder-icon {
|
||
font-size: 4rem;
|
||
color: #667eea;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.placeholder-card h4 {
|
||
color: #fff;
|
||
margin-bottom: 1rem;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.placeholder-card p {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 2rem;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.placeholder-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
.placeholder-item {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
padding: 0.8rem 1.2rem;
|
||
border-radius: 10px;
|
||
font-size: 0.95rem;
|
||
border-left: 3px solid #667eea;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.experience-tab-buttons {
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
.experience-tab-btn {
|
||
justify-content: center;
|
||
padding: 0.8rem 1.2rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.placeholder-card {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.placeholder-icon {
|
||
font-size: 3rem;
|
||
}
|
||
}
|
||
|
||
/* 个人总结 */
|
||
.summary-section {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
color: white;
|
||
padding: 80px 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.summary-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
font-size: 1.2rem;
|
||
line-height: 1.8;
|
||
text-align: left;
|
||
}
|
||
|
||
.summary-content p {
|
||
text-indent: 2rem; /* 首行缩进2个字符 */
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/* 联系方式 */
|
||
.contact-info {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.contact-item {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.contact-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.contact-item i {
|
||
font-size: 2.5rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.contact-item h3 {
|
||
color: var(--dark-color);
|
||
margin-bottom: 10px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.contact-item p {
|
||
color: #7f8c8d;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 返回顶部按钮 */
|
||
.scroll-top {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50%;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
z-index: 1000;
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.scroll-top.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.scroll-top:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.hero h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.hero .subtitle {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.content-section {
|
||
padding: 60px 0;
|
||
}
|
||
|
||
.skills-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.contact-info {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.hero {
|
||
padding: 20px;
|
||
}
|
||
|
||
.hero-avatar {
|
||
width: 150px;
|
||
height: 150px;
|
||
font-size: 3rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.project-card {
|
||
padding: 20px;
|
||
}
|
||
|
||
.skill-category {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
/* 修复Bootstrap Grid和项目卡片显示问题 */
|
||
.row {
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.col-lg-5 {
|
||
flex: 0 0 41.666667% !important;
|
||
max-width: 41.666667% !important;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
.col-lg-7 {
|
||
flex: 0 0 58.333333% !important;
|
||
max-width: 58.333333% !important;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
.project-showcase-left {
|
||
padding: 2rem !important;
|
||
min-height: 400px !important;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||
color: #fff !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: space-between !important;
|
||
}
|
||
|
||
.project-showcase-right {
|
||
padding: 2rem !important;
|
||
min-height: 400px !important;
|
||
background: #f8f9fa !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
/* 确保experience-content正确显示 */
|
||
.experience-content {
|
||
display: none !important;
|
||
}
|
||
|
||
.experience-content.active {
|
||
display: block !important;
|
||
}
|
||
|
||
/* 确保modern-project-showcase正确显示 */
|
||
.modern-project-showcase {
|
||
display: block !important;
|
||
margin-bottom: 2rem !important;
|
||
min-height: 400px !important;
|
||
background: #fff !important;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
|
||
border-radius: 20px !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
/* 强制修复所有标签内容显示 */
|
||
#machining-content, #automation-content, #non-standard-content {
|
||
min-height: 500px !important;
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
#machining-content.active, #automation-content.active, #non-standard-content.active {
|
||
display: block !important;
|
||
min-height: 500px !important;
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
/* 专门修复机械加工工艺等标签内容的布局问题 */
|
||
.experience-tab-content {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
#machining-content .row, #automation-content .row, #non-standard-content .row {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
margin: 0 !important;
|
||
display: flex !important;
|
||
min-height: 400px !important;
|
||
}
|
||
|
||
#machining-content .modern-project-showcase,
|
||
#automation-content .modern-project-showcase,
|
||
#non-standard-content .modern-project-showcase {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
min-height: 400px !important;
|
||
display: block !important;
|
||
background: #fff !important;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
|
||
border-radius: 20px !important;
|
||
margin-bottom: 2rem !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
#machining-content [class*="col-"],
|
||
#automation-content [class*="col-"],
|
||
#non-standard-content [class*="col-"] {
|
||
display: flex !important;
|
||
min-height: 400px !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
#machining-content .project-showcase-left,
|
||
#automation-content .project-showcase-left,
|
||
#non-standard-content .project-showcase-left {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||
color: #fff !important;
|
||
padding: 2rem !important;
|
||
min-height: 400px !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: space-between !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
#machining-content .project-showcase-right,
|
||
#automation-content .project-showcase-right,
|
||
#non-standard-content .project-showcase-right {
|
||
background: #f8f9fa !important;
|
||
padding: 2rem !important;
|
||
min-height: 400px !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* 项目卡片内部元素强制样式 */
|
||
.modern-project-showcase * {
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
.modern-project-showcase .row {
|
||
display: flex !important;
|
||
min-height: 400px !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.modern-project-showcase .col-lg-5,
|
||
.modern-project-showcase .col-lg-7 {
|
||
display: flex !important;
|
||
min-height: 400px !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.modern-project-showcase .project-showcase-left,
|
||
.modern-project-showcase .project-showcase-right {
|
||
width: 100% !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
min-height: 400px !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 加载动画 -->
|
||
<div class="loader" id="loader">
|
||
<div class="loader-content">
|
||
<div class="spinner"></div>
|
||
<h3>加载中...</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#home">王强</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#home">主页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#basic-info">基本资料</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#skills">专业技能</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#experience">实习/工作经历</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#summary">个人总结</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#contact">联系方式</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 头部区域 -->
|
||
<section class="hero" id="home">
|
||
<!-- 粒子背景容器 -->
|
||
<div id="particles-js"></div>
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-avatar">
|
||
<img src="头像.png" alt="王强" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 0%;">
|
||
</div>
|
||
<h1>王强</h1>
|
||
<p class="subtitle">个人作品集</p>
|
||
<p class="description">
|
||
我是一名充满热情的工业产品设计师，专注于机械产品的结构设计与优化。
|
||
具备扎实的三维建模基础和结构设计经验，致力于创造既实用又可靠的产品结构。
|
||
</p>
|
||
<div class="contact-buttons">
|
||
<a href="#contact" class="btn">
|
||
<i class="fas fa-envelope me-2"></i>联系我
|
||
</a>
|
||
<a href="#experience" class="btn">
|
||
<i class="fas fa-briefcase me-2"></i>工作经历
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="scroll-indicator">
|
||
<i class="fas fa-chevron-down"></i>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 基本资料 -->
|
||
<section class="content-section" id="basic-info">
|
||
<div class="container">
|
||
<h2 class="section-title">基本资料</h2>
|
||
|
||
<!-- 个人信息卡片 -->
|
||
<div class="row justify-content-center mb-5">
|
||
<div class="col-lg-10">
|
||
<div class="project-card">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="info-item">
|
||
<i class="fas fa-user me-3"></i>
|
||
<strong>姓名：</strong>王强
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="fas fa-phone me-3"></i>
|
||
<strong>手机：</strong>18337655429
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="fas fa-envelope me-3"></i>
|
||
<strong>邮箱：</strong>1215249066@qq.com
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="info-item">
|
||
<i class="fas fa-map-marker-alt me-3"></i>
|
||
<strong>现居地址：</strong>苏州市工业园区
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="fas fa-briefcase me-3"></i>
|
||
<strong>求职意向：</strong>工业产品设计师
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="fas fa-mars me-3"></i>
|
||
<strong>性别：</strong>男
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 教育背景 -->
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-10">
|
||
<h3 class="subsection-title">
|
||
<i class="fas fa-graduation-cap me-2"></i>教育背景
|
||
</h3>
|
||
<div class="education-item">
|
||
<div class="project-title">模具设计与制造专业 - 大专</div>
|
||
<div class="project-meta">
|
||
<i class="fas fa-calendar-alt"></i>2018年9月 - 2021年6月
|
||
<span class="ms-3">
|
||
<i class="fas fa-university"></i>广东机电职业技术学院
|
||
</span>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<h5><i class="fas fa-book me-2"></i>主修课程</h5>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<ul class="course-list">
|
||
<li>机械制图与CAD</li>
|
||
<li>模具设计基础</li>
|
||
<li>冲压工艺与模具设计</li>
|
||
<li>注塑工艺与模具设计</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<ul class="course-list">
|
||
<li>数控编程与加工</li>
|
||
<li>模具材料与热处理</li>
|
||
<li>模具制造工艺</li>
|
||
<li>Pro/E与UG应用</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 专业技能 -->
|
||
<section class="content-section" id="skills">
|
||
<div class="container">
|
||
<h2 class="section-title">专业技能</h2>
|
||
<div class="skills-grid">
|
||
<div class="skill-category">
|
||
<h3><i class="fas fa-star me-2"></i>核心能力</h3>
|
||
<ul class="skill-list">
|
||
<li>掌握 pro/creo三维建模工具，能独立完成常见产品部件的建模与装配图绘制；</li>
|
||
<li>熟悉产品结构轻量化与模块化设计理念，具备初步的整机结构优化协作经验；</li>
|
||
<li>了解结构仿真基础原理，能协助进行静力分析、模态分析与跌落测试的参数输入与结果分析；</li>
|
||
<li>熟悉结构件样机测试流程，能配合完成环境模拟与耐久性测试并整理测试记录；</li>
|
||
<li>具备基础BOM管理能力，能协助分类整理零件信息，支持结构设计与制造环节衔接；</li>
|
||
<li>熟悉产品设计开发流程，能参与评审会议纪要记录与设计版本更新管理。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="skill-category">
|
||
<h3><i class="fas fa-lightbulb me-2"></i>复合能力</h3>
|
||
<ul class="skill-list">
|
||
<li><strong>设计与开发流程认知：</strong>初步掌握机械设计基础理论（如制图标准、公差配合、常用机构）及设计软件（如AutoCAD、SolidWorks等）基本操作；了解工业产品设计开发（从需求分析、概念设计到试制验证）的一般工作流程。</li>
|
||
<li><strong>技术沟通与协作能力：</strong>具备基础的工业产品技术信息理解与表达能力，能够清晰地进行技术沟通；具备团队协作精神，能有效参与跨职能项目协作。</li>
|
||
<li><strong>基础商业与客户意识：</strong>理解产品价值与技术方案对客户的意义，具备初步的产品营销辅助沟通能力和客户服务意识。</li>
|
||
<li><strong>质量管理意识：</strong>理解机械制造中质量管控的重要性，了解常用质量管理工具（如PDCA循环、基础统计方法）和标准（如ISO 9001）的基本概念，具备初步的图纸、工艺文件识读与分析能力。</li>
|
||
<li><strong>材料与工艺知识：</strong>熟悉常用工程材料（如金属、塑料、复合材料）的物理、机械性能特点及其典型应用领域；了解机械制造核心工艺（CNC加工、焊接/连接技术、增材制造/3D打印、注塑、冲压等）的流程、原理及对零件质量、成本的影响。</li>
|
||
<li><strong>数字化工具应用：</strong>熟悉主流ERP系统的操作逻辑与核心模块功能，理解其在企业资源计划与生产管理流程中的应用。</li>
|
||
<li><strong>精益生产与效率观念：</strong>了解工业工程（IE）基础概念，如生产线平衡、5S管理、基础时间研究，具备初步的效率优化与成本节约意识。</li>
|
||
<li><strong>非标自动化系统理解：</strong>具备非标自动化设备/产线的基础知识，了解其构成（机械结构、电气控制、气动液压）、设计思路及项目实施的关键环节。</li>
|
||
<li><strong>自动化与控制系统基础：</strong>掌握工业自动化基本原理，理解PLC、工业机器人、伺服系统、传感器及机器视觉等核心设备的工作原理与应用场景。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 实习/工作经历 -->
|
||
<section class="content-section" id="experience">
|
||
<div class="container">
|
||
<h2 class="section-title">实习/项目经历</h2>
|
||
|
||
<!-- 专业方向标签导航 -->
|
||
<div class="experience-tabs">
|
||
<div class="experience-tab-buttons">
|
||
<button class="experience-tab-btn active" onclick="switchExperienceTab('industrial-design')">
|
||
<i class="fas fa-drafting-compass me-2"></i>
|
||
<span>工业设计</span>
|
||
</button>
|
||
<button class="experience-tab-btn" onclick="switchExperienceTab('machining')">
|
||
<i class="fas fa-cogs me-2"></i>
|
||
<span>机械加工工艺</span>
|
||
</button>
|
||
<button class="experience-tab-btn" onclick="switchExperienceTab('automation')">
|
||
<i class="fas fa-robot me-2"></i>
|
||
<span>自动化控制</span>
|
||
</button>
|
||
<button class="experience-tab-btn" onclick="switchExperienceTab('non-standard')">
|
||
<i class="fas fa-tools me-2"></i>
|
||
<span>非标自动化</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标签内容区域 -->
|
||
<div class="experience-tab-content">
|
||
<!-- 工业设计标签内容 -->
|
||
<div id="industrial-design-content" class="experience-content active">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="modern-project-showcase">
|
||
<div class="row g-0">
|
||
<!-- 左侧：深色展示区域 -->
|
||
<div class="col-lg-5">
|
||
<div class="project-showcase-left">
|
||
<div class="project-category">INDUSTRIAL DESIGN</div>
|
||
<h3 class="project-showcase-title">农田监测无人机<br>结构设计项目</h3>
|
||
|
||
<div class="project-preview" onclick="openImageModal()">
|
||
<img src="public/农业监测无人机结构设计项目/0主页.jpg" alt="农田监测无人机结构设计草图" id="project-img">
|
||
<div class="preview-overlay">
|
||
<i class="fas fa-search-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：浅色信息区域 -->
|
||
<div class="col-lg-7">
|
||
<div class="project-showcase-right">
|
||
<div class="project-info-tag">工业产品设计</div>
|
||
|
||
<div class="project-meta-info">
|
||
<div class="meta-item">
|
||
<strong>职位：</strong>工业产品设计师助理
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>时间：</strong>2023年6月 - 2023年9月
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>公司：</strong>苏州赫格智能科技有限公司
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-description">
|
||
负责协助工程师完成面向农田监测场景的四旋翼无人机结构设计与优化。主要参与整机建模、装配设计、仿真分析、样机测试等全流程工作，积累了丰富的工业产品结构设计经验。
|
||
</div>
|
||
|
||
<!-- 岗位职责详情 -->
|
||
<div class="project-responsibilities">
|
||
<h5><i class="fas fa-tasks me-2"></i>主要职责</h5>
|
||
<div class="responsibilities-list-compact">
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">1</span>
|
||
<div class="responsibility-text-compact">
|
||
协助工程师完成一款面向农田监测场景的四旋翼无人机结构设计与优化任务；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">2</span>
|
||
<div class="responsibility-text-compact">
|
||
参与整机结构建模与装配设计，协助完成可折叠机臂、电池舱、传感器仓等模块的三维建模工作，配合完成轻量化与便携性目标验证；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">3</span>
|
||
<div class="responsibility-text-compact">
|
||
使用SolidWorks完成多个关键部件（如电池舱、电机座、折叠机构等）的装配图绘制与爆炸图整理，保证结构接口标准统一，便于后续拆装测试；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">4</span>
|
||
<div class="responsibility-text-compact">
|
||
配合完成结构仿真任务：协助整理静力/模态/跌落等仿真模型输入参数，跟进结果输出与安全性指标比对；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">5</span>
|
||
<div class="responsibility-text-compact">
|
||
协助进行结构样机的实验测试，包括折叠次数耐久性测试、防尘防水密封测试与高温环境运行验证，并整理原始测试数据供设计迭代使用；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">6</span>
|
||
<div class="responsibility-text-compact">
|
||
参与结构件BOM整理与标准件归类工作，协助分析材料替代方案与制造方式改进建议，支持量产成本优化与装配效率提升；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">7</span>
|
||
<div class="responsibility-text-compact">
|
||
参与设计评审会议记录与结构修改意见整理，协助形成版本对比表与迭代建议清单，推动设计闭环流程规范落地。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="view-details-btn" onclick="openResponsibilitiesModal()">
|
||
<span>查看项目流程</span>
|
||
<i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智能手表整体结构设计项目 -->
|
||
<div class="col-12 mt-5">
|
||
<div class="modern-project-showcase">
|
||
<div class="row g-0">
|
||
<!-- 左侧：浅色信息区域 -->
|
||
<div class="col-lg-7">
|
||
<div class="project-showcase-right" style="background: #f8f9fa; padding: 2.5rem;">
|
||
<div class="project-info-tag">机械产品结构设计</div>
|
||
|
||
<div class="project-meta-info">
|
||
<div class="meta-item">
|
||
<strong>职位：</strong>机械产品结构设计师助理
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>时间：</strong>2023年7月 - 2024年7月
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>公司：</strong>苏州流金工业设计有限公司
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-description">
|
||
协助ID、MD进行产品从概念设计到结构建模的支撑性工作，包括数据收集整理、基础结构建模设计、工艺资料准备及设计文件管理等。
|
||
</div>
|
||
|
||
<!-- 岗位职责详情 -->
|
||
<div class="project-responsibilities">
|
||
<h5><i class="fas fa-tasks me-2"></i>主要职责</h5>
|
||
<div class="responsibilities-list-compact">
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">1</span>
|
||
<div class="responsibility-text-compact">
|
||
使用 Rhino 软件，依据设计师提供的概念草图、线框图（DXF/IGS 格式）与技术说明，构建上、下壳体的三维数字模型，保证模型精准度与设计一致性；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">2</span>
|
||
<div class="responsibility-text-compact">
|
||
熟练运用 Rhino NURBS 曲面建模工具构建复杂自由形态曲面，确保壳体曲面光顺、结构精确；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">3</span>
|
||
<div class="responsibility-text-compact">
|
||
将三维模型导出为符合规范的 STP/IGS 格式，并配合工程师生成二维工程图（剖视图、细节图等），清晰标注尺寸与技术要求；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">4</span>
|
||
<div class="responsibility-text-compact">
|
||
根据评审与注塑工程反馈，优化模型结构，如调整拔模角、出模方向、支撑结构细节等，确保制造可行性；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">5</span>
|
||
<div class="responsibility-text-compact">
|
||
处理并转换 CAD 数据（如 DXF、IGS、STP），导出适用于渲染、CAM 加工与手板打样的标准格式；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">6</span>
|
||
<div class="responsibility-text-compact">
|
||
负责模型文件规范命名、版本控制与备份管理，生成并维护结构设计变更记录表以供团队同步更新；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">7</span>
|
||
<div class="responsibility-text-compact">
|
||
与设计师、结构工程师、生产部门积极沟通，及时传达设计意图并确保模型准确满足下游需求。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="view-details-btn" onclick="openWatchProjectModalGSAP()">
|
||
<span>查看项目流程</span>
|
||
<i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：深色展示区域 -->
|
||
<div class="col-lg-5">
|
||
<div class="project-showcase-left">
|
||
<div class="project-category">PRODUCT DESIGN</div>
|
||
<h3 class="project-showcase-title">智能手表整体<br>结构设计</h3>
|
||
|
||
<div class="project-preview" onclick="openWatchImageModal()">
|
||
<img src="public/智能手表整体结构设计/0主页.jpeg" alt="智能手表整体结构设计" id="watch-project-img">
|
||
<div class="preview-overlay">
|
||
<i class="fas fa-search-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 机械加工工艺标签内容 -->
|
||
<div id="machining-content" class="experience-content">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="modern-project-showcase">
|
||
<div class="row g-0">
|
||
<!-- 左侧：深色展示区域 -->
|
||
<div class="col-lg-5">
|
||
<div class="project-showcase-left">
|
||
<div class="project-category">MACHINING TECHNOLOGY</div>
|
||
<h3 class="project-showcase-title">铝合金3D零件<br>CNC数控编程项目</h3>
|
||
|
||
<div class="project-preview" onclick="openMachiningImageModal()">
|
||
<img src="public/铝合金3D零件CNC数控编程/主图.webp" alt="铝合金3D零件CNC数控编程项目" id="machining-project-img">
|
||
<div class="preview-overlay">
|
||
<i class="fas fa-search-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：浅色信息区域 -->
|
||
<div class="col-lg-7">
|
||
<div class="project-showcase-right">
|
||
<div class="project-info-tag">机械加工工艺</div>
|
||
|
||
<div class="project-meta-info">
|
||
<div class="meta-item">
|
||
<strong>职位：</strong>CNC编程工程师
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>时间：</strong>2023年7月 - 2024年7月
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>公司：</strong>德阳汉沣数控机械制造有限公司
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-description">
|
||
项目以覆盖从CAD建模、CAM编程、G-code生成到加工验证与品质检验的完整流程，重点解决铝材软性、高速切削、曲面加工等特性带来的路径设计与加工精度控制挑战。
|
||
</div>
|
||
|
||
<!-- 岗位职责详情 -->
|
||
<div class="project-responsibilities">
|
||
<h5><i class="fas fa-tasks me-2"></i>主要职责</h5>
|
||
<div class="responsibilities-list-compact">
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">1</span>
|
||
<div class="responsibility-text-compact">
|
||
协助完成3D曲面零件的CAD建模任务，使用mastercam建立加工模型，确保图纸标注完整、曲面连续；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">2</span>
|
||
<div class="responsibility-text-compact">
|
||
参与工艺路线制定，协助整理粗加工与精加工策略、刀具选择及切削参数，辅助编写工艺卡片内容；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">3</span>
|
||
<div class="responsibility-text-compact">
|
||
使用mastercam进行刀具路径编程，配合工程师完成Z-Level等高切削路径设定并导出G-code程序；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">4</span>
|
||
<div class="responsibility-text-compact">
|
||
执行刀路仿真与干涉检查，协助分析路径中的过切、漏切问题，完成路径修正与安全高度配置；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">5</span>
|
||
<div class="responsibility-text-compact">
|
||
跟随师傅完成CNC设备设定与首件试切，记录刀具补偿编号、工件坐标系设定方式与夹具安装方法；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">6</span>
|
||
<div class="responsibility-text-compact">
|
||
协助进行尺寸检验工作，使用卡尺及三坐标仪完成关键尺寸测量并整理形成检验报告；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">7</span>
|
||
<div class="responsibility-text-compact">
|
||
参与零件去毛刺与喷砂处理，协助核对表面处理工艺参数并整理包装与出货清单。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="view-details-btn" onclick="openMachiningProjectModalGSAP()">
|
||
<span>查看项目流程</span>
|
||
<i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自动化控制标签内容 -->
|
||
<div id="automation-content" class="experience-content">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="modern-project-showcase">
|
||
<div class="row g-0">
|
||
<!-- 左侧：深色展示区域 -->
|
||
<div class="col-lg-5">
|
||
<div class="project-showcase-left">
|
||
<div class="project-category">AUTOMATION CONTROL</div>
|
||
<h3 class="project-showcase-title">气动搬运机器人<br>PLC编程设计</h3>
|
||
|
||
<div class="project-preview" onclick="openAutomationImageModal()">
|
||
<img src="public/气动搬运机器人PLC编程设计/气动搬运机器人大图.jpg" alt="气动搬运机器人PLC编程设计" id="automation-project-img">
|
||
<div class="preview-overlay">
|
||
<i class="fas fa-search-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：浅色信息区域 -->
|
||
<div class="col-lg-7">
|
||
<div class="project-showcase-right">
|
||
<div class="project-info-tag">自动化控制</div>
|
||
|
||
<div class="project-meta-info">
|
||
<div class="meta-item">
|
||
<strong>职位：</strong>PLC技术员
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>时间：</strong>2023年5月 - 2024年9月
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>公司：</strong>天罡股份有限公司
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-description">
|
||
协助工程师完成气动搬运机器人PLC控制系统的开发与调试工作，主要参与I/O分配、LAD梯形图程序编写辅助、传感器及执行元件接线测试、MCGS组态界面数据整理等基础工作，确保机器人运行稳定、功能完整。
|
||
</div>
|
||
|
||
<!-- 岗位职责详情 -->
|
||
<div class="project-responsibilities">
|
||
<h5><i class="fas fa-tasks me-2"></i>主要职责</h5>
|
||
<div class="responsibilities-list-compact">
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">1</span>
|
||
<div class="responsibility-text-compact">
|
||
协助整理各机构的动作顺序和功能描述，制作"动作逻辑流程图"，便于后续PLC逻辑开发；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">2</span>
|
||
<div class="responsibility-text-compact">
|
||
跟随工程师学习并记录传感器、气缸、电磁阀的型号、参数及安装位置，初步掌握其工作原理；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">3</span>
|
||
<div class="responsibility-text-compact">
|
||
协助工程师整理I/O点表，核对输入点（传感器、按钮等）和输出点（电磁阀、电机等）的对应关系；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">4</span>
|
||
<div class="responsibility-text-compact">
|
||
协助导入I/O点表至程序中，检查变量命名是否统一；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">5</span>
|
||
<div class="responsibility-text-compact">
|
||
协助整理界面上按钮、指示灯、报警信息的变量清单，并与PLC变量表对照；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">6</span>
|
||
<div class="responsibility-text-compact">
|
||
在调试过程中负责触发各类传感器、按钮，协助确认动作链条是否完整；
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="view-details-btn" onclick="openAutomationProjectModalGSAP()">
|
||
<span>查看项目流程</span>
|
||
<i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 非标自动化标签内容 -->
|
||
<div id="non-standard-content" class="experience-content">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="modern-project-showcase">
|
||
<div class="row g-0">
|
||
<!-- 左侧：深色展示区域 -->
|
||
<div class="col-lg-5">
|
||
<div class="project-showcase-left">
|
||
<div class="project-category">NON-STANDARD AUTOMATION</div>
|
||
<h3 class="project-showcase-title">物流ABB码垛机器人<br>安装调试</h3>
|
||
|
||
<div class="project-preview" onclick="openNonStandardImageModal()">
|
||
<img src="public/物流 ABB 码垛机器人安装调试/0首页.jpeg" alt="物流ABB码垛机器人安装调试" id="non-standard-project-img">
|
||
<div class="preview-overlay">
|
||
<i class="fas fa-search-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：浅色信息区域 -->
|
||
<div class="col-lg-7">
|
||
<div class="project-showcase-right">
|
||
<div class="project-info-tag">非标自动化</div>
|
||
|
||
<div class="project-meta-info">
|
||
<div class="meta-item">
|
||
<strong>职位：</strong>自动化技术员
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>时间：</strong>2023年5月 - 2024年9月
|
||
</div>
|
||
<div class="meta-item">
|
||
<strong>公司：</strong>光深自动化有限公司
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-description">
|
||
随着物流行业对自动化程度的不断提升，ABB码垛机器人作为一种高效的自动化设备，已广泛应用于仓储、配送及生产线末端的码垛作业中。本项目旨在通过对ABB码垛机器人的安装与调试，确保机器人能够在实际物流场景中高效运行，完成各种尺寸纸箱的精准码垛任务。
|
||
</div>
|
||
|
||
<!-- 岗位职责详情 -->
|
||
<div class="project-responsibilities">
|
||
<h5><i class="fas fa-tasks me-2"></i>主要职责</h5>
|
||
<div class="responsibilities-list-compact">
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">1</span>
|
||
<div class="responsibility-text-compact">
|
||
协助完成机器人本体吊装与精度对位：在工程师的指导下，协助使用叉车完成机器人本体的摆放与固定，并使用水平仪与卷尺反复测量基座；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">2</span>
|
||
<div class="responsibility-text-compact">
|
||
核对控制柜供电参数与接线标准：根据电气接线图，逐一确认控制柜接入电源电压是否为380V±10%，使用万用表测试接地电阻小于4Ω；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">3</span>
|
||
<div class="responsibility-text-compact">
|
||
完成示教器语言环境的切换操作：首次通电后，按照工程师指导，在控制面板中将默认英文语言切换为中文；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">4</span>
|
||
<div class="responsibility-text-compact">
|
||
熟练使用校准路径操作指令：通过路径控制面板 > 校准 > 校准参数进入设置界面，逐项理解校准过程所涉及的参数内容；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">5</span>
|
||
<div class="responsibility-text-compact">
|
||
连接并标注I/O输入输出端口号：在电气工程师指导下完成DSQC652通讯板的I/O端口连接工作，并使用标签纸标明每组信号的用途与地址；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">6</span>
|
||
<div class="responsibility-text-compact">
|
||
参与抓取点pPick1/pPick2的位置设置：使用示教器调整机器人的抓取位置坐标，通过反复试抓和程序测试将XYZ偏移误差控制在±1mm以内；
|
||
</div>
|
||
</div>
|
||
<div class="responsibility-item-compact">
|
||
<span class="responsibility-number-compact">7</span>
|
||
<div class="responsibility-text-compact">
|
||
监控初始运行状态与异常报警：在自动运行阶段，全程观察指示灯与示教器显示，发现报警立即按流程暂停系统，并记录报警代码与动作状态。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="view-details-btn" onclick="openNonStandardProjectModalGSAP()">
|
||
<span>查看项目流程</span>
|
||
<i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 个人总结 -->
|
||
<section class="summary-section" id="summary">
|
||
<div class="container">
|
||
<h2 class="section-title text-white">个人总结</h2>
|
||
<div class="summary-content">
|
||
<p>
|
||
我是一名刚完成实习的大专毕业生，具备良好的学习能力与责任意识。在无人机结构设计项目中，我认真参与每一项结构设计与优化任务，注重沟通与细节处理，能在工程师指导下高效完成建模、仿真与测试等助理工作。
|
||
</p>
|
||
<p>
|
||
面对结构优化与成本控制等实际问题时，我也能积极参与分析与方案讨论。虽然目前经验尚浅，但我对工业产品设计充满兴趣，希望在今后的岗位中不断锤炼技能，持续成长为一名具备实战能力的结构设计人才。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section class="content-section" id="contact">
|
||
<div class="container">
|
||
<h2 class="section-title">联系方式</h2>
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<i class="fas fa-envelope"></i>
|
||
<h3>邮箱</h3>
|
||
<p>1215249066@qq.com</p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fas fa-phone"></i>
|
||
<h3>电话</h3>
|
||
<p>18337655429</p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fas fa-map-marker-alt"></i>
|
||
<h3>地址</h3>
|
||
<p>苏州市工业园区</p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fas fa-user-circle"></i>
|
||
<h3>期望职位</h3>
|
||
<p>工业产品设计师</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 返回顶部按钮 -->
|
||
<button class="scroll-top" id="scrollTop">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<!-- 图片模态框 -->
|
||
<div id="imageModal" class="image-modal">
|
||
<span class="image-modal-close" onclick="closeImageModal()">×</span>
|
||
<img class="image-modal-content" id="modalImg">
|
||
<div class="image-modal-caption" id="modalCaption"></div>
|
||
</div>
|
||
|
||
<!-- 项目详情弹窗 -->
|
||
<div id="responsibilitiesModal" class="responsibilities-modal">
|
||
<div class="responsibilities-modal-content">
|
||
<div class="responsibilities-modal-header">
|
||
<h3><i class="fas fa-drone me-2"></i>农田监测无人机结构设计项目详情</h3>
|
||
<span class="responsibilities-modal-close" onclick="closeResponsibilitiesModal()">×</span>
|
||
</div>
|
||
|
||
<!-- 顶部流程标签导航 -->
|
||
<div class="modal-top-tabs">
|
||
<button class="modal-tab-btn active" onclick="switchProcessTab('process1')">
|
||
<i class="fas fa-cogs"></i>
|
||
<span>结构设计</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchProcessTab('process2')">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>仿真评估</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchProcessTab('process3')">
|
||
<i class="fas fa-shield-alt"></i>
|
||
<span>耐久性设计</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchProcessTab('process4')">
|
||
<i class="fas fa-flask"></i>
|
||
<span>原型测试</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchProcessTab('process5')">
|
||
<i class="fas fa-dollar-sign"></i>
|
||
<span>成本优化</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 主要内容区域：左右两栏布局 -->
|
||
<div class="modal-main-content">
|
||
<!-- 左侧：流程图片区域 -->
|
||
<div class="modal-left-panel">
|
||
<div class="process-image-container">
|
||
<img id="current-process-image" src="public/农业监测无人机结构设计项目/1结构设计.png" alt="流程图片" class="process-image">
|
||
<div class="process-image-overlay">
|
||
<div class="process-image-title">项目流程可视化</div>
|
||
<div class="process-image-subtitle">详细工程设计流程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：流程内容区域 -->
|
||
<div class="modal-right-panel">
|
||
<div class="process-content-area">
|
||
|
||
<!-- 流程一：整机结构设计与布局 -->
|
||
<div id="process1-content" class="process-tab-content active">
|
||
<h4><i class="fas fa-cogs me-2"></i>整机结构设计与布局</h4>
|
||
<div class="process-description">
|
||
<p>基于农田场景对携带性、作业续航与平台稳定性的综合要求，设计结构围绕"轻量化+可折叠+易维护"目标展开，采用中置下沉式电池舱、可拆卸机臂与可拓展传感器仓布置方式，全面提升整机适应性。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>空载整机质量控制在≤2.8kg，碳纤维T700材质为主体承重框架；</li>
|
||
<li>采用380×300×120mm折叠尺寸，满足单兵背负携行限制；</li>
|
||
<li>电池仓中置下沉式布局，重心靠近中心板下缘，提升悬停稳定性；</li>
|
||
<li>钛合金双折叠铰链机构，复位精度±0.2°，可靠性通过3h振动台验证；</li>
|
||
<li>各部件结构接口标准化设计，支持后期多光谱/热成像/RTK模组接入。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程二：结构仿真与安全性评估 -->
|
||
<div id="process2-content" class="process-tab-content">
|
||
<h4><i class="fas fa-chart-line me-2"></i>结构仿真与安全性评估</h4>
|
||
<div class="process-description">
|
||
<p>针对飞行过程中面临的多维载荷、频率响应、气动干扰与跌落冲击等复杂因素，构建涵盖静力/模态/CFD/冲击等模块的多物理场仿真体系，进行飞行安全性与强度稳定性评估。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>静力分析基准：1.5G工况下结构安全系数≥2.0，实测为2.1；</li>
|
||
<li>模态仿真避开电机共振区（目标>400Hz），一阶频率为452Hz；</li>
|
||
<li>气动优化采用Fluent流场仿真，外形阻力系数下降18%；</li>
|
||
<li>冲击仿真基于LS-DYNA平台，模拟1.5m自然落地情形，最大应力低于屈服极限60%；</li>
|
||
<li>重点结构如电机座、折叠铰链区设局部加强结构并同步验证螺栓承载力与热胀预留。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程三：耐久性设计与三防处理 -->
|
||
<div id="process3-content" class="process-tab-content">
|
||
<h4><i class="fas fa-shield-alt me-2"></i>耐久性设计与三防处理</h4>
|
||
<div class="process-description">
|
||
<p>针对农业作业中的重复折叠、泥沙侵蚀与高温高湿环境，开展抗疲劳结构细化设计与三防处理，提升无人机在全周期内的可靠运行能力。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>关键节点疲劳设计寿命≥2000次折叠循环，实测达到2500次；</li>
|
||
<li>起落架防泥陷结构接地面积增加30%，有效避免陷入湿地；</li>
|
||
<li>电子舱结构等级为IP67，采用双道O型圈+防水透气阀；</li>
|
||
<li>表面涂层选用聚氨酯喷涂+金属件微弧氧化，通过96h盐雾试验验证；</li>
|
||
<li>散热系统优化后电机在35°C环境下作业温度下降至≤58°C。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程四：原型测试与结构迭代 -->
|
||
<div id="process4-content" class="process-tab-content">
|
||
<h4><i class="fas fa-flask me-2"></i>原型测试与结构迭代</h4>
|
||
<div class="process-description">
|
||
<p>通过实验室结构刚度/振动谱测试与田间环境实飞测试，评估整机性能指标并基于测试数据驱动结构迭代优化，提升系统性能与量产适配度。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>X/Y/Z三向刚度测试：目标≥180N/mm，实测X向185、Y向210、Z向152（Z向后续加筋）；</li>
|
||
<li>振动谱传递函数覆盖50–500Hz频段，无共振点重叠峰值；</li>
|
||
<li>野外测试场景涵盖泥泞地起降、高温照射与果树穿行，暴露问题并完成3项结构修改；</li>
|
||
<li>结构迭代通过仿真-验证-重构闭环，最终实测抗风等级达7级（13.8m/s紊流场测试）。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程五：成本优化与量产适配 -->
|
||
<div id="process5-content" class="process-tab-content">
|
||
<h4><i class="fas fa-dollar-sign me-2"></i>成本优化与量产适配</h4>
|
||
<div class="process-description">
|
||
<p>在确保性能指标满足基础上，开展结构BOM精简、标准件归类与国产替代，控制结构件总成本在可量产范围内，满足产业化推广预期。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>碳纤维改为国产T700替代东丽碳布，刚度差异<3%，单价下降21%；</li>
|
||
<li>钛合金折叠件由原CNC改为批量铸造，良率>85%，成本下降34%；</li>
|
||
<li>公差标准宽松至±0.15mm，降低CNC工时约18%；</li>
|
||
<li>螺钉统一为M3规格，标准件型号压缩至3种，便于装配与库存管理；</li>
|
||
<li>最终结构总成本为3050元，低于目标上限3200元。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智能手表项目详情弹窗 -->
|
||
<div id="watchProjectModal" class="responsibilities-modal">
|
||
<div class="responsibilities-modal-content">
|
||
<div class="responsibilities-modal-header">
|
||
<h3><i class="fas fa-mobile-alt me-2"></i>智能手表整体结构设计项目详情</h3>
|
||
<span class="responsibilities-modal-close" onclick="closeWatchProjectModalGSAP()">×</span>
|
||
</div>
|
||
|
||
<!-- 顶部流程标签导航 -->
|
||
<div class="modal-top-tabs">
|
||
<button class="modal-tab-btn active" onclick="switchWatchProcessTab('watch-process1')">
|
||
<i class="fas fa-microchip"></i>
|
||
<span>主板方案</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchWatchProcessTab('watch-process2')">
|
||
<i class="fas fa-ruler-combined"></i>
|
||
<span>设计指引</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchWatchProcessTab('watch-process3')">
|
||
<i class="fas fa-palette"></i>
|
||
<span>外形设计</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchWatchProcessTab('watch-process4')">
|
||
<i class="fas fa-cube"></i>
|
||
<span>结构建模</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 主要内容区域：左右两栏布局 -->
|
||
<div class="modal-main-content">
|
||
<!-- 左侧：流程图片区域 -->
|
||
<div class="modal-left-panel">
|
||
<div class="process-image-container">
|
||
<img id="current-watch-process-image" src="public/智能手表整体结构设计/1芯片选型.png" alt="流程图片" class="process-image">
|
||
<div class="process-image-overlay">
|
||
<div class="process-image-title">项目流程可视化</div>
|
||
<div class="process-image-subtitle">详细设计开发流程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：流程内容区域 -->
|
||
<div class="modal-right-panel">
|
||
<div class="process-content-area">
|
||
|
||
<!-- 流程一：主板方案的确定 -->
|
||
<div id="watch-process1-content" class="process-tab-content active">
|
||
<h4><i class="fas fa-microchip me-2"></i>主板方案的确定</h4>
|
||
<div class="process-description">
|
||
<p>本流程旨在确定主板开发方式，作为结构设计的起点。需在"外购"与"自研"方案中选择，分别对应快速对接与功能定制路径。结构工程师需基于ID初稿完成主板配合参数设定、模块堆叠规划及设计边界定义，保障结构方案与主板方案同步推进。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助提取主板结构关键尺寸数据：</strong>逐项整理主板关键部件的位置与尺寸信息，如USB接口、连接器高度等，为后续ID与MD协同提供精确参考。</li>
|
||
<li><strong>参与主板类型分析与记录选型理由：</strong>在结构工程师的讲解下，初步掌握了主板外购与自研两类方案的差异点，并整理出一份选型依据笔记，提升了对产品定位与结构适配性的理解。</li>
|
||
<li><strong>完成结构输入资料的初步归档：</strong>在工程师指导下，将关键的主板结构信息与参数整理成表格文档，作为后续建模的设计依据。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程二：设计指引的制作 -->
|
||
<div id="watch-process2-content" class="process-tab-content">
|
||
<h4><i class="fas fa-ruler-combined me-2"></i>设计指引的制作</h4>
|
||
<div class="process-description">
|
||
<p>本流程聚焦输出主板结构限制与整机尺寸，为ID提供外观设计依据。结构工程师通过绘制六视图、制定装配空间建议与材料工艺参数，建立外观与结构之间的技术协同机制，确保设计方向符合后续实现与生产要求。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>独立完成主板六视图的初绘工作：</strong>根据主板3D图纸尝试绘制了标准六视图，在不断调整投影角度和尺寸标注中掌握了二维图纸的表达方式，并逐步熟悉了制图规范。</li>
|
||
<li><strong>参与整机厚度尺寸的计算推导：</strong>协助结构师复核计算公式，将上下壳厚度、主板尺寸等进行尺寸累加，制作了结构尺寸计算表，帮助ID部门更直观掌握边界限制。</li>
|
||
<li><strong>整理结构装配间隙的设计：</strong>在设计指引制定过程中，根据电池、电感器等元件分布，协助标注关键区域间隙建议值，帮助防止后续出现堆叠冲突问题。</li>
|
||
<li><strong>记录结构材料建议与适配标准：</strong>主动查阅ABS、铝合金等材料特性，并整理ISO标准编号及适用范围，形成了《材料建议参考表》，支持ID在材料选择上更有依据。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程三：ID外形设计与方案确认 -->
|
||
<div id="watch-process3-content" class="process-tab-content">
|
||
<h4><i class="fas fa-palette me-2"></i>ID外形设计与方案确认</h4>
|
||
<div class="process-description">
|
||
<p>本流程围绕外观方案筛选与结构可行性审查展开。ID设计师提交多风格草图供客户评审，结构工程师同步评估外观工艺实现性，提出必要优化建议。通过联合评审与确认，确保设计在视觉效果与工程落地间取得平衡。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>参与用户偏好图像资料的收集任务：</strong>主动浏览电商平台与品牌官网，筛选用户喜欢的表壳样式与颜色搭配，协助制作了一份风格趋势图谱，用于支持ID部门的设计灵感发散。</li>
|
||
<li><strong>协助准备多套效果图展示文件：</strong>根据建模输出文件制作旋转图、线框图和配色图，并分类整理成清单，支持评审人员更清晰地理解每套方案的视觉风格。</li>
|
||
<li><strong>跟踪客户修改意见并整理变更版本：</strong>客户提出修改建议后，将变动部分用图示方式整理，并配合工程师完成新旧版本的对照表，提升了对设计变更控制的理解能力。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程四：结构建模与初步拆件 -->
|
||
<div id="watch-process4-content" class="process-tab-content">
|
||
<h4><i class="fas fa-cube me-2"></i>结构建模与初步拆件</h4>
|
||
<div class="process-description">
|
||
<p>结构工程师根据ID线框图完成外观建模与内支撑设计，并开展初步拆件与装配逻辑构建。该阶段强调建模精度、结构强度及拆件可制造性，确保设计方案可顺利进入手板验证与后续试产阶段。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>导入外形图稿并建立初始建模环境：</strong>将ID线稿导入Pro/E软件平台，配置模型单位、图层样式等设置，协助建立适合建模的初始工作界面，熟悉了建模准备工作的基本流程。</li>
|
||
<li><strong>协助完成上壳体初步建模任务：</strong>在建模阶段，根据图稿轮廓线手动调整曲率参数，练习了曲面建模与拔模角设置，掌握了智能穿戴产品在结构建模中的重点难点。</li>
|
||
<li><strong>参与结构装配关系表的编辑工作：</strong>协助为各个零件命名并建立装配层级表，如主板、电池、按钮、壳体等，并在软件中设置装配关系，初步理解了产品的总装结构体系。</li>
|
||
<li><strong>完成可视外观件的拆件建模尝试：</strong>在工程师监督下，独立完成了按键部件、支撑柱等几个可视结构件的建模，练习了圆角、倒角等细节操作，加深了对零件特征的把握。</li>
|
||
<li><strong>输出用于手板加工的3D模型文件：</strong>根据建模图档导出STP和IGS格式文件，并配合工程师检查模型闭合情况和误差范围，确保输出文件符合手板厂的加工标准。</li>
|
||
<li><strong>记录手板到样后的验证反馈信息：</strong>收到手板样品后，协助记录装配配合、结构稳定性、外观间隙等实际表现，并归档成反馈表，帮助结构团队进行后续优化设计。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 机械加工工艺项目详情弹窗 -->
|
||
<div id="machiningProjectModal" class="responsibilities-modal">
|
||
<div class="responsibilities-modal-content">
|
||
<div class="responsibilities-modal-header">
|
||
<h3><i class="fas fa-cogs me-2"></i>铝合金3D零件CNC数控编程项目详情</h3>
|
||
<span class="responsibilities-modal-close" onclick="closeMachiningProjectModalGSAP()">×</span>
|
||
</div>
|
||
|
||
<!-- 顶部流程标签导航 -->
|
||
<div class="modal-top-tabs">
|
||
<button class="modal-tab-btn active" onclick="switchMachiningProcessTab('machining-process1')">
|
||
<i class="fas fa-cube"></i>
|
||
<span>CAD建模</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process2')">
|
||
<i class="fas fa-route"></i>
|
||
<span>工艺规划</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process3')">
|
||
<i class="fas fa-code"></i>
|
||
<span>CAM编程</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process4')">
|
||
<i class="fas fa-play"></i>
|
||
<span>仿真验证</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process5')">
|
||
<i class="fas fa-cogs"></i>
|
||
<span>设备设定</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process6')">
|
||
<i class="fas fa-play"></i>
|
||
<span>设备操作</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process7')">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>品质检验</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process8')">
|
||
<i class="fas fa-tools"></i>
|
||
<span>产品后处理</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchMachiningProcessTab('machining-process9')">
|
||
<i class="fas fa-shipping-fast"></i>
|
||
<span>包装出货</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 主要内容区域：左右两栏布局 -->
|
||
<div class="modal-main-content">
|
||
<!-- 左侧：流程图片区域 -->
|
||
<div class="modal-left-panel">
|
||
<div class="process-image-container">
|
||
<img id="current-machining-process-image" src="public/铝合金3D零件CNC数控编程/流程一：CAD三维模型设计.jpg" alt="流程图片" class="process-image">
|
||
<div class="process-image-overlay">
|
||
<div class="process-image-title">项目流程可视化</div>
|
||
<div class="process-image-subtitle">详细加工工艺流程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：流程内容区域 -->
|
||
<div class="modal-right-panel">
|
||
<div class="process-content-area">
|
||
|
||
<!-- 流程一：CAD三维模型设计 -->
|
||
<div id="machining-process1-content" class="process-tab-content active">
|
||
<h4><i class="fas fa-cube me-2"></i>CAD三维模型设计</h4>
|
||
<div class="process-description">
|
||
<p>根据图纸要求，使用三维建模软件完成零件建模，并明确装配、公差等细节，为后续加工提供基础。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助导入CAD模型并设置初始坐标：</strong>根据工程师提供的STEP图纸，在mastercam中完成三维零件模型导入，并尝试在工件设置界面指定加工坐标系，了解G54设定原则与原点偏移设置。</li>
|
||
<li><strong>学习识别铝合金零件结构特征：</strong>通过查看模型结构，了解哪些区域属于粗加工、精加工或倒角区域，标记出关键尺寸、曲面过渡等加工重点。</li>
|
||
<li><strong>熟悉零件公差信息与技术要求：</strong>在图纸标注中协助识别形位公差、螺纹孔参数、公差范围，并配合记录重点尺寸作为编程参考依据。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程二：加工工艺分析与规划 -->
|
||
<div id="machining-process2-content" class="process-tab-content">
|
||
<h4><i class="fas fa-route me-2"></i>加工工艺分析与规划</h4>
|
||
<div class="process-description">
|
||
<p>根据零件结构特点，制定合理的加工顺序和刀具组合，并规划装夹方式与冷却方式。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>跟随工程师了解工艺流程制定：</strong>记录粗加工、半精加工和精加工的顺序，理解每一阶段用什么刀具和加工方式。</li>
|
||
<li><strong>协助整理工艺卡内容：</strong>将每段工序的参数、换刀点、冷却方式等信息录入表格中，便于后续程序设定。</li>
|
||
<li><strong>学习刀具选择逻辑：</strong>通过对比不同刀具形状与功能，了解什么时候选用平刀、球刀或圆鼻刀。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程三：CAM编程（刀具路径生成） -->
|
||
<div id="machining-process3-content" class="process-tab-content">
|
||
<h4><i class="fas fa-code me-2"></i>CAM编程（刀具路径生成）</h4>
|
||
<div class="process-description">
|
||
<p>在CAM软件中生成合适的刀具路径，并输出加工程序代码。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助导入模型并设定路径策略：</strong>在mastercam中尝试设定粗加工路径，并输入切深、切宽等参数进行初步仿真。</li>
|
||
<li><strong>跟随操作精加工路径设置：</strong>配合工程师设置Z-Level路径，调节扫描步距，学习控制表面光洁度。</li>
|
||
<li><strong>输出NC代码并记录刀具信息：</strong>根据路径导出G-code文件，并整理T1~T3刀具编号与对应补偿参数。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程四：路径模拟验证 -->
|
||
<div id="machining-process4-content" class="process-tab-content">
|
||
<h4><i class="fas fa-play me-2"></i>路径模拟验证</h4>
|
||
<div class="process-description">
|
||
<p>通过仿真功能检查刀路是否合理，确保不会发生干涉或加工错误。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>使用mastercam进行刀路仿真演示：</strong>观察路径动画是否顺畅，有无干涉或刀具异常跳动的情况。</li>
|
||
<li><strong>协助检查路径安全性：</strong>重点关注Z轴安全抬刀动作是否到位，路径之间有没有过切或重叠。</li>
|
||
<li><strong>学习记录路径修正建议：</strong>将仿真中发现的问题反馈给工程师并参与路径优化调整。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程五：CNC加工设备设定与校准 -->
|
||
<div id="machining-process5-content" class="process-tab-content">
|
||
<h4><i class="fas fa-cogs me-2"></i>CNC加工设备设定与校准</h4>
|
||
<div class="process-description">
|
||
<p>在加工中心上安装刀具、设定坐标、检查夹具状态，确保设备处于加工就绪状态。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助安装刀具并记录长度补偿值：</strong>根据刀具编号顺序安装，并用对刀仪测量长度误差，录入系统。</li>
|
||
<li><strong>跟随设定G54坐标系：</strong>配合工程师测量工件左下角原点位置，并手动录入偏移值。</li>
|
||
<li><strong>参与夹具安装检查：</strong>协助安装压板与定位销，确保夹紧后工件稳定不松动。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程六：CNC加工设备操作 -->
|
||
<div id="machining-process6-content" class="process-tab-content">
|
||
<h4><i class="fas fa-play me-2"></i>CNC加工设备操作</h4>
|
||
<div class="process-description">
|
||
<p>导入加工程序，执行试切和正式加工，监控加工过程与设备状态。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助进行试切操作：</strong>导入程序后执行浅层切削，观察路径是否正常，记录实际切削情况。</li>
|
||
<li><strong>实时观察刀具与排屑状态：</strong>加工过程中注意听机床运行声音，查看屑流是否顺畅。</li>
|
||
<li><strong>协助判断刀具是否磨损：</strong>加工完毕后查看切削面质量与刀尖状态，有问题及时汇报。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程七：品质检验 -->
|
||
<div id="machining-process7-content" class="process-tab-content">
|
||
<h4><i class="fas fa-check-circle me-2"></i>品质检验</h4>
|
||
<div class="process-description">
|
||
<p>使用量具对关键尺寸、几何精度进行检测，确保产品符合设计要求。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>跟随使用卡尺和三坐标进行测量：</strong>协助测量外形尺寸、孔位位置，记录偏差值。</li>
|
||
<li><strong>学习对照图纸判断误差范围：</strong>了解哪些误差是允许的，哪些超出了设计要求。</li>
|
||
<li><strong>整理检验数据表：</strong>将测量结果录入Excel表格并命名归档，便于后续查阅。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程八：产品后处理 -->
|
||
<div id="machining-process8-content" class="process-tab-content">
|
||
<h4><i class="fas fa-tools me-2"></i>产品后处理</h4>
|
||
<div class="process-description">
|
||
<p>完成去毛刺、表面处理等工序，提升产品的外观与防腐性能。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助进行去毛刺处理：</strong>使用手工刮刀和气动工具处理工件边缘，使其更光滑不伤手。</li>
|
||
<li><strong>跟随执行表面处理流程：</strong>配合进行喷砂与阳极氧化，了解工艺流程与操作注意事项。</li>
|
||
<li><strong>检查表面缺陷情况：</strong>协助检验是否有划伤、斑点或处理不均匀的地方，提出返工建议。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程九：清洁、包装与出货 -->
|
||
<div id="machining-process9-content" class="process-tab-content">
|
||
<h4><i class="fas fa-shipping-fast me-2"></i>清洁、包装与出货</h4>
|
||
<div class="process-description">
|
||
<p>完成产品最终清洁、包装和出货准备工作，确保产品以最佳状态交付客户。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助完成清洗流程：</strong>使用超声波设备清洗残油与碎屑，确保工件干净无污渍。</li>
|
||
<li><strong>参与打包与标签粘贴：</strong>根据要求使用防静电袋、泡棉等材料分类打包，并贴上二维码标识。</li>
|
||
<li><strong>整理出货清单与交付资料：</strong>协助打印质检报告与加工批次单，确认每项内容无误后提交。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自动化控制项目详情弹窗 -->
|
||
<div id="automationProjectModal" class="responsibilities-modal">
|
||
<div class="responsibilities-modal-content">
|
||
<div class="responsibilities-modal-header">
|
||
<h3><i class="fas fa-robot me-2"></i>气动搬运机器人PLC编程设计项目详情</h3>
|
||
<span class="responsibilities-modal-close" onclick="closeAutomationProjectModalGSAP()">×</span>
|
||
</div>
|
||
|
||
<!-- 顶部流程标签导航 -->
|
||
<div class="modal-top-tabs">
|
||
<button class="modal-tab-btn active" onclick="switchAutomationProcessTab('automation-process1')">
|
||
<i class="fas fa-sitemap"></i>
|
||
<span>结构设计</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchAutomationProcessTab('automation-process2')">
|
||
<i class="fas fa-route"></i>
|
||
<span>控制逻辑</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchAutomationProcessTab('automation-process3')">
|
||
<i class="fas fa-plug"></i>
|
||
<span>I/O分配</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchAutomationProcessTab('automation-process4')">
|
||
<i class="fas fa-code"></i>
|
||
<span>程序设计</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchAutomationProcessTab('automation-process5')">
|
||
<i class="fas fa-desktop"></i>
|
||
<span>监控系统</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchAutomationProcessTab('automation-process6')">
|
||
<i class="fas fa-wrench"></i>
|
||
<span>整机联调</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 主要内容区域：左右两栏布局 -->
|
||
<div class="modal-main-content">
|
||
<!-- 左侧：流程图片区域 -->
|
||
<div class="modal-left-panel">
|
||
<div class="process-image-container">
|
||
<img id="current-automation-process-image" src="public/气动搬运机器人PLC编程设计/流程一：搬运机器人结构与功能设计.jpg" alt="流程图片" class="process-image">
|
||
<div class="process-image-overlay">
|
||
<div class="process-image-title">项目流程可视化</div>
|
||
<div class="process-image-subtitle">详细自动化控制流程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：流程内容区域 -->
|
||
<div class="modal-right-panel">
|
||
<div class="process-content-area">
|
||
|
||
<!-- 流程一：搬运机器人结构与功能设计 -->
|
||
<div id="automation-process1-content" class="process-tab-content active">
|
||
<h4><i class="fas fa-sitemap me-2"></i>搬运机器人结构与功能设计</h4>
|
||
<div class="process-description">
|
||
<p>本流程主要确定气动搬运机器人各个机构（升降、旋转、伸缩、抓取等）的功能和结构方案，明确传感器、电机和气缸的安装位置及工作模式，为PLC控制系统后续逻辑设计提供依据。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>协助整理各机构的动作顺序和功能描述：制作"动作逻辑流程图"，便于后续PLC逻辑开发。</li>
|
||
<li>跟随工程师学习并记录传感器、气缸、电磁阀的型号：记录参数及安装位置，初步掌握其工作原理。</li>
|
||
<li>帮助收集设备手册、规格参数并进行分类整理：形成方便查看的资料库。</li>
|
||
<li>协助绘制结构部件和传感器的简化示意图：为I/O分配和接线提供参考资料。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程二：控制逻辑与搬运策略设计 -->
|
||
<div id="automation-process2-content" class="process-tab-content">
|
||
<h4><i class="fas fa-route me-2"></i>控制逻辑与搬运策略设计</h4>
|
||
<div class="process-description">
|
||
<p>此流程确定搬运机器人的完整工作逻辑，从启动、箱体检测、抓取、搬运、放置到归位等一系列动作，并制定异常应对方法。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>跟随工程师理解搬运任务的逻辑流程：帮助制作"动作优先级表"，明确各个机器人的搬运方向和条件。</li>
|
||
<li>协助工程师在流程图中标注触发的条件和复位的条件：学习逻辑判断关系。</li>
|
||
<li>帮助测试不同搬运策略的执行情况：如出货口拥堵时的跳转处理，然后记录测试数据。</li>
|
||
<li>编写简单的逻辑描述文档：供工程师在编程时参考。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程三：PLC软硬件选型与I/O分配 -->
|
||
<div id="automation-process3-content" class="process-tab-content">
|
||
<h4><i class="fas fa-plug me-2"></i>PLC软硬件选型与I/O分配</h4>
|
||
<div class="process-description">
|
||
<p>根据机器人搬运动作的需求和设备接口数量，完成PLC主机和扩展模块选型，分配各个传感器、气缸、电机的I/O点，并绘制接线图。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>协助工程师整理I/O点表：核对输入点（传感器、按钮等）和输出点（电磁阀、电机等）的对应关系。</li>
|
||
<li>跟随检查PLC CPU226和扩展模块的接线情况：贴线号标签，保证接线清晰。</li>
|
||
<li>参与绘制和更新简化的接线示意图：便于后续调试。</li>
|
||
<li>协助整理I/O分配文件、端子排位置图并进行备份。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程四：LAD程序设计与仿真调试 -->
|
||
<div id="automation-process4-content" class="process-tab-content">
|
||
<h4><i class="fas fa-code me-2"></i>LAD程序设计与仿真调试</h4>
|
||
<div class="process-description">
|
||
<p>编写并测试LAD梯形图程序，验证动作逻辑是否符合预想的情况并进行优化。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>协助导入I/O点表至程序中：检查变量命名是否统一。</li>
|
||
<li>帮助监控PLC在线运行状态：记录各传感器输入信号及输出动作是否正常。</li>
|
||
<li>整理调试发现的问题并形成问题清单：供后续优化的时候作为参考。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程五：搭建监控系统 -->
|
||
<div id="automation-process5-content" class="process-tab-content">
|
||
<h4><i class="fas fa-desktop me-2"></i>搭建监控系统</h4>
|
||
<div class="process-description">
|
||
<p>搭建人机交互界面，实现设备启停控制、状态显示、报警记录等功能，方便操作和维护。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>协助整理界面上按钮、指示灯、报警信息的变量清单：并与PLC变量表对照。</li>
|
||
<li>帮助工程师对组态界面元素进行命名和分类：使界面结构更直观。</li>
|
||
<li>协助测试界面功能是否能正确的触发PLC动作：同时还记录通讯异常问题。</li>
|
||
<li>整理每日搬运数据和报警数据的导出文件：进行简单分类归档。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程六：整机联调与异常处理 -->
|
||
<div id="automation-process6-content" class="process-tab-content">
|
||
<h4><i class="fas fa-wrench me-2"></i>整机联调与异常处理</h4>
|
||
<div class="process-description">
|
||
<p>整合PLC程序、气动执行机构和组态系统，进行全流程搬运任务测试，排查和解决异常问题。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li>协助工程师完成整机的启动前检查：确认急停、限位、气源等条件是否正常。</li>
|
||
<li>在调试过程中负责触发各类传感器、按钮：协助确认动作链条是否完整。</li>
|
||
<li>记录异常停机、报警等问题的发生条件：形成异常记录表并提交工程师。</li>
|
||
<li>协助整理最终的接线图、程序文件、调试记录和版本说明：做好文件的归档工作。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 非标自动化项目详情弹窗 -->
|
||
<div id="nonStandardProjectModal" class="responsibilities-modal">
|
||
<div class="responsibilities-modal-content">
|
||
<div class="responsibilities-modal-header">
|
||
<h3><i class="fas fa-tools me-2"></i>物流ABB码垛机器人安装调试项目详情</h3>
|
||
<span class="responsibilities-modal-close" onclick="closeNonStandardProjectModalGSAP()">×</span>
|
||
</div>
|
||
|
||
<!-- 顶部流程标签导航 -->
|
||
<div class="modal-top-tabs">
|
||
<button class="modal-tab-btn active" onclick="switchNonStandardProcessTab('non-standard-process1')">
|
||
<i class="fas fa-tools"></i>
|
||
<span>设备安装</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process2')">
|
||
<i class="fas fa-power-off"></i>
|
||
<span>系统初始化</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process3')">
|
||
<i class="fas fa-crosshairs"></i>
|
||
<span>运动校准</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process4')">
|
||
<i class="fas fa-plug"></i>
|
||
<span>外围配置</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process5')">
|
||
<i class="fas fa-drafting-compass"></i>
|
||
<span>坐标系标定</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process6')">
|
||
<i class="fas fa-code"></i>
|
||
<span>程序调试</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process7')">
|
||
<i class="fas fa-play-circle"></i>
|
||
<span>自动运行</span>
|
||
</button>
|
||
<button class="modal-tab-btn" onclick="switchNonStandardProcessTab('non-standard-process8')">
|
||
<i class="fas fa-clipboard-check"></i>
|
||
<span>验收维护</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 主要内容区域：左右两栏布局 -->
|
||
<div class="modal-main-content">
|
||
<!-- 左侧：流程图片区域 -->
|
||
<div class="modal-left-panel">
|
||
<div class="process-image-container">
|
||
<img id="current-non-standard-process-image" src="public/物流 ABB 码垛机器人安装调试/1流程一：.jpeg" alt="流程图片" class="process-image">
|
||
<div class="process-image-overlay">
|
||
<div class="process-image-title">项目流程可视化</div>
|
||
<div class="process-image-subtitle">详细安装调试流程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：流程内容区域 -->
|
||
<div class="modal-right-panel">
|
||
<div class="process-content-area">
|
||
|
||
<!-- 流程一：设备安装部署 -->
|
||
<div id="non-standard-process1-content" class="process-tab-content active">
|
||
<h4><i class="fas fa-tools me-2"></i>设备安装部署</h4>
|
||
<div class="process-description">
|
||
<p>这一阶段主要完成ABB码垛机器人机体与控制柜的就位安装，以及电缆连接与安全检验。在工程师指导下，参与叉车或吊车进行设备上架，对基座进行平整度测量，并对动力、电缆与信号线进行布线整理与标记。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>协助完成机器人本体吊装与精度对位：</strong>在工程师的指导下，协助使用叉车完成机器人本体的摆放与固定，并使用水平仪与卷尺反复测量基座，控制安装误差在标准范围内（0.5mm/m以内），确保设备稳定。</li>
|
||
<li><strong>核对控制柜供电参数与接线标准：</strong>根据电气接线图，逐一确认控制柜接入电源电压是否为380V±10%，使用万用表测试接地电阻小于4Ω，并对接线端子进行拧紧与标签确认。</li>
|
||
<li><strong>协助执行安装后初次电气检查：</strong>参与整套系统的电气安全检查，重点排查空接头、裸露铜线、端子松动等隐患，确保系统安全上电。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程二：系统初始化 -->
|
||
<div id="non-standard-process2-content" class="process-tab-content">
|
||
<h4><i class="fas fa-power-off me-2"></i>系统初始化</h4>
|
||
<div class="process-description">
|
||
<p>首次上电后，将示教器语言切换为中文，并通过U盘或内部存储备份系统程序与参数。执行语言设置、文件备份、版本命名，以及整理操作日志。这一步目的在于确保系统配置完整、安全，并便于后续恢复。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>完成示教器语言环境的切换操作：</strong>首次通电后，按照工程师指导，在控制面板中将默认英文语言切换为中文，并学习了基础的菜单路径和操作命令，提升操作熟练度。</li>
|
||
<li><strong>协助进行项目文件初次备份：</strong>使用U盘将机器人系统初始配置（*.sys文件）与设备参数导出，并为备份文件命名统一格式，确保数据在后续调试前完整保存。</li>
|
||
<li><strong>进行USB与U盘格式匹配测试：</strong>使用FAT32格式化U盘进行兼容性测试，确保所有机器人示教器都能正确识别备份设备并读写文件。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程三：运动校准 -->
|
||
<div id="non-standard-process3-content" class="process-tab-content">
|
||
<h4><i class="fas fa-crosshairs me-2"></i>运动校准</h4>
|
||
<div class="process-description">
|
||
<p>这一步是在更换电池、系统报警或断电后，对机器人六个关节进行转数计数器归零校准，误差需控制在±0.1°内。我协助手动归零、参数录入、误差记录和报告归档，确保关节运动精准。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>熟练使用校准路径操作指令：</strong>通过路径控制面板 > 校准 > 校准参数进入设置界面，逐项理解校准过程所涉及的参数内容，并参与输入初始值。</li>
|
||
<li><strong>记录机械位移前后角度偏差值：</strong>在每一轴归零完成后，我手动记录前后角度的变化值，并形成表格比对，确保误差控制在±0.1°以内。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程四：外围配置 -->
|
||
<div id="non-standard-process4-content" class="process-tab-content">
|
||
<h4><i class="fas fa-plug me-2"></i>外围配置</h4>
|
||
<div class="process-description">
|
||
<p>此环节涵盖I/O信号与外围设备连接、工具TCP点校准、载荷识别等。我参与DSQC652通信板端口映射、电缆连接、安全信号测试、TCP四点法测量和loadIdentify命令校验载荷。此配置确保机器人与抓手、PLC、传感器等设备之间协作准确无误。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>连接并标注I/O输入输出端口号：</strong>在电气工程师指导下完成DSQC652通讯板的I/O端口连接工作，并使用标签纸标明每组信号的用途与地址。</li>
|
||
<li><strong>校验信号线与机器人动作响应关系：</strong>通过示教器执行I/O测试，操作输入按钮并观察输出指示灯的动作，确认信号映射是否准确并及时反馈异常。</li>
|
||
<li><strong>参与PROFIBUS通信协议设置：</strong>在机器人与PLC连接调试过程中，我学习并记录了PROFIBUS地址分配、波特率设置及总线状态检查的操作流程。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程五：坐标系标定 -->
|
||
<div id="non-standard-process5-content" class="process-tab-content">
|
||
<h4><i class="fas fa-drafting-compass me-2"></i>坐标系标定</h4>
|
||
<div class="process-description">
|
||
<p>使用三点法建立工件坐标系（X1/X2/Y1），设置纸箱长宽高变量（nBoxL/W/H），并执行多次重复定位测试。协助输入数据、验证定位偏差、记录误差并形成标准操作文档，为精准码垛提供坐标依据。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>辅助设置工件坐标系原点：</strong>在工程师指导下，建立WOBJ1工件坐标系，采用三点法设置X1/X2/Y1坐标点，确保坐标系统位置符合实际物料摆放位置。</li>
|
||
<li><strong>记录坐标姿态角度偏差数值：</strong>检测坐标系的偏差情况，记录各轴的旋转角度，并反馈给技术组，用于后续偏差修正。</li>
|
||
<li><strong>协助输入纸箱尺寸参数变量：</strong>根据实测纸箱尺寸按毫米准确输入，在控制面板中设置nBoxL、nBoxW、nBoxH参数，确保系统按照正确尺寸码垛。</li>
|
||
<li><strong>执行重复定位精度验证测试：</strong>在编程测试环节，多次执行同一坐标移动动作，记录重复定位的偏差情况，帮助工程师评估系统稳定性。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程六：程序调试 -->
|
||
<div id="non-standard-process6-content" class="process-tab-content">
|
||
<h4><i class="fas fa-code me-2"></i>程序调试</h4>
|
||
<div class="process-description">
|
||
<p>通过手动模式调试RAPID程序，调整抓取点（如pPick1/pPick2）位置、箱子数量参数（nCount），并进行低速动作测试（≤250 mm/s）以及异常记录。测试各动作稳定性，提出路径优化建议，并对程序版本进行命名与备份。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>参与抓取点pPick1/pPick2的位置设置：</strong>使用示教器调整机器人的抓取位置坐标，通过反复试抓和程序测试将XYZ偏移误差控制在±1mm以内。</li>
|
||
<li><strong>辅助调节码垛总数量变量nCount数值：</strong>根据客户需求，在程序中修改nCount数组项目值，确保每个垛的纸箱数量符合设定的生产标准。</li>
|
||
<li><strong>执行调试模式下的动作测试操作：</strong>在手动调试阶段，将速度设定为250mm/s以下，并操作使能开关，模拟机器人逐步动作，观察抓放动作逻辑。</li>
|
||
<li><strong>协助优化动作路径与顺序逻辑：</strong>依据运行结果，提出优化建议，如调整抓取顺序或间歇停顿路径，以提升码垛效率和稳定性。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程七：自动运行 -->
|
||
<div id="non-standard-process7-content" class="process-tab-content">
|
||
<h4><i class="fas fa-play-circle me-2"></i>自动运行</h4>
|
||
<div class="process-description">
|
||
<p>程序确认后切换至自动模式（控制柜第4挡），以50%以下速度运行完整码垛流程。监控系统运行状态、中断恢复操作（PP移至Main）、统计运行效率数据。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>监控初始运行状态与异常报警：</strong>在自动运行阶段，全程观察指示灯与示教器显示，发现报警立即按流程暂停系统，并记录报警代码与动作状态。</li>
|
||
<li><strong>模拟中断恢复操作流程：</strong>测试系统暂停后，执行"PP移至Main"操作，重新输入nCount值验证系统恢复能力，确保数据正确重新执行。</li>
|
||
<li><strong>统计自动运行的码垛效率数据：</strong>记录每个垛的完成时间、每层堆叠时间与纸箱计数表现，并生成效率统计表，帮助评估系统生产性能。</li>
|
||
<li><strong>整理自动运行测试记录文档：</strong>完成多轮运行后，我将测试数据、报警记录、恢复操作情况等整理为运行报告，便于项目汇报与验收。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程八：验收维护 -->
|
||
<div id="non-standard-process8-content" class="process-tab-content">
|
||
<h4><i class="fas fa-clipboard-check me-2"></i>验收维护</h4>
|
||
<div class="process-description">
|
||
<p>在项目验收阶段，参与精度测量、响应测试、编制维护计划（定期校准与备份）、整理操作手册草稿，并归档验收资料包提交项目组。</p>
|
||
</div>
|
||
<div class="process-highlights">
|
||
<h5><i class="fas fa-star me-2"></i>重要内容</h5>
|
||
<ul class="highlight-list">
|
||
<li><strong>整理维护操作手册草稿：</strong>结合验收与测试经验，编写了一份初步维护手册草稿，覆盖校准流程、电气检查和常见故障处理步骤。</li>
|
||
<li><strong>参与项目验收与精度测试：</strong>协助完成机器人重复定位精度、码垛精度等关键指标的测试，确保符合客户验收标准。</li>
|
||
<li><strong>建立定期维护计划：</strong>制定机器人定期校准、备份和清洁保养的时间表，确保设备长期稳定运行。</li>
|
||
<li><strong>整理项目资料包：</strong>归档项目过程中的所有技术文档、测试报告、程序文件等，便于后续维护和技术支持。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript库 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<!-- AOS JavaScript库已被GSAP替代 -->
|
||
<!-- <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> -->
|
||
<!-- 粒子背景库 -->
|
||
<script src="./particles.min.js"></script>
|
||
<!-- GSAP动画库 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
<!-- 自定义GSAP动画 -->
|
||
<script src="./gsap-animations.js"></script>
|
||
|
||
<script>
|
||
// 页面一开始就立即回到顶部
|
||
document.documentElement.scrollTop = 0;
|
||
document.body.scrollTop = 0;
|
||
|
||
// 页面刷新后自动回到顶部
|
||
function scrollToTop() {
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: 0,
|
||
behavior: 'instant' // 立即跳转，不使用平滑滚动
|
||
});
|
||
document.documentElement.scrollTop = 0; // 兼容性处理
|
||
document.body.scrollTop = 0; // 兼容性处理
|
||
}
|
||
|
||
// 页面刷新时强制回到顶部
|
||
function forceScrollToTop() {
|
||
// 强制设置历史记录中的滚动位置
|
||
if ('scrollRestoration' in history) {
|
||
history.scrollRestoration = 'manual';
|
||
}
|
||
|
||
// 立即滚动到顶部
|
||
scrollToTop();
|
||
|
||
// 延迟再次确保
|
||
setTimeout(scrollToTop, 0);
|
||
setTimeout(scrollToTop, 50);
|
||
}
|
||
|
||
// 简化的可见性修复 - 主要逻辑在GSAP动画文件中
|
||
function quickVisibilityFix() {
|
||
// 仅处理最关键的导航栏
|
||
const navbar = document.querySelector('.navbar');
|
||
if (navbar) {
|
||
navbar.style.opacity = '1';
|
||
navbar.style.visibility = 'visible';
|
||
navbar.style.transform = 'translateY(0)';
|
||
console.log('Quick navbar fix applied');
|
||
}
|
||
}
|
||
|
||
// 立即执行：强制回到顶部 + 可见性修复
|
||
forceScrollToTop();
|
||
quickVisibilityFix();
|
||
|
||
// 页面完全加载后也执行一次
|
||
window.addEventListener('load', function() {
|
||
forceScrollToTop();
|
||
quickVisibilityFix();
|
||
});
|
||
|
||
// 修复HTML结构嵌套问题
|
||
function fixHTMLStructure() {
|
||
const tabContent = document.querySelector('.experience-tab-content');
|
||
const industrialDesign = document.getElementById('industrial-design-content');
|
||
|
||
if (!tabContent || !industrialDesign) {
|
||
return;
|
||
}
|
||
|
||
// 查找并移动其他标签内容到正确位置
|
||
const machiningContent = document.getElementById('machining-content');
|
||
const automationContent = document.getElementById('automation-content');
|
||
const nonStandardContent = document.getElementById('non-standard-content');
|
||
|
||
// 将machining-content移动到正确位置
|
||
if (machiningContent && machiningContent.parentElement !== tabContent) {
|
||
tabContent.appendChild(machiningContent);
|
||
}
|
||
|
||
// 将automation-content移动到正确位置
|
||
if (automationContent && automationContent.parentElement !== tabContent) {
|
||
tabContent.appendChild(automationContent);
|
||
}
|
||
|
||
// 将non-standard-content移动到正确位置
|
||
if (nonStandardContent && nonStandardContent.parentElement !== tabContent) {
|
||
tabContent.appendChild(nonStandardContent);
|
||
}
|
||
}
|
||
|
||
// DOM加载完成后，让GSAP系统接管
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 首先修复HTML结构
|
||
fixHTMLStructure();
|
||
forceScrollToTop();
|
||
quickVisibilityFix();
|
||
});
|
||
|
||
// 页面隐藏时记录滚动位置为0，确保返回时在顶部
|
||
window.addEventListener('beforeunload', function() {
|
||
scrollToTop();
|
||
});
|
||
|
||
// 页面显示时确保在顶部
|
||
window.addEventListener('pageshow', function(event) {
|
||
forceScrollToTop();
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
// 初始化粒子背景 - 使用原版配置
|
||
particlesJS('particles-js', {
|
||
"particles": {
|
||
"number": {
|
||
"value": 100,
|
||
"density": {
|
||
"enable": true,
|
||
"value_area": 800
|
||
}
|
||
},
|
||
"color": {
|
||
"value": "#ffffff"
|
||
},
|
||
"shape": {
|
||
"type": "circle",
|
||
"stroke": {
|
||
"width": 0,
|
||
"color": "#888888"
|
||
},
|
||
"polygon": {
|
||
"nb_sides": 5
|
||
},
|
||
"image": {
|
||
"src": "img/github.svg",
|
||
"width": 100,
|
||
"height": 100
|
||
}
|
||
},
|
||
"opacity": {
|
||
"value": 0.5,
|
||
"random": false,
|
||
"anim": {
|
||
"enable": false,
|
||
"speed": 1,
|
||
"opacity_min": 0.1,
|
||
"sync": false
|
||
}
|
||
},
|
||
"size": {
|
||
"value": 5,
|
||
"random": true,
|
||
"anim": {
|
||
"enable": false,
|
||
"speed": 40,
|
||
"size_min": 0.1,
|
||
"sync": false
|
||
}
|
||
},
|
||
"line_linked": {
|
||
"enable": true,
|
||
"distance": 150,
|
||
"color": "#ffffff",
|
||
"opacity": 0.4,
|
||
"width": 1
|
||
},
|
||
"move": {
|
||
"enable": true,
|
||
"speed": 6,
|
||
"direction": "none",
|
||
"random": false,
|
||
"straight": false,
|
||
"out_mode": "out",
|
||
"attract": {
|
||
"enable": false,
|
||
"rotateX": 600,
|
||
"rotateY": 1200
|
||
}
|
||
}
|
||
},
|
||
"interactivity": {
|
||
"detect_on": "canvas",
|
||
"events": {
|
||
"onhover": {
|
||
"enable": true,
|
||
"mode": "repulse"
|
||
},
|
||
"onclick": {
|
||
"enable": true,
|
||
"mode": "push"
|
||
},
|
||
"resize": true
|
||
},
|
||
"modes": {
|
||
"grab": {
|
||
"distance": 400,
|
||
"line_linked": {
|
||
"opacity": 1
|
||
}
|
||
},
|
||
"bubble": {
|
||
"distance": 400,
|
||
"size": 40,
|
||
"duration": 2,
|
||
"opacity": 8,
|
||
"speed": 3
|
||
},
|
||
"repulse": {
|
||
"distance": 100
|
||
},
|
||
"push": {
|
||
"particles_nb": 4
|
||
},
|
||
"remove": {
|
||
"particles_nb": 2
|
||
}
|
||
}
|
||
},
|
||
"retina_detect": true,
|
||
"config_demo": {
|
||
"hide_card": false,
|
||
"background_color": "#b61924",
|
||
"background_image": "",
|
||
"background_position": "50% 50%",
|
||
"background_repeat": "no-repeat",
|
||
"background_size": "cover"
|
||
}
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
window.addEventListener('scroll', function() {
|
||
const navbar = document.getElementById('navbar');
|
||
const scrollTop = document.getElementById('scrollTop');
|
||
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
|
||
// 返回顶部按钮显示/隐藏
|
||
if (window.scrollY > 500) {
|
||
// 只有当按钮还没有显示时才添加show类和启动动画
|
||
if (!scrollTop.classList.contains('show')) {
|
||
scrollTop.classList.add('show');
|
||
|
||
// 使用统一的动画管理函数
|
||
if (typeof window.startScrollTopAnimation === 'function') {
|
||
window.startScrollTopAnimation();
|
||
}
|
||
}
|
||
} else {
|
||
// 隐藏按钮并停止动画
|
||
if (scrollTop.classList.contains('show')) {
|
||
scrollTop.classList.remove('show');
|
||
|
||
// 使用统一的动画管理函数
|
||
if (typeof window.stopScrollTopAnimation === 'function') {
|
||
window.stopScrollTopAnimation();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 平滑滚动
|
||
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.getElementById('scrollTop').addEventListener('click', function() {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
|
||
|
||
// ===== 导航栏滚动定位功能 =====
|
||
function initScrollSpy() {
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
if (sections.length === 0 || navLinks.length === 0) {
|
||
console.log('未找到section或nav-link元素');
|
||
return;
|
||
}
|
||
|
||
function updateActiveNavLink() {
|
||
let current = '';
|
||
const scrollPosition = window.scrollY + 100; // 添加偏移量，提前激活
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
const sectionId = section.getAttribute('id');
|
||
|
||
// 检查当前滚动位置是否在此section范围内
|
||
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
||
current = sectionId;
|
||
}
|
||
});
|
||
|
||
// 如果在页面顶部，激活第一个链接
|
||
if (window.scrollY === 0) {
|
||
current = 'home';
|
||
}
|
||
|
||
// 如果滚动到页面底部，激活最后一个可见的section
|
||
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {
|
||
const lastSection = Array.from(sections).pop();
|
||
if (lastSection) {
|
||
current = lastSection.getAttribute('id');
|
||
}
|
||
}
|
||
|
||
// 更新导航链接的激活状态
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
const href = link.getAttribute('href');
|
||
if (href === '#' + current) {
|
||
link.classList.add('active');
|
||
console.log('激活导航:', current);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 监听滚动事件，使用节流优化性能
|
||
let scrollTimeout;
|
||
window.addEventListener('scroll', () => {
|
||
if (scrollTimeout) {
|
||
clearTimeout(scrollTimeout);
|
||
}
|
||
scrollTimeout = setTimeout(updateActiveNavLink, 10);
|
||
});
|
||
|
||
// 页面加载时初始化
|
||
updateActiveNavLink();
|
||
}
|
||
|
||
// 初始化滚动间谍功能
|
||
initScrollSpy();
|
||
|
||
// 添加鼠标跟随效果
|
||
document.addEventListener('mousemove', (e) => {
|
||
const cursor = document.querySelector('.cursor');
|
||
if (cursor) {
|
||
cursor.style.left = e.clientX + 'px';
|
||
cursor.style.top = e.clientY + 'px';
|
||
}
|
||
});
|
||
|
||
// 键盘导航支持
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Home') {
|
||
e.preventDefault();
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
} else if (e.key === 'End') {
|
||
e.preventDefault();
|
||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
||
}
|
||
});
|
||
|
||
// 打印优化
|
||
window.addEventListener('beforeprint', function() {
|
||
document.querySelectorAll('.scroll-top, .loader').forEach(el => {
|
||
el.style.display = 'none';
|
||
});
|
||
});
|
||
|
||
window.addEventListener('afterprint', function() {
|
||
document.querySelectorAll('.scroll-top').forEach(el => {
|
||
el.style.display = 'flex';
|
||
});
|
||
});
|
||
|
||
// 图片模态框功能
|
||
function openImageModal() {
|
||
const modal = document.getElementById('imageModal');
|
||
const modalImg = document.getElementById('modalImg');
|
||
const captionText = document.getElementById('modalCaption');
|
||
const img = document.getElementById('project-img');
|
||
|
||
modal.style.display = 'block';
|
||
modalImg.src = img.src;
|
||
captionText.innerHTML = img.alt;
|
||
|
||
// 防止页面滚动
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeImageModal() {
|
||
const modal = document.getElementById('imageModal');
|
||
modal.style.display = 'none';
|
||
|
||
// 恢复页面滚动
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
// 点击模态框背景关闭
|
||
document.getElementById('imageModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeImageModal();
|
||
}
|
||
});
|
||
|
||
// ESC键关闭模态框
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeImageModal();
|
||
// 检查无人机项目弹窗是否打开
|
||
const droneModal = document.getElementById('responsibilitiesModal');
|
||
if (droneModal.style.display === 'block') {
|
||
closeResponsibilitiesModal();
|
||
}
|
||
// 检查智能手表项目弹窗是否打开
|
||
const watchModal = document.getElementById('watchProjectModal');
|
||
if (watchModal.style.display === 'block') {
|
||
closeWatchProjectModalGSAP();
|
||
}
|
||
}
|
||
});
|
||
|
||
// 职责详情弹窗功能
|
||
function openResponsibilitiesModal() {
|
||
const modal = document.getElementById('responsibilitiesModal');
|
||
const content = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 确保移除可能存在的关闭动画类
|
||
content.classList.remove('closing');
|
||
|
||
modal.style.display = 'block';
|
||
|
||
// 防止页面滚动
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeResponsibilitiesModal() {
|
||
const modal = document.getElementById('responsibilitiesModal');
|
||
const content = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 添加关闭动画类
|
||
content.classList.add('closing');
|
||
|
||
// 根据屏幕大小决定动画时长
|
||
const isMobile = window.innerWidth <= 768;
|
||
const animationDuration = isMobile ? 300 : 400;
|
||
|
||
// 等待动画完成后隐藏弹窗
|
||
setTimeout(() => {
|
||
modal.style.display = 'none';
|
||
content.classList.remove('closing');
|
||
|
||
// 恢复页面滚动
|
||
document.body.style.overflow = 'auto';
|
||
}, animationDuration);
|
||
}
|
||
|
||
// 点击弹窗背景关闭
|
||
document.getElementById('responsibilitiesModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeResponsibilitiesModal();
|
||
}
|
||
});
|
||
|
||
// 流程标签切换功能
|
||
function switchProcessTab(tabId) {
|
||
// 移除所有流程标签按钮的active类
|
||
document.querySelectorAll('#responsibilitiesModal .modal-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 隐藏所有流程标签内容
|
||
document.querySelectorAll('#responsibilitiesModal .process-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 激活当前流程标签按钮
|
||
event.target.closest('.modal-tab-btn').classList.add('active');
|
||
|
||
// 显示对应的流程标签内容
|
||
document.getElementById(tabId + '-content').classList.add('active');
|
||
|
||
// 更新左侧流程图片
|
||
const droneProcessImages = {
|
||
'process1': 'public/农业监测无人机结构设计项目/1结构设计.png',
|
||
'process2': 'public/农业监测无人机结构设计项目/2无人机仿真.jpeg',
|
||
'process3': 'public/农业监测无人机结构设计项目/3.耐久性测试.jpeg',
|
||
'process4': 'public/农业监测无人机结构设计项目/4无人机测试.jpeg',
|
||
'process5': 'public/农业监测无人机结构设计项目/5量产.jpeg'
|
||
};
|
||
|
||
const currentImage = document.getElementById('current-process-image');
|
||
if (droneProcessImages[tabId]) {
|
||
currentImage.src = droneProcessImages[tabId];
|
||
}
|
||
}
|
||
|
||
// 智能手表项目图片模态框功能
|
||
function openWatchImageModal() {
|
||
const modal = document.getElementById('imageModal');
|
||
const modalImg = document.getElementById('modalImg');
|
||
const captionText = document.getElementById('modalCaption');
|
||
const img = document.getElementById('watch-project-img');
|
||
|
||
modal.style.display = 'block';
|
||
modalImg.src = img.src;
|
||
captionText.innerHTML = img.alt;
|
||
|
||
// 防止页面滚动
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
|
||
|
||
// 智能手表项目流程标签切换功能
|
||
function switchWatchProcessTab(tabId) {
|
||
// 移除所有流程标签按钮的active类
|
||
document.querySelectorAll('#watchProjectModal .modal-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 隐藏所有流程标签内容
|
||
document.querySelectorAll('#watchProjectModal .process-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 激活当前流程标签按钮
|
||
event.target.closest('.modal-tab-btn').classList.add('active');
|
||
|
||
// 显示对应的流程标签内容
|
||
document.getElementById(tabId + '-content').classList.add('active');
|
||
|
||
// 更新左侧流程图片
|
||
const processImages = {
|
||
'watch-process1': 'public/智能手表整体结构设计/1芯片选型.png',
|
||
'watch-process2': 'public/智能手表整体结构设计/2.外观设计草图.jpeg',
|
||
'watch-process3': 'public/智能手表整体结构设计/3.智能手表设计.jpeg',
|
||
'watch-process4': 'public/智能手表整体结构设计/4.产品渲染图.jpeg'
|
||
};
|
||
|
||
const currentImage = document.getElementById('current-watch-process-image');
|
||
if (processImages[tabId]) {
|
||
currentImage.src = processImages[tabId];
|
||
}
|
||
}
|
||
|
||
// 点击智能手表项目弹窗背景关闭
|
||
document.getElementById('watchProjectModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeWatchProjectModalGSAP();
|
||
}
|
||
});
|
||
|
||
// 实习经历标签切换功能
|
||
function switchExperienceTab(tabId) {
|
||
// 移除所有标签按钮的active类
|
||
document.querySelectorAll('.experience-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('.experience-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 激活当前标签按钮 - 通过tabId找到对应的按钮
|
||
const targetButton = document.querySelector(`button[onclick="switchExperienceTab('${tabId}')"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
}
|
||
|
||
// 显示对应的标签内容
|
||
const targetContent = document.getElementById(tabId + '-content');
|
||
if (targetContent) {
|
||
targetContent.classList.add('active');
|
||
|
||
// 为新显示的项目卡片添加进入动画
|
||
const projectCards = targetContent.querySelectorAll('.modern-project-showcase');
|
||
if (projectCards.length > 0 && typeof gsap !== 'undefined') {
|
||
// 先重置卡片状态
|
||
gsap.set(projectCards, { x: -100, opacity: 0 });
|
||
|
||
// 然后播放进入动画
|
||
gsap.to(projectCards, {
|
||
x: 0,
|
||
opacity: 1,
|
||
duration: 0.8,
|
||
delay: 0.2,
|
||
ease: "power2.out",
|
||
stagger: 0.1
|
||
});
|
||
}
|
||
}
|
||
|
||
// 对于非工业设计标签，确保个人总结和联系方式可见
|
||
if (tabId !== 'industrial-design') {
|
||
setTimeout(() => {
|
||
// 确保个人总结和联系方式元素可见
|
||
const summarySection = document.getElementById('summary');
|
||
const contactSection = document.getElementById('contact');
|
||
const summaryTitle = document.querySelector('#summary .section-title');
|
||
const summaryContent = document.querySelector('#summary .summary-content');
|
||
const contactTitle = document.querySelector('#contact .section-title');
|
||
const contactItems = document.querySelectorAll('.contact-item');
|
||
|
||
if (summarySection) {
|
||
summarySection.style.opacity = '1';
|
||
summarySection.style.visibility = 'visible';
|
||
}
|
||
if (contactSection) {
|
||
contactSection.style.opacity = '1';
|
||
contactSection.style.visibility = 'visible';
|
||
}
|
||
if (summaryTitle) {
|
||
summaryTitle.style.opacity = '1';
|
||
summaryTitle.style.visibility = 'visible';
|
||
summaryTitle.style.transform = 'translateY(0)';
|
||
}
|
||
if (summaryContent) {
|
||
summaryContent.style.opacity = '1';
|
||
summaryContent.style.visibility = 'visible';
|
||
summaryContent.style.transform = 'translateY(0)';
|
||
}
|
||
if (contactTitle) {
|
||
contactTitle.style.opacity = '1';
|
||
contactTitle.style.visibility = 'visible';
|
||
contactTitle.style.transform = 'translateY(0)';
|
||
}
|
||
contactItems.forEach(item => {
|
||
if (item) {
|
||
item.style.opacity = '1';
|
||
item.style.visibility = 'visible';
|
||
item.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
// 机械加工工艺项目弹窗标签切换函数
|
||
function switchMachiningProcessTab(tabId) {
|
||
// 移除原有按钮的 active 状态
|
||
document.querySelectorAll('#machiningProjectModal .modal-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('#machiningProjectModal .process-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 为当前按钮添加 active 状态
|
||
document.querySelector(`#machiningProjectModal .modal-tab-btn[onclick*="${tabId}"]`).classList.add('active');
|
||
|
||
// 显示对应的标签内容
|
||
document.getElementById(tabId + '-content').classList.add('active');
|
||
|
||
// 更新左侧流程图片
|
||
const machiningProcessImages = {
|
||
'machining-process1': 'public/铝合金3D零件CNC数控编程/流程一：CAD三维模型设计.jpg',
|
||
'machining-process2': 'public/铝合金3D零件CNC数控编程/流程二：加工工艺分析与规划.jpg',
|
||
'machining-process3': 'public/铝合金3D零件CNC数控编程/流程三：CAM编程（刀具路径生成）.webp',
|
||
'machining-process4': 'public/铝合金3D零件CNC数控编程/流程四：路径模拟验证.jpeg',
|
||
'machining-process5': 'public/铝合金3D零件CNC数控编程/流程五：CNC加工设备设定与校准.jpg',
|
||
'machining-process6': 'public/铝合金3D零件CNC数控编程/流程六：CNC加工设备操作.jpg',
|
||
'machining-process7': 'public/铝合金3D零件CNC数控编程/流程七：品质检验.webp',
|
||
'machining-process8': 'public/铝合金3D零件CNC数控编程/流程八：产品后处理.jpeg',
|
||
'machining-process9': 'public/铝合金3D零件CNC数控编程/流程九：清洁、包装与出货.jpg'
|
||
};
|
||
|
||
const currentImage = document.getElementById('current-machining-process-image');
|
||
if (machiningProcessImages[tabId]) {
|
||
currentImage.src = machiningProcessImages[tabId];
|
||
}
|
||
}
|
||
|
||
// 自动化控制项目弹窗标签切换函数
|
||
function switchAutomationProcessTab(tabId) {
|
||
// 移除原有按钮的 active 状态
|
||
document.querySelectorAll('#automationProjectModal .modal-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('#automationProjectModal .process-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 为当前按钮添加 active 状态
|
||
document.querySelector(`#automationProjectModal .modal-tab-btn[onclick*="${tabId}"]`).classList.add('active');
|
||
|
||
// 显示对应的标签内容
|
||
document.getElementById(tabId + '-content').classList.add('active');
|
||
|
||
// 更新左侧流程图片
|
||
const automationProcessImages = {
|
||
'automation-process1': 'public/气动搬运机器人PLC编程设计/流程一：搬运机器人结构与功能设计.jpg',
|
||
'automation-process2': 'public/气动搬运机器人PLC编程设计/流程二：控制逻辑与搬运策略设计.jpg',
|
||
'automation-process3': 'public/气动搬运机器人PLC编程设计/流程三：PLC软硬件选型与IO分配.jpg',
|
||
'automation-process4': 'public/气动搬运机器人PLC编程设计/流程四：LAD程序设计与仿真调试.jpg',
|
||
'automation-process5': 'public/气动搬运机器人PLC编程设计/流程五：搭建监控系统.jpg',
|
||
'automation-process6': 'public/气动搬运机器人PLC编程设计/流程六：整机联调与异常处理.jpg'
|
||
};
|
||
|
||
const imageElement = document.getElementById('current-automation-process-image');
|
||
if (imageElement && automationProcessImages[tabId]) {
|
||
imageElement.src = automationProcessImages[tabId];
|
||
}
|
||
}
|
||
|
||
// 非标自动化项目弹窗标签切换函数
|
||
function switchNonStandardProcessTab(tabId) {
|
||
// 移除原有按钮的 active 状态
|
||
document.querySelectorAll('#nonStandardProjectModal .modal-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('#nonStandardProjectModal .process-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 为当前按钮添加 active 状态
|
||
document.querySelector(`#nonStandardProjectModal .modal-tab-btn[onclick*="${tabId}"]`).classList.add('active');
|
||
|
||
// 显示对应的标签内容
|
||
document.getElementById(tabId + '-content').classList.add('active');
|
||
|
||
// 更新左侧流程图片
|
||
const nonStandardProcessImages = {
|
||
'non-standard-process1': 'public/物流 ABB 码垛机器人安装调试/1流程一：.jpeg',
|
||
'non-standard-process2': 'public/物流 ABB 码垛机器人安装调试/2流程二：系统初始化.jpeg',
|
||
'non-standard-process3': 'public/物流 ABB 码垛机器人安装调试/3流程三：运动校准.jpeg',
|
||
'non-standard-process4': 'public/物流 ABB 码垛机器人安装调试/4流程四：外围配置.png',
|
||
'non-standard-process5': 'public/物流 ABB 码垛机器人安装调试/5流程五：坐标系标定.jpeg',
|
||
'non-standard-process6': 'public/物流 ABB 码垛机器人安装调试/6流程六：程序调试.jpeg',
|
||
'non-standard-process7': 'public/物流 ABB 码垛机器人安装调试/7流程七：自动运行.jpeg',
|
||
'non-standard-process8': 'public/物流 ABB 码垛机器人安装调试/8流程八：验收维护.jpeg'
|
||
};
|
||
|
||
const currentImage = document.getElementById('current-non-standard-process-image');
|
||
if (nonStandardProcessImages[tabId]) {
|
||
currentImage.src = nonStandardProcessImages[tabId];
|
||
}
|
||
}
|
||
|
||
// 弹窗关闭时的处理函数
|
||
document.getElementById('machiningProjectModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeMachiningProjectModalGSAP();
|
||
}
|
||
});
|
||
|
||
document.getElementById('automationProjectModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeAutomationProjectModalGSAP();
|
||
}
|
||
});
|
||
|
||
document.getElementById('nonStandardProjectModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeNonStandardProjectModalGSAP();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |