style: page styles

src/components/card-wrapper/index.less

@@ -0,0 +1,5 @@
+.cardWrapper {
+  border-radius: 20px;
+  background-color: var(--color-white-1);
+  box-shadow: var(--box-shadow-base);
+}

src/components/card-wrapper/index.tsx

@@ -0,0 +1,8 @@
+import styles from './index.less';
+
+const CardWrapper = (props: any) => {
+  const { children } = props;
+  return <div className={styles.cardWrapper}>{children}</div>;
+};
+
+export default CardWrapper;

src/components/charts/column-bar.tsx

@@ -17,6 +17,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     direction: 'vertical',
     height,
     group: true,
+    scale: {
+      x: {
+        type: 'band',
+        padding: 0.5
+      }
+    },
     legend: {
       color: {
         position: 'top',
@@ -27,7 +33,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
     axis: {
       x: {
-        xAxis: true
+        xAxis: true,
+        tick: false
+      },
+      y: {
+        tick: false
       }
     },
     title: {
@@ -48,9 +58,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: '#54cc98',
-      radiusTopLeft: 8,
-      radiusTopRight: 8,
+      fill: 'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+      radiusTopLeft: 12,
+      radiusTopRight: 12,
+      align: 'center',
       width: 30
     }
   };

src/components/charts/gauge.tsx

@@ -16,6 +16,19 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
   const config = {
     width,
     height,
+    box: {
+      padding: [0, 0, 0, 0],
+      style: {
+        padding: [0, 0, 0, 0]
+      }
+    },
+    guide: {
+      arc: {
+        style: {
+          lineWidth: 30
+        }
+      }
+    },
     autoFit: true,
     data: {
       target,

src/components/charts/h-bar.tsx

@@ -8,7 +8,7 @@ interface BarChartProps {
   height?: number;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
-  const { data, xField, yField, title, height = 300 } = props;
+  const { data, xField, yField, title, height } = props;
   const config = {
     data,
     xField,
@@ -25,9 +25,19 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         }
       }
     },
+    scale: {
+      x: {
+        type: 'band',
+        padding: 0.5
+      }
+    },
     axis: {
       x: {
-        xAxis: true
+        xAxis: true,
+        tick: false
+      },
+      y: {
+        tick: false
       }
     },
     title: {
@@ -39,18 +49,16 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     split: {
       type: 'line',
       line: {
-        color: 'red',
         style: {
-          color: 'red',
           lineDash: [4, 5]
         }
       }
     },
-
+    markBackground: {},
     style: {
-      fill: '#54cc98',
-      radiusTopLeft: 8,
-      radiusTopRight: 8,
+      fill: 'linear-gradient(180deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+      radiusTopLeft: 12,
+      radiusTopRight: 12,
       height: 30
     }
   };

src/components/charts/line-chart.tsx

@@ -16,7 +16,7 @@ const LineChart: React.FC<LineChartProps> = (props) => {
     height,
     xField: xField || 'time',
     yField: yField || 'value',
-    color: color || ['red', 'blue', 'green'],
+    color: color || ['red', 'blue', 'green', 'yellow'],
     colorField: 'type',
     autoFit: true,
     slider,
@@ -26,12 +26,15 @@ const LineChart: React.FC<LineChartProps> = (props) => {
         textStyle: {
           autoRoate: true
         }
+      },
+      y: {
+        tick: false
       }
     },
-    point: {
-      shapeField: 'circle',
-      sizeField: 2
-    },
+    // point: {
+    //   shapeField: 'circle',
+    //   sizeField: 2
+    // },
     style: {
       lineWidth: 1.5
     },

src/components/glass-bg/index.less

@@ -0,0 +1,39 @@
+.g-polygon {
+  position: absolute;
+  opacity: 0.5;
+}
+
+.g-polygon-1 {
+  // 定位代码，容器高宽随意
+  background: #fe5;
+  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
+  width: 50%;
+  height: 50%;
+}
+
+.g-polygon-2 {
+  // 定位代码，容器高宽随意
+  background: #e950d1;
+  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
+  width: 50%;
+  height: 50%;
+}
+
+.g-polygon-3 {
+  // 定位代码，容器高宽随意
+  background: rgba(87, 80, 233);
+  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
+  width: 50%;
+  height: 50%;
+}
+
+.g-bg::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  backdrop-filter: blur(150px);
+  z-index: 1;
+}

src/components/glass-bg/index.tsx

@@ -0,0 +1,13 @@
+import './index.less';
+
+const GlassBg = () => {
+  return (
+    <div className="g-bg">
+      <div className="g-polygon g-polygon-1"></div>
+      <div className="g-polygon g-polygon-2"></div>
+      <div className="g-polygon g-polygon-3"></div>
+    </div>
+  );
+};
+
+export default GlassBg;