更新代码

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>

src/views/dashboard/PanelGroup.vue

@@ -1,180 +1,187 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
+  <div class="wrapper">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+    <div class="header">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+      <el-row :gutter="16" class="panel-group">
-        <div class="card-panel-icon-wrapper icon-people">
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="item in layoutRow">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          <div class="content">
-        </div>
+            <div class="data-box flow-hidden">
-        <div class="card-panel-description">
+              <div class="data-info fl_l">
-          <div class="card-panel-text">
+                <div class="title">{{ item.label() }}</div>
-            访客
+                <div class="count">
-          </div>
+                  <count-to :start-val="0" :end-val="item.model.count" :duration="2600" class="card-panel-num" />
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
                 </div>
               </div>
-    </el-col>
+              <div class="icon fl_r">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+                <img :src="item.icon" alt="">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            消息
-          </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
               </div>
             </div>
-    </el-col>
+            <div class="compare" v-if="item.model.trendDirection >= 0">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+              和昨日相比
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+              <img class="trend" :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`" alt="">
-        <div class="card-panel-icon-wrapper icon-money">
+              <span :class="['num', item.model.trendDirection === 0 ? 'up' : 'down' ]">{{ item.model.trendNum }}%</span>
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            金额
-          </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            订单
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
             </div>
           </div>
         </el-col>
       </el-row>
+    </div>
+
+    <div class="rank-info">
+      <el-row :gutter="16" class="panel-group">
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <RankList title="充值排行榜">
+            <template :scope="scope">
+              <count-to prefix='￥' :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
+            </template>
+          </RankList>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <RankList title="提现排行榜">
+            <template :scope="scope">
+              <count-to prefix='￥' :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
+            </template>
+          </RankList>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <RankList title="女神收入榜" :operation="operation" />
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <RankList title="用户邀请榜" :operation="operation" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>
 
 <script>
-import CountTo from 'vue-count-to'
+import CountTo from 'vue-count-to';
+import RankList from '@/views/components/rankList'
+
+const operation = [
+  { label: '总', prop: '' },
+  { label: '月', prop: '' },
+  { label: '周', prop: '' },
+  { label: '日', prop: '' },
+]
 
 export default  {
   components: {
-    CountTo
+    CountTo,
+    RankList
+  },
+  data() {
+    return {
+      operation,
+      layoutRow: [],
+      loginModel: {
+        count: 40689,
+        trendDirection: 0,
+        trendNum: 8.5
+      },
+      topUpModel: {
+        count: 40689,
+        trendDirection: 0, // 'up',
+        trendNum: 8.5
+      },
+      withdrawDepositModel: {
+        count: 40689,
+        money: 24,
+        trendDirection: 1, // down
+        trendNum: 8.5
+      },
+      anchorModel: {
+        count: 40689,
+        money: 8,
+        trendDirection: 1,
+        trendNum: 8.5
+      }
+    }
+  },
+  created() {
+    this.layoutRow = [
+      { label: ()=> '今日登录', icon: require('../../assets/icons/img.png'), model: this.loginModel },
+      { label: ()=> '主播数', icon: require('../../assets/icons/img_1.png'), model: this.topUpModel },
+      { label: ()=> `今日充值(${this.withdrawDepositModel.money})`, icon: require('../../assets/icons/img_2.png'), model: this.withdrawDepositModel },
+      { label: ()=> `今日登录(${this.anchorModel.money})`, icon: require('../../assets/icons/img_3.png'), model: this.anchorModel }
+    ];
   },
   methods: {
-    handleSetLineChartData(type) {
+
-      this.$emit('handleSetLineChartData', type)
-    }
   }
 }
+
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
-.panel-group {
+  .fl_l {
-  margin-top: 18px;
-
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
-
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
     float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
   }
-
+  .fl_r {
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
     float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
   }
-
+  .flow-hidden {
+    overflow: hidden;
+  }
+  .wrapper {
+    .header {
+      margin-bottom: 16px;
       .card-panel-num {
-        font-size: 20px;
+        font-size: 28px;
+        font-weight: bold;
+        color: #202224;
+      }
+      .content {
+        background: #fff;
+        height: 127px;
+        padding: 16px;
+        border-radius: 14px;
+        box-sizing: border-box;
+        margin-bottom: 8px;
+        .data-info {
+          .title {
+            font-size: 16px;
+            color: #202224;
+            margin-bottom: 8px;
+          }
+          .count {
+            line-height: 38px;
           }
         }
-  }
+        .icon {
-}
+          width: 60px;
-
+          height: 60px;
-@media (max-width:550px) {
+          img {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
             width: 100%;
             height: 100%;
-    margin: 0 !important;
+          }
+        }
+        .compare {
+          height: 20px;
+          line-height: 20px;
+          font-size: 14px;
+          color: #858585;
+          .trend {
+            height: 18px;
+            width: 18px;
+            margin-left: 8px;
+            margin-right: 2px;
+            vertical-align: middle;
+          }
+          .num {
+            &.down {
+              color: #F93C65;
+            }
+            &.up {
+              color: #00B69B;
+            }
+          }
+        }
+      }
+    }
 
-    .svg-icon {
+    .rank-info {
-      display: block;
+      margin-bottom: 16px;
-      margin: 14px auto !important;
+      .card-panel-col {
-      float: none !important;
+        border-radius: 14px;
       }
     }
   }