.page-products .prod-hero {
  padding: 22px 0 38px;
  border-bottom: 1px solid var(--line);
}

.page-products .prod-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 12px 0 18px;
  max-width: 16ch;
}

.page-products .prod-hero__lede {
  color: var(--mist);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.78;
  max-width: 62ch;
  margin: 0;
}

.page-products .prod-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.page-products .prod-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-products .prod-stat {
  background: var(--canvas-2);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .prod-stat__value {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--orange);
}

.page-products .prod-stat__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

.page-products .prod-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 32px;
}

.page-products .prod-rail {
  min-width: 0;
}

.page-products .prod-toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--canvas-2);
  padding: 16px 14px 12px;
}

.page-products .prod-toc__title {
  margin: 0 0 10px;
  padding-left: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .prod-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .prod-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.page-products .prod-toc__list a:hover,
.page-products .prod-toc__list a:focus-visible {
  background: var(--canvas-3);
  color: var(--cyan);
  border-left-color: var(--cyan);
}

.page-products .prod-toc__list .mono {
  font-size: 11px;
  color: var(--mist);
}

.page-products .prod-main {
  display: grid;
  gap: 44px;
  min-width: 0;
}

.page-products .prod-section {
  scroll-margin-top: 92px;
  min-width: 0;
}

.page-products .prod-head {
  margin-bottom: 20px;
}

.page-products .prod-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--paper);
  margin: 10px 0 10px;
  max-width: 24ch;
}

.page-products .prod-note {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

/* 筛选与速览卡片 */
.page-products .prod-filter {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.page-products .prod-filter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--canvas-2);
}

.page-products .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .filter-btn {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  padding: 8px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.page-products .filter-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-products .filter-btn[aria-pressed="true"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--canvas);
  font-weight: 700;
}

.page-products .prod-filter__count {
  margin: 0;
  font-size: 12px;
  color: var(--mist);
}

.page-products .prod-filter__count .mono {
  color: var(--orange);
  font-size: 14px;
}

.page-products .prod-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.page-products .prod-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid var(--line-paper);
  box-shadow: 0 14px 28px rgba(3, 10, 20, 0.28);
}

.page-products .prod-tile__idx {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--nebula);
}

.page-products .prod-tile__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--ink);
}

.page-products .prod-tile p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.page-products .prod-tile a {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--orange);
}

.page-products .prod-tile a:hover,
.page-products .prod-tile a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* 步骤条 */
.page-products .prod-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .prod-step {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--canvas-2);
  overflow: hidden;
}

.page-products .prod-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: var(--pill);
  background: var(--cyan);
}

.page-products .prod-step__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.page-products .prod-step h3 {
  margin: 8px 0 8px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--paper);
}

.page-products .prod-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist);
}

/* 图 */
.page-products .prod-figure {
  margin: 24px 0 0;
}

.page-products .prod-figure--tight {
  margin: 0;
}

.page-products .prod-figure .media-frame {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-products .prod-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .prod-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

/* 两端路径 */
.page-products .prod-paths {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.page-products .prod-path {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--canvas-2);
}

.page-products .prod-path--desktop {
  border-top: 3px solid var(--cyan);
}

.page-products .prod-path--ios {
  border-top: 3px solid var(--nebula);
  background: linear-gradient(160deg, rgba(108, 75, 214, 0.22), var(--canvas-2) 68%);
}

.page-products .prod-path .eyebrow {
  margin: 0;
}

.page-products .prod-path__flow {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: 0.01em;
}

.page-products .prod-path--ios .prod-path__flow {
  color: var(--paper);
}

.page-products .prod-path p:last-child {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

/* 分栏 */
.page-products .prod-split {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.page-products .prod-col {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* 球队库三种索引 */
.page-products .prod-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .prod-ways li {
  padding: 16px 16px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(61, 224, 232, 0.08), transparent 62%);
}

.page-products .prod-ways__idx {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .prod-ways h3 {
  margin: 6px 0 6px;
  font-size: 17px;
  color: var(--paper);
}

.page-products .prod-ways p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

/* 会员中心面板 */
.page-products .prod-section--panel {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--canvas-2);
}

.page-products .prod-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .prod-checks li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist);
}

.page-products .prod-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(70, 214, 168, 0.16);
}

.page-products .prod-checks strong {
  display: block;
  color: var(--paper);
  font-size: 15px;
  margin-bottom: 2px;
}

