且或逻辑表单

import React from 'react';
// import PropTypes from 'prop-types';
import classnames from 'classnames';
import styles from './style.module.less';
AndOr.propTypes = {
};
function AndOr() {
  function onAddQie() {
    console.log('qie')
  }
  function onAddHuo() {
    console.log('或')
  }
  return (
    <div className={styles.container}>
      <div
        onClick={onAddQie}
        className={styles.circle}
      >
        且
      </div>
      <div
        onClick={onAddHuo}
        className={classnames(styles.circle, styles.or)}
      >
        或
      </div>
    </div>
  );
}
export default AndOr;

less

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  .circle {
    .flex-center();
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    margin-left: 8px;
    background-color: #0091fd;
    cursor: pointer;
  }
  .and {
  }
  .or {
    background-color: #87d067;
  }
}