首页组件

src/views/home/components/performance.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-card >
+  <m-card shadow="never">
     <e-charts ref="eChart" class="box"></e-charts>
   </m-card>
 </template>

src/views/home/index.vue

@@ -1,7 +1,31 @@
 <template>
-  <div class="pa-3 white">
-    <PerformanceStatistics></PerformanceStatistics>
-  </div>
+  <m-card>
+    <template #header>
+      <div class="d-flex justify-between">
+        <div>
+        <span>总览</span>
+        </div>
+        <div>
+          <el-radio-group v-model="showModel" size="mini" @change="onChange" fill="#ff650e">
+            <el-radio-button :label="1">
+              <span class="mdi mdi-view-sequential font-16"></span>
+            </el-radio-button>
+            <el-radio-button :label="2">
+              <span class="mdi mdi-view-grid font-16"></span>
+            </el-radio-button>
+            <el-radio-button :label="3">
+              <span class="mdi mdi-view-module font-16"></span>
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+    </template>
+    <el-row :gutter="20">
+      <el-col :span="span" class="mb-5">
+        <PerformanceStatistics></PerformanceStatistics>
+      </el-col>
+    </el-row>
+  </m-card>
 </template>
 
 <script>
@@ -10,10 +34,23 @@ export default {
   name: 'home-index',
   components: {
     PerformanceStatistics
+  },
+  data () {
+    return {
+      span: 24,
+      showModel: 1
+    }
+  },
+  methods: {
+    onChange (val) {
+      this.span = 24 / val
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+// .mdi {
+//   font-size: 16px !important;
+// }
 </style>