dvcp_v2_wxcp_app/src/project/qianxinan/AppPointsRanking/AppPointsRanking.vue

<template>
  <div class="AppPointsRanking">
    <AiTopFixed>
      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="88" bg-color="#fff" font-size="28"
        inactive-color="#666" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#3399FF" @change="change">
      </u-tabs>
    </AiTopFixed>
    <div class="list-data">
      <div class="item">
        <div class="flex-left">
          <div class="item-rank">
            <img src="./img/top1.png" alt="">
            <!-- <span>4</span> -->
          </div>
          <div class="item-user">
            <img src="./img/top1.png" alt="">李毅
          </div>
        </div>
        <div class="flex-right">50</div>
      </div>
      <div class="item">
        <div class="flex-left">
          <div class="item-rank">
            <span>4</span>
          </div>
          <div class="item-user">
            <img src="./img/top1.png" alt="">李毅
          </div>
        </div>
        <div class="flex-right">50</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    appName: '积分排行',
    data() {
      return {
        current: 1,
        list: [],
        currentTabs: 0,
        tabList: [
          {
            name: '总排行',
          },
          {
            name: '县局排行',
          },
          {
            name: '派出所排行',
          },
        ],
        barStyle: {
          'width': '24px',
          'height': '3px',
          'border-radius': '2px',
          'bottom': '0px',
          'background-color': '#3399FF'
        },
        activeStyle: {
          'font-weight' : '400',
          'color': '#000000'
        },
      }
    },

    computed: {
      ...mapState(['user']),
    },

    created() {
    //   this.$dict.load("workTaskType").then(() => {
    //     this.getList()
    //   })
    //   uni.$on('getList', () => {
    //     this.current = 1
    //     this.getList()
    //   })
    },

    onShow() {
      document.title = '积分排行'
    },

    methods: {
      change(index) {
        this.currentTabs = index
        // this.getListInit()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .AppPointsRanking {
    min-height: 100%;
    background-color: #F5F5F5;
    padding-bottom: 32px;
    ::v-deep .content {
      padding: 0;
      min-height: 0;
    }
    ::v-deep .fixed {
      min-height: 0;
    }
    .list-data {
      padding: 32px;
      .item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 24px 48px 24px 32px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 32px;
        margin-bottom: 16px;
        .flex-left {
          display: flex;
          .item-rank {
            width: 152px;
            img {
              padding-top: 12px;
              width: 56px;
              height: 56px;
              vertical-align: middle;
            }
            span {
              line-height: 80px;
              font-family: SFPro-SNaNpxiboldItalic;
              font-weight: SemiboldItalic;
              font-size: 40px;
              color: #DDD;
            }
          }
          .item-user {
            line-height: 80px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 32px;
            color: #333;
            img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-right: 16px;
              vertical-align: middle;
            }
          }
        }
        .flex-right {
          font-family: SFPro-SNaNpxibold;
          font-weight: 600;
          font-size: 36px;
          color: #FF9343;
          line-height: 42px;
          padding-top: 20px;
        }
      }
    }
  }
</style>