simubus-gw/src/App.vue

<script setup>
const featureCards = [
  {
    title: 'Interactive Circuit\nDesign Experience',
    body:
      'Drag and drop components to build complex circuits with an intuitive, user-friendly canvas.',
    reverse: false,
    tone: 'mint',
    type: 'workspace',
  },
  {
    title: 'Real-Time\nSimulation',
    body:
      'Launch accurate circuit simulations in an instant, inspect signal flow, and debug safely.',
    reverse: true,
    tone: 'warm',
    type: 'signal',
  },
]

const componentCards = [
  { name: '连接线', kind: 'cable' },
  { name: '控制模块', kind: 'plc' },
  { name: '传感器', kind: 'sensor' },
  { name: '继电器', kind: 'relay' },
  { name: '控制面板', kind: 'panel' },
  { name: '驱动器', kind: 'drive' },
]

const advantages = [
  {
    title: '安全可靠',
    body: '在虚拟环境中完成实验与调试，避免真实接线的风险和损耗。',
    icon: 'lock',
  },
  {
    title: '高度还原',
    body: '还原典型工业电气元件与布线流程，贴近教学和实训场景。',
    icon: 'shield',
  },
  {
    title: '降本增效',
    body: '减少硬件采购和重复搭建时间，让课程与演示更高效。',
    icon: 'cash',
  },
  {
    title: '教学友好',
    body: '适合课堂展示、学生练习和培训考核，易于上手与管理。',
    icon: 'cloud',
  },
]

const footerColumns = [
  {
    title: 'Company',
    links: ['About Us', 'Product Story', 'Careers'],
  },
  {
    title: 'Resources',
    links: ['Simulator Guide', 'Teaching Kits', 'Release Notes'],
  },
  {
    title: 'Contact',
    links: ['support@simubus.com', 'www.simubus.com', '+86 400-800-1234'],
  },
]
</script>

<template>
  <div class="page-shell">
    <section class="hero-section">
      <header class="topbar">
        <a class="brand" href="/">
          <span class="brand-mark">S</span>
          <span class="brand-name">Simubus</span>
        </a>

        <nav class="nav-pills" aria-label="Primary navigation">
          <a href="#features">Features</a>
          <a href="#components">Components</a>
          <a href="#benefits">Benefits</a>
          <a class="nav-cta" href="#footer">Get Started</a>
        </nav>
      </header>

      <div class="hero-copy">
        <p class="eyebrow">Virtual Electrical Lab</p>
        <h1>Simubus - Electrical Wiring Simulator</h1>
        <p class="subcopy">Your Virtual Electric Lab.</p>

        <div class="hero-actions">
          <a class="button primary" href="#features">iOS Download</a>
          <a class="button secondary" href="#features">Android Download</a>
        </div>
      </div>

      <div class="hero-stage" aria-hidden="true">
        <div class="qr-panel">
          <div class="qr-grid">
            <span v-for="n in 25" :key="n" :class="`cell c-${n}`"></span>
          </div>
        </div>

        <div class="device device-main">
          <span class="device-screen"></span>
        </div>
        <div class="device device-right-top">
          <span class="device-screen"></span>
        </div>
        <div class="device device-right-bottom">
          <span class="device-screen"></span>
        </div>
        <div class="device device-bottom-left">
          <span class="device-screen"></span>
        </div>
        <div class="device device-bottom-center">
          <span class="device-screen"></span>
        </div>

        <div class="wire wire-a"></div>
        <div class="wire wire-b"></div>
        <div class="wire wire-c"></div>
        <div class="wire wire-d"></div>
        <div class="wire wire-e"></div>
      </div>
    </section>

    <main>
      <section id="features" class="feature-stack">
        <article
          v-for="card in featureCards"
          :key="card.title"
          class="feature-row"
          :class="{ reverse: card.reverse }"
        >
          <div class="feature-copy">
            <h2>{{ card.title }}</h2>
            <p>{{ card.body }}</p>
          </div>

          <div class="feature-visual" :class="[card.tone, card.type]">
            <div class="visual-frame">
              <template v-if="card.type === 'workspace'">
                <span class="grid-line horizontal top"></span>
                <span class="grid-line horizontal bottom"></span>
                <span class="grid-line vertical left"></span>
                <span class="grid-line vertical right"></span>
                <span class="module module-a"></span>
                <span class="module module-b"></span>
                <span class="module module-c"></span>
                <span class="module module-d"></span>
              </template>

              <template v-else>
                <span class="pulse pulse-a"></span>
                <span class="pulse pulse-b"></span>
                <span class="pulse pulse-c"></span>
                <span class="spark spark-a"></span>
                <span class="spark spark-b"></span>
                <span class="spark spark-c"></span>
              </template>
            </div>
          </div>
        </article>
      </section>

      <section id="components" class="components-section">
        <div class="section-heading">
          <p class="section-tag">元器件</p>
          <h2>上百个元器件 随心体验</h2>
        </div>

        <div class="component-grid">
          <article
            v-for="component in componentCards"
            :key="component.name"
            class="component-card"
          >
            <div class="component-visual" :class="component.kind">
              <span class="comp-body"></span>
              <span class="comp-accent"></span>
              <span class="comp-wire left"></span>
              <span class="comp-wire right"></span>
            </div>
            <p>{{ component.name }}</p>
          </article>
        </div>
      </section>

      <section id="benefits" class="advantages-section">
        <div class="ink-blot ink-left"></div>
        <div class="ink-blot ink-right"></div>

        <div class="section-heading">
          <h2>为什么选择Simubus</h2>
        </div>

        <div class="advantage-grid">
          <article
            v-for="item in advantages"
            :key="item.title"
            class="advantage-card"
          >
            <div class="adv-icon" :class="item.icon">
              <span></span>
            </div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.body }}</p>
          </article>
        </div>
      </section>
    </main>

    <footer id="footer" class="site-footer">
      <div class="footer-brand">
        <a class="brand inverse" href="/">
          <span class="brand-mark">S</span>
          <span class="brand-name">Simubus</span>
        </a>
        <p>Electrical simulation software for hands-on teaching and rapid prototyping.</p>
      </div>

      <div class="footer-links">
        <section v-for="column in footerColumns" :key="column.title">
          <h4>{{ column.title }}</h4>
          <a v-for="link in column.links" :key="link" href="/">{{ link }}</a>
        </section>
      </div>
    </footer>
  </div>
</template>