大数据看板布局

package-lock.json

@@ -2323,10 +2323,9 @@
       }
     },
     "caniuse-db": {
-      "version": "1.0.30001283",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001283.tgz",
-      "integrity": "sha512-xEAlBjCxAdtEc05VVrNJQdDvY7jfOx1QiVbmEavio5DSM/hAypRz7pqKyVF0o9uaDX4j8bAjKieLIfTHRfANgA==",
-      "dev": true
+      "version": "1.0.30001346",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001346.tgz",
+      "integrity": "sha512-wjiJfGfu6X7uq3e76EQ3avB65MIiiwCf7HHeC7E5glKaw0xUxdxzUSd8Lw0RUSMKBkLcqOQhMK1ULwGOhs7sfA=="
     },
     "caniuse-lite": {
       "version": "1.0.30001283",
@@ -4014,6 +4013,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -14149,8 +14164,7 @@
     "object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-      "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
-      "dev": true
+      "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
     },
     "object-is": {
       "version": "1.1.5",
@@ -15765,10 +15779,9 @@
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
     "prettier": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
-      "dev": true
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g=="
     },
     "pretty": {
       "version": "2.0.0",
@@ -16026,9 +16039,12 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "query-string": {
       "version": "4.3.4",
@@ -16496,6 +16512,13 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.3",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+          "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
+        }
       }
     },
     "require-directory": {
@@ -17084,7 +17107,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -19162,6 +19184,12 @@
             "supports-color": "^5.4.0"
           }
         },
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+          "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -20623,6 +20651,21 @@
           "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
         }
       }
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

src/views/common/home.vue

@@ -1,17 +1,71 @@
 <template>
   <div class="mod-home">
-    <h3>MZ 云平台，欢迎您！</h3>
+    <el-row :span="24" class="sample-bg">
+      <el-col :span="6" class="bg1-1"></el-col>
+      <el-col :span="12" class="bg1-2"></el-col>
+      <el-col :span="6" class="bg1-3"></el-col>
+    </el-row>
+    <el-row :span="24" class="sample-bg1">
+      <el-col :span="6" class="bg2-1"></el-col>
+      <el-col :span="6" class="bg2-2"></el-col>
+      <el-col :span="6" class="bg2-1"></el-col>
+      <el-col :span="6" class="bg2-2"></el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-  export default {
-  }
+ export default { }
 </script>
 
 <style>
-  .mod-home {
-    line-height: 1.5;
-  }
+html,
+body,
+.site-wrapper,
+.site-content__wrapper,
+.site-content,
+.el-card,
+.el-card__body {
+  height: 100%;
+}
+.mod-home {
+  /* line-height: 1.5; */
+  height: 100%;
+}
+
+.sample-bg {
+  background-color: green;
+  height: 50%;
+}
+
+.sample-bg1 {
+  background-color: blueviolet;
+  height: 50%;
+}
+
+.bg1-1 {
+  background-color: yellow;
+  height: 100%;
+}
+
+.bg1-2 {
+  background-color: orange;
+  height: 100%;
+}
+
+.bg1-3 {
+  background-color: orchid;
+  height: 100%;
+}
+
+.bg2-1 {
+  background-color: red;
+  height: 100%;
+}
+
+.bg2-2 {
+  background-color: aqua;
+  height: 100%;
+}
 </style>