.page-products .prod-inline-link {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* iOS 评测 */
.page-products .prod-section--nebula {
  padding: 24px 20px;
  border: 1px solid rgba(108, 75, 214, 0.45);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(108, 75, 214, 0.34), transparent 62%),
    var(--canvas-2);
}

.page-products .prod-figure--phone {
  margin: 0;
  max-width: 280px;
}

.page-products .prod-dims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: dims;
}

.page-products .prod-dims li {
  position: relative;
  padding: 15px 16px 14px 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7, 20, 38, 0.55);
}

.page-products .prod-dims__idx {
  position: absolute;
  left: 16px;
  top: 17px;
  font-size: 12px;
  color: var(--orange);
}

.page-products .prod-dims h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: var(--paper);
}

.page-products .prod-dims p {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: var(--mist);
}

/* 数据对照表 */
.page-products .prod-table-card {
  padding: 6px;
  border-radius: var(--radius-md);
}

.page-products .prod-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}

.page-products .prod-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .prod-table caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.page-products .prod-table th,
.page-products .prod-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.page-products .prod-table thead th {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-paper);
}

.page-products .prod-table tbody th {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.page-products .prod-table tbody tr + tr th,
.page-products .prod-table tbody tr + tr td {
  border-top: 1px solid var(--line-paper);
}

.page-products .prod-table tbody td {
  color: var(--ink-soft);
}

.page-products .prod-table tbody td:nth-child(3) {
  color: var(--nebula);
  font-weight: 700;
}

/* 规则与帮助 */
.page-products .prod-links {
  display: grid;
  gap: 12px;
}

.page-products .prod-link {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--canvas-2);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.page-products .prod-link:hover,
.page-products .prod-link:focus-visible {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-products .prod-link__idx {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .prod-link h3 {
  margin: 0;
  font-size: 18px;
  color: var(--paper);
}

.page-products .prod-link p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .prod-link__go {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
}

/* 更新节奏 */
.page-products .prod-cadence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .prod-cadence li {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--canvas);
}

.page-products .prod-cadence__value {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--orange);
}

.page-products .prod-cadence h3 {
  margin: 8px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.02em;
}

.page-products .prod-cadence p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist);
}

.page-products .prod-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 18px 0 0;
}

.page-products .prod-more a {
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 224, 232, 0.45);
  padding-bottom: 2px;
}

.page-products .prod-more a:hover,
.page-products .prod-more a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* 收尾 */
.page-products .prod-cta {
  display: grid;
  gap: 18px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line-paper);
}

.page-products .prod-cta .eyebrow {
  color: var(--nebula);
}

.page-products .prod-cta .prod-h2 {
  color: var(--ink);
  margin-bottom: 8px;
  max-width: 20ch;
}

.page-products .prod-cta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 56ch;
}

.page-products .prod-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .prod-cta .btn--ghost {
  color: var(--ink);
  border-color: var(--ink);
}

/* 断点 */
@media (min-width: 620px) {
  .page-products .prod-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .prod-paths,
  .page-products .prod-steps,
  .page-products .prod-links,
  .page-products .prod-cadence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .prod-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .prod-section--panel,
  .page-products .prod-section--nebula {
    padding: 28px 26px;
  }

  .page-products .prod-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 30px 28px;
  }
}

