查询类布局模板

1. html

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

          <span>方案目标: </span>
          <div className={cs(styles.input, styles.gap)}>
            <Select className={styles.input} placeholder="请选择" />
          </div>

          <span>场景类型: </span>
          <div className={cs(styles.input, styles.gap)}>
            <Select className={styles.input} placeholder="请选择" />
          </div>
        </div>
        <div className={styles.line}>
          <span>业务场景: </span>
          <div className={cs(styles.input, styles.gap)}>
            <Select className={styles.input} placeholder="请选择" />{" "}
          </div>
          <div>业务BU：</div>
          <div className={cs(styles.input, styles.gap)}>
            <Input placeholder="请输入" />
          </div>
          <div>创建人：</div>
          <div className={cs(styles.input, styles.gap)}>
            <Input placeholder="请输入" />
          </div>
        </div>
        <div className={styles.btnGroup}>
          <Button type="primary" className={styles.btnGap}>
            查询
          </Button>
          <Button>重置</Button>
        </div>
      </div>

2. mixin

@space: 8px;

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

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

3. css

.container {
  .container();
  .card {
    .card();
    .line {
      display: flex;
      margin-bottom: @space * 2;
  
      .input {
        width: 264px;
      }
  
      .gap {
        margin-left: @space;
        margin-right: @space * 4;
      }
    }
  
    .btn-group {
      display: flex;
      justify-content: flex-end;
  
      .btn-gap {
        margin-right: @space;
      }
    }
  }
}

4. 查询和重置

<div className={styles.btnGroup}>
          <Button type="primary" className={styles.btnGap} onClick={search}>
            查询
          </Button>
          <Button onClick={reset}>重置</Button>
        </div>

 .btn-group {
      display: flex;
      justify-content: flex-end;
  
      .btn-gap {
        margin-right: @space;
      }
    }