安卓/iOS/车机性能排行榜单页HTML_探乎网,重庆生活社区！

安卓手机，安卓平板，iOS，车机设备性能排行榜单页，数据实时更新。
<!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>
安卓/iOS/车机性能排行榜单页HTML

安卓/iOS/车机性能排行榜单页HTML

作者签名
