https://jmuer.top/ Recent content on 航海家的摇篮 | 轮机工程学院 Hugo zh-cn Wed, 13 May 2026 00:00:00 +0000 https://jmuer.top/posts/mec-bento/ Wed, 13 May 2026 00:00:00 +0000 https://jmuer.top/posts/mec-bento/ <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Lora:ital,wght@0,700;1,400;1,600&display=swap" rel="stylesheet"> <style> /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BENTO · NOTION STYLE 暖白简约 · 轮机工程学院 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .nb-wrap { font-family: 'Plus Jakarta Sans', sans-serif; background: #fafaf9; border-radius: 16px; padding: 28px; margin: 28px 0; } /* ── Grid ── */ .nb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } /* ── 通用卡片 ── */ .nb-card { background: #ffffff; border: 1px solid #e9e9e7; border-radius: 12px; padding: 22px 24px; position: relative; overflow: hidden; transition: box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease; } .nb-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04); background: #fafaf9; transform: translateY(-2px); } /* ── 标签文字 ── */ .nb-eyebrow { font-size: 0.68em; font-weight: 600; color: #aeaca8; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 12px; } /* ── 卡片标题 ── */ .nb-heading { font-size: 1.05em; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; line-height: 1.3; } /* ━━ 英雄卡：跨 4 列 ━━ */ .nb-hero { grid-column: span 4; background: #f7f6f3; border-color: #e4e3df; padding: 32px 36px; } .hero-label { font-size: 0.7em; font-weight: 600; color: #aeaca8; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .hero-label::before { content: ''; width: 18px; height: 1.5px; background: #cfcdc9; display: inline-block; flex-shrink: 0; } .hero-title { font-family: 'Lora', serif; font-size: 2.4em; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin-bottom: 6px; letter-spacing: -0.5px; } .hero-title em { font-style: italic; font-weight: 400; color: #555452; } .hero-sub { font-size: 0.82em; color: #aeaca8; letter-spacing: 0.5px; margin-bottom: 18px; font-weight: 500; } .hero-divider { height: 1px; background: #e4e3df; margin: 18px 0; } .hero-body { font-size: 0.92em; color: #555452; line-height: 1.85; max-width: 500px; } .hero-body strong { color: #1a1a1a; font-weight: 600; } /* ━━ 年份卡：跨 2 列 ━━ */ .nb-year { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; background: #1a1a1a; border-color: #1a1a1a; } .nb-year:hover { background: #2a2a2a; } .year-eyebrow { font-size: 0.66em; font-weight: 600; color: #787774; letter-spacing: 1.8px; text-transform: uppercase; } .year-num { font-family: 'Lora', serif; font-size: 3.8em; font-weight: 700; color: #ffffff; line-height: 1; letter-spacing: -2px; } .year-label { font-size: 0.8em; color: #787774; font-weight: 500; line-height: 1.5; } .year-dot { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1em; margin-bottom: 14px; } /* ━━ 专业卡：跨 3 列 ━━ */ .nb-prog { grid-column: span 3; } .prog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .prog-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f0ee; font-size: 0.88em; color: #37352f; font-weight: 500; } .prog-item:last-child { border-bottom: none; } .prog-idx { font-size: 0.72em; color: #cfcdc9; font-weight: 600; min-width: 20px; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } .prog-badge { margin-left: auto; background: #f1f0ee; color: #787774; font-size: 0.72em; font-weight: 600; padding: 3px 9px; border-radius: 5px; letter-spacing: 0.3px; white-space: nowrap; } .prog-badge.hot { background: #fef3c7; color: #92400e; } /* ━━ 统计徽章卡：跨 1 列 ━━ */ .nb-stat { grid-column: span 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 140px; } .stat-num { font-family: 'Lora', serif; font-size: 2.6em; font-weight: 700; color: #1a1a1a; line-height: 1; letter-spacing: -1px; } .stat-num sup { font-size: 0.38em; color: #aeaca8; vertical-align: super; letter-spacing: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; } .stat-label { font-size: 0.78em; color: #aeaca8; font-weight: 500; line-height: 1.4; } /* ━━ 历史时间轴：跨 2 列 ━━ */ .nb-hist { grid-column: span 2; } .tl-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } .tl-item { display: flex; gap: 12px; align-items: flex-start; } .tl-dot { width: 7px; height: 7px; border-radius: 50%; background: #cfcdc9; margin-top: 5px; flex-shrink: 0; } .tl-dot.now { background: #1a1a1a; box-shadow: 0 0 0 3px rgba(26,26,26,0.08); } .tl-body {} .tl-year { font-size: 0.7em; font-weight: 700; color: #aeaca8; letter-spacing: 0.5px; margin-bottom: 2px; } .tl-text { font-size: 0.84em; color: #555452; line-height: 1.65; } /* ━━ 荣誉卡：跨 4 列 ━━ */ .nb-honor { grid-column: span 4; } .honor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .honor-item { background: #fafaf9; border: 1px solid #f1f0ee; border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; transition: background 0.2s ease; } .honor-item:hover { background: #f7f6f3; } .honor-icon { font-size: 1.15em; flex-shrink: 0; margin-top: 1px; } .honor-text {} .honor-title { font-size: 0.85em; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; } .honor-desc { font-size: 0.8em; color: #787774; line-height: 1.55; } /* ━━ 标签云：跨 2 列 ━━ */ .nb-tags { grid-column: span 2; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; } .nb-tag { background: #f1f0ee; color: #555452; font-size: 0.8em; font-weight: 600; padding: 5px 12px; border-radius: 6px; letter-spacing: 0.2px; transition: background 0.15s ease, color 0.15s ease; } .nb-tag:hover { background: #e9e9e7; color: #1a1a1a; } .nb-tag.key { background: #1a1a1a; color: #ffffff; } /* ━━ 金句横幅：跨 6 列 ━━ */ .nb-quote { grid-column: span 6; background: #f7f6f3; border-color: #e4e3df; padding: 28px 36px; display: flex; align-items: flex-start; gap: 20px; } .quote-rule { width: 3px; min-height: 60px; background: #e4e3df; border-radius: 2px; flex-shrink: 0; align-self: stretch; } .quote-inner {} .quote-text { font-family: 'Lora', serif; font-style: italic; font-size: 1.1em; color: #37352f; line-height: 1.9; } .quote-text strong { font-style: normal; font-weight: 600; color: #1a1a1a; } .quote-source { font-size: 0.72em; font-weight: 600; color: #cfcdc9; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 12px; } /* ━━ 响应式 ━━ */ @media (max-width: 720px) { .nb-grid { grid-template-columns: repeat(2, 1fr); } .nb-hero, .nb-honor, .nb-quote { grid-column: span 2; } .nb-year, .nb-prog, .nb-hist, .nb-tags { grid-column: span 2; } .nb-stat { grid-column: span 1; } .hero-title { font-size: 1.8em; } } @media (max-width: 480px) { .nb-grid { grid-template-columns: 1fr; } .nb-hero, .nb-year, .nb-prog, .nb-stat, .nb-hist, .nb-honor, .nb-tags, .nb-quote { grid-column: span 1; } .nb-wrap { padding: 14px; } .honor-grid { grid-template-columns: 1fr; } } </style> <div class="nb-wrap"> <div class="nb-grid"> <!-- ━━ 英雄卡 ━━ --> <div class="nb-card nb-hero"> <div class="hero-label">MARINE ENGINEERING COLLEGE · JMU</div> <div class="hero-title">诚毅铸魂，<em>走向深蓝</em></div> <div class="hero-sub">集美大学 · 轮机工程学院</div> <div class="hero-divider"></div> <div class="hero-body"> <strong>集美大学轮机工程学院</strong>是集美大学办学历史最悠久、最具航海特色的王牌学院。前身可追溯至爱国侨领<strong>陈嘉庚先生</strong>于 1920 年创办的集美学校水产科，百年底蕴深厚，在业内享有「<strong>航海家的摇篮</strong>」之美誉，轮机工程与船舶海洋工程等核心专业享有极高的学术水平与行业认可度。 </div> </div> <!-- ━━ 年份卡 ━━ --> <div class="nb-card nb-year"> <div> <div class="year-dot">⚓</div> <div class="year-eyebrow">FOUNDED</div> </div> <div> <div class="year-num">1920</div> <div class="year-label">立院元年<br>陈嘉庚创办</div> </div> </div> <!-- ━━ 核心专业 ━━ --> <div class="nb-card nb-prog"> <div class="nb-eyebrow">核心专业</div> <div class="nb-heading">教学体系</div> <ul class="prog-list"> <li class="prog-item"><span class="prog-idx">01</span>轮机工程<span class="prog-badge hot">国家级特色</span></li> <li class="prog-item"><span class="prog-idx">02</span>船舶与海洋工程<span class="prog-badge hot">省级重点</span></li> <li class="prog-item"><span class="prog-idx">03</span>能源与动力工程<span class="prog-badge">本科</span></li> <li class="prog-item"><span class="prog-idx">04</span>电气工程及其自动化<span class="prog-badge">本科</span></li> </ul> </div> <!-- ━━ 统计卡 × 3 ━━ --> <div class="nb-card nb-stat"> <div class="nb-eyebrow">办学年限</div> <div class="stat-num">100⁺</div> <div class="stat-label">百年薪火<br>薪传不息</div> </div> <div class="nb-card nb-stat"> <div class="nb-eyebrow">管理风格</div> <div style="font-family:'Lora',serif;font-size:1.5em;font-weight:700;color:#1a1a1a;line-height:1.2;letter-spacing:-0.5px;">半军事<br>化管理</div> <div class="stat-label">严谨作风<br>令行禁止</div> </div> <div class="nb-card nb-stat"> <div class="nb-eyebrow">行业地位</div> <div style="font-family:'Lora',serif;font-size:1.5em;font-weight:700;color:#1a1a1a;line-height:1.2;letter-spacing:-0.5px;">远洋<br>中流</div> <div class="stat-label">广布船队<br>砥柱栋梁</div> </div> <!-- ━━ 历史沿革 ━━ --> <div class="nb-card nb-hist"> <div class="nb-eyebrow">历史沿革</div> <div class="nb-heading">百年薪火</div> <div class="tl-wrap"> <div class="tl-item"> <div class="tl-dot"></div> <div class="tl-body"> <div class="tl-year">1920</div> <div class="tl-text">陈嘉庚先生创办集美学校水产科，播下海洋工程教育的火种</div> </div> </div> <div class="tl-item"> <div class="tl-dot"></div> <div class="tl-body"> <div class="tl-year">建国后</div> <div class="tl-text">院系历经调整，轮机工程专业持续发展壮大，成为行业输送重要力量</div> </div> </div> <div class="tl-item"> <div class="tl-dot now"></div> <div class="tl-body"> <div class="tl-year">当代</div> <div class="tl-text">拥有完整本硕博培养体系，深度对接绿色航运与数字化转型前沿</div> </div> </div> </div> </div> <!-- ━━ 荣誉成就 ━━ --> <div class="nb-card nb-honor"> <div class="nb-eyebrow">学院荣誉</div> <div class="nb-heading">硬核实力</div> <div class="honor-grid"> <div class="honor-item"> <div class="honor-icon">🏆</div> <div class="honor-text"> <div class="honor-title">现代化模拟舱</div> <div class="honor-desc">完备的大型航海模拟实训中心，全真还原海上作业场景</div> </div> </div> <div class="honor-item"> <div class="honor-icon">⚙️</div> <div class="honor-text"> <div class="honor-title">半军事化管理</div> <div class="honor-desc">严谨作风传统，培养精工细作、令行禁止的工程师素质</div> </div> </div> <div class="honor-item"> <div class="honor-icon">🌊</div> <div class="honor-text"> <div class="honor-title">行业认可度</div> <div class="honor-desc">毕业生广布远洋船队，是中国远洋航运的中流砥柱</div> </div> </div> <div class="honor-item"> <div class="honor-icon">🔬</div> <div class="honor-text"> <div class="honor-title">科研协同</div> <div class="honor-desc">深度对接航运数字化转型与绿色海洋工程前沿领域</div> </div> </div> </div> </div> <!-- ━━ 标签云 ━━ --> <div class="nb-card nb-tags"> <div class="nb-eyebrow">关键词</div> <div class="nb-heading">学院画像</div> <div class="tag-cloud"> <span class="nb-tag key">百年学府</span> <span class="nb-tag key">航海家摇篮</span> <span class="nb-tag">半军事化管理</span> <span class="nb-tag">陈嘉庚精神</span> <span class="nb-tag">远洋船队</span> <span class="nb-tag">绿色航运</span> <span class="nb-tag">数字化转型</span> <span class="nb-tag">海洋工程</span> <span class="nb-tag">诚毅校训</span> </div> </div> <!-- ━━ 金句横幅 ━━ --> <div class="nb-card nb-quote"> <div class="quote-rule"></div> <div class="quote-inner"> <div class="quote-text"> 无论是深耕<strong>海工制造</strong>，还是探索<strong>航运数字化转型</strong>，这里都是青年工程师乘风破浪的起点——以百年诚毅之魂，铸就驶向深蓝的脊梁。 </div> <div class="quote-source">Marine Engineering College · Jimei University · Est. 1920</div> </div> </div> </div> </div>