<template>
  <div class="ranking">
    <div class="list-wrapper">
      <div class="item my" @click="linkTo">
        <span>113</span>
        <div class="userinfo">
          <image :src="'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
          <h3>且听风吟</h3>
        </div>
        <i>20</i>
        <image class="right" src="../img/right.png" />
      </div>
      <div class="item" v-for="(item, index) in 21" :key="index">
        <span>{{ index + 1 }}</span>
        <div class="userinfo">
          <image :src="'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
          <h3>且听风吟</h3>
        </div>
        <i>20</i>
      </div>
      <!-- <AiEmpty v-if="!list.length"></AiEmpty> -->
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },

    mounted: {

    },

    methods: {
      linkTo () {
        uni.navigateTo({
          url: './IntegralDetail'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .ranking {
    padding-bottom: 20px;

    .list-wrapper {
      margin: 0 32px;

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
        margin-bottom: 16px;
        padding: 0 32px;
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
        border-radius: 16px;

        span {
          width: 130px;
          font-size: 34px;
          color: #DDDDDD;
          font-style: oblique;
          font-weight: 600;
        }

        &:nth-of-type(1) span {
          color: #2D7DFF;
        }

        &:nth-of-type(2) span {
          color: #3BBC37;
        }

        &:nth-of-type(3) span {
          color: #FF883C;
        }

        image {
          width: 48px;
          height: 48px;
        }

        .userinfo {
          display: flex;
          align-items: center;
          flex: 1;

          h3 {
            margin-left: 16px;
            font-size: 28px;
            color: #333333;
          }
        }

        i {
          width: 100px;
          font-size: 32px;
          color: #FFB94C;
          font-style: normal;
          font-weight: 600;
          text-align: center;
        }
      }
    }

    .my {
      padding-right: 16px!important;

      i {
        width: auto!important;
      }

      .right {
        width: 64px;
        height: 64px;
      }
    }
  }
</style>
