feat：更新

src/components/dataList/dataListItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="data-list-item">
+    <h3>{{ nick }}</h3>
+    <div class="data-list-item-content">
+      <dl>
+        <dt>总消费</dt>
+        <dd>{{ userTotalPay }}</dd>
+      </dl>
+      <dl>
+        <dt>总产出</dt>
+        <dd>{{ totalPlatformValue }}</dd>
+      </dl>
+      <dl>
+        <dt>爆率</dt>
+        <dd>{{ rate }}</dd>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataListItem",
+  props: {
+    nick: {
+      type: String,
+      default: ""
+    },
+    userTotalPay: {
+      type: [Number, String],
+      default: 0
+    },
+    totalPlatformValue: {
+      type: [Number, String],
+      default: 0
+    },
+    rate: {
+      type: [Number, String],
+      default: 0
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.data-list-item {
+  & > h3 {
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 60px;
+  }
+  &-content {
+    display: flex;
+    margin-top: 15px;
+    & > dl {
+      flex: 1;
+      text-align: center;
+      & > dt {
+        font-size: 28px;
+        font-weight: bold;
+        line-height: 60px;
+      }
+      & > dd {
+        font-size: 26px;
+        line-height: 50px;
+      }
+    }
+  }
+}
+</style>

src/components/dataList/index.js

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

src/components/dataList/main.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="data-list">
+    <div
+      class="data-list-block"
+      v-for="(item, index) in list"
+      :key="`data-list-block-${item.id}-${index}`"
+    >
+      <data-list-item
+        :nick="item.nick"
+        :userTotalPay="item.userTotalPay"
+        :totalPlatformValue="item.totalPlatformValue"
+        :rate="item.rate"
+      ></data-list-item>
+    </div>
+  </div>
+</template>
+
+<script>
+import { rateList } from "@/api";
+import dataListItem from "./dataListItem.vue";
+export default {
+  name: "DataList",
+  components: {
+    dataListItem
+  },
+  data() {
+    return {
+      list: []
+    };
+  },
+  created() {
+    this.getRateList();
+  },
+  methods: {
+    getRateList() {
+      rateList()
+        .then(res => {
+          this.todoData(res);
+        })
+        .catch(() => {
+          this.$toast.fail("获取数据失败！");
+        });
+    },
+    todoData(res) {
+      const { code, data, msg } = res;
+      if (code === 200) {
+        this.list = data || [];
+      } else {
+        this.$toast.fail(msg);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.data-list {
+  padding: 0 0 30px;
+  &-block {
+    margin-top: 40px;
+    padding: 20px 30px;
+    background: #26144d;
+    border-radius: 24px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
+</style>