From b0d2e629d94af2c7b949b2f03808e94073fc6f9f Mon Sep 17 00:00:00 2001
From: KQL <apple@appledeMac-Pro.local>
Date: Thu, 4 Dec 2025 16:03:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=92=8C=E9=83=A8=E7=BD=B2=E8=84=9A=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复页面跳转白屏闪烁问题
- 集成过渡岗位页面（岗位装配中心）
- 添加iframe全屏嵌入（教务系统、就业规划）
- 优化企业资源卡片hover分裂效果
- 添加Windows和macOS快捷部署脚本
- 更新.gitignore忽略测试文件和缓存

🤖 Generated with Claude Code
---
 .gitignore               |    8 +
 css/components.css       |    2 +-
 index.html               | 1130 +++++++++++++++++++++++++++++++-------
 js/main.js               |   56 +-
 js/ui/DetailInterface.js |    5 +-
 js/ui/ListInterface.js   |    5 +-
 启动服务器.bat           |   51 ++
 启动服务器.sh            |   72 +++
 快捷部署说明.md          |  144 +++++
 9 files changed, 1234 insertions(+), 239 deletions(-)
 create mode 100644 启动服务器.bat
 create mode 100755 启动服务器.sh
 create mode 100644 快捷部署说明.md

diff --git a/.gitignore b/.gitignore
index e3f7212..2e71b19 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,12 +5,20 @@
 .claude/
 .vscode/
 .idea/
+.serena/
 
 # Backup files
 *.backup_*
+*.backup
 
 # Node
 node_modules/
 
+# Test folders (可以根据需要调整)
+测试/
+测试2/
+测试3/
+测试4/
+
 # Local server (optional, can be included if needed)
 # server.js
diff --git a/css/components.css b/css/components.css
index 7dbb14e..17bd3dc 100644
--- a/css/components.css
+++ b/css/components.css
@@ -81,7 +81,7 @@
     max-height: 320px;
     overflow-y: auto;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
+    z-index: 10000;
 }
 
 /* 搜索结果项 */
diff --git a/index.html b/index.html
index abba8be..6e8fc5f 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="referrer" content="no-referrer">
-    <title>多多畅职 - DuoDuo Career</title>
+    <title>大专生就业服务平台</title>
 
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -14,206 +14,719 @@
     <!-- Font Awesome Icons -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
 
-    <!-- 自定义样式 -->
-    <link rel="stylesheet" href="./css/reset.css">
+    <!-- 自定义样式 - 只加载必要的 -->
     <link rel="stylesheet" href="./css/layout.css">
     <link rel="stylesheet" href="./css/components.css">
     <link rel="stylesheet" href="./css/effects.css">
