ajyy/原型图/mockups/gallery.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>界面效果图 · 安徽建工集团医院纪检室</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #ece8e4;
      color: #1a1a1a;
      padding: 32px 20px 60px;
    }
    h1 { text-align: center; font-size: 24px; margin-bottom: 8px; }
    .sub { text-align: center; color: #666; font-size: 14px; margin-bottom: 32px; }
    .grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
    }
    figure {
      background: #fff;
      border-radius: 16px;
      padding: 12px 12px 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,.08);
    }
    figure img {
      width: 100%;
      border-radius: 10px;
      display: block;
      border: 1px solid #eee;
    }
    figcaption {
      margin-top: 10px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #a51f23;
    }
  </style>
</head>
<body>
  <h1>移动端界面效果图</h1>
  <p class="sub">安徽建工集团医院纪检室 · 扫码反馈系统 · 建设方案用图</p>
  <div class="grid">
    <figure>
      <a href="mockup-01-home.png" target="_blank"><img src="mockup-01-home.png" alt="首页" /></a>
      <figcaption>01 首页</figcaption>
    </figure>
    <figure>
      <a href="mockup-02-notice.png" target="_blank"><img src="mockup-02-notice.png" alt="反馈须知" /></a>
      <figcaption>02 反馈须知（5秒）</figcaption>
    </figure>
    <figure>
      <a href="mockup-03-feedback.png" target="_blank"><img src="mockup-03-feedback.png" alt="在线反馈" /></a>
      <figcaption>03 在线反馈</figcaption>
    </figure>
    <figure>
      <a href="mockup-04-suggest.png" target="_blank"><img src="mockup-04-suggest.png" alt="建言献策" /></a>
      <figcaption>04 建言献策</figcaption>
    </figure>
    <figure>
      <a href="mockup-05-hotline.png" target="_blank"><img src="mockup-05-hotline.png" alt="监督热线" /></a>
      <figcaption>05 监督热线</figcaption>
    </figure>
    <figure>
      <a href="mockup-06-share.png" target="_blank"><img src="mockup-06-share.png" alt="扫码分享" /></a>
      <figcaption>06 扫码分享</figcaption>
    </figure>
  </div>
</body>
</html>