查询类*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 (
    

      

        

          策略ID: 
          

            
          

          策略名称: 
          

            
          

          事件ID: 
          

            
          

          是否命中
          

            
          
        
        

          
            查询
          
          重置
        
      
    
  );
};

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;
  }
}