react+ant.design 登陆模版左右响应式布局 示例

好的，我可以为您提供一个左右响应式布局的示例代码。

首先，我们需要安装 `antd` 和 `react-router-dom` 依赖。

npm install antd react-router-dom

然后，我们可以创建一个 `Login` 组件，作为登录界面。在这个组件中，我们可以使用 `antd` 的 `Layout` ， `Row` 和 `Col` 组件来创建一个响应式布局。

import React from 'react';
import { Layout, Row, Col, Form, Input, Button } from 'antd';

const { Header, Content } = Layout;

const Login = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Layout>
      <Header>
        <h1 style={{ color: '#fff' }}>Logo</h1>
      </Header>
      <Content>
        <Row justify="center">
          <Col xs={24} sm={16} md={12} lg={8} xl={6}>
            <Form
              name="basic"
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
            >
              <Form.Item
                label="Username"
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </Content>
    </Layout>
  );
};

export default Login;

在这个示例中，`Header` 组件用于放置 Logo ， `Content` 组件用于放置登录表单。使用 `Row` 和 `Col` 组件来实现响应式布局。

最后，我们可以将应用程序渲染到页面上。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这是一个简单的 React + Ant Design 登录界面的左右响应式布局示例代码。希望能对您有所帮助！