更新代码

src/views/components/rankList/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="wrapper">
+    <div class="header">
+      <div class="title">{{ title }}</div>
+      <div class="operation">
+        <div :class="['btn', index === activeIndex ? 'active' : '']"
+             v-for="({ prop, label }, index) in operation"
+             :key="prop"
+             @click="handleSwitch(label, prop, index)">{{ label }}</div>
+      </div>
+    </div>
+
+    <div class="list-content">
+      <div class="list-item" v-for="(item, index) in 6">
+        <div class="numerical">{{ index + 1 }}</div>
+        <div class="detail">
+          <div class="head_portrait">
+            <img :src="require('../../../assets/icons/head_portrait.png')" alt="">
+          </div>
+          <div class="user-info">
+            <div class="user-name">向天再借五百年</div>
+            <div class="user-id">767D85</div>
+          </div>
+        </div>
+        <div class="count">
+          <slot v-if="$scopedSlots.default" :data="item" :$index="index"></slot>
+          <count-to v-else :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CountTo from 'vue-count-to';
+export default {
+  name: 'index',
+  components: {
+    CountTo
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    operation: {
+      type: Array,
+      default: ()=> ([{ label: '总', prop: '' }, { label: '日', prop: '' }])
+    }
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  methods: {
+    handleSwitch(label, prop, index) {
+      console.log(label, prop)
+      this.activeIndex = index;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  padding: 16px;
+  border-radius: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  .header {
+    height: 26px;
+    line-height: 26px;
+    margin-bottom: 16px;
+    .title {
+      float: left;
+      font-size: 16px;
+      font-weight: 700;
+      color: #202224;
+    }
+    .operation {
+      float: right;
+      display: flex;
+      padding: 2px;
+      box-sizing: border-box;
+      background: #F5F6FA;
+      .btn {
+        width: 26px;
+        height: 22px;
+        border-radius: 4px;
+        line-height: 22px;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 550;
+        transition: all 0.1s linear;
+        cursor: pointer;
+        color: #858585;
+        &.active {
+          background: #fff;
+          color: #202224;
+        }
+      }
+    }
+  }
+
+  .list-content {
+    .list-item {
+      height: 37px;
+      line-height: 37px;
+      margin-bottom: 16px;
+      &:nth-of-type(1) {
+        .numerical {
+          color: #F1691C;
+        }
+      }
+      &:nth-of-type(2) {
+        .numerical {
+          color: #F5AB3C;
+        }
+      }
+      &:nth-of-type(3) {
+        .numerical {
+          color: #4379EE;
+        }
+      }
+      .numerical {
+        font-size: 14px;
+        font-weight: 600;
+        color: #202224;
+        width: 20px;
+        text-align: left;
+        margin-right: 8px;
+        float: left;
+      }
+      .detail {
+        display: flex;
+        float: left;
+        .head_portrait {
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          overflow: hidden;
+          margin-top: 4.5px;
+          margin-right: 4px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .user-info {
+          line-height: normal;
+          .user-name {
+            font-size: 14px;
+            color: #202224;
+            margin-bottom: 2px;
+          }
+          .user-id {
+            font-size: 12px;
+            color: #767D85;
+          }
+        }
+      }
+
+      .count {
+        float: right;
+        font-size: 14px;
+        color: #202224;
+      }
+    }
+  }
+}
+</style>