|
@@ -1,197 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="big">
|
|
|
- <el-row class="card">
|
|
|
- <el-col :xs="24" :lg="16" :md="16" style="height:90px">
|
|
|
- <div class="car-left">
|
|
|
- <el-row>
|
|
|
- <el-col :xs="4" :md="3" :lg="3">
|
|
|
- <span class="card-img">
|
|
|
- <img :src="userInfo.headerImg" alt="">
|
|
|
- </span>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="20" :lg="12" :md="12">
|
|
|
- <div class="text">
|
|
|
- <h4>早安,管理员, 请开始您一天的工作吧!</h4>
|
|
|
- <p class="tips-text">
|
|
|
- <i class="el-icon-sunny el-icon" />
|
|
|
- <span>今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :lg="8" :md="8">
|
|
|
- <div class="car-right">
|
|
|
- <el-row>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="card-item">
|
|
|
- <span class="flow"><i class="el-icon-s-grid" /></span>
|
|
|
- <span>今日流量 </span>
|
|
|
- <b>13260</b>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="card-item">
|
|
|
- <span class="user-number">
|
|
|
- <i class="el-icon-s-custom" />
|
|
|
- </span>
|
|
|
- <span>总用户 </span>
|
|
|
- <b>48286</b>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="card-item">
|
|
|
- <span class="feedback">
|
|
|
- <i class="el-icon-star-on" />
|
|
|
- </span>
|
|
|
- <span>好评率 </span>
|
|
|
- <b>98%</b>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col>
|
|
|
- <el-card shadow="hover">
|
|
|
- <h2>
|
|
|
- 使用教学:<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/">https://www.bilibili.com/video/BV1Rg411u7xH/</a>
|
|
|
- </h2>
|
|
|
- <br>
|
|
|
- <h2>
|
|
|
- 插件仓库:<a style="color:#409EFF" target="view_window" href="https://github.com/flipped-aurora/gva-plugins">https://github.com/flipped-aurora/gva-plugins</a>
|
|
|
- </h2>
|
|
|
- <div />
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <div class="shadow">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col
|
|
|
- v-for="(card, key) in toolCards"
|
|
|
- :key="key"
|
|
|
- :span="4"
|
|
|
- :xs="8"
|
|
|
- @click="toTarget(card.name)"
|
|
|
- >
|
|
|
- <el-card shadow="hover" class="grid-content">
|
|
|
- <i :class="card.icon" :style="{ color: card.color }" />
|
|
|
- <p>{{ card.label }}</p>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-export default {
|
|
|
- name: 'Dashboard',
|
|
|
- components: {
|
|
|
-
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- toolCards: [
|
|
|
- {
|
|
|
- label: '用户管理',
|
|
|
- icon: 'el-icon el-icon-monitor',
|
|
|
- name: 'user',
|
|
|
- color: '#ff9c6e'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '角色管理',
|
|
|
- icon: 'el-icon el-icon-setting',
|
|
|
- name: 'authority',
|
|
|
- color: '#69c0ff'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '菜单管理',
|
|
|
- icon: 'el-icon el-icon-menu',
|
|
|
- name: 'menu',
|
|
|
- color: '#b37feb'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '代码生成器',
|
|
|
- icon: 'el-icon el-icon-cpu',
|
|
|
- name: 'autoCode',
|
|
|
- color: '#ffd666'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '表单生成器',
|
|
|
- icon: 'el-icon el-icon-document-checked',
|
|
|
- name: 'formCreate',
|
|
|
- color: '#ff85c0'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '关于我们',
|
|
|
- icon: 'el-icon el-icon-user',
|
|
|
- name: 'about',
|
|
|
- color: '#5cdbd3'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters('user', ['userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- toTarget(name) {
|
|
|
- this.$router.push({ name })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.big {
|
|
|
- margin: 100px 0 0 0;
|
|
|
- padding-top: 10px;
|
|
|
- background-color: rgb(243, 243, 243);
|
|
|
- .top {
|
|
|
- width: 100%;
|
|
|
- height: 360px;
|
|
|
- margin-top: 20px;
|
|
|
- overflow: hidden;
|
|
|
- .chart-container {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .mid {
|
|
|
- width: 100%;
|
|
|
- height: 380px;
|
|
|
- .chart-wrapper {
|
|
|
- height: 340px;
|
|
|
- background: #fff;
|
|
|
- padding: 16px 16px 0;
|
|
|
- margin-bottom: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- width: 100%;
|
|
|
- height: 420px;
|
|
|
- // margin: 20px 0;
|
|
|
- .el-row {
|
|
|
- margin-right: 4px !important;
|
|
|
- }
|
|
|
- .chart-player {
|
|
|
- width: 100%;
|
|
|
- height: 270px;
|
|
|
- padding: 10px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .iPlayer{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|