<template>
  <div class="photo-rank">
    <div class="info-rank">
      <div class="info-item__title">
        <h2>成员拍照排名</h2>
      </div>
      <div class="info-rank__wrapper">
        <div class="rank-item" v-for="(item, index) in 100" :key="index">
          <div class="rank-item__left">
            <image src="./images/rank1.png" v-if="index === 0" />
            <image src="./images/rank2.png" v-else-if="index === 1" />
            <image src="./images/rank3.png" v-else-if="index === 2" />
            <span v-else>{{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}</span>
            <h2>贡平娟</h2>
          </div>
          <div class="rank-item__right">
            <span>已上传</span>
            <i>10</i>
            <span>张</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PhotoRank',

    appName: '拍照排名',

    data () {
      return {

      }
    },

    mounted () {

    },

    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .photo-rank {
    padding: 32px 0 40px;

    * {
      box-sizing: border-box;
      font-style: normal;
    }

    .info-rank {
      margin: 0 32px;
      padding: 0 32px 32px;
      background: #FFFFFF;
      box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
      border-radius: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .info-item__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 108px;

        h2 {
          font-weight: 600;
          font-size: 32px;
          color: #333;
        }
      }

      .info-rank__wrapper {
        .rank-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 112px;
          border-bottom: 1px solid #DDDDDD;

          &:last-child {
            border-bottom: none;
          }

          & > div {
            display: flex;
            align-items: center;
          }

          .rank-item__right {
            font-size: 28px;
            color: #999999;

            i {
              color: #2E88FF;
            }
          }

          .rank-item__left {
            image {
              width: 50px;
              height: 50px;
              margin-right: 32px;
            }

            span {
              width: 60px;
              margin-right: 22px;
              padding-left: 6px;
              color: #CCCCCC;
              font-size: 32px;
              font-weight: 600;
            }

            h2 {
              color: #333333;
              font-size: 32px;
            }
          }
        }
      }
    }
  }
</style>