统计

src/main/vue/src/widgets/DatasWidget.vue

@@ -0,0 +1,55 @@
+<template>
+    <widget-card>
+        <template slot="header">全部数据</template>
+
+        <el-row :gutter="20">
+            <el-col :span="6" :offset="0">
+                <UserWidget></UserWidget>
+            </el-col>
+            <el-col :span="6" :offset="0">
+                <UserWidget2></UserWidget2>
+            </el-col>
+            <el-col :span="6" :offset="0">
+                <UserWidget3></UserWidget3>
+            </el-col>
+            <el-col :span="6" :offset="0">
+                <UserWidget4></UserWidget4>
+            </el-col>
+        </el-row>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+import UserWidget from './UserWidget';
+import UserWidget2 from './UserWidget2';
+import UserWidget3 from './UserWidget3';
+import UserWidget4 from './UserWidget4';
+import { GridLayout, GridItem } from 'vue-grid-layout';
+export default {
+    data() {
+        return {};
+    },
+    components: {
+        WidgetCard,
+        UserWidget,
+        UserWidget2,
+        UserWidget3,
+        UserWidget4
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/widgets/UserWidget3.vue

@@ -0,0 +1,41 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <i class="fa-fw fas fa-child fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">报考人数</div>
+            <div class="num">500</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/widgets/UserWidget4.vue

@@ -0,0 +1,41 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <i class="fa-fw fas fa-database fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">考级数量</div>
+            <div class="num">500</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            }
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>