fastest-progress.vue

<template>
  <div class="fastest-progress">
    <div class="bg">
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <span class="title">本月进步最大奖励池</span>
      <span class="award">￥6000.00</span>
    </div>
    <div class="rank">
      <div class="header rank-flex">
        <span style="flex:1;text-align:center;">排名</span>
        <span style="flex:1"></span>
        <span style="flex:2;text-align:center">用户名</span>
        <span style="flex:2">本月业绩增长率</span>
        <span style="flex:1;text-align:center">奖金</span>
      </div>
      <div class="rank-flex rank-content">
        <base-refresh-scroll>
          <div slot="content">
            <rank-item
              v-for="(item, index) in 20"
              :key="index"
              :rank-index="index + 1"
            />
          </div>
        </base-refresh-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
import RankItem from "./compoments/rankItem.vue";
export default {
  name: "FastestProgress",
  components: {
    RankItem,
    BaseRefreshScroll
  }
};
</script>

<style lang="scss" scoped>
.fastest-progress {
  position: relative;
  height: 100vh;
}
.bg {
  position: relative;
  height: 178px;
  color: #ffffff;
  background-image: url("../../assets/images/进步奖背景图.png");
  background-size: cover;
  .van-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
  }
  .title {
    position: absolute;
    top: 113px;
    left: 35px;
    font-size: 14px;
  }
  .award {
    position: absolute;
    top: 136px;
    left: 35px;
    font-size: 16px;
  }
}
.rank {
  position: absolute;
  top: 168px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 178px);
  overflow: hidden;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 12px;

  .header {
    height: 36px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #eeeeee;
  }
  .rank-content {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .rank-flex {
    display: flex;
  }
}
</style>