feat: init

src/assets/style/breakpoint.less

@@ -0,0 +1,19 @@
+// ==============breakpoint============
+
+// Extra small screen / phone
+@screen-xs: 480px;
+
+// Small screen / tablet
+@screen-sm: 576px;
+
+// Medium screen / desktop
+@screen-md: 768px;
+
+// Large screen / wide desktop
+@screen-lg: 992px;
+
+// Extra large screen / full hd
+@screen-xl: 1200px;
+
+// Extra extra large screen / large desktop
+@screen-xxl: 1600px;

src/assets/style/custom.less

@@ -0,0 +1,43 @@
+body {
+  --color-menu-dark-bg: #000c17;
+  --color-menu-dark-hover: #165dff;
+
+  .arco-menu-dark {
+    .arco-menu-item,
+    .arco-menu-group-title,
+    .arco-menu-pop-header,
+    .arco-menu-inline-header {
+      color: #fff;
+
+      * {
+        color: #fff;
+      }
+    }
+
+    .arco-menu-inline-header.arco-menu-selected {
+      color: #fff;
+
+      * {
+        color: #fff;
+      }
+    }
+
+    .arco-menu-inline-header:hover {
+      color: #fff;
+
+      * {
+        color: #fff;
+      }
+    }
+
+    .arco-menu-item:hover {
+      color: #fff;
+    }
+
+    .arco-menu-vertical {
+      .arco-menu-inline-header {
+        line-height: 46px;
+      }
+    }
+  }
+}

src/assets/style/global.less

@@ -0,0 +1,91 @@
+@import './custom.less';
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  background-color: var(--color-bg-1);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.echarts-tooltip-diy {
+  background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%) !important;
+  border: none !important;
+  backdrop-filter: blur(10px) !important;
+  /* Note: backdrop-filter has minimal browser support */
+
+  border-radius: 6px !important;
+  .content-panel {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 9px;
+    background: rgba(255, 255, 255, 0.8);
+    width: 164px;
+    height: 32px;
+    line-height: 32px;
+    box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
+    border-radius: 4px;
+    margin-bottom: 4px;
+  }
+  .tooltip-title {
+    margin: 0 0 10px 0;
+  }
+  p {
+    margin: 0;
+  }
+  .tooltip-title,
+  .tooltip-value {
+    font-size: 13px;
+    line-height: 15px;
+    display: flex;
+    align-items: center;
+    text-align: right;
+    color: #1d2129;
+    font-weight: bold;
+  }
+  .tooltip-item-icon {
+    display: inline-block;
+    margin-right: 8px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+}
+
+.general-card {
+  border-radius: 4px;
+  border: none;
+  & > .arco-card-header {
+    height: auto;
+    padding: 20px;
+    border: none;
+  }
+  & > .arco-card-body {
+    padding: 0 20px 20px 20px;
+  }
+}
+
+.split-line {
+  border-color: rgb(var(--gray-2));
+}
+
+.arco-table-cell {
+  .circle {
+    display: inline-block;
+    margin-right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgb(var(--blue-6));
+    &.pass {
+      background-color: rgb(var(--green-6));
+    }
+  }
+}