-    <link rel="stylesheet" href="./css/website.css">
+
+    <style>
+        /* 引入字体 */
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+            color: #fff;
+            margin: 0;
+            padding: 0;
+        }
+
+        /* 首页包裹容器 */
+        #home-wrapper {
+            background-color: #020617;
+            background-image:
+                radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.2) 0%, rgba(30, 64, 175, 0.15) 40%, transparent 80%),
+                radial-gradient(circle at center, #0f172a 0%, #020617 100%);
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1;
+        }
+
+        .bg-glow {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 120vw;
+            height: 120vw;
+            background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 60%);
+            filter: blur(120px);
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .container {
+            width: 90%;
+            max-width: 1300px;
+            height: 85vh;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            z-index: 1;
+        }
+
+        .glass-header {
+            flex: 0 0 140px;
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .header-inner {
+            text-align: center;
+        }
+
+        .header-inner h1 {
+            font-size: 32px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            margin-bottom: 4px;
+            background: linear-gradient(90deg, #e0f2fe, #38bdf8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
+        }
+
+        .header-inner p {
+            font-size: 12px;
+            letter-spacing: 4px;
+            color: rgba(255, 255, 255, 0.5);
+            font-weight: 300;
+        }
+
+        .card-wrapper {
+            flex: 1;
+            display: flex;
+            gap: 20px;
+        }
+
+        .card {
+            position: relative;
+            flex: 1;
+            border-radius: 20px;
+            overflow: hidden;
+            cursor: pointer;
+            text-decoration: none;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.5);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            background: #020617;
+            transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+        }
+
+        .card-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            filter: grayscale(100%) blur(4px);
+            transform: scale(1.1);
+            transition: all 0.6s ease;
+        }
+
+        .card-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(2, 6, 23, 0.6);
+            transition: background 0.6s ease;
+            z-index: 1;
+        }
+
+        .card-content {
+            position: relative;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+
+        .card-content h2 {
+            color: #fff;
+            font-size: 32px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            text-shadow: 0 4px 15px rgba(0,0,0,0.8);
+            transform: translateY(0);
+            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+        }
+
+        .sub-text {
+            margin-top: 15px;
+            font-size: 16px;
+            color: rgba(255,255,255,0.9);
+            background: rgba(255, 255, 255, 0.05);
+            padding: 6px 16px;
+            border-radius: 50px;
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255,255,255,0.1);
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+        }
+
+        .card:hover {
+            flex: 2.5;
+        }
+
+        .card:hover .card-bg {
+            filter: grayscale(0%) blur(0px);
+            transform: scale(1.05);
+        }
+
+        .card:hover .card-overlay {
+            background: rgba(2, 6, 23, 0.2);
+        }
+
+        /* 普通卡片 hover 效果 */
+        a.card:hover h2 {
+            transform: translateY(-10px);
+        }
+
+        a.card:hover .sub-text {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .hidden {
+            display: none !important;
+        }
+
+        /* 特殊卡片分裂效果 */
+        .default-view {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .special-card:hover .default-view {
+            opacity: 0;
+            transform: translateY(-20px);
+            pointer-events: none;
+        }
+
+        .split-view {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
+        }
+
+        .special-card:hover .split-view {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .split-item {
+            flex: 1;
+            text-decoration: none;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            position: relative;
+            transition: background 0.3s ease;
+        }
+
+        .split-item:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .panel-inner {
+            text-align: center;
+            transform: scale(0.9);
+            transition: transform 0.3s ease;
+        }
+
+        .split-item:hover .panel-inner {
+            transform: scale(1);
+        }
+
+        .split-item h3 {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            color: #fff;
+        }
+
+        .split-item p {
+            font-size: 13px;
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 12px;
+        }
+
+        .mini-arrow {
+            font-size: 20px;
+            opacity: 0;
+            transform: translateX(-10px);
+            transition: all 0.3s ease;
+            color: #38bdf8;
+        }
+
+        .split-item:hover .mini-arrow {
+            opacity: 1;
+            transform: translateX(0);
+        }
+
+        .vertical-divider {
+            width: 1px;
+            height: 60%;
+            background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
+            align-self: center;
+        }
+
+        /* iframe容器样式 */
+        .iframe-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100vh;
+            background: #020617;
+            z-index: 100;
+        }
+
+        .fullscreen-iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            display: block;
+        }
+
+        .iframe-back-btn {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            z-index: 101;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 24px;
+            background: rgba(11, 16, 38, 0.95);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            border-radius: 50px;
+            color: #38bdf8;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .iframe-back-btn:hover {
+            background: rgba(56, 189, 248, 0.2);
+            border-color: #38bdf8;
+            box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
+            transform: translateX(-5px);
+        }
+
+        .iframe-back-btn svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .iframe-back-btn {
+                top: 10px;
+                left: 10px;
+                padding: 8px 16px;
+                font-size: 12px;
+            }
+            .iframe-back-btn svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        /* 过渡岗位页面样式 */
+        #transition-jobs-page {
+            background-color: #020408;
+            position: relative;
+        }
+
+        /* 背景光影效果 */
+        #transition-jobs-page::before {
+            content: '';
+            position: fixed;
+            top: -50%; left: -50%; width: 150%; height: 150%;
+            z-index: -2;
+            background: radial-gradient(circle at center, rgba(0, 240, 255, 0.15) 0%, transparent 60%);
+            filter: blur(100px);
+            pointer-events: none;
+            opacity: 0.8;
+        }
+
+        #transition-jobs-page::after {
+            content: '';
+            position: fixed;
+            bottom: -30%; right: -30%; width: 120%; height: 120%;
+            z-index: -2;
+            background: radial-gradient(circle at center, rgba(25, 50, 150, 0.2) 0%, transparent 50%);
+            filter: blur(120px);
+            pointer-events: none;
+            opacity: 0.6;
+        }
+
+        .commander-layout {
+            display: flex; flex-direction: column; height: 100vh;
+            max-width: 1440px; margin: 0 auto; padding: 20px 40px; box-sizing: border-box;
+            position: relative; z-index: 1;
+        }
+
+        .hud-section {
+            background: rgba(15, 18, 24, 0.4);
+            backdrop-filter: blur(25px);
+            border-radius: 16px;
+            padding: 20px 30px;
+            border: 1px solid rgba(255,255,255,0.08);
+            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
+            margin-bottom: 25px;
+            flex-shrink: 0;
+        }
+
+        .hud-header {
+            display: flex; justify-content: space-between; align-items: center;
+            margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px;
+        }
+
+        .hud-title-group { display: flex; align-items: center; gap: 12px; }
+        .hud-icon { color: #00f0ff; font-size: 1.2rem; text-shadow: 0 0 15px rgba(0, 240, 255, 0.6); }
+        .hud-title { font-size: 1.1rem; font-weight: bold; letter-spacing: 1px; color: #fff; }
+        .hud-subtitle { font-size: 0.75rem; color: #666; margin-left: 8px; font-weight: normal; }
+
+        .confirm-btn {
+            background: linear-gradient(90deg, #2563eb, #00f0ff);
+            color: #000; font-weight: 800; font-size: 0.9rem;
+            padding: 8px 24px; border-radius: 4px;
+            border: none; cursor: pointer;
+            box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
+            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            display: flex; align-items: center; gap: 8px;
+            opacity: 0.4; pointer-events: none; filter: grayscale(80%);
+        }
+
+        .confirm-btn.active { opacity: 1; pointer-events: auto; filter: grayscale(0%); }
+        .confirm-btn:hover {
+            transform: scale(1.05) translateY(-2px);
+            box-shadow: 0 5px 30px rgba(0, 240, 255, 0.5);
+            color: white;
+        }
+
+        .slots-container {
+            display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px;
+        }
+
+        .slot-module {
+            height: 140px;
+            background: rgba(0,0,0,0.2);
+            border: 1px dashed rgba(255,255,255,0.1);
+            border-radius: 8px;
+            display: flex; flex-direction: column; justify-content: center; align-items: center;
+            transition: all 0.3s;
+            position: relative; overflow: hidden;
+            backdrop-filter: blur(5px);
+        }
+
+        .slot-module.empty:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); }
+
+        .slot-module.filled {
+            background: linear-gradient(160deg, rgba(30, 35, 46, 0.8), rgba(19, 22, 28, 0.9));
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            cursor: pointer;
+            backdrop-filter: blur(10px);
+        }
+
+        .slot-module.filled:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 240, 255, 0.15); border-color: #00f0ff; }
+
+        .slot-remove-mask {
+            position: absolute; inset: 0; background: rgba(0,0,0,0.85);
+            display: flex; flex-direction: column; align-items: center; justify-content: center;
+            opacity: 0; transition: opacity 0.2s; color: #ff4d4d; backdrop-filter: blur(5px);
+        }
+
+        .slot-module.filled:hover .slot-remove-mask { opacity: 1; }
+
+        .slot-content-title { font-size: 0.95rem; font-weight: bold; color: white; margin-bottom: 4px; text-align: center; width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .slot-content-salary { color: #00f0ff; font-weight: bold; font-size: 0.9rem; font-family: 'Arial', sans-serif; text-shadow: 0 0 8px rgba(0,240,255,0.3); }
+        .slot-content-company { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }
+        .slot-index { position: absolute; top: 8px; left: 10px; font-size: 1.5rem; font-weight: 900; color: rgba(255,255,255,0.03); pointer-events: none; }
+
+        .list-section { flex: 1; overflow-y: auto; padding-right: 5px; }
+
+        .list-header {
+            display: flex; align-items: center; margin-bottom: 20px;
+            border-left: 4px solid #00f0ff; padding-left: 12px;
+            text-shadow: 0 0 15px rgba(0,240,255,0.3);
+        }
+
+        .list-title { font-size: 1.1rem; font-weight: bold; color: #fff; letter-spacing: 1px; }
+
+        .job-grid {
+            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 40px;
+        }
+
+        .job-card {
+            background: rgba(20, 24, 35, 0.6);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255,255,255,0.05);
+            border-radius: 12px;
+            padding: 24px;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+            display: flex; flex-direction: column; justify-content: space-between;
+            min-height: 160px;
+        }
+
+        .job-card:hover {
+            border-color: rgba(0, 240, 255, 0.5);
+            background: rgba(26, 30, 38, 0.8);
+            transform: translateY(-5px) scale(1.01);
+            box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 15px rgba(0,240,255,0.1);
+        }
+
+        .job-card.disabled {
+            opacity: 0.3;
+            filter: grayscale(100%) contrast(80%);
+            background: rgba(10, 12, 16, 0.5);
+            border-color: transparent;
+            pointer-events: none;
+            cursor: default;
+            transform: none !important;
+            box-shadow: none !important;
+            backdrop-filter: none;
+        }
+
+        .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
+
+        .card-icon {
+            width: 44px; height: 44px; border-radius: 8px;
+            background: rgba(255,255,255,0.03);
+            display: flex; align-items: center; justify-content: center;
+            font-size: 1.2rem; color: #94a3b8; transition: all 0.3s;
+            border: 1px solid transparent;
+        }
+
+        .job-card:hover .card-icon {
+            color: #00f0ff;
+            background: rgba(0, 240, 255, 0.05);
+            border-color: rgba(0, 240, 255, 0.2);
+            box-shadow: 0 0 10px rgba(0,240,255,0.2);
+        }
+
+        .card-salary { color: #00f0ff; font-weight: bold; font-size: 1rem; text-shadow: 0 0 5px rgba(0,240,255,0.3); }
+        .card-title { font-size: 1.1rem; font-weight: bold; color: #fff; margin-bottom: 6px; }
+        .card-company { font-size: 0.85rem; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
+
+        .card-tags { margin-top: 15px; display: flex; gap: 6px; flex-wrap: wrap; }
+
+        .tag {
+            font-size: 0.75rem; padding: 3px 8px; border-radius: 4px;
+            background: rgba(255,255,255,0.03); color: #888;
+            border: 1px solid rgba(255,255,255,0.02);
+        }
+
+        .check-mark {
+            position: absolute; top: 15px; right: 15px;
+            color: #00f0ff; font-size: 1.2rem;
+            opacity: 0; transform: scale(0); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            text-shadow: 0 0 10px #00f0ff;
+        }
+
+        .job-card.disabled .check-mark { opacity: 1; transform: scale(1); }
+    </style>
 </head>
 <body>
 
-    <!-- ============================================
-         官网部分：导航栏 + 菜单 + 内容页面
-         ============================================ -->
+    <!-- 首页包裹器 -->
+    <div id="home-wrapper">
+        <div class="bg-glow"></div>
 
-    <!-- 顶部导航栏 -->
-    <nav id="navbar" class="fixed top-0 w-full z-50 glass-nav transition-all duration-300">
-        <div class="flex items-center justify-between px-5 h-16">
-            <!-- Logo + 企业名称 -->
-            <div class="flex items-center gap-3" id="nav-logo-area">
-                <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_logo/LOGO_1097x300.png"
-                     alt="多多畅职" class="h-8 w-auto object-contain">
-                <span class="text-white font-bold text-lg tracking-wide hidden md:block">多多畅职</span>
-            </div>
-
-            <!-- 汉堡菜单按钮 -->
-            <button id="menu-btn" class="text-white text-xl w-10 h-10 flex items-center justify-center focus:outline-none">
-                <i class="fa-solid fa-bars"></i>
-            </button>
-        </div>
-    </nav>
-
-    <!-- 全屏菜单 -->
-    <div id="mobile-menu" class="fixed inset-0 z-40 bg-black/95 backdrop-blur-xl transform translate-x-full transition-transform duration-300 flex flex-col justify-center items-center">
-        <ul class="space-y-8 text-center">
-            <li><a href="#" data-target="news" class="menu-link text-2xl text-white font-bold hover:text-cyan-400">新闻中心</a></li>
-            <li><a href="#" data-target="about" class="menu-link text-2xl text-gray-400 hover:text-white">关于我们</a></li>
-            <li><a href="#" data-target="product" class="menu-link text-2xl text-gray-400 hover:text-white">产品介绍</a></li>
-            <li class="pt-8 border-t border-white/10 w-48 mx-auto">
-                <a href="#" data-target="app" class="menu-link text-2xl text-cyan-400 font-bold glow-text">
-                    企业内推平台 <i class="fa-solid fa-rocket ml-2"></i>
-                </a>
-            </li>
-        </ul>
-    </div>
-
-    <!-- 官网内容容器 -->
-    <div id="website-container" class="relative w-full h-screen pt-16 bg-gradient-to-b from-gray-900 to-black overflow-y-auto">
-
-        <!-- 新闻中心页面 -->
-        <section id="page-news" class="page-section px-4 py-6 flex flex-col items-center pt-12 md:pt-20">
-            <div class="w-full max-w-4xl">
-                <h2 class="section-title">
-                    最新动态
-                    <span class="text-sm text-gray-500 font-normal ml-2">News Center</span>
-                </h2>
-
-                <!-- 轮播图 -->
-                <div class="carousel-container mt-6 rounded-2xl overflow-hidden shadow-2xl relative h-64 md:h-96">
-                    <div id="carousel-track" class="flex h-full transition-transform duration-500 ease-out">
-                        <!-- 图片由 JS 动态生成 -->
-                    </div>
-                    <div id="carousel-dots" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
-                        <!-- 指示点由 JS 动态生成 -->
-                    </div>
+        <!-- 首页容器 -->
+        <div id="home-container" class="container">
+            <header class="glass-header">
+                <div class="header-inner">
+                    <h1>多多畅职大专生就业服务平台</h1>
+                    <p>CAREER SERVICE PLATFORM</p>
                 </div>
-            </div>
+            </header>
 
-        </section>
-
-        <!-- 关于我们页面 -->
-        <section id="page-about" class="page-section hidden w-full pb-20">
-
-            <div class="relative w-full h-72 overflow-hidden">
-                <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent z-10"></div>
-                <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_guanwang/recv39pAP6SKLd.jpg"
-                     class="w-full h-full object-cover transform hover:scale-105 transition duration-[10s]">
-                <div class="absolute bottom-6 left-6 z-20">
-                    <h2 class="text-4xl font-black text-white tracking-tighter mb-2">ABOUT US</h2>
-                    <div class="h-[2px] w-10 bg-cyan-400"></div>
-                </div>
-            </div>
-
-            <div class="px-6 mt-10 space-y-12">
-
-                <div class="space-y-6">
-                    <h3 class="text-2xl font-bold text-white tracking-wide">品牌介绍</h3>
-
-                    <div class="text-gray-300 text-base leading-8 text-justify font-light">
-                        <p>
-                            <span class="text-cyan-400 font-bold">多多畅职</span> 创立于 2024 年，是面向大专生的新型就业服务平台，隶属于苏州多多畅职教育文化科技有限公司。平台聚合企业高管、技术专家、营销专家与 HR 团队，结合 AI 赋能的前沿教学体系，从"能力培养—求职规划—岗位内推"三个阶段，构建大专生从校园到职场的完整成长路径。
-                        </p>
-                    </div>
-
-                    <div class="w-full rounded-lg overflow-hidden shadow-2xl border border-white/10">
-                        <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_guanwang/recv39pB6L8Htt.jpg"
-                             class="w-full h-auto object-cover opacity-90">
-                    </div>
-                </div>
-
-                <div class="space-y-6">
-                    <div class="text-gray-300 text-base leading-8 text-justify font-light">
-                        <p>
-                            我们深度链接 <span class="text-white font-bold border-b border-cyan-500/50 pb-0.5">70,000+</span> 合作企业与 <span class="text-white font-bold border-b border-cyan-500/50 pb-0.5">10,000+</span> 岗位方向，让学生不仅"能就业"，更"就好业"。多多畅职坚持<span class="text-white italic">"学历不设限，职场无边界"</span>的理念，致力于帮助大专生突破学历限制，培养复合型能力，打造清晰的职业发展路径，实现真正的高质量就业与成长。
-                        </p>
-                    </div>
-
-                    <div class="w-full rounded-lg overflow-hidden shadow-2xl border border-white/10">
-                        <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_guanwang/recv39pAXGrE1M.jpg"
-                             class="w-full h-auto object-cover opacity-90">
-                    </div>
-                </div>
-
-                <div class="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
-
-                <div class="space-y-8">
-                    <h3 class="text-2xl font-bold text-white tracking-wide text-right">创始人</h3>
-
-                    <div class="relative">
-                        <div class="glass-card p-0 overflow-hidden rounded-2xl">
-                            <div class="relative w-full h-80">
-                                <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_guanwang/recv39pAFoofkW.png"
-                                     class="w-full h-full object-cover object-top">
-                                <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black via-black/60 to-transparent"></div>
-
-                                <div class="absolute bottom-6 left-6">
-                                    <h4 class="text-3xl font-bold text-white mb-1">魏兴国</h4>
-                                    <p class="text-cyan-400 text-sm tracking-widest uppercase">FOUNDER</p>
+            <div class="card-wrapper">
+                <div class="card special-card">
+                    <div class="card-bg" style="background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2301&auto=format&fit=crop');"></div>
+                    <div class="card-overlay"></div>
+                    <div class="card-content">
+                        <div class="default-view">
+                            <h2>企业资源</h2>
+                            <span class="sub-text">优质岗位 · 名企直推</span>
+                        </div>
+                        <div class="split-view">
+                            <a href="javascript:void(0)" id="transition-split-card" class="split-item">
+                                <div class="panel-inner">
+                                    <h3>过渡岗位</h3>
+                                    <p>短期兼职 & 实习实训</p>
+                                    <div class="mini-arrow">→</div>
                                 </div>
-                            </div>
-
-                            <div class="p-6 bg-white/5 backdrop-blur-md">
-                                <p class="text-gray-300 text-sm leading-7 text-justify">
-                                    魏兴国先生，多多畅职品牌创始人。他深耕职业教育领域，致力于解决大专生就业与职业发展难题。通过整合行业顶尖资源与创新教育模式，他带领团队构建了"能力培养+求职规划+岗位内推"的一站式服务体系，帮助无数学子打破学历天花板，实现职场逆袭与人生进阶。
-                                </p>
-                            </div>
+                            </a>
+                            <div class="vertical-divider"></div>
+                            <a href="javascript:void(0)" id="referral-split-card" class="split-item">
+                                <div class="panel-inner">
+                                    <h3>内推岗位</h3>
+                                    <p>校友推荐 & 名企直通</p>
+                                    <div class="mini-arrow">→</div>
+                                </div>
+                            </a>
                         </div>
                     </div>
                 </div>
 
-                <div class="py-10 text-center">
-                    <p class="text-gray-500 text-xs tracking-[0.3em] uppercase mb-3">DuoDuo Career</p>
-                    <p class="text-transparent bg-clip-text bg-gradient-to-r from-white via-cyan-300 to-white font-bold text-lg">
-                        学历不设限 · 职场无边界
-                    </p>
-                </div>
+                <a href="javascript:void(0)" id="education-card" class="card">
+                    <div class="card-bg" style="background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2340&auto=format&fit=crop');"></div>
+                    <div class="card-overlay"></div>
+                    <div class="card-content">
+                        <h2>教务系统</h2>
+                        <span class="sub-text">技能提升 · 在线课程</span>
+                    </div>
+                </a>
 
+                <a href="javascript:void(0)" id="career-card" class="card">
+                    <div class="card-bg" style="background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2070&auto=format&fit=crop');"></div>
+                    <div class="card-overlay"></div>
+                    <div class="card-content">
+                        <h2>就业规划</h2>
+                        <span class="sub-text">生涯指导 · 前景分析</span>
+                    </div>
+                </a>
             </div>
-        </section>
+        </div>
+    </div>
+    <!-- 首页包裹器结束 -->
 
-        <!-- 产品介绍页面 -->
-        <section id="page-product" class="page-section hidden w-full pb-20">
+    <!-- 教务系统iframe界面 -->
+    <div id="education-iframe" class="iframe-container hidden">
+        <button class="iframe-back-btn" onclick="backToHomeFromIframe()">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            <span>返回首页</span>
+        </button>
+        <iframe
+            id="education-frame"
+            src="https://duoduochangzhi.cn/"
+            frameborder="0"
+            allowfullscreen
+            class="fullscreen-iframe">
+        </iframe>
+    </div>
 
-            <!-- 顶部标题区域 -->
-            <div class="relative w-full h-32 md:h-48 overflow-hidden">
-                <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent z-10"></div>
-                <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recv39nZLKMruq.png"
-                     class="w-full h-full object-cover transform hover:scale-105 transition duration-[10s]">
-                <div class="absolute inset-0 bg-gradient-to-br from-cyan-900/20 to-blue-900/20"></div>
-                <div class="absolute bottom-6 left-6 z-20">
-                    <h2 class="text-3xl md:text-4xl font-black text-white tracking-tighter mb-2">PRODUCT</h2>
-                    <div class="h-[2px] w-10 bg-cyan-400"></div>
-                </div>
-            </div>
+    <!-- 就业规划iframe界面 -->
+    <div id="career-iframe" class="iframe-container hidden">
+        <button class="iframe-back-btn" onclick="backToHomeFromIframe()">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            <span>返回首页</span>
+        </button>
+        <iframe
+            id="career-frame"
+            src="http://192.168.2.9:5173/"
+            frameborder="0"
+            allowfullscreen
+            class="fullscreen-iframe">
+        </iframe>
+    </div>
 
-            <!-- 内容区域 -->
-            <div class="px-6 md:px-8 mt-10 space-y-8 max-w-5xl mx-auto">
+    <!-- 过渡岗位页面 -->
+    <div id="transition-jobs-page" class="fixed inset-0 hidden" style="z-index: 100;">
+        <button class="iframe-back-btn" onclick="backToHomeFromTransition()">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            <span>返回首页</span>
+        </button>
 
-                <!-- 产品标题 -->
-                <div class="text-center">
-                    <h3 class="text-2xl md:text-3xl font-bold text-white tracking-wide mb-3">企业订单班</h3>
-                    <div class="h-[1px] w-16 bg-cyan-400 mx-auto"></div>
+        <!-- 岗位装配中心内容 -->
+        <div class="commander-layout" style="font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">
+
+            <header class="hud-section">
+                <div class="hud-header">
+                    <div class="hud-title-group">
+                        <i class="fa-solid fa-cube hud-icon"></i>
+                        <div>
+                            <div class="hud-title">我的投递清单</div>
+                            <span class="hud-subtitle">MY SELECTION</span>
+                        </div>
+                    </div>
+
+                    <div class="text-gray-500 font-mono text-sm">
+                        已选: <span id="trans-count-display" class="text-cyan-400 font-bold text-lg">0</span> / 5
+                    </div>
+
+                    <button id="trans-submit-btn" class="confirm-btn">
+                        确认投递 <i class="fa-solid fa-paper-plane"></i>
+                    </button>
                 </div>
 
-                <!-- 文字介绍卡片 -->
-                <div class="glass-card p-6 md:p-8 rounded-2xl border border-cyan-500/20">
-                    <p class="text-gray-300 text-base md:text-lg leading-8 md:leading-9 text-justify font-light">
-                        多多畅职<span class="text-cyan-400 font-semibold">"企业订单班"</span>通过与众多企业深度合作，综合企业岗前培训内容，实现<span class="text-white font-medium">"企业要什么，就教什么"</span>。采用企业一线专家导师授课，课程体系由企业直接参与设计，围绕真实岗位展开教学，并以企业标准全程评价学习成果。学生在学习期间即可接触企业真实的工作流程，学习掌握核心项目环节，毕业前完成实习/就业衔接，真正做到<span class="text-white font-medium">"入学即就业方向明确，结课即具备企业用人标准"</span>，帮助大专生实现从校园到职场的高质量跃迁。
-                    </p>
+                <div class="slots-container" id="trans-slot-container">
+                </div>
+            </header>
+
+            <section class="list-section custom-scrollbar">
+                <div class="list-header">
+                    <div class="list-title">岗位资源库</div>
                 </div>
 
-                <!-- 产品长图展示 -->
-                <div class="w-full rounded-xl md:rounded-2xl overflow-hidden shadow-2xl border border-white/10">
-                    <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_guanwang/recdYUXm7W.jpg"
-                         alt="企业订单班详情"
-                         class="w-full h-auto object-contain">
+                <div class="job-grid" id="trans-job-grid">
                 </div>
+            </section>
 
-                <!-- 底部装饰 -->
-                <div class="py-8 text-center">
-                    <p class="text-gray-500 text-xs tracking-[0.3em] uppercase">Enterprise Order Class</p>
-                </div>
-
-            </div>
-        </section>
+        </div>
     </div>
 
     <!-- ============================================
-         3D内推平台部分（保留原有所有结构）
+         3D内推平台部分
          ============================================ -->
 
-    <div id="app-container" class="fixed inset-0 z-0 hidden">
+    <div id="app-container" class="fixed inset-0 hidden" style="z-index: 10; background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0b1026 100%);">
 
         <!-- 转场特效层 -->
         <div id="speed-lines"></div>
@@ -232,22 +745,18 @@
         <!-- 地图界面 -->
         <div id="map-interface">
             <header class="glass-header fixed top-0 w-full h-16 flex items-center justify-between px-4 md:px-8 z-50">
-                <!-- 移动端：只显示Logo和区域 -->
                 <div id="map-logo-area" class="flex items-center gap-2 cursor-pointer flex-shrink-0">
                     <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_logo/LOGO_1097x300.png"
                          alt="多多畅职" class="h-6 md:h-8 w-auto object-contain">
                     <div class="text-white font-bold text-xs md:text-sm tracking-wide hidden sm:block">多多畅职企业内推平台</div>
                     <span class="text-gray-400 text-xs ml-2 hidden lg:inline">点击返回首页</span>
                 </div>
-                <!-- 搜索框：PC端 -->
                 <div class="relative w-1/3 hidden md:block">
                     <input type="text" id="search-input" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-5 rounded-full text-center text-sm placeholder-gray-400">
                 </div>
-                <!-- 搜索框：移动端 -->
                 <div class="relative w-full px-4 md:hidden mb-2">
                     <input type="text" id="search-input-mobile" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-4 rounded-full text-sm placeholder-gray-400">
                 </div>
-                <!-- 当前区域 -->
                 <div class="flex items-center gap-2 text-white text-xs md:text-sm flex-shrink-0">
                     <span class="text-gray-400 hidden sm:inline">当前区域:</span>
                     <span id="top-region-name" class="text-cyan-300 font-bold">全国</span>
@@ -278,7 +787,6 @@
                 <aside class="w-64 h-full border-r border-white/10 p-6 hidden md:block">
                     <div class="mb-8">
                         <h3 class="text-cyan-400 text-xs font-bold uppercase tracking-widest mb-4">筛选 Filter</h3>
-
                         <div class="space-y-4">
                             <div>
                                 <label class="text-gray-500 text-xs mb-2 block">所属行业</label>
@@ -298,7 +806,6 @@
                             </div>
                         </div>
                     </div>
-
                     <div class="p-4 bg-white/5 rounded-lg border border-white/5">
                         <div class="text-gray-400 text-xs mb-1">当前城市收录</div>
                         <div class="text-2xl font-bold text-white"><span id="company-count">124</span> <span class="text-sm text-gray-500 font-normal">家企业</span></div>
@@ -323,9 +830,7 @@
                 <div class="w-12 md:w-20"></div>
             </header>
 
-            <!-- 移动端：上下排列整体滚动 | PC端：左右排列独立滚动 -->
             <div class="h-full pt-16 overflow-y-auto md:overflow-hidden md:flex">
-                <!-- 企业基本信息区 -->
                 <aside class="w-full md:w-1/3 md:h-full md:overflow-y-auto border-b md:border-b-0 md:border-r border-white/10 p-4 md:p-8 bg-black/20" style="scrollbar-width: thin; scrollbar-color: #38bdf8 rgba(255,255,255,0.05);">
                     <div class="flex flex-col items-center mb-6 md:mb-8">
                         <h1 id="d-name" class="text-xl md:text-3xl font-bold text-white text-center mb-2"></h1>
@@ -350,24 +855,18 @@
 
                         <div>
                             <h3 class="text-cyan-500 text-xs font-bold uppercase mb-2">企业风采 Gallery</h3>
-                            <div id="d-gallery" class="grid grid-cols-3 gap-2">
-                                <!-- 动态填充图片 -->
-                            </div>
+                            <div id="d-gallery" class="grid grid-cols-3 gap-2"></div>
                         </div>
                     </div>
                 </aside>
 
-                <!-- 业务板块展示区 -->
                 <main class="w-full md:flex-1 md:h-full md:overflow-y-auto p-4 md:p-8 bg-gradient-to-br from-gray-900 to-black">
                     <div class="mb-4 md:mb-6">
                         <h2 class="text-lg md:text-2xl font-bold text-white mb-1">业务板块 & 内推岗位</h2>
                         <span class="text-gray-500 text-xs md:text-sm">Business Segments & Opportunities</span>
                     </div>
 
-                    <div id="d-segments" class="grid grid-cols-1 gap-4 md:gap-6">
-                        <!-- 动态生成业务板块卡片 -->
-                    </div>
-
+                    <div id="d-segments" class="grid grid-cols-1 gap-4 md:gap-6"></div>
                     <div class="h-20"></div>
                 </main>
             </div>
@@ -375,12 +874,10 @@
 
         <!-- 图片Lightbox模态框 -->
         <div id="image-lightbox" class="fixed inset-0 z-[100] bg-black/95 backdrop-blur-sm hidden items-center justify-center">
-            <!-- 关闭按钮 -->
             <button id="lightbox-close" class="absolute top-4 right-4 md:top-8 md:right-8 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-white hover:text-cyan-400 transition text-2xl md:text-3xl z-10">
                 <i class="fa-solid fa-xmark"></i>
             </button>
 
-            <!-- 左右切换按钮 -->
             <button id="lightbox-prev" class="absolute left-2 md:left-8 top-1/2 -translate-y-1/2 w-10 h-10 md:w-14 md:h-14 flex items-center justify-center text-white hover:text-cyan-400 transition text-2xl md:text-4xl z-10">
                 <i class="fa-solid fa-chevron-left"></i>
             </button>
@@ -388,12 +885,10 @@
                 <i class="fa-solid fa-chevron-right"></i>
             </button>
 
-            <!-- 图片容器 -->
             <div class="relative w-full h-full flex items-center justify-center p-4 md:p-16">
                 <img id="lightbox-image" src="" alt="" class="max-w-full max-h-full object-contain">
             </div>
 
-            <!-- 图片序号指示器 -->
             <div id="lightbox-counter" class="absolute bottom-4 md:bottom-8 left-1/2 -translate-x-1/2 text-white text-sm md:text-base bg-black/50 px-4 py-2 rounded-full">
                 <span id="lightbox-current">1</span> / <span id="lightbox-total">1</span>
             </div>
@@ -405,6 +900,261 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
 
+    <!-- 页面切换脚本 -->
+    <script>
+        window.appInstance = null;
+
+        document.getElementById('referral-split-card').addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // 隐藏首页，显示3D平台容器
+            document.getElementById('home-wrapper').classList.add('hidden');
+            document.getElementById('app-container').classList.remove('hidden');
+
+            // 等待 appInstance 初始化完成，然后启动3D平台
+            const tryStartApp = () => {
+                if (window.appInstance && typeof window.appInstance.switchToApp === 'function') {
+                    window.appInstance.switchToApp();
+                } else {
+                    // 如果还未初始化，50ms后重试
+                    setTimeout(tryStartApp, 50);
+                }
+            };
+
+            tryStartApp();
+        });
+
+        // 教务系统点击
+        document.getElementById('education-card').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('home-wrapper').classList.add('hidden');
+            document.getElementById('education-iframe').classList.remove('hidden');
+        });
+
+        // 就业规划点击
+        document.getElementById('career-card').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('home-wrapper').classList.add('hidden');
+            document.getElementById('career-iframe').classList.remove('hidden');
+        });
+
+        // 从iframe返回首页
+        window.backToHomeFromIframe = function() {
+            document.getElementById('education-iframe').classList.add('hidden');
+            document.getElementById('career-iframe').classList.add('hidden');
+            document.getElementById('home-wrapper').classList.remove('hidden');
+        };
+
+        // 过渡岗位点击
+        document.getElementById('transition-split-card').addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            document.getElementById('home-wrapper').classList.add('hidden');
+            document.getElementById('transition-jobs-page').classList.remove('hidden');
+        });
+
+        // 从过渡岗位返回首页
+        window.backToHomeFromTransition = function() {
+            document.getElementById('transition-jobs-page').classList.add('hidden');
+            document.getElementById('home-wrapper').classList.remove('hidden');
+        };
+
+        window.backToHome = function() {
+            const appContainer = document.getElementById('app-container');
+            const homeWrapper = document.getElementById('home-wrapper');
+            
+            // 隐藏3D平台，显示首页
+            appContainer.classList.add('hidden');
+            homeWrapper.classList.remove('hidden');
+            
+            // 重置3D平台的2D地图初始化标志，以便下次进入时重新初始化
+            if (window.appInstance) {
+                window.appInstance.is2DInitialized = false;
+            }
+        };
+    </script>
+
+    <!-- 过渡岗位页面脚本 -->
+    <script>
+        // 过渡岗位页面的JavaScript逻辑
+        (function() {
+            // --- 模拟数据 ---
+            const allJobs = [
+                { id: 1, title: "Java 高级后端开发", company: "恒力集团", salary: "25-45k", icon: "fa-server", tags: ["苏州", "Spring Cloud"] },
+                { id: 2, title: "AI 大模型算法专家", company: "未来智能", salary: "50-80k", icon: "fa-brain", tags: ["北京", "NLP", "Pytorch"] },
+                { id: 3, title: "资深产品经理 (B端)", company: "字节跳动", salary: "30-55k", icon: "fa-cube", tags: ["上海", "SaaS"] },
+                { id: 4, title: "嵌入式系统架构师", company: "科沃斯", salary: "35-60k", icon: "fa-microchip", tags: ["苏州", "ROS"] },
+                { id: 5, title: "跨境电商运营总监", company: "SHEIN", salary: "40-70k", icon: "fa-globe", tags: ["广州", "欧美市场"] },
+                { id: 6, title: "高级前端工程师", company: "微软", salary: "30-50k", icon: "fa-code", tags: ["苏州", "React", "TypeScript"] },
+                { id: 7, title: "供应链数据分析师", company: "恒力集团", salary: "18-30k", icon: "fa-chart-pie", tags: ["大连", "SQL"] },
+                { id: 8, title: "自动驾驶感知算法", company: "Momenta", salary: "35-65k", icon: "fa-car", tags: ["苏州", "C++"] },
+                { id: 9, title: "HRBP (研发向)", company: "阿里巴巴", salary: "25-40k", icon: "fa-users", tags: ["杭州", "OD"] },
+                { id: 10, title: "品牌视觉设计专家", company: "腾讯", salary: "25-45k", icon: "fa-pen-nib", tags: ["深圳", "C4D"] },
+                { id: 11, title: "云原生架构师", company: "华为云", salary: "50-90k", icon: "fa-cloud", tags: ["南京", "K8s"] },
+                { id: 12, title: "游戏客户端开发", company: "米哈游", salary: "30-60k", icon: "fa-gamepad", tags: ["上海", "Unity"] }
+            ];
+
+            // --- 状态 ---
+            let selectedJobs = [];
+            const MAX_SELECTION = 5;
+
+            // --- DOM ---
+            const slotContainer = document.getElementById('trans-slot-container');
+            const jobGrid = document.getElementById('trans-job-grid');
+            const countDisplay = document.getElementById('trans-count-display');
+            const submitBtn = document.getElementById('trans-submit-btn');
+
+            // 1. 初始化空槽位
+            function initSlots() {
+                slotContainer.innerHTML = '';
+                for (let i = 0; i < MAX_SELECTION; i++) {
+                    const slot = document.createElement('div');
+                    slot.className = 'slot-module empty';
+                    slot.id = `slot-${i}`;
+                    slot.onclick = () => removeJobByIndex(i);
+                    
+                    slot.innerHTML = `
+                        <div class="slot-index">0${i+1}</div>
+                        <i class="fa-solid fa-plus text-2xl mb-2 opacity-20 text-gray-500"></i>
+                        <div class="text-xs text-gray-500 font-bold tracking-widest">待选择</div>
+                    `;
+                    slotContainer.appendChild(slot);
+                }
+            }
+
+            // 2. 渲染岗位网格
+            function renderJobGrid() {
+                jobGrid.innerHTML = '';
+                allJobs.forEach(job => {
+                    const isSelected = selectedJobs.includes(job.id);
+                    
+                    const card = document.createElement('div');
+                    card.className = `job-card ${isSelected ? 'disabled' : ''}`;
+                    card.id = `job-card-${job.id}`;
+                    card.onclick = () => selectJob(job.id);
+
+                    const tagsHtml = job.tags.map(t => `<span class="tag">${t}</span>`).join('');
+
+                    card.innerHTML = `
+                        <div class="card-top">
+                            <div class="card-icon"><i class="fa-solid ${job.icon}"></i></div>
+                            <div class="card-salary">${job.salary}</div>
+                        </div>
+                        <div>
+                            <div class="card-title">${job.title}</div>
+                            <div class="card-company">
+                                <i class="fa-regular fa-building"></i> ${job.company}
+                            </div>
+                            <div class="card-tags">${tagsHtml}</div>
+                        </div>
+                        <div class="check-mark"><i class="fa-solid fa-circle-check"></i></div>
+                    `;
+                    jobGrid.appendChild(card);
+                });
+            }
+
+            // --- 交互逻辑 ---
+
+            function selectJob(id) {
+                if (selectedJobs.includes(id)) return;
+                
+                if (selectedJobs.length >= MAX_SELECTION) {
+                    // 弹性震动反馈
+                    gsap.fromTo(slotContainer, { x: -8 }, { x: 0, duration: 0.4, ease: "elastic.out(1, 0.3)" });
+                    return;
+                }
+
+                selectedJobs.push(id);
+                updateUI(true, id);
+            }
+
+            function removeJobByIndex(index) {
+                if (index >= selectedJobs.length) return;
+                const removedId = selectedJobs[index];
+                selectedJobs.splice(index, 1);
+                updateUI(false, removedId);
+            }
+
+            function updateUI(isAdding, targetId) {
+                // 1. 更新槽位
+                const slots = slotContainer.children;
+                for (let i = 0; i < MAX_SELECTION; i++) {
+                    const slot = slots[i];
+                    const jobId = selectedJobs[i];
+
+                    if (jobId) {
+                        const job = allJobs.find(j => j.id === jobId);
+                        
+                        if (slot.classList.contains('empty') || slot.dataset.lastId != jobId) {
+                            slot.className = 'slot-module filled'; 
+                            slot.dataset.lastId = jobId;
+                            
+                            slot.innerHTML = `
+                                <div class="slot-index">0${i+1}</div>
+                                <div class="slot-content-title">${job.title}</div>
+                                <div class="slot-content-salary">${job.salary}</div>
+                                <div class="slot-content-company">${job.company}</div>
+                                <div class="slot-remove-mask">
+                                    <i class="fa-solid fa-trash-can text-2xl mb-2"></i>
+                                    <span class="text-xs font-bold tracking-widest">移除岗位</span>
+                                </div>
+                            `;
+                            
+                            if(isAdding && i === selectedJobs.length - 1) {
+                                gsap.fromTo(slot, 
+                                    { y: -30, opacity: 0, scale: 0.8 }, 
+                                    { y: 0, opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.5)" }
+                                );
+                            }
+                        }
+                    } else {
+                        if (!slot.classList.contains('empty')) {
+                            slot.className = 'slot-module empty';
+                            delete slot.dataset.lastId;
+                            slot.innerHTML = `
+                                <div class="slot-index">0${i+1}</div>
+                                <i class="fa-solid fa-plus text-2xl mb-2 opacity-20 text-gray-500"></i>
+                                <div class="text-xs text-gray-500 font-bold tracking-widest">待选择</div>
+                            `;
+                        }
+                    }
+                }
+
+                // 2. 更新列表状态 (带动画修复)
+                if (targetId) {
+                    const card = document.getElementById(`job-card-${targetId}`);
+                    if (card) {
+                        if (isAdding) {
+                            card.classList.add('disabled');
+                            gsap.to(card, { scale: 0.92, opacity: 0.3, duration: 0.3, ease: "power2.out" });
+                        } else {
+                            card.classList.remove('disabled');
+                            // 关键修复：清除 GSAP 内联样式，恢复 CSS Hover
+                            gsap.to(card, { 
+                                scale: 1, opacity: 1, duration: 0.4, ease: "back.out(1.2)",
+                                clearProps: "all" 
+                            });
+                        }
+                    }
+                }
+
+                // 3. 更新按钮
+                countDisplay.innerText = selectedJobs.length;
+                if (selectedJobs.length > 0) {
+                    submitBtn.classList.add('active');
+                    submitBtn.innerHTML = `确认投递 (${selectedJobs.length}) <i class="fa-solid fa-paper-plane"></i>`;
+                } else {
+                    submitBtn.classList.remove('active');
+                    submitBtn.innerHTML = `请先选择岗位 <i class="fa-solid fa-ban"></i>`;
+                }
+            }
+
+            initSlots();
+            renderJobGrid();
+        })();
+    </script>
+
     <!-- 应用主入口（ES Module） -->
     <script type="module" src="./js/main.js"></script>
 
