cai-ui/src/views/dashboard/PanelGroup.vue

<template>
  <div class="wrapper">
    <div class="header">
      <el-row :gutter="16" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="(item, index) in layoutRow" :key="index">
          <div class="content">
            <div class="data-box flow-hidden">
              <div class="data-info fl_l">
                <div class="title">{{ item.label() }}</div>
                <div class="count">
                  <count-to :start-val="0" :end-val="item.model.count" :duration="2600" class="card-panel-num" />
                </div>
              </div>
              <div class="icon fl_r">
                <img :src="item.icon" alt="">
              </div>
            </div>
            <div class="compare" v-if="item.model.trendDirection >= 0">
              和昨日相比
              <img class="trend" :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`" alt="">
              <span :class="['num', item.model.trendDirection === 0 ? 'up' : 'down' ]">{{ item.model.trendNum }}%</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="chart-content">
      <line-chart/>
      <div class="select-time">
        <el-select v-model="chartTime">
          <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.value"></el-option>
        </el-select>
      </div>
    </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 RankList from '@/views/components/rankList';
import LineChart from '../dashboard/LineChart';

const chartSelect = [
  { label: '最近一周', key: '1' },
  { label: '最近一个月', key: '2' },
  { label: '最近三个月', key: '3' },
]

const operation = [
  { label: '总', prop: '' },
  { label: '月', prop: '' },
  { label: '周', prop: '' },
  { label: '日', prop: '' },
]

export default  {
  components: {
    CountTo,
    RankList,
    LineChart
  },
  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
      },
      chartSelect,
      chartTime: '1'
    }
  },
  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: {

  }
}

</script>

<style scoped lang="scss">
  .fl_l {
    float: left;
  }
  .fl_r {
    float: right;
  }
  .flow-hidden {
    overflow: hidden;
  }
  .wrapper {
    .header {
      margin-bottom: 16px;
      .card-panel-num {
        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;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .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;
            }
          }
        }
      }
    }

    .chart-content {
      position: relative;
      border-radius: 14px;
      background: #fff;
      padding: 16px;
      margin-bottom: 16px;
      .select-time {
        position: absolute;
        right: 16px;
        top: 16px;
      }
    }

    .rank-info {
      margin-bottom: 16px;
      .card-panel-col {
        border-radius: 14px;
        margin-bottom: 16px;
      }
    }
  }
</style>