totalrank.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <style lang="sass">
  2. @import './scss/totalrank.scss';
  3. </style>
  4. <template>
  5. <div class="page-totalrank" :style="{minHeight: winHeight + 'px' }">
  6. <div v-if="totalTopUsers.length>0">
  7. <ul class="list-rank1" v-if="totalTopUsers">
  8. <li class="item-user" v-if="totalTopUsers[1]">
  9. <div class="u-cover">
  10. <img :src="totalTopUsers[1].userHeadInfo.head">
  11. </div>
  12. <h2>{{totalTopUsers[1].userHeadInfo.nick}}</h2>
  13. <p>¥{{totalTopUsers[1].totalBonus/100}}</p>
  14. </li>
  15. <li class="item-user" v-if="totalTopUsers[0]">
  16. <div class="u-cover">
  17. <img :src="totalTopUsers[0].userHeadInfo.head">
  18. </div>
  19. <h2>{{totalTopUsers[0].userHeadInfo.nick}}</h2>
  20. <p>¥{{totalTopUsers[0].totalBonus/100}}</p>
  21. </li>
  22. <li class="item-user" v-if="totalTopUsers[2]">
  23. <div class="u-cover">
  24. <img :src="totalTopUsers[2].userHeadInfo.head">
  25. </div>
  26. <h2>{{totalTopUsers[2].userHeadInfo.nick}}</h2>
  27. <p>¥{{totalTopUsers[2].totalBonus/100}}</p>
  28. </li>
  29. </ul>
  30. <ul class="list-rank2" v-if="totalLastUsers">
  31. <li v-for="(user,index) in totalLastUsers" :key="index">
  32. <i :data-index="(index+4)" class="info_rank"></i>
  33. <div class="info_name" v-if="user.userHeadInfo">
  34. <img :src="user.userHeadInfo.head">{{user.userHeadInfo.nick}}
  35. </div>
  36. <div class="info_award">{{user.totalBonus/100}}元</div>
  37. </li>
  38. </ul>
  39. </div>
  40. <div class="tip-empty" v-else>暂无数据</div>
  41. <div class="rank-uinfo" :class="{'isHasDlfooter' :isHasDlfooter}" v-if="userHeadInfo">
  42. <div class="info_name" v-if="userHeadInfo">
  43. <span>{{userBonus.totalBonus>0 ? userBonus.ranking : "暂无排名"}}</span>
  44. <img :src="userHeadInfo.head">{{userHeadInfo.nick}}
  45. </div>
  46. <div class="info_award">{{userBonus.totalBonus/100}}元</div>
  47. </div>
  48. <dlfooter
  49. v-if="isHasDlfooter"
  50. :closeCallback = "clossDlfooterCallback"
  51. ></dlfooter>
  52. </div>
  53. </template>
  54. <script>
  55. import rank from './js/rank.js'
  56. export default rank
  57. </script>