安卓手机，安卓平板，iOS，车机设备性能排行榜单页，数据实时更新。

安卓/iOS/车机性能排行榜单页HTML 第5张插图

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>性能排行</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background-color: #f4f6f9;
      color: #333;
      padding: 20px;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #2c3e50;
    }

    .tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .tab {
      padding: 10px 20px;
      background-color: #ddd;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .tab.active {
      background-color: #3498db;
      color: white;
    }

    .ranking-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
    }

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

    .ranking-table th {
      background-color: #2c3e50;
      color: white;
      font-weight: bold;
    }

    .ranking-table tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    .ranking-table tr:hover {
      background-color: #eaeaea;
    }

    .loading {
      text-align: center;
      padding: 20px;
    }

    .error {
      color: red;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>设备性能排行</h1>
    <div class="tabs">
      <div class="tab active" data-type="android">安卓</div>
      <div class="tab" data-type="androidpad">安卓平板</div>
      <div class="tab" data-type="ios">iOS</div>
      <div class="tab" data-type="auto">车机</div>
    </div>

    <div id="content">
      <div class="loading">加载中...</div>
    </div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab');
    const content = document.getElementById('content');

    function fetchRanking(type) {
      content.innerHTML = '<div class="loading">加载中...</div>';
      const url = `https://api.zxki.cn/api/ranking?type=${type}`;

      fetch(url)
        .then(response => {
          if (!response.ok) throw new Error('网络错误');
          return response.json();
        })
        .then(data => {
          renderTable(data);
        })
        .catch(err => {
          content.innerHTML = `<div class="error">加载失败：${err.message}</div>`;
        });
    }

    function renderTable(data) {
      if (!data || !data.length) {
        content.innerHTML = `<div class="error">暂无数据</div>`;
        return;
      }

      let html = `
        <table class="ranking-table">
          <thead>
            <tr>
              <th>排名</th>
              <th>型号</th>
              <th>规格</th>
              <th>CPU</th>
              <th>GPU</th>
              <th>内存</th>
              <th>UX</th>
              <th>总分</th>
            </tr>
          </thead>
          <tbody>
      `;

      data.forEach(item => {
        html += `
          <tr>
            <td>${item.rank}</td>
            <td>${item.model}</td>
            <td>${item.spec}</td>
            <td>${item.cpu.toLocaleString()}</td>
            <td>${item.gpu.toLocaleString()}</td>
            <td>${item.mem.toLocaleString()}</td>
            <td>${item.ux.toLocaleString()}</td>
            <td><strong>${item.total.toLocaleString()}</strong></td>
          </tr>
        `;
      });

      html += `
          </tbody>
        </table>
      `;

      content.innerHTML = html;
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        fetchRanking(tab.dataset.type);
      });
    });

    fetchRanking('android');
  </script>
</body>
</html>