Google Play Games APK底部详情列表栏CSS实现及代码获取咨询

• 无法直接从APK中提取CSS代码：Google Play Games是Android原生应用，底层采用Java/Kotlin+XML布局（或Jetpack Compose）开发，不属于Web技术栈，因此不存在可直接提取的CSS代码。
• 同款效果的实现思路：
  • 布局结构：底部固定的横向滚动容器，内部包含多个等宽卡片项，每个卡片依次排列图标、标题、数值元素。
  • 核心样式要点：
    • 容器设置overflow-x: auto实现横向滚动，Web端可通过::-webkit-scrollbar { display: none; }隐藏滚动条。
    • 卡片项使用垂直布局排列内容，设置固定宽度与内边距保证一致性。
    • 图标采用圆形背景，标题和数值区分字体大小与权重，形成层级对比。
• 你可以基于以下代码片段快速实现类似效果：

  <div class="bottom-detail-bar">
    <div class="detail-item">
      <div class="item-icon">🎮</div>
      <div class="item-title">游玩时长</div>
      <div class="item-value">123h</div>
    </div>
    <div class="detail-item">
      <div class="item-icon">🏆</div>
      <div class="item-title">成就</div>
      <div class="item-value">45/60</div>
    </div>
    <!-- 可添加更多详情项 -->
  </div>
  

  .bottom-detail-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    background-color: #ffffff;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .bottom-detail-bar::-webkit-scrollbar {
    display: none;
  }
  .detail-item {
    display: inline-block;
    width: 80px;
    text-align: center;
    padding: 0 10px;
  }
  .item-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 5px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  .item-title {
    font-size: 12px;
    color: #666666;
    margin-bottom: 3px;
  }
  .item-value {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
  

内容的提问来源于stack exchange，提问作者Mehmet KYGSZ