查询类*4布局模板

1. html

import * as React from "react";
import cs from "classnames";
import { Button, Input, Switch } from "antd";
import * as styles from "./index.less";

export const StrategySnapShot: React.FC = (props) => {
  return (
    <div className={styles.container}>
      <div className={styles.card}>
        <div className={styles.line}>
          <span>策略ID: </span>
          <div className={cs(styles.input, styles.gap)}>
            <Input placeholder="请输入" />
          </div>

          <span>策略名称: </span>
          <div className={cs(styles.input, styles.gap)}>
            <Input placeholder="请输入" />
          </div>

          <span>事件ID: </span>
          <div className={cs(styles.input, styles.gap)}>
            <Input placeholder="请输入" />
          </div>

          <span>是否命中</span>
          <div className={styles.gap}>
            <Switch />
          </div>
        </div>
        <div className={styles.btnGroup}>
          <Button type="primary" className={styles.btnGap}>
            查询
          </Button>
          <Button>重置</Button>
        </div>
      </div>
    </div>
  );
};

2. css

@import "../../../../style/mixin.less";

.container {
  .card {
    .card();
    .line {
      .line();
      .gap {
        .gap();
      }
      .input {
        width: 200px;
      }
    }
    .btn-group {
      .btn-group();
    }
  }
}

3. mixin

@space: 8px;

.container() {
  padding: @space * 2;
}

.card() {
  padding: @space * 3;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.line {
  display: flex;
}

.gap {
  margin-left: @space;
  margin-right: @space * 4;
}

.btn-group {
  display: flex;
  justify-content: flex-end;

  .btn-gap {
    margin-right: @space;
  }
}