表单类布局模板

1. html

<Card title="基础信息">
          <Row style={rowStyle}>
            <Col span={2}>策略名称:</Col>
            <Col span={10}>
              <Input placeholder="请输入策略名称" />
            </Col>
          </Row>

          <Row style={rowStyle}>
            <Col span={2}>
              <span>触发规则:</span>
            </Col>
            <Col span={5}>
              <Select style={selectStyle} />
            </Col>
            <Col span={5}>
              <Select mode="multiple" style={{ width: "100%" }} />
            </Col>
          </Row>

          <Row style={rowStyle}>
            <Col span={2}>
              {" "}
              <span>推送类型:</span>
            </Col>
            <Col span={10}>
              <Select style={selectStyle} defaultValue={PushType.once}>
                <Option value={PushType.once}>单次推送</Option>
                <Option value={PushType.cycle}>循环推送</Option>
              </Select>
            </Col>
          </Row>

          <Row style={rowStyle}>
            <Col span={2}>
              <span>排期日期:</span>
            </Col>
            <Col span={5}>
              <Radio.Group>
                <Radio value={ScheduleType.long}>长期</Radio>
                <Radio value={ScheduleType.special}>特定日期</Radio>
              </Radio.Group>
            </Col>
            <Col span={5}>
              <span>节假日不推送</span>
              <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
            </Col>
          </Row>

          <Row style={rowStyle}>
            <Col span={2}>
              <span>排期时段:</span>
            </Col>
            <Col>
              <Radio.Group>
                <Radio value={TimeType.allDay}>全天</Radio>
                <Radio value={TimeType.special}>特定时段</Radio>
              </Radio.Group>
            </Col>
          </Row>

          <Row style={rowStyle}>
            <Col span={2}>
              <span>策略频控</span>
            </Col>
            <Col span={10}>
              <span>开启疲劳控制</span>
              <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
            </Col>
          </Row>
          <Row style={rowStyle}>
            <Col offset={2}>
              <span>单用户每</span>
              <InputNumber min={1} max={100} defaultValue={1} />
              <Select style={frequencySelectStyle}>
                <Option value={FrequencyType.day}>自然天</Option>
                <Option value={FrequencyType.hour}>自然小时</Option>
                <Option value={FrequencyType.minute}>自然分钟</Option>
              </Select>
              <span>触发一次</span>
            </Col>
          </Row>
          <Row style={rowStyle}>
            <Col offset={2}>
              <span>单用户每</span>
              <InputNumber min={1} max={100} defaultValue={1} />
              <Select style={frequencySelectStyle}>
                <Option value={FrequencyType.day}>自然天</Option>
                <Option value={FrequencyType.hour}>自然小时</Option>
                <Option value={FrequencyType.minute}>自然分钟</Option>
              </Select>
              <span>触发不超过</span>
              <InputNumber min={1} max={100} defaultValue={1} />
              <span>次</span>
            </Col>
          </Row>

          <Row style={rowStyle}>
            <Col span={2}>
              <span>负责人:</span>
            </Col>
            <Col span={10}>
              <Select mode="multiple" style={selectStyle} />
            </Col>
          </Row>
        </Card>

const selectStyle = {
    width: "100%"
  };
  const frequencySelectStyle = { width: 100, margin: "0 8px" };
  const rowStyle = {
    marginBottom: 16
  };