diff --git a/js/main.js b/js/main.js
index 40ba968..963b6ad 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,21 +8,15 @@ import { ListInterface } from './ui/ListInterface.js';
 import { DetailInterface } from './ui/DetailInterface.js';
 import { SearchController } from './ui/SearchController.js';
 import { UIUtils } from './ui/UIUtils.js';
-import { initWebsite, switchPage } from './website.js';
 
 class App {
     constructor() {
-        // 官网 DOM 引用
-        this.websiteContainer = document.getElementById('website-container');
-        this.appContainer = document.getElementById('app-container');
-        this.navbar = document.getElementById('navbar');
-
         // 3D平台 DOM 引用
+        this.appContainer = document.getElementById('app-container');
         this.canvasContainer = document.getElementById('canvas-container');
         this.mapInterface = document.getElementById('map-interface');
         this.listInterface = document.getElementById('list-interface');
         this.detailInterface = document.getElementById('detail-interface');
-        this.mapLogoArea = document.getElementById('map-logo-area');
 
         // UI 元素
         this.uiLayer = document.getElementById('ui-layer');
@@ -44,10 +38,7 @@ class App {
 
     // 初始化应用
     async init() {
-        // 1. 优先初始化官网（立即执行，等待CSV加载）
-        await initWebsite(() => this.switchToApp());
-
-        // 2. 初始化 3D 平台的控制器（但不启动场景）
+        // 初始化 3D 平台的控制器（但不启动）
         this.mapController = new MapInterface(
             this.mapInterface,
             (cityName) => this.showList(cityName)
@@ -100,28 +91,15 @@ class App {
             });
         }
 
-        // 3. 绑定全局函数和事件
+        // 绑定全局函数和事件
         this.bindGlobalFunctions();
 
-        // 4. 默认显示官网首页
-        this.showWebsite();
-    }
-
-    // 显示官网（确保官网可见，3D隐藏）
-    showWebsite() {
-        this.websiteContainer.classList.remove('hidden');
-        this.appContainer.classList.add('hidden');
-        this.navbar.classList.remove('-translate-y-full');
+        // 将应用实例暴露给全局，供页面切换使用
+        window.appInstance = this;
     }
 
     // 切换到 3D 内推平台
     switchToApp() {
-        // 隐藏官网
-        this.websiteContainer.classList.add('hidden');
-
-        // 隐藏顶部导航栏（全屏体验）
-        this.navbar.classList.add('-translate-y-full');
-
         // 显示 3D 容器
         this.appContainer.classList.remove('hidden');
 
@@ -165,21 +143,6 @@ class App {
         });
     }
 
-    // 从 3D 平台返回官网
-    switchToWebsite(pageId = 'news') {
-        // 隐藏 3D 容器
-        this.appContainer.classList.add('hidden');
-
-        // 显示官网
-        this.websiteContainer.classList.remove('hidden');
-
-        // 显示导航栏
-        this.navbar.classList.remove('-translate-y-full');
-
-        // 切换到指定页面
-        switchPage(pageId);
-    }
-
     // 转场完成回调（3D地球 → 2D地图）
     onTransitionComplete() {
         this.switchTo2D();
@@ -255,10 +218,11 @@ class App {
 
     // 绑定全局函数和事件
     bindGlobalFunctions() {
-        // 地图界面logo点击返回官网
-        if (this.mapLogoArea) {
-            this.mapLogoArea.addEventListener('click', () => {
-                this.switchToWebsite('news');
+        // 地图界面logo点击返回首页
+        const mapLogoArea = document.getElementById('map-logo-area');
+        if (mapLogoArea) {
+            mapLogoArea.addEventListener('click', () => {
+                window.backToHome();
             });
         }
 
diff --git a/js/ui/DetailInterface.js b/js/ui/DetailInterface.js
index 9cd10f3..be88765 100644
--- a/js/ui/DetailInterface.js
+++ b/js/ui/DetailInterface.js
@@ -138,8 +138,11 @@ export class DetailInterface {
         // 填充业务板块
         this.renderSegments(company.segments);
 
-        // 显示界面
+        // 显示界面 - 先设置为不可见状态，避免闪烁
+        this.container.style.opacity = '0';
         this.container.style.display = 'block';
+
+        // 立即淡入
         gsap.to(this.container, {
             opacity: 1,
             duration: CONFIG.animation.ui.fadeDuration
diff --git a/js/ui/ListInterface.js b/js/ui/ListInterface.js
index 9f993c0..7c1f47f 100644
--- a/js/ui/ListInterface.js
+++ b/js/ui/ListInterface.js
@@ -51,8 +51,11 @@ export class ListInterface {
             this.cardsContainer.appendChild(card);
         });
 
-        // 显示界面
+        // 显示界面 - 先设置为不可见状态，避免闪烁
+        this.container.style.opacity = '0';
         this.container.style.display = 'block';
+
+        // 立即淡入
         gsap.to(this.container, {
             opacity: 1,
             duration: CONFIG.animation.ui.fadeDuration
diff --git a/启动服务器.bat b/启动服务器.bat
new file mode 100644
index 0000000..0854253
--- /dev/null
+++ b/启动服务器.bat
@@ -0,0 +1,51 @@
+@echo off
+chcp 65001 >nul
+title 多多畅职大专生就业服务平台 - 局域网服务器
+
+echo.
+echo ========================================
+echo    多多畅职大专生就业服务平台
+echo    局域网服务器启动脚本 (Windows)
+echo ========================================
+echo.
+
+:: 检查 Node.js 是否安装
+where node >nul 2>nul
+if %errorlevel% neq 0 (
+    echo [错误] 未检测到 Node.js！
+    echo.
+    echo 请先安装 Node.js:
+    echo 下载地址: https://nodejs.org/
+    echo.
+    pause
+    exit /b 1
+)
+
+:: 显示 Node.js 版本
+echo [信息] 检测到 Node.js 版本:
+node --version
+echo.
+
+:: 检查 server.js 是否存在
+if not exist "server.js" (
+    echo [错误] 找不到 server.js 文件！
+    echo 请确保在项目根目录运行此脚本。
+    echo.
+    pause
+    exit /b 1
+)
+
+:: 启动服务器
+echo [启动] 正在启动局域网服务器...
+echo.
+echo ========================================
+echo 提示: 按 Ctrl+C 可停止服务器
+echo ========================================
+echo.
+
+node server.js
+
+:: 如果服务器意外退出
+echo.
+echo [提示] 服务器已停止运行
+pause
diff --git a/启动服务器.sh b/启动服务器.sh
new file mode 100755
index 0000000..311f2d8
--- /dev/null
+++ b/启动服务器.sh
@@ -0,0 +1,72 @@
+#!/bin/bash
+
+# 设置脚本在遇到错误时不退出（允许自定义错误处理）
+# set -e
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+# 清屏
+clear
+
+echo ""
+echo "${CYAN}========================================"
+echo "   多多畅职大专生就业服务平台"
+echo "   局域网服务器启动脚本 (macOS/Linux)"
+echo "========================================${NC}"
+echo ""
+
+# 检查 Node.js 是否安装
+if ! command -v node &> /dev/null; then
+    echo "${RED}[错误] 未检测到 Node.js！${NC}"
+    echo ""
+    echo "请先安装 Node.js:"
+    echo "下载地址: ${BLUE}https://nodejs.org/${NC}"
+    echo ""
+    echo "或使用 Homebrew 安装:"
+    echo "${YELLOW}brew install node${NC}"
+    echo ""
+    exit 1
+fi
+
+# 显示 Node.js 版本
+echo "${GREEN}[信息] 检测到 Node.js 版本:${NC}"
+node --version
+echo ""
+
+# 检查 server.js 是否存在
+if [ ! -f "server.js" ]; then
+    echo "${RED}[错误] 找不到 server.js 文件！${NC}"
+    echo "请确保在项目根目录运行此脚本。"
+    echo ""
+    echo "当前目录: ${YELLOW}$(pwd)${NC}"
+    echo ""
+    exit 1
+fi
+
+# 获取本机局域网IP
+LOCAL_IP=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -n 1)
+
+echo "${GREEN}[启动] 正在启动局域网服务器...${NC}"
+echo ""
+echo "${CYAN}========================================"
+echo "提示: 按 Ctrl+C 可停止服务器"
+echo ""
+echo "预计访问地址:"
+echo "📍 本机: ${YELLOW}http://localhost:8080${NC}"
+echo "📍 局域网: ${YELLOW}http://${LOCAL_IP}:8080${NC}"
+echo "========================================${NC}"
+echo ""
+
+# 启动服务器
+node server.js
+
+# 如果服务器意外退出
+echo ""
+echo "${YELLOW}[提示] 服务器已停止运行${NC}"
+echo ""
diff --git a/快捷部署说明.md b/快捷部署说明.md
new file mode 100644
index 0000000..5fb0600
--- /dev/null
+++ b/快捷部署说明.md
@@ -0,0 +1,144 @@
+# 🚀 快捷部署指南
+
+本项目提供了 Windows 和 macOS 的一键启动脚本，方便快速部署到局域网。
+
+---
+
+## 📦 前置要求
+
+### 必须安装 Node.js
+
+- **macOS**:
+  - 官方下载: https://nodejs.org/
+  - Homebrew 安装: `brew install node`
+
+- **Windows**:
+  - 官方下载: https://nodejs.org/
+  - 建议下载 LTS（长期支持）版本
+
+---
+
+## 🍎 macOS / Linux 使用方法
+
+### 方法一：双击运行（推荐）
+1. 找到项目文件夹中的 `启动服务器.sh`
+2. **双击**运行（系统会自动使用终端打开）
+3. 如果提示权限问题，请使用方法二
+
+### 方法二：命令行运行
+```bash
+# 1. 打开终端（Terminal）
+# 2. 进入项目目录
+cd /Users/apple/Documents/cursor/三合一页面
+
+# 3. 运行脚本
+./启动服务器.sh
+```
+
+### 方法三：直接拖拽
+1. 打开终端（Terminal）
+2. 拖拽 `启动服务器.sh` 到终端窗口
+3. 按回车
+
+---
+
+## 🪟 Windows 使用方法
+
+### 方法一：双击运行（推荐）
+1. 找到项目文件夹中的 `启动服务器.bat`
+2. **双击**运行
+3. 会自动打开命令提示符窗口
+
+### 方法二：右键管理员运行（可选）
+1. 右键点击 `启动服务器.bat`
+2. 选择「以管理员身份运行」
+3. 点击「是」允许运行
+
+---
+
+## 📱 如何访问
+
+脚本启动后，会显示访问地址：
+
+```
+📍 本机访问: http://localhost:8080
+📍 局域网访问: http://192.168.2.9:8080
+```
+
+### 本机访问
+- 在启动服务器的电脑上打开浏览器
+- 输入: `http://localhost:8080`
+
+### 手机/平板访问
+1. 确保设备连接到**同一个 WiFi**
+2. 打开浏览器
+3. 输入局域网地址（如 `http://192.168.2.9:8080`）
+
+---
+
+## ⏹️ 如何停止服务器
+
+- **macOS / Linux**: 按 `Ctrl + C`
+- **Windows**: 按 `Ctrl + C` 或直接关闭窗口
+
+---
+
+## ❓ 常见问题
+
+### 1. 提示「找不到 Node.js」
+**原因**: 未安装 Node.js
+**解决**: 访问 https://nodejs.org/ 下载安装
+
+### 2. macOS 提示「权限被拒绝」
+**解决方法**:
+```bash
+chmod +x 启动服务器.sh
+```
+
+### 3. 手机无法访问局域网地址
+**检查清单**:
+- ✅ 手机和电脑是否连接到同一个 WiFi
+- ✅ 服务器是否正在运行
+- ✅ 电脑防火墙是否阻止了 8080 端口
+- ✅ IP 地址是否输入正确
+
+**macOS 防火墙设置**:
+1. 系统偏好设置 → 安全性与隐私 → 防火墙
+2. 点击「防火墙选项」
+3. 确保允许 Node.js 的网络连接
+
+**Windows 防火墙设置**:
+1. 控制面板 → Windows Defender 防火墙
+2. 高级设置 → 入站规则
+3. 新建规则，允许端口 8080
+
+### 4. 端口 8080 被占用
+**解决方法**: 修改 `server.js` 中的端口号
+```javascript
+const PORT = 8080; // 改成其他端口，如 3000
+```
+
+---
+
+## 🔧 高级配置
+
+如需修改端口或其他配置，请编辑 `server.js` 文件:
+
+```javascript
+const PORT = 8080; // 修改端口号
+```
+
+修改后重新运行启动脚本即可。
+
+---
+
+## 📞 技术支持
+
+如遇到其他问题，请检查:
+1. Node.js 版本: `node --version` (建议 v14 以上)
+2. 项目文件是否完整
+3. 防火墙设置
+
+---
+
+**祝使用愉快！** 🎉