@media (min-width: 880px) {
  .page-products .prod-shell {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 44px;
    padding-top: 40px;
  }

  .page-products .prod-rail {
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .page-products .prod-main {
    gap: 52px;
  }

  .page-products .prod-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }

  .page-products .prod-split--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-products .prod-split--ios {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 30px;
  }

  .page-products .prod-figure--tight {
    position: sticky;
    top: 88px;
  }

  .page-products .prod-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .prod-cadence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  .page-products .prod-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-link,
  .page-products .filter-btn,
  .page-products .prod-toc__list a {
    transition: none;
  }

  .page-products .prod-link:hover,
  .page-products .prod-link:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <div class="wrap">

    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li><a href="/">首页</a></li>
        <li><a href="/product/">入口与评测</a></li>
      </ol>
    </nav>

    <header class="prod-hero">
      <p class="eyebrow">入口与评测</p>
      <h1 class="display prod-hero__title">首屏两步进球队库，iOS 评测看四个维度</h1>
      <p class="lede prod-hero__lede">打开首页就能同时看到球队库和会员中心的入口，两次点击之内落到目标页面；换到 iPhone 上想比对两场比赛的节奏和数据，也有对应的评测视角。星空体育把入口、球队资料、比分字段和版本差异串成一条清晰的路径，让你少绕路、多看比赛。</p>
      <div class="prod-hero__meta">
        <span class="pill pill--ok">导航状态正常</span>
        <span class="pill">最近记录：首屏入口改版</span>
        <span class="tag">电脑端</span>
        <span class="tag">iOS 端</span>
      </div>
      <div class="prod-stats">
        <div class="prod-stat">
          <span class="prod-stat__value">620</span>
          <span class="prod-stat__label">支球队资料可查</span>
        </div>
        <div class="prod-stat">
          <span class="prod-stat__value">28</span>
          <span class="prod-stat__label">个联赛与杯赛索引</span>
        </div>
        <div class="prod-stat">
          <span class="prod-stat__value">214</span>
          <span class="prod-stat__label">篇评测与对照文章</span>
        </div>
        <div class="prod-stat">
          <span class="prod-stat__value">4</span>
          <span class="prod-stat__label">项 iOS 评测维度</span>
        </div>
      </div>
    </header>

    <div class="prod-shell">

      <aside class="prod-rail">
        <nav class="toc prod-toc" aria-label="本页目录">
          <p class="prod-toc__title mono">本页目录</p>
          <ol class="toc__list prod-toc__list">
            <li><a href="#entry-overview"><span class="mono">01</span>入口总览</a></li>
            <li><a href="#team-library"><span class="mono">02</span>球队库索引</a></li>
            <li><a href="#member-center"><span class="mono">03</span>会员中心与收藏</a></li>
            <li><a href="#ios-review"><span class="mono">04</span>iOS 版评测</a></li>
            <li><a href="#data-compare"><span class="mono">05</span>赛事数据对照</a></li>
            <li><a href="#rules-help"><span class="mono">06</span>规则与帮助</a></li>
            <li><a href="#cadence"><span class="mono">07</span>更新节奏</a></li>
          </ol>
        </nav>
      </aside>

      <div class="prod-main">

        <section class="prod-filter" aria-label="功能模块速览" data-filter-group>
          <div class="prod-filter__bar">
            <div class="filter-bar" role="group" aria-label="按类型筛选模块">
              <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部</button>
              <button type="button" class="filter-btn" data-filter="入口" aria-pressed="false">入口</button>
              <button type="button" class="filter-btn" data-filter="评测" aria-pressed="false">评测</button>
              <button type="button" class="filter-btn" data-filter="数据" aria-pressed="false">数据</button>
            </div>
            <p class="prod-filter__count"><span class="mono" data-filter-count>6</span> 个模块</p>
          </div>
          <ul class="prod-tiles">
            <li class="prod-tile" data-tags="入口">
              <span class="prod-tile__idx mono">01</span>
              <h2 class="prod-tile__title">首屏两个入口</h2>
              <p>球队库和会员中心并排出现，第一次找路停在第 2 步。</p>
              <a href="#entry-overview">看路径</a>
            </li>
            <li class="prod-tile" data-tags="入口">
              <span class="prod-tile__idx mono">02</span>
              <h2 class="prod-tile__title">三路索引球队</h2>
              <p>按联赛、地区或名字切入，620 支队伍都落到同一份资料。</p>
              <a href="#team-library">翻球队库</a>
            </li>
            <li class="prod-tile" data-tags="入口">
              <span class="prod-tile__idx mono">03</span>
              <h2 class="prod-tile__title">收藏不掉队</h2>
              <p>电脑端看收藏的赛事留在当前页面，iOS 端从底部菜单进。</p>
              <a href="#member-center">进会员中心</a>
            </li>
            <li class="prod-tile" data-tags="评测">
              <span class="prod-tile__idx mono">04</span>
              <h2 class="prod-tile__title">iOS 四维框架</h2>
              <p>第 4 版评测从加载速度、入口路径、数据字段、收藏同步四处看。</p>
              <a href="#ios-review">读维度</a>
            </li>
            <li class="prod-tile" data-tags="评测">
              <span class="prod-tile__idx mono">05</span>
              <h2 class="prod-tile__title">平台横向比较</h2>
              <p>入口体验、数据对照、iOS 功能、电脑端规则四类常设栏目。</p>
              <a href="/blog/">看评测动态</a>
            </li>
            <li class="prod-tile" data-tags="数据">
              <span class="prod-tile__idx mono">06</span>
              <h2 class="prod-tile__title">比分并排读</h2>
              <p>比分、控球、射门、角球、犯规一次摊开，差异直接看得出来。</p>
              <a href="#data-compare">看对照表</a>
            </li>
          </ul>
        </section>

        <section id="entry-overview" class="prod-section">
          <div class="prod-head">
            <p class="eyebrow">01 / 入口总览</p>
            <h2 class="prod-h2">电脑端首屏并列两个入口，第一次找路只有两步</h2>
            <p class="prod-note">球队库和会员中心在同一屏并排出现，不必先猜它在哪个菜单里，也不用点开二级列表逐层翻。</p>
          </div>

          <ol class="prod-steps">
            <li class="prod-step">
              <span class="prod-step__num mono">STEP 01</span>
              <h3>打开首页首屏</h3>
              <p>页面加载完成后，首屏同时显示球队库与会员中心两枚入口，位置固定，电脑端与 iOS 端的入口名称保持一致。</p>
            </li>
            <li class="prod-step">
              <span class="prod-step__num mono">STEP 02</span>
              <h3>点进你要的那一个</h3>
              <p>查队伍资料进球队库，找收藏的比赛进会员中心。两条路都停在这一步，没有第三次点击。</p>
            </li>
          </ol>

          <figure class="prod-figure">
            <div class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="抽象电脑首屏界面中并列显示球队库与会员中心两个入口卡片，并用两步箭头连向对应页面" decoding="async">
            </div>
            <figcaption>路径示意：首屏并列入口 → 直接落到球队库或会员中心。</figcaption>
          </figure>

          <div class="prod-paths">
            <article class="prod-path prod-path--desktop">
              <p class="eyebrow">电脑端</p>
              <p class="prod-path__flow mono">首页首屏 → 球队库</p>
              <p class="prod-path__flow mono">首页首屏 → 会员中心</p>
              <p>收藏的赛事在原页面直接展开，查看过程不跳转到第二个界面，看完接着挑下一场。</p>
            </article>
            <article class="prod-path prod-path--ios">
              <p class="eyebrow">iOS 端</p>
              <p class="prod-path__flow mono">首页 → 底部菜单 → 收藏</p>
              <p>移动端的入口名称与电脑端一致，位置换成底部菜单，展开方式也和电脑端不同，照着屏幕上的分类名找即可。</p>
            </article>
          </div>
        </section>

        <section id="team-library" class="prod-section">
          <div class="prod-head">
            <p class="eyebrow">02 / 球队库</p>
            <h2 class="prod-h2">620 支球队资料，联赛、地区、名字三条路都能翻到</h2>
            <p class="prod-note">不一定记得住全名，也不一定清楚它属于哪个级别。三种索引方式任选一种，最后都会落到同一份球队资料上。</p>
          </div>

          <div class="prod-split">
            <figure class="prod-figure prod-figure--tight">
              <div class="media-frame media-frame--square">
                <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="由球队名称卡片、联赛标签与地区网格组成的抽象资料库图形" loading="lazy" decoding="async">
              </div>
            </figure>
            <ul class="prod-ways">
              <li>
                <span class="mono prod-ways__idx">INDEX 01</span>
                <h3>按联赛</h3>
                <p>先锁定赛事体系，再看这个体系下的全部球队，适合按赛季顺藤摸瓜地找。</p>
              </li>
              <li>
                <span class="mono prod-ways__idx">INDEX 02</span>
                <h3>按地区</h3>
                <p>只知道球队所在的城市或省份时，从地区分组进入，命中率比记全名更高。</p>
              </li>
              <li>
                <span class="mono prod-ways__idx">INDEX 03</span>
                <h3>按球队名称</h3>
                <p>已经知道队伍叫什么，直接输入名称定位，一步到位拿到所属联赛与地区。</p>
              </li>
            </ul>
          </div>
        </section>

        <section id="member-center" class="prod-section prod-section--panel">
          <div class="prod-head">
            <p class="eyebrow">03 / 会员中心</p>
            <h2 class="prod-h2">收藏的比赛，回到电脑端不用再找一遍</h2>
            <p class="prod-note">把想追的赛事先收进会员中心，下次打开电脑端直接展开查看，页面不跳转，注意力留在赛程上。</p>
          </div>

          <div class="prod-split prod-split--reverse">
            <figure class="prod-figure prod-figure--tight">
              <div class="media-frame">
                <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="低饱和电脑面板线框展示收藏赛事列表与展开状态，画面中不出现真实用户信息" loading="lazy" decoding="async">
              </div>
            </figure>
            <div class="prod-col">
              <ul class="prod-checks">
                <li><strong>电脑端查看无需跳转</strong>收藏列表在当前页面展开，不离开你正在看的赛程。</li>
                <li><strong>入口在首屏</strong>会员中心与球队库并列，从首页进来就能看到。</li>
                <li><strong>两端口径分开标注</strong>iOS 端从底部菜单进收藏，展开方式与电脑端不同，页面会直接写清楚走哪条路。</li>
              </ul>
              <p class="prod-inline-link"><a class="btn btn--primary" href="#entry-overview">回到两步路径</a><a class="btn btn--ghost" href="/terms-of-use/">查看电脑端规则说明</a></p>
            </div>
          </div>
        </section>

        <section id="ios-review" class="prod-section prod-section--nebula">
          <div class="prod-head">
            <p class="eyebrow">04 / iOS 版评测</p>
            <h2 class="prod-h2">第 4 版评测框架：四项维度，一次看全</h2>
            <p class="prod-note">星空体育iOS版赛事对比评测已经迭代到第 4 版框架，关注点从「能不能打开」推进到「用起来顺不顺、数据够不够」。你关心的等待时间、点击次数、字段丰富度和收藏同步，都在这四项里。</p>
          </div>

          <div class="prod-split prod-split--ios">
            <figure class="prod-figure prod-figure--phone">
              <div class="media-frame media-frame--square">
                <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="深空蓝背景中的手机轮廓与四项评测维度标签，等宽数字突出标注" loading="lazy" decoding="async">
              </div>
            </figure>
            <ol class="prod-dims">
              <li>
                <span class="mono prod-dims__idx">01</span>
                <h3>加载速度</h3>
                <p>从点开到数据可读要等多久，测的是信号一般时的实际体感，而不是理想网络下的最好成绩。</p>
              </li>
              <li>
                <span class="mono prod-dims__idx">02</span>
                <h3>入口路径</h3>
                <p>从首页走到目标赛事要点击几次，和电脑端并排对照，差几步一眼就能看出来。</p>
              </li>
              <li>
                <span class="mono prod-dims__idx">03</span>
                <h3>数据字段</h3>
                <p>比分之外还看得到多少内容，哪些字段和电脑端使用同一套名称，切换设备时不用重新对号。</p>
              </li>
              <li>
                <span class="mono prod-dims__idx">04</span>
                <h3>收藏同步</h3>
                <p>在 iPhone 上收下的比赛，回到电脑端还能不能对上，同步延迟落在什么范围。</p>
              </li>
            </ol>
          </div>
        </section>

        <section id="data-compare" class="prod-section">
          <div class="prod-head">
            <p class="eyebrow">05 / 赛事数据对照</p>
            <h2 class="prod-h2">比分、控球、射门、角球、犯规，并排摊在同一张表上</h2>
            <p class="prod-note">不用在两个页面之间来回切。同一场比赛的两侧数据横向排开，谁在压制、谁在反击，读一行就够。</p>
          </div>

          <div class="paper-card prod-table-card">
            <div class="prod-table-scroll">
              <table class="data-table prod-table">
                <caption>常用对照字段与阅读方式</caption>
                <thead>
                  <tr>
                    <th scope="col">字段</th>
                    <th scope="col">怎么并排</th>
                    <th scope="col">搭配着看</th>
                    <th scope="col">能解决什么</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">比分</th>
                    <td>全场与半场分开呈现</td>
                    <td>控球、射门</td>
                    <td>判断一场球是单边压制还是互有攻守</td>
                  </tr>
                  <tr>
                    <th scope="row">控球</th>
                    <td>两侧占比同框对比</td>
                    <td>射门、角球</td>
                    <td>看谁掌握节奏，谁在等反击机会</td>
                  </tr>
                  <tr>
                    <th scope="row">射门</th>
                    <td>总次数与射正数分开列</td>
                    <td>比分、控球</td>
                    <td>分辨比分和场面是否吻合</td>
                  </tr>
                  <tr>
                    <th scope="row">角球</th>
                    <td>两侧数量并列显示</td>
                    <td>射门、犯规</td>
                    <td>找持续施压的痕迹，尤其是久攻不下的场次</td>
                  </tr>
                  <tr>
                    <th scope="row">犯规</th>
                    <td>次数与发生时段并列</td>
                    <td>角球、控球</td>
                    <td>理解比赛硬度和节奏被打断的次数</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <figure class="prod-figure">
            <div class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="宽幅赛事数据表格与比分数字的抽象视觉，关键列用暖橙色标记" loading="lazy" decoding="async">
            </div>
            <figcaption>五个字段横向展开，关键列用暖橙色标出。</figcaption>
          </figure>
        </section>

        <section id="rules-help" class="prod-section">
          <div class="prod-head">
            <p class="eyebrow">06 / 规则与帮助</p>
            <h2 class="prod-h2">入口、跳转、收藏和账号，各有对应的说明页</h2>
            <p class="prod-note">遇到具体问题时不必翻整个站点。电脑端的操作约定集中在一页，常见疑问归在知识库，两处各管一段。</p>
          </div>

          <div class="prod-links">
            <a class="prod-link" href="/terms-of-use/">
              <span class="mono prod-link__idx">DOC 01</span>
              <h3>电脑端规则说明</h3>
              <p>入口怎么进、页面怎么跳、收藏赛事如何保留、使用内容时要注意什么，以及 iOS 端与电脑端的差异。</p>
              <span class="prod-link__go">打开规则页 →</span>
            </a>
            <a class="prod-link" href="/knowledge/">
              <span class="mono prod-link__idx">DOC 02</span>
              <h3>入口与赛事知识库</h3>
              <p>球队库找不到队伍、收藏在 iOS 端怎么翻、版本差异在哪看，按分类问答直接取答案。</p>
              <span class="prod-link__go">进入知识库 →</span>
            </a>
            <a class="prod-link" href="/find-us/">
              <span class="mono prod-link__idx">DOC 03</span>
              <h3>入口问题反馈</h3>
              <p>电脑端入口打不开或页面显示异常时，附上浏览器与系统版本发给我们，定位会快很多。</p>
              <span class="prod-link__go">找到我们 →</span>
            </a>
          </div>
        </section>

        <section id="cadence" class="prod-section prod-section--panel">
          <div class="prod-head">
            <p class="eyebrow">07 / 更新节奏</p>
            <h2 class="prod-h2">每周三次导航记录，每周两篇评测</h2>
            <p class="prod-note">赛季密集期会加开专题，把短时间内集中出现的入口变化和数据字段调整一并写清楚。</p>
          </div>

          <ul class="prod-cadence">
            <li>
              <span class="prod-cadence__value mono">3</span>
              <h3>次 / 周 导航记录</h3>
              <p>入口位置、状态与可到达性有变动时，记录随即更新，维护和更新提示会同步挂在状态栏。</p>
            </li>
            <li>
              <span class="prod-cadence__value mono">2</span>
              <h3>篇 / 周 评测更新</h3>
              <p>入口体验、数据对照、iOS 版功能、电脑端规则四个常设分类轮流补新，累计已发布 214 篇。</p>
            </li>
            <li>
              <span class="prod-cadence__value mono">2019</span>
              <h3>年起持续运营</h3>
              <p>从电脑端赛事导航记录起步，2022 年上线球队库，2023 年加入赛事数据对照表，2024 年完成 iOS 版评测框架。</p>
            </li>
          </ul>

          <p class="prod-more"><a href="/blog/">看最近的评测与对照文章</a><a href="/history/">了解团队与演进过程</a></p>
        </section>

        <section class="prod-cta">
          <div class="prod-cta__body">
            <p class="eyebrow">下一步</p>
            <h2 class="prod-h2">先确认入口，再决定看什么</h2>
            <p>从首屏直接进球队库或会员中心；想先了解数据怎么对照、iOS 版怎么评，也可以从评测动态里挑一篇读起。</p>
          </div>
          <div class="prod-cta__actions">
            <a class="btn btn--primary" href="/find-us/">联系入口支持</a>
            <a class="btn btn--ghost" href="/blog/">浏览评测栏目</a>
          </div>
        </section>

      </div>
    </div>
  </div>
</main>