<template>
  <div class="dashboard-editor-container">

    <el-card header="舆情分析" class="card-box">
      <brief />
    </el-card>

    <el-row :gutter="8">
      <el-col :span="12">
        <el-card header="每日充值提现" class="card-box">
          <daily-bill-report />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="每日充值利润" class="card-box">
          <daily-profit-report />
        </el-card>
      </el-col>
    </el-row>

    <el-card header="余额时段分析" class="card-box">
      <balance-period-report/>
    </el-card>

  </div>
</template>

<script>
import DailyBillReport from "@/views/dashboard/DailyBillReport.vue";
import BalancePeriodReport from "@/views/dashboard/BalancePeriodReport.vue";
import Brief from "@/views/dashboard/Brief.vue";
import DailyProfitReport from "@/views/dashboard/DailyProfitReport.vue";

export default {
  name: 'Index',
  components: {
    DailyProfitReport,
    Brief,
    BalancePeriodReport,
    DailyBillReport,
  },
  data() {
    return {

    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
