salary-management-oneself/src/pages/calcTable/calcExplainFooter.tsx

import React, { FunctionComponent } from "react";
import Icon from "@/lib/CustomIcon";
import { LockOutlined, UnlockOutlined } from "@ant-design/icons";
import styles from "@/pages/atdTable/components/index.less";

interface OwnProps {
  i18n: any;
}

type Props = OwnProps;

const CalcExplainFooter: FunctionComponent<Props> = (props) => {
  const { i18n } = props;
  return (
    <div className={styles["explain-icon-area"]}>
      <div className={styles["icon-item"]}>
        <Icon type="icon-piliangsuoding"/>
        <span>{i18n["批量锁定"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <Icon type="icon-piliangjiesuo"/>
        <span>{i18n["批量解锁"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <LockOutlined/>
        <span>{i18n["当前状态锁定，点击解锁"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <UnlockOutlined/>
        <span>{i18n["当前状态未锁定，点击锁定"]}</span>
      </div>
    </div>
  );
};

export default CalcExplainFooter;