ajyy/原型图/ui-styles-preview.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>安建医院纪委 · UI 风格预览</title>
  <style>
    :root {
      --page-bg: #ece8e4;
      --ink: #1a1a1a;
      --muted: #5c5c5c;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(ellipse at 20% 0%, #f5e6e6 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, #e8e4dc 0%, transparent 45%),
        var(--page-bg);
      color: var(--ink);
      min-height: 100vh;
      line-height: 1.5;
    }

    .page-header {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 24px 16px;
      text-align: center;
    }

    .page-header .eyebrow {
      font-size: 13px;
      letter-spacing: 0.2em;
      color: #c8102e;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .page-header h1 {
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .page-header p {
      margin-top: 10px;
      color: var(--muted);
      font-size: 15px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    /* 顶部四图总览 */
    .gallery {
      max-width: 1100px;
      margin: 28px auto 0;
      padding: 0 20px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    @media (max-width: 900px) {
      .gallery { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 480px) {
      .gallery { grid-template-columns: 1fr; }
    }

    .gallery-item {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      text-align: center;
      font-family: inherit;
      padding: 0;
      color: inherit;
    }

    .gallery-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    .gallery-item.active {
      border-color: #c8102e;
      box-shadow: 0 6px 20px rgba(200, 16, 46, 0.22);
    }

    .gallery-item img {
      width: 100%;
      aspect-ratio: 9 / 16;
      object-fit: cover;
      object-position: top center;
      display: block;
      background: #f0ebe6;
    }

    .gallery-item .label {
      padding: 10px 8px 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .gallery-item.active .label { color: #c8102e; }

    .tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      max-width: 960px;
      margin: 24px auto 0;
      padding: 0 16px;
    }

    .tab {
      border: 1px solid #d4cfc9;
      background: #fff;
      color: #333;
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
    }

    .tab:hover { border-color: #c8102e; color: #c8102e; }
    .tab.active {
      background: #c8102e;
      border-color: #c8102e;
      color: #fff;
      box-shadow: 0 4px 14px rgba(200, 16, 46, 0.28);
    }

    .panel {
      display: none;
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px 20px 48px;
    }

    .panel.active { display: block; }

    .panel-grid {
      display: grid;
      grid-template-columns: 1fr minmax(280px, 340px);
      gap: 40px;
      align-items: start;
    }

    @media (max-width: 860px) {
      .panel-grid {
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .spec { order: 2; max-width: 420px; width: 100%; }
      .preview-wrap { order: 1; }
    }

    .spec h2 {
      font-size: 22px;
      margin-bottom: 6px;
    }

    .spec .tag {
      display: inline-block;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 4px;
      background: #fde8eb;
      color: #c8102e;
      margin-bottom: 16px;
      font-weight: 600;
    }

    .spec .desc {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 20px;
    }

    .spec h3 {
      font-size: 13px;
      letter-spacing: 0.08em;
      color: #888;
      margin: 20px 0 10px;
    }

    .bg-list {
      list-style: none;
      font-size: 13px;
      background: #fff;
      border-radius: 10px;
      padding: 4px 14px;
      border: 1px solid #e8e4e0;
    }

    .bg-list li {
      padding: 10px 0;
      border-bottom: 1px solid #f0ebe6;
      color: #444;
    }

    .bg-list li:last-child { border-bottom: none; }

    .bg-list strong {
      display: block;
      color: #c8102e;
      font-size: 12px;
      margin-bottom: 2px;
    }

    .swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .swatch {
      width: 72px;
      text-align: center;
    }

    .swatch .chip {
      width: 72px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.08);
      margin-bottom: 4px;
    }

    .swatch span {
      font-size: 10px;
      color: #666;
      word-break: break-all;
    }

    .kv {
      list-style: none;
      font-size: 14px;
    }

    .kv li {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #e5e0db;
    }

    .kv li span:first-child { color: #777; }
    .kv li span:last-child { font-weight: 500; text-align: right; }

    .pros {
      font-size: 14px;
      color: #444;
      padding-left: 18px;
    }

    .pros li { margin-bottom: 6px; }

    /* 原图预览（含背景） */
    .preview-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: sticky;
      top: 24px;
      width: 100%;
    }

    .shot {
      width: 100%;
      max-width: 340px;
      border-radius: 20px;
      overflow: hidden;
      background: #111;
      box-shadow:
        0 24px 48px rgba(0,0,0,0.18),
        0 0 0 1px rgba(0,0,0,0.12);
    }

    .shot img {
      width: 100%;
      display: block;
      vertical-align: middle;
    }

    .preview-caption {
      font-size: 12px;
      color: #888;
      text-align: center;
    }

    .preview-caption a {
      color: #c8102e;
      text-decoration: none;
    }

    .preview-caption a:hover { text-decoration: underline; }

    /* 对照：CSS 增强版（补背景纹理） */
    .css-note {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
      text-align: center;
      max-width: 300px;
    }

    .compare {
      max-width: 1100px;
      margin: 0 auto 40px;
      padding: 0 20px;
    }

    .compare h2 {
      text-align: center;
      font-size: 18px;
      margin-bottom: 16px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      font-size: 13px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }

    th, td {
      padding: 12px 14px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }

    th {
      background: #2c1810;
      color: #fff;
      font-weight: 500;
    }

    th:first-child, td:first-child {
      text-align: left;
    }

    td:first-child { font-weight: 500; color: #333; }
    tr:last-child td { border-bottom: none; }
    .rec { color: #c8102e; font-weight: 700; }

    .assets-path {
      max-width: 1100px;
      margin: 0 auto 48px;
      padding: 16px 20px;
      background: #fff;
      border-radius: 10px;
      font-size: 13px;
      color: #555;
      border: 1px dashed #d4cfc9;
    }

    .assets-path code {
      background: #f7f5f3;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      color: #c8102e;
    }

    .page-footer {
      text-align: center;
      padding: 0 20px 40px;
      font-size: 12px;
      color: #999;
    }
  </style>
</head>
<body>
  <header class="page-header">
    <div class="eyebrow">安建医院纪委 · 微信小程序</div>
    <h1>UI 风格方案预览</h1>
    <p>以下为带背景插画的完整效果图。点击缩略图或标签切换详情；原图已保存在本地 <code>assets/</code> 目录。</p>
  </header>

  <div class="gallery" id="gallery">
    <button type="button" class="gallery-item active" data-tab="a" aria-label="方案 A">
      <img src="assets/style-a-classic-party-red.png" alt="方案 A 党政庄重红" />
      <div class="label">A · 党政庄重红</div>
    </button>
    <button type="button" class="gallery-item" data-tab="b" aria-label="方案 B">
      <img src="assets/style-b-medical-integrity.png" alt="方案 B 医纪融合红" />
      <div class="label">B · 医纪融合红</div>
    </button>
    <button type="button" class="gallery-item" data-tab="c" aria-label="方案 C">
      <img src="assets/style-c-modern-civic.png" alt="方案 C 现代政务极简" />
      <div class="label">C · 现代政务极简</div>
    </button>
    <button type="button" class="gallery-item" data-tab="d" aria-label="方案 D">
      <img src="assets/style-d-solemn-deep-red.png" alt="方案 D 深沉肃穆红" />
      <div class="label">D · 深沉肃穆红</div>
    </button>
  </div>

  <nav class="tabs" role="tablist">
    <button class="tab active" data-tab="a" type="button">A · 党政庄重红（推荐）</button>
    <button class="tab" data-tab="b" type="button">B · 医纪融合红</button>
    <button class="tab" data-tab="c" type="button">C · 现代政务极简</button>
    <button class="tab" data-tab="d" type="button">D · 深沉肃穆红</button>
  </nav>

  <!-- Panel A -->
  <section class="panel active" id="panel-a">
    <div class="panel-grid">
      <div class="spec">
        <span class="tag">首选推荐</span>
        <h2>方案 A · 党政庄重红</h2>
        <p class="desc">标准中国红顶栏 + 白底内容区。顶栏含华表与长城水印插画，底部有「忠诚 干净 担当」徽章装饰。</p>

        <h3>背景 / 装饰图（原图已含）</h3>
        <ul class="bg-list">
          <li>
            <strong>顶栏左侧</strong>
            华表剪影水印（浅红叠印于红底）
          </li>
          <li>
            <strong>顶栏右侧</strong>
            长城剪影水印
          </li>
          <li>
            <strong>页脚</strong>
            红盾五星徽章 + 标语「忠诚 干净 担当」
          </li>
        </ul>

        <h3>配色</h3>
        <div class="swatches">
          <div class="swatch"><div class="chip" style="background:#C8102E"></div><span>Primary<br>#C8102E</span></div>
          <div class="swatch"><div class="chip" style="background:#9E0B24"></div><span>Dark<br>#9E0B24</span></div>
          <div class="swatch"><div class="chip" style="background:#F7F5F3"></div><span>Bg<br>#F7F5F3</span></div>
          <div class="swatch"><div class="chip" style="background:#FFFFFF;border-color:#ddd"></div><span>Surface<br>#FFFFFF</span></div>
          <div class="swatch"><div class="chip" style="background:#FDE8EB"></div><span>Tint<br>#FDE8EB</span></div>
          <div class="swatch"><div class="chip" style="background:#1A1A1A"></div><span>Text<br>#1A1A1A</span></div>
        </div>

        <h3>规范要点</h3>
        <ul class="kv">
          <li><span>圆角</span><span>8–12px</span></li>
          <li><span>入口</span><span>三张纵向卡片 + 红按钮</span></li>
          <li><span>字体</span><span>系统黑体 / 苹方</span></li>
          <li><span>本地原图</span><span>assets/style-a-classic-party-red.png</span></li>
        </ul>
      </div>
      <div class="preview-wrap">
        <div class="shot">
          <img src="assets/style-a-classic-party-red.png" alt="方案 A 完整效果图（含华表、长城背景）" />
        </div>
        <div class="preview-caption">
          完整效果图（含背景插画）·
          <a href="assets/style-a-classic-party-red.png" target="_blank" rel="noopener">打开原图</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Panel B -->
  <section class="panel" id="panel-b">
    <div class="panel-grid">
      <div class="spec">
        <span class="tag">医院属性</span>
        <h2>方案 B · 医纪融合红</h2>
        <p class="desc">深红 + 医疗洁净白 + 细金线。品牌区背后为医院建筑淡影，底部横幅为水墨长城/山峦背景。</p>

        <h3>背景 / 装饰图（原图已含）</h3>
        <ul class="bg-list">
          <li>
            <strong>品牌区背景</strong>
            现代医院建筑高调淡影（半透明叠白）
          </li>
          <li>
            <strong>顶栏分割</strong>
            金色装饰线（中间下尖）
          </li>
          <li>
            <strong>底部横幅</strong>
            水墨山峦 / 长城淡底图 + 标语
          </li>
          <li>
            <strong>标识</strong>
            圆形院徽（十字 + 盾形）
          </li>
        </ul>

        <h3>配色</h3>
        <div class="swatches">
          <div class="swatch"><div class="chip" style="background:#9B1B1E"></div><span>Primary<br>#9B1B1E</span></div>
          <div class="swatch"><div class="chip" style="background:#C4A35A"></div><span>Gold<br>#C4A35A</span></div>
          <div class="swatch"><div class="chip" style="background:#FAFBFC"></div><span>Bg<br>#FAFBFC</span></div>
          <div class="swatch"><div class="chip" style="background:#FFFFFF;border-color:#ddd"></div><span>Surface<br>#FFFFFF</span></div>
          <div class="swatch"><div class="chip" style="background:#F5E8E8"></div><span>Icon<br>#F5E8E8</span></div>
          <div class="swatch"><div class="chip" style="background:#1F2937"></div><span>Text<br>#1F2937</span></div>
        </div>

        <h3>规范要点</h3>
        <ul class="kv">
          <li><span>金色</span><span>仅作细线点缀，忌大面积</span></li>
          <li><span>布局</span><span>院徽 + 三宫格入口 + 横幅</span></li>
          <li><span>本地原图</span><span>assets/style-b-medical-integrity.png</span></li>
        </ul>
      </div>
      <div class="preview-wrap">
        <div class="shot">
          <img src="assets/style-b-medical-integrity.png" alt="方案 B 完整效果图（含医院建筑、水墨背景）" />
        </div>
        <div class="preview-caption">
          完整效果图（含医院建筑 / 水墨背景）·
          <a href="assets/style-b-medical-integrity.png" target="_blank" rel="noopener">打开原图</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Panel C -->
  <section class="panel" id="panel-c">
    <div class="panel-grid">
      <div class="spec">
        <span class="tag">中老年友好</span>
        <h2>方案 C · 现代政务极简红</h2>
        <p class="desc">大红顶栏 + 浅灰底 + 大留白列表。风格偏「政务服务」，背景以纯色与微纹理为主，强调可读与大触控。</p>

        <h3>背景 / 装饰图（原图已含）</h3>
        <ul class="bg-list">
          <li>
            <strong>页面底</strong>
            浅灰 / 米白纯色底（#F5F5F5），突出白卡片
          </li>
          <li>
            <strong>卡片强调</strong>
            左侧红色竖条作为视觉锚点
          </li>
          <li>
            <strong>氛围</strong>
            极简政务风，几乎无插画，靠留白与层级
          </li>
        </ul>

        <h3>配色</h3>
        <div class="swatches">
          <div class="swatch"><div class="chip" style="background:#E31C23"></div><span>Primary<br>#E31C23</span></div>
          <div class="swatch"><div class="chip" style="background:#F5F5F5"></div><span>Bg<br>#F5F5F5</span></div>
          <div class="swatch"><div class="chip" style="background:#FFFFFF;border-color:#ddd"></div><span>Surface<br>#FFFFFF</span></div>
          <div class="swatch"><div class="chip" style="background:#111111"></div><span>Text<br>#111111</span></div>
          <div class="swatch"><div class="chip" style="background:#888888"></div><span>Muted<br>#888888</span></div>
        </div>

        <h3>规范要点</h3>
        <ul class="kv">
          <li><span>触控区</span><span>≥ 48px 高度</span></li>
          <li><span>正文</span><span>≥ 16px</span></li>
          <li><span>本地原图</span><span>assets/style-c-modern-civic.png</span></li>
        </ul>
      </div>
      <div class="preview-wrap">
        <div class="shot">
          <img src="assets/style-c-modern-civic.png" alt="方案 C 完整效果图" />
        </div>
        <div class="preview-caption">
          完整效果图 ·
          <a href="assets/style-c-modern-civic.png" target="_blank" rel="noopener">打开原图</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Panel D -->
  <section class="panel" id="panel-d">
    <div class="panel-grid">
      <div class="spec">
        <span class="tag">仪式感</span>
        <h2>方案 D · 深沉肃穆红</h2>
        <p class="desc">酒红纹理顶区 + 羊皮纸暖底。顶区有医院建筑线描，底部有水墨山峦与医院淡影、红色丝绸波浪装饰。</p>

        <h3>背景 / 装饰图（原图已含）</h3>
        <ul class="bg-list">
          <li>
            <strong>顶部酒红区</strong>
            纸质纹理 + 医院建筑群线描淡影
          </li>
          <li>
            <strong>分区曲线</strong>
            金色描边波浪分隔上下区
          </li>
          <li>
            <strong>标识</strong>
            金色月桂环院徽（十字 / 建筑）
          </li>
          <li>
            <strong>页脚</strong>
            水墨山峦与建筑淡影 + 红色丝绸波浪
          </li>
        </ul>

        <h3>配色</h3>
        <div class="swatches">
          <div class="swatch"><div class="chip" style="background:#6B0F1A"></div><span>Header<br>#6B0F1A</span></div>
          <div class="swatch"><div class="chip" style="background:#8B1538"></div><span>Primary<br>#8B1538</span></div>
          <div class="swatch"><div class="chip" style="background:#C4A35A"></div><span>Gold<br>#C4A35A</span></div>
          <div class="swatch"><div class="chip" style="background:#F9F6F1"></div><span>Bg<br>#F9F6F1</span></div>
          <div class="swatch"><div class="chip" style="background:#2C1810"></div><span>Text<br>#2C1810</span></div>
        </div>

        <h3>规范要点</h3>
        <ul class="kv">
          <li><span>圆角</span><span>入口近直角</span></li>
          <li><span>表单页</span><span>建议改浅底，降低压迫感</span></li>
          <li><span>本地原图</span><span>assets/style-d-solemn-deep-red.png</span></li>
        </ul>
      </div>
      <div class="preview-wrap">
        <div class="shot">
          <img src="assets/style-d-solemn-deep-red.png" alt="方案 D 完整效果图（含建筑线描、水墨、丝绸波浪）" />
        </div>
        <div class="preview-caption">
          完整效果图（含建筑 / 水墨 / 波浪装饰）·
          <a href="assets/style-d-solemn-deep-red.png" target="_blank" rel="noopener">打开原图</a>
        </div>
      </div>
    </div>
  </section>

  <section class="compare">
    <h2>四套对比</h2>
    <table>
      <thead>
        <tr>
          <th>维度</th>
          <th>A 庄重红</th>
          <th>B 医纪融合</th>
          <th>C 极简政务</th>
          <th>D 肃穆红</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>背景丰富度</td>
          <td>华表 + 长城</td>
          <td class="rec">医院 + 水墨</td>
          <td>纯色留白</td>
          <td class="rec">建筑 + 水墨 + 波浪</td>
        </tr>
        <tr>
          <td>正式感</td>
          <td class="rec">★★★★★</td>
          <td>★★★★</td>
          <td>★★★★</td>
          <td>★★★★★</td>
        </tr>
        <tr>
          <td>易用 / 可达</td>
          <td>★★★★</td>
          <td>★★★★</td>
          <td class="rec">★★★★★</td>
          <td>★★★</td>
        </tr>
        <tr>
          <td>推荐场景</td>
          <td class="rec">默认首选</td>
          <td>强调医院属性</td>
          <td>中老年扫码</td>
          <td>仪式感入口</td>
        </tr>
      </tbody>
    </table>
  </section>

  <div class="assets-path">
    <strong>本地图片路径</strong><br /><br />
    <code>assets/style-a-classic-party-red.png</code> — 方案 A<br />
    <code>assets/style-b-medical-integrity.png</code> — 方案 B<br />
    <code>assets/style-c-modern-civic.png</code> — 方案 C<br />
    <code>assets/style-d-solemn-deep-red.png</code> — 方案 D
  </div>

  <footer class="page-footer">
    安建医院纪委小程序 · UI 风格预览 · 刷新页面即可看到带背景的完整效果图
  </footer>

  <script>
    function switchTab(id) {
      document.querySelectorAll(".tab").forEach((t) => {
        t.classList.toggle("active", t.dataset.tab === id);
      });
      document.querySelectorAll(".gallery-item").forEach((g) => {
        g.classList.toggle("active", g.dataset.tab === id);
      });
      document.querySelectorAll(".panel").forEach((p) => {
        p.classList.toggle("active", p.id === "panel-" + id);
      });
    }

    document.querySelectorAll(".tab, .gallery-item").forEach((el) => {
      el.addEventListener("click", () => switchTab(el.dataset.tab));
    });
  </script>
</body>
</html>