<script setup></script>

<template>
  <view class="ranking-list">
    <nav-bar>
      <template #back>
        <image
          src="/static/images/public/white-arrow.png"
          mode="heightFix"
          class="top-left-icon"
        ></image>
      </template>
    </nav-bar>
    <view class="top-box">
      <image
        src="/static/images/ranking-list/title-icon.png"
        mode="aspectFit"
        class="left-icon"
      ></image>
      <image
        src="/static/images/ranking-list/hat.png"
        mode="aspectFit"
        class="right-icon"
      ></image>
    </view>

    <!-- 表格 -->
    <view class="table-box">
      <!-- 表头 -->
      <view class="table-head">
        <view class="table-item">
          <text class="item-text">排行</text>
        </view>
        <view class="table-item">
          <text class="item-text">用户</text>
        </view>
        <view class="table-item">
          <text class="item-text">积分</text>
        </view>
      </view>
      <!-- 列表内容 -->
      <view v-for="item in 4" class="table-content">
        <view class="table-item">
          <text class="item-text">1</text>
        </view>
        <view class="table-item">
          <text class="item-text">张三</text>
        </view>
        <view class="table-item">
          <text class="item-text">100</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .top-left-icon {
    height: 42rpx;
  }
  .top-box {
    position: relative;
    height: 466rpx;
    background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 38rpx;
      left: 0;
      bottom: 0;
      background: #ffffff;
      border-radius: 32rpx 32rpx 0rpx 0rpx;
    }
    .left-icon {
      width: 354rpx;
      height: 166rpx;
      position: absolute;
      bottom: 42rpx;
      left: 48rpx;
    }
    .right-icon {
      width: 450rpx;
      height: 218rpx;
      position: absolute;
      bottom: 10rpx;
      right: -60rpx;
    }
  }

  .table-box {
    
  }
</style>
