add recharts

src/components/Layout/Layout.less

@@ -223,20 +223,22 @@
     height: 100vh;
     transition: @transition-ease-out;
 
+    :global {
+      .content-inner {
+        background: #fff;
+        padding: 24px;
+        box-shadow: @shadow-1;
+        min-height: e("calc(100vh - 184px)");
+      }
+    }
+
     .container {
       margin: 24px;
+    }
 
-      .content {
-        min-height: e("calc(100vh - 184px)");
-        position: relative;
-
-        :global .content-inner {
-          background: #fff;
-          padding: 24px;
-          box-shadow: @shadow-1;
-          min-height: e("calc(100vh - 184px)");
-        }
-      }
+    .content {
+      min-height: e("calc(100vh - 184px)");
+      position: relative;
     }
   }
 
@@ -330,3 +332,27 @@
     height: 100vh;
   }
 }
+@media (max-width: 767px) {
+  .layout {
+    .main {
+      .container {
+        margin: 12px;
+      }
+
+      .bread {
+        padding: 0 12px;
+      }
+
+      .content {
+        min-height: e("calc(100vh - 160px)");
+      }
+
+      :global {
+        .content-inner {
+          padding: 12px;
+          min-height: e("calc(100vh - 160px)");
+        }
+      }
+    }
+  }
+}

src/components/skin.less

@@ -84,4 +84,39 @@ body {
   .ant-pagination-item {
     margin-bottom: 8px;
   }
+
+  .ant-select-dropdown-menu-item {
+    padding: 12px 16px !important;
+  }
+}
+@media (min-width: 1600px) {
+  .ant-col-xl-48 {
+    width: 20%;
+  }
+
+  .ant-col-xl-96 {
+    width: 40%;
+  }
+}
+@media (min-width: 1600px) {
+  .ant-col-xl-48 {
+    width: 20%;
+  }
+
+  .ant-col-xl-96 {
+    width: 40%;
+  }
+}
+@media (max-width: 767px) {
+  :global {
+    .ant-card {
+      .ant-card-head {
+        padding: 0 12px;
+      }
+
+      .ant-card-body {
+        padding: 12px;
+      }
+    }
+  }
 }