2036 战舰图鉴 - 模块化展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>2036 战舰图鉴 - 模块化展示</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0e17; font-family: system-ui, sans-serif; -webkit-user-select: none; user-select: none; }
  
  /* 拖拽与缩放容器 */
  .viewport { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
  .viewport.grabbing { cursor: grabbing; }
  .scene { 
    position: absolute; left: 50%; top: 50%; width: 2000px; height: 1200px; 
    margin-left: -1000px; margin-top: -600px; transform-origin: 50% 50%; 
    will-change: transform;
    /* 科技感网格背景 */
    background-image: 
      linear-gradient(rgba(80, 150, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(80, 150, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
  }

  /* 战舰展示容器 */
  .ship-display {
    position: absolute;
    width: 400px; height: 400px;
    /* 居中摆放 */
    left: 50%; top: 50%;
    margin-left: -200px; margin-top: -200px;
    transform-origin: 50% 50%;
  }
  /* 三艘舰的位置分布 */
  #disp-assault { transform: translate(-600px, 0); }
  #disp-laser   { transform: translate(0, 0); }
  #disp-supply  { transform: translate(600px, 0); }

  /* 战舰本体，用来应用旋转 */
  .ship-body {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform: rotate(0deg);
  }

  /* 模块基础样式 */
  .mod { position: absolute; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
  
  /* 蓝方涂装 */
  .theme-blue {
    --hull1: #ffffff; --hull2: #dfe8f2; --hull3: #b8c6d6;
    --panelA: #1d4d86; --panelB: #2b6cb5; --accent: #4a90d9;
    --glow: rgba(120,200,255,0.5);
  }
  
  .mod-body { 
    background: linear-gradient(180deg, var(--hull1) 0%, var(--hull2) 50%, var(--hull3) 100%); 
    border: 1px solid rgba(140,160,180,0.8); 
    z-index: 2;
  }
  .mod-panel { 
    background: repeating-linear-gradient(0deg, var(--panelA) 0px, var(--panelA) 6px, var(--panelB) 6px, var(--panelB) 8px); 
    border: 1px solid var(--accent); 
    box-shadow: 0 0 10px var(--glow); 
    z-index: 1;
  }
  .mod-radar { 
    background: linear-gradient(180deg, #445, #223); 
    border: 1px solid #66a; 
    box-shadow: inset 0 0 10px rgba(100,150,255,0.8); 
    z-index: 3;
  }
  .mod-heat { 
    background: repeating-linear-gradient(90deg, #a44 0px, #a44 4px, #f88 4px, #f88 6px); 
    border: 1px solid #f66; 
    box-shadow: 0 0 8px #f44; 
    z-index: 1;
  }
  
  /* 武器与炮塔 */
  .weapon-rail { 
    background: linear-gradient(180deg, #fff, #7fdcff, #2b6cb5); 
    border: 1px solid #aee; 
    box-shadow: 0 0 10px #7fdcff; 
    z-index: 4;
  }
  .weapon-laser { 
    background: linear-gradient(180deg, #fff, #ff4444, #880000); 
    border: 1px solid #faa; 
    box-shadow: 0 0 15px #f00; 
    z-index: 4;
  }
  .weapon-missile { 
    background: #333; 
    border: 1px dashed #f90; 
    z-index: 3;
  }
  .weapon-ciws { 
    background: #888; 
    border: 1px solid #ccc; 
    border-radius: 50%; 
    z-index: 4;
  }
  
  /* 对接口 */
  .port { 
    background: #223; 
    border: 2px solid #4af; 
    box-shadow: 0 0 8px #4af inset; 
    border-radius: 3px; 
    z-index: 3;
  }

  /* 标签文字 */
  .label {
    position: absolute;
    color: #8cf;
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    text-shadow: 1px 1px 2px #000, 0 0 4px #000;
  }
  /* 标题 */
  .title {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 4px;
    text-shadow: 0 0 10px #4af;
    pointer-events: none;
  }
  .subtitle {
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #7aa;
    letter-spacing: 2px;
    pointer-events: none;
  }

</style>
</head>
<body>

<div class="viewport" id="viewport">
  <div class="scene" id="scene">

    <!-- ================= 1. 突击舰 ================= -->
    <div class="ship-display" id="disp-assault">
      <div class="title">突 击 舰</div>
      <div class="subtitle">Assault Ship</div>
      <div class="ship-body theme-blue">
        <!-- 太阳能板 x4 -->
        <div class="mod mod-panel" style="left:-10px; top:-65px; width:30px; height:15px;"></div>
        <div class="mod mod-panel" style="left:-10px; top:50px; width:30px; height:15px;"></div>
        <div class="mod mod-panel" style="left:40px; top:-65px; width:30px; height:15px;"></div>
        <div class="mod mod-panel" style="left:40px; top:50px; width:30px; height:15px;"></div>
        
        <!-- 散热板 x2 -->
        <div class="mod mod-heat" style="left:-30px; top:-40px; width:15px; height:15px; transform: rotate(-45deg);"></div>
        <div class="mod mod-heat" style="left:-30px; top:25px; width:15px; height:15px; transform: rotate(45deg);"></div>

        <!-- 舱段 -->
        <div class="mod mod-body" style="left:-50px; top:-15px; width:40px; height:30px;"></div> <!-- 前部武器舱 -->
        <div class="mod mod-body" style="left:-10px; top:-20px; width:50px; height:40px;"></div> <!-- 核心舱 -->
        <div class="mod mod-radar" style="left:40px; top:-15px; width:20px; height:30px;"></div> <!-- 电子舱 -->
        <div class="mod mod-body" style="left:60px; top:-10px; width:30px; height:20px;"></div> <!-- 动力舱 -->
        
        <!-- 武器 -->
        <!-- 电磁炮 x2 -->
        <div class="mod weapon-rail" style="left:-90px; top:-10px; width:50px; height:6px;"></div>
        <div class="mod weapon-rail" style="left:-90px; top:4px; width:50px; height:6px;"></div>
        <!-- 导弹阵列 -->
        <div class="mod weapon-missile" style="left:-5px; top:-15px; width:20px; height:30px;"></div>
        <div class="mod weapon-missile" style="left:20px; top:-15px; width:20px; height:30px;"></div>
        <!-- 近防炮 -->
        <div class="mod weapon-ciws" style="left:30px; top:-30px; width:8px; height:8px;"></div>
        <div class="mod weapon-ciws" style="left:30px; top:22px; width:8px; height:8px;"></div>

        <!-- 标注 -->
        <div class="label" style="left:-100px; top:-35px;">电磁炮</div>
        <div class="label" style="left:-15px; top:-40px;">导弹单元</div>
        <div class="label" style="left:30px; top:40px;">电子舱 (大雷达)</div>
        <div class="label" style="left:70px; top:-30px;">动力舱</div>
        <div class="label" style="left:-10px; top:65px;">太阳能板 & 散热板</div>
      </div>
    </div>

    <!-- ================= 2. 激光舰 ================= -->
    <div class="ship-display" id="disp-laser">
      <div class="title">激 光 舰</div>
      <div class="subtitle">Laser Ship</div>
      <div class="ship-body theme-blue" style="transform: rotate(0deg);">
        <!-- 太阳能板 x2 -->
        <div class="mod mod-panel" style="left:20px; top:-55px; width:40px; height:15px;"></div>
        <div class="mod mod-panel" style="left:20px; top:40px; width:40px; height:15px;"></div>
        <!-- 散热板 x2 -->
        <div class="mod mod-heat" style="left:70px; top:-35px; width:15px; height:15px; transform: rotate(-45deg);"></div>
        <div class="mod mod-heat" style="left:70px; top:20px; width:15px; height:15px; transform: rotate(45deg);"></div>

        <!-- 舱段 -->
        <div class="mod mod-body" style="left:-30px; top:-20px; width:40px; height:40px;"></div> <!-- 武器舱 -->
        <div class="mod mod-body" style="left:10px; top:-25px; width:40px; height:50px;"></div> <!-- 核心舱 -->
        <div class="mod mod-body" style="left:50px; top:-15px; width:30px; height:30px;"></div> <!-- 生活舱 -->
        <div class="mod mod-body" style="left:80px; top:-10px; width:20px; height:20px;"></div> <!-- 动力舱 -->

        <!-- 武器 -->
        <!-- 巨型舰艏激光炮 -->
        <div class="mod weapon-laser" style="left:-90px; top:-6px; width:60px; height:12px;"></div>
        <div class="mod mod-body" style="left:-40px; top:-12px; width:15px; height:24px; z-index:5;"></div> <!-- 炮座 -->
        
        <!-- 4门点射激光炮 -->
        <div class="mod weapon-ciws" style="left:0px; top:-30px; width:8px; height:8px; background:#f44;"></div>
        <div class="mod weapon-ciws" style="left:0px; top:22px; width:8px; height:8px; background:#f44;"></div>
        <div class="mod weapon-ciws" style="left:30px; top:-30px; width:8px; height:8px; background:#f44;"></div>
        <div class="mod weapon-ciws" style="left:30px; top:22px; width:8px; height:8px; background:#f44;"></div>

        <!-- 标注 -->
        <div class="label" style="left:-110px; top:-25px;">大功率激光炮</div>
        <div class="label" style="left:10px; top:30px;">点射激光塔</div>
        <div class="label" style="left:50px; top:-30px;">生活舱</div>
        <div class="label" style="left:85px; top:-30px;">动力舱</div>
        <div class="label" style="left:15px; top:65px;">太阳能板</div>
      </div>
    </div>

    <!-- ================= 3. 补给舰 ================= -->
    <div class="ship-display" id="disp-supply">
      <div class="title">补 给 舰</div>
      <div class="subtitle">Supply Ship</div>
      <div class="ship-body theme-blue" style="transform: rotate(0deg);">
        <!-- 太阳能板 -->
        <div class="mod mod-panel" style="left:-20px; top:-75px; width:30px; height:20px;"></div>
        <div class="mod mod-panel" style="left:-20px; top:55px; width:30px; height:20px;"></div>
        <div class="mod mod-panel" style="left:20px; top:-75px; width:30px; height:20px;"></div>
        <div class="mod mod-panel" style="left:20px; top:55px; width:30px; height:20px;"></div>

        <!-- 舱段 -->
        <!-- 巨大的补给舱 -->
        <div class="mod mod-body" style="left:-40px; top:-35px; width:80px; height:70px; border: 2px solid #888;"></div> 
        <!-- 动力舱 -->
        <div class="mod mod-body" style="left:40px; top:-20px; width:30px; height:40px;"></div>

        <!-- 对接口 x3 (顶部一个，左右各一个) -->
        <div class="mod port" style="left:-45px; top:-15px; width:5px; height:30px;"></div> <!-- 左侧 -->
        <div class="mod port" style="left:-20px; top:-40px; width:40px; height:5px;"></div> <!-- 顶部 -->
        <div class="mod port" style="left:-20px; top:35px; width:40px; height:5px;"></div> <!-- 底部 -->

        <!-- 武器 -->
        <!-- 近防炮 -->
        <div class="mod weapon-ciws" style="left:10px; top:-45px; width:10px; height:10px;"></div>

        <!-- 标注 -->
        <div class="label" style="left:-50px; top:-60px;">对接口</div>
        <div class="label" style="left:-10px; top:0px;">大型资源补给舱</div>
        <div class="label" style="left:45px; top:-35px;">动力舱</div>
        <div class="label" style="left:-20px; top:75px;">太阳能板 (两侧)</div>
        <div class="label" style="left:15px; top:-65px;">近防炮</div>
      </div>
    </div>

  </div>
</div>

<script>
  // 视角缩放与拖拽逻辑
  let scale = 0.6, tx = 0, ty = 0;
  const viewport = document.getElementById('viewport');
  const scene = document.getElementById('scene');

  function applyT() {
    scene.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
  }
  
  // 初始自适应缩放
  function initScale() {
    const rect = viewport.getBoundingClientRect();
    // 总宽度大约需要容纳 1600px，做个自适应
    const fit = Math.min(rect.width / 1600, rect.height / 800);
    scale = Math.max(0.2, Math.min(1.2, fit));
    applyT();
  }
  window.addEventListener('resize', initScale);
  initScale();

  let pointers = new Map();
  let pinchD = 0;

  viewport.addEventListener('pointerdown', e => {
    viewport.setPointerCapture(e.pointerId);
    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
    viewport.classList.add('grabbing');
    if (pointers.size === 2) {
      let pts = [...pointers.values()];
      pinchD = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
    }
  });

  viewport.addEventListener('pointermove', e => {
    if (!pointers.has(e.pointerId)) return;
    let p = pointers.get(e.pointerId);
    let dx = e.clientX - p.x;
    let dy = e.clientY - p.y;
    p.x = e.clientX;
    p.y = e.clientY;

    if (pointers.size === 1) {
      tx += dx;
      ty += dy;
      applyT();
    } else if (pointers.size === 2) {
      let pts = [...pointers.values()];
      let d = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
      if (pinchD > 0 && d > 0) {
        let ns = scale * (d / pinchD);
        ns = Math.max(0.15, Math.min(3, ns));
        
        // 以双指中心为锚点缩放
        const rect = viewport.getBoundingClientRect();
        const cx = rect.width / 2;
        const cy = rect.height / 2;
        const mx = (pts[0].x + pts[1].x) / 2 - rect.left;
        const my = (pts[0].y + pts[1].y) / 2 - rect.top;
        
        const k = ns / scale;
        const ux = mx - cx;
        const uy = my - cy;
        tx = ux * (1 - k) + k * tx;
        ty = uy * (1 - k) + k * ty;
        scale = ns;
        applyT();
      }
      pinchD = d;
    }
  });

  function endPointer(e) {
    pointers.delete(e.pointerId);
    if (pointers.size === 0) viewport.classList.remove('grabbing');
    if (pointers.size === 1) pinchD = 0;
  }
  viewport.addEventListener('pointerup', endPointer);
  viewport.addEventListener('pointercancel', endPointer);

</script>
</body>
</html>