sqxp/demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>叁强鲜配 · 多色纯色图标样例（Web / 小程序通用）</title>
  <style>
    :root {
      --admin-blue: #1989fa;
      --success-green: #07c160;
      --warning-orange: #ff976a;
      --danger-red: #ee0a24;
      --text-primary: #303133;
      --text-secondary: #909399;
      --bg-page: #f5f7fa;
      --card-radius: 16px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg-page);
      color: var(--text-primary);
      line-height: 1.5;
    }

    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 24px 64px;
    }

    h1 {
      font-size: 26px;
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--admin-blue);
    }

    .subtitle {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 32px;
    }

    .note {
      background: #fff;
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 28px;
      font-size: 13px;
      color: var(--text-secondary);
      border: 1px solid #ebeef5;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .note strong {
      color: var(--text-primary);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 20px;
    }

    .card {
      background: #fff;
      border-radius: var(--card-radius);
      padding: 20px 16px 16px;
      text-align: center;
      border: 1px solid #ebeef5;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(25, 137, 250, 0.12);
    }

    .card .icon-wrap {
      width: 72px;
      height: 72px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card svg {
      width: 64px;
      height: 64px;
      display: block;
    }

    .card .name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .card .en {
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 4px;
    }

    footer {
      margin-top: 40px;
      font-size: 12px;
      color: var(--text-secondary);
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>叁强鲜配 · 多色图标样例</h1>
    <p class="subtitle">与运营蓝 / 客户绿 / 供应商橙 / 配送红 体系一致，采用<strong>纯色填充</strong>（无渐变），SVG 可直接拷贝到 Web（Vue）或小程序（uni-app）中使用。</p>

    <div class="note">
      <strong>使用说明：</strong>
      每个图标为独立 <code>&lt;svg&gt;</code>，无外链依赖，色值均为 HEX 实色。复制单个图标时可直接整段拷贝。
      Web 端可与 Element Plus <code>el-icon</code> 包装；小程序端可放在 <code>&lt;view&gt;</code> 内或转为 base64 雪碧图按需优化。
    </div>

    <div class="grid">
      <!-- 首页 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="首页">
            <rect x="6" y="10" width="36" height="30" rx="6" fill="#1989fa" opacity="0.95" />
            <path d="M24 8 L40 20 L8 20 Z" fill="#fff" opacity="0.95" />
            <rect x="20" y="26" width="8" height="10" rx="1" fill="#fff" opacity="0.9" />
          </svg>
        </div>
        <div class="name">首页</div>
        <div class="en">Home</div>
      </div>

      <!-- 分类 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="分类">
            <rect x="6" y="6" width="16" height="16" rx="4" fill="#07c160" />
            <rect x="26" y="6" width="16" height="16" rx="4" fill="#1989fa" opacity="0.85" />
            <rect x="6" y="26" width="16" height="16" rx="4" fill="#ff976a" opacity="0.9" />
            <rect x="26" y="26" width="16" height="16" rx="4" fill="#07c160" opacity="0.75" />
          </svg>
        </div>
        <div class="name">分类</div>
        <div class="en">Category</div>
      </div>

      <!-- 购物车 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="购物车">
            <path d="M14 14 h22 l-2 16 H16 L14 14z" fill="#1989fa" />
            <path d="M12 12 h4 v2 h-4 z" fill="#ff976a" />
            <circle cx="18" cy="36" r="3" fill="#303133" />
            <circle cx="32" cy="36" r="3" fill="#303133" />
            <path d="M20 8 L28 8 L26 14 L18 14 Z" fill="#52c41a" />
          </svg>
        </div>
        <div class="name">购物车</div>
        <div class="en">Cart</div>
      </div>

      <!-- 订单 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="订单">
            <rect x="10" y="8" width="28" height="34" rx="3" fill="#e6f7ff" stroke="#1989fa" stroke-width="2" />
            <rect x="14" y="16" width="20" height="3" rx="1" fill="#1989fa" />
            <rect x="14" y="22" width="14" height="2" rx="1" fill="#07c160" opacity="0.7" />
            <rect x="14" y="27" width="18" height="2" rx="1" fill="#ff976a" opacity="0.8" />
            <circle cx="30" cy="34" r="6" fill="#ee0a24" />
            <text x="30" y="37" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold">¥</text>
          </svg>
        </div>
        <div class="name">订单</div>
        <div class="en">Orders</div>
      </div>

      <!-- 生鲜商品 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="商品">
            <ellipse cx="24" cy="30" rx="14" ry="12" fill="#07c160" />
            <path d="M24 10 Q28 18 24 22 Q20 18 24 10" fill="#52c41a" />
            <path d="M18 26 Q24 20 30 26" fill="none" stroke="#b7eb8f" stroke-width="2" stroke-linecap="round" />
            <circle cx="20" cy="28" r="2" fill="#ff976a" opacity="0.9" />
            <circle cx="28" cy="30" r="1.8" fill="#ff976a" opacity="0.85" />
          </svg>
        </div>
        <div class="name">生鲜商品</div>
        <div class="en">Product</div>
      </div>

      <!-- 配送 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="配送">
            <rect x="6" y="20" width="22" height="12" rx="2" fill="#ee0a24" />
            <path d="M28 20 h10 l4 6 v6 H28 Z" fill="#ff7875" />
            <circle cx="14" cy="34" r="4" fill="#303133" />
            <circle cx="34" cy="34" r="4" fill="#303133" />
            <circle cx="14" cy="34" r="2" fill="#909399" />
            <circle cx="34" cy="34" r="2" fill="#909399" />
            <path d="M10 14 Q24 10 38 14" fill="none" stroke="#07c160" stroke-width="2" stroke-linecap="round" opacity="0.8" />
          </svg>
        </div>
        <div class="name">配送</div>
        <div class="en">Delivery</div>
      </div>

      <!-- 地址 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="地址">
            <path d="M24 6 C16 6 10 12 10 20 C10 30 24 42 24 42 S38 30 38 20 C38 12 32 6 24 6 Z" fill="#1989fa" opacity="0.2" />
            <path d="M24 8 C17 8 12 13 12 20 C12 28 24 40 24 40 S36 28 36 20 C36 13 31 8 24 8 Z" fill="#1989fa" />
            <circle cx="24" cy="20" r="5" fill="#fff" />
            <circle cx="24" cy="20" r="2.5" fill="#ee0a24" />
          </svg>
        </div>
        <div class="name">收货地址</div>
        <div class="en">Address</div>
      </div>

      <!-- 消息 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="消息">
            <rect x="8" y="10" width="32" height="24" rx="4" fill="#1989fa" opacity="0.15" />
            <rect x="8" y="10" width="32" height="22" rx="4" fill="#1989fa" />
            <path d="M16 34 L24 28 L32 34 Z" fill="#07c160" />
            <circle cx="18" cy="20" r="2" fill="#fff" opacity="0.95" />
            <circle cx="24" cy="20" r="2" fill="#fff" opacity="0.95" />
            <circle cx="30" cy="20" r="2" fill="#fff" opacity="0.95" />
          </svg>
        </div>
        <div class="name">消息</div>
        <div class="en">Message</div>
      </div>

      <!-- 支付 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="支付">
            <rect x="8" y="12" width="32" height="24" rx="4" fill="#f6ffed" stroke="#07c160" stroke-width="2" />
            <rect x="12" y="18" width="24" height="14" rx="2" fill="#07c160" opacity="0.9" />
            <text x="24" y="29" text-anchor="middle" fill="#fff" font-size="11" font-weight="bold">支付</text>
            <circle cx="38" cy="14" r="5" fill="#ff976a" />
            <path d="M36 14 L38 16 L41 12" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" />
          </svg>
        </div>
        <div class="name">支付</div>
        <div class="en">Pay</div>
      </div>

      <!-- 我的 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="我的">
            <circle cx="24" cy="18" r="8" fill="#ff976a" />
            <path d="M12 40 Q12 30 24 30 Q36 30 36 40 Z" fill="#1989fa" opacity="0.85" />
            <path d="M14 38 Q14 32 24 32 Q34 32 34 38" fill="none" stroke="#07c160" stroke-width="2" stroke-linecap="round" opacity="0.6" />
          </svg>
        </div>
        <div class="name">我的</div>
        <div class="en">Profile</div>
      </div>

      <!-- 供应商报价（业务） -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="报价">
            <rect x="10" y="8" width="20" height="26" rx="2" fill="#fff7e6" stroke="#ff976a" stroke-width="2" />
            <path d="M14 14 h12 M14 18 h12 M14 22 h8" stroke="#ff976a" stroke-width="2" stroke-linecap="round" />
            <rect x="26" y="16" width="14" height="20" rx="2" fill="#ff976a" />
            <text x="33" y="29" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold">价</text>
          </svg>
        </div>
        <div class="name">报价单</div>
        <div class="en">Quotation</div>
      </div>

      <!-- 评价 -->
      <div class="card">
        <div class="icon-wrap">
          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="评价">
            <path d="M24 6 L29.5 17.5 L42 19 L33 28 L35 40 L24 34 L13 40 L15 28 L6 19 L18.5 17.5 Z" fill="#ee0a24" stroke="#fff" stroke-width="1" />
            <circle cx="24" cy="22" r="3" fill="#fff" opacity="0.35" />
          </svg>
        </div>
        <div class="name">评价</div>
        <div class="en">Review</div>
      </div>
    </div>

    <footer>
      样例图标仅供演示；正式环境可按 24×24 / 32×32 / 48×48 统一切图倍数，并与设计稿对齐导出名。
    </footer>
  </div>
</body>
</html>