diff --git a/src/components/commonCa/index.less b/src/components/commonCa/index.less
deleted file mode 100644
index 6b8dc61..0000000
--- a/src/components/commonCa/index.less
+++ /dev/null
@@ -1,12 +0,0 @@
-.calibration {
-  width: calc(200% - 50px);
-  height: 200%;
-  position: relative;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-  :global(.calibrationNumber) {
-    font-size: 12px;
-    color: #888;
-  }
-}
diff --git a/src/components/commonCa/index.tsx b/src/components/commonCa/index.tsx
deleted file mode 100644
index dfa4f0b..0000000
--- a/src/components/commonCa/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-
-import styles from "./index.less";
-
-export interface calibrationTypes {
-  width: number;
-  height: number;
-}
-export type CalibrationTypes = {
-  direction: "up" | "left" | "right";
-  multiple: number;
-  id: string;
-};
-
-export default function Calibration(props: CalibrationTypes) {
-  const { direction, multiple } = props;
-  const [calibrationLength, setCalibration] = useState<calibrationTypes>({
-    width: 0,
-    height: 0
-  });
-  const calibrationRef = useRef<HTMLDivElement>(null);
-
-  const generateElement = useCallback(
-    (item?: boolean, num?: number) => {
-      if (calibrationRef.current) {
-        let createSpan = document.createElement("div");
-        createSpan.className = "calibrationLine";
-        createSpan.style.backgroundColor = "#ccc";
-        calibrationRef.current.style.display = "flex";
-        calibrationRef.current.style.justifyContent = "space-between";
-        if (direction === "up") {
-          calibrationRef.current.style.marginLeft = "50px";
-          createSpan.style.width = "1px";
-          createSpan.style.height = "6px";
-          createSpan.style.display = "inline-block";
-        } else {
-          calibrationRef.current.style.flexDirection = "column";
-          createSpan.style.height = "1px";
-          createSpan.style.width = "6px";
-        }
-        if (item) {
-          let createSpanContent = document.createElement("span");
-          if (direction === "up") {
-            createSpan.style.height = "12px";
-            createSpanContent.style.transform = "translate3d(-4px, 20px, 0px)";
-            createSpan.style.transform = "translateY(0px)";
-          } else {
-            createSpan.style.width = "12px";
-            createSpanContent.style.paddingLeft = "20px";
-          }
-          createSpanContent.style.display = "block";
-          createSpanContent.className = "calibrationNumber";
-          createSpanContent.innerHTML = num! * 5 + "";
-          createSpan.appendChild(createSpanContent);
-        }
-        calibrationRef.current.appendChild(createSpan);
-      }
-    },
-    [direction]
-  );
-
-  useEffect(() => {
-    if (calibrationRef.current) {
-      let calibration = calibrationRef.current.getBoundingClientRect();
-      setCalibration({ width: calibration.width, height: calibration.height });
-      let length = direction === "up" ? calibration.width : calibration.height;
-      for (let i = 0; i < length / 5; i++) {
-        if (i % 10 === 0) {
-          generateElement(true, i);
-        } else {
-          generateElement();
-        }
-      }
-    }
-  }, [direction, generateElement]);
-
-  useEffect(() => {
-    if (calibrationRef.current) {
-      let width = calibrationLength.width
-        ? calibrationLength.width
-        : calibrationRef.current.getBoundingClientRect().width;
-      let height = calibrationLength.height
-        ? calibrationLength.height
-        : calibrationRef.current.getBoundingClientRect().height;
-      let arr = [
-        ...Array.from(
-          calibrationRef.current.querySelectorAll(".calibrationLine")
-        )
-      ];
-      if (arr.length) {
-        if (direction === "up") {
-          calibrationRef.current.style.width =
-            parseFloat(multiple.toFixed(1)) * width + "px";
-          arr.forEach(el => {
-            let dom = [
-              ...Array.from(el.querySelectorAll(".calibrationNumber"))
-            ][0] as HTMLElement;
-            if (dom) {
-              dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${(
-                multiple + 0.1
-              ).toFixed(1)})`;
-            }
-          });
-        } else {
-          calibrationRef.current.style.height =
-            parseFloat(multiple.toFixed(1)) * height + "px";
-          arr.forEach(el => {
-            let dom = [
-              ...Array.from(el.querySelectorAll(".calibrationNumber"))
-            ][0] as HTMLElement;
-            if (dom) {
-              dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(
-                multiple + 0.1
-              ).toFixed(1)})`;
-            }
-          });
-        }
-      }
-    }
-  }, [calibrationLength.height, calibrationLength.width, direction, multiple]);
-
-  return <div className={styles.calibration} ref={calibrationRef}></div>;
-}