index.vue

<template>
  <div class="dashboard-container">
    <github-corner class="github-corner"/>

    <el-row :gutter="40" class="card-panel-col">
      <el-col :xs="12" :span="12" :lg="6">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper" style="margin-top: -10px">
            <el-image style="width:200px; height: 90px"
                      src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"></el-image>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ nickname }}
            </div>
            <div class="card-panel-text">
              <el-tag size="mini" type="danger">莫得感情</el-tag>
              <el-tag size="mini" type="success" style="margin-left: 5px">打工人</el-tag>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              总访问量
            </div>
            <div class="card-panel-num">123456</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              支付金额
            </div>
            <div class="card-panel-num">123456</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <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>
            <div class="card-panel-num">123456</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <BarChart id="barChart" height="400px" width="100%" class="chart-container"/>

    <el-row :gutter="40" style="margin-top: 20px">
      <el-col :xs="24" :span="8">
        <PieChart id="pieChart" height="400px" width="100%" class="chart-container"/>
      </el-col>

      <el-col :xs="24" :span="8">
        <FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>
      </el-col>

      <el-col :xs="24" :span="8">
        <RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">

// Vue引用
import {computed, reactive, toRefs} from "vue";

// 组件引用
import GithubCorner from '@/components/GithubCorner/index.vue'
import TodoList from './components/TodoList/index.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
import RadarChart from "./components/RadarChart.vue";
import FunnelChart from "./components/FunnelChart.vue";

import {useUserStoreHook} from "@/store/modules/user"

const roles = computed(() => useUserStoreHook().roles);
const avatar = computed(() => useUserStoreHook().avatar);
const nickname = computed(() => useUserStoreHook().nickname);

const state = reactive({
  updateLogActiveName: '1',
  contactActiveName: '1',
  documentActiveName: '1'
})

const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(state)

</script>


<style lang="scss" scoped>

.dashboard-container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
    z-index: 99;
  }

  .box-center {
    margin: 0 auto;
    display: table;
  }

  .user-profile {
    .user-name {
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }

  .card-panel-col {
    margin-bottom: 12px;
  }

  .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-user {
        background: #e77541;
      }

      .icon-people {
        background: #40c9c6;
      }


      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;

      .svg-icon {
        width: 3em !important;
        height: 3em !important;
      }
    }

    .icon-message {
      color: #36a3f7;

      .svg-icon {
        width: 3em !important;
        height: 3em !important;
      }
    }

    .icon-money {
      color: #f4516c;

      .svg-icon {
        width: 3.2em !important;
        height: 3.2em !important;
      }
    }

    .icon-shopping {
      color: #34bfa3;

      .svg-icon {
        width: 3em !important;
        height: 3em !important;
      }
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px 20px 0;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }

  .chart-container {
    background: #ffffff;
  }

}

</style>