feat: 更新

src/components/rankList/index.js

@@ -0,0 +1,7 @@
+import RankList from "./main";
+
+RankList.install = function(Vue) {
+  Vue.component(RankList.name, RankList);
+};
+
+export default RankList;

src/components/rankList/main.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="rank-list">
+    <template v-if="list.length > 0">
+      <rank-list-item
+        class="rank-list-block"
+        v-for="(item, index) in list"
+        :key="`rank-list-item-${item.id}-${index}`"
+        :rank="index + 1"
+        :avatar="item.imageUrl"
+        :name="item.username"
+        :id="item.id"
+        :value="item.diffValue"
+      ></rank-list-item>
+    </template>
+    <template v-else>
+      <van-empty image="error" description="暂无数据" />
+    </template>
+  </div>
+</template>
+
+<script>
+import rankListItem from "./rankListItem.vue";
+export default {
+  name: "RankList",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {
+    rankListItem
+  },
+  computed: {},
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.rank-list {
+  &-block {
+    margin-top: 40px;
+  }
+  &:first-child {
+    margin-top: 0;
+  }
+}
+</style>

src/components/rankList/rankListItem.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="rank-list-item">
+    <div class="rank-list-item-index">
+      <div class="rank-list-item-index-image" v-if="indexImage">
+        <van-image width="100%" height="100%" fit="cover" :src="indexImage" />
+      </div>
+      <template v-else>
+        <span v-if="rank">{{ rank }}</span>
+        <label v-else>未上榜</label>
+      </template>
+    </div>
+    <div class="rank-list-item-info">
+      <div class="rank-list-item-info-image">
+        <van-image width="100%" height="100%" :src="avatar" fit="cover" round />
+      </div>
+      <div class="rank-list-item-info-text">
+        <div class="rank-list-item-info-text-name">{{ name }}</div>
+        <div class="rank-list-item-info-text-id">{{ id }}</div>
+      </div>
+    </div>
+    <div class="rank-list-item-value">
+      <div class="rank-list-item-value-number">
+        {{ rank === 1 ? "No.1" : value }}
+      </div>
+      <div class="rank-list-item-value-text" v-if="rank > 1">距上名</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RankListItem",
+  props: {
+    rank: {
+      type: Number,
+      default: 1
+    },
+    avatar: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    id: {
+      type: [String, Number],
+      default: ""
+    },
+    value: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      rankIcon: [
+        require("@/assets/images/icon_no1.png"),
+        require("@/assets/images/icon_no2.png"),
+        require("@/assets/images/icon_no3.png")
+      ]
+    };
+  },
+  computed: {
+    index() {
+      return this.rank - 1;
+    },
+    indexImage() {
+      if (this.index < 0) return null;
+      if (this.index <= 2) return this.rankIcon[this.index];
+      else return null;
+    },
+    rankDisplay() {
+      if (this.rank === 0) return "未上榜";
+      else return this.rank;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.rank-list-item {
+  display: flex;
+  align-items: center;
+  &-index {
+    width: 100px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-image {
+      width: 64px;
+      height: 64px;
+    }
+    & > span {
+      font-size: 40px;
+      font-weight: 800;
+      color: #dbcfff;
+    }
+    & > label {
+      font-size: 24px;
+      font-weight: bold;
+      color: #dbcfff;
+    }
+  }
+  &-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    // margin-left: 20px;
+    &-image {
+      width: 100px;
+      height: 100px;
+    }
+    &-text {
+      flex: 1;
+      margin-left: 20px;
+      &-name {
+        font-size: 30px;
+        font-weight: bold;
+        color: #dbcfff;
+        line-height: 40px;
+      }
+      &-id {
+        font-size: 26px;
+        font-weight: 500;
+        color: #dbcfff;
+        line-height: 40px;
+        opacity: 0.6;
+      }
+    }
+  }
+  &-value {
+    width: 150px;
+    text-align: right;
+    &-number {
+      font-size: 32px;
+      font-weight: bold;
+      color: #ffe26c;
+      line-height: 54px;
+      opacity: 0.8;
+    }
+    &-text {
+      font-size: 24px;
+      font-weight: 500;
+      color: #dbcfff;
+      line-height: 54px;
+      opacity: 0.6;
+    }
+  }
+}
